国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<option id="l7ixa"><pre id="l7ixa"></pre></option>

Ajax，前后端分離開發(fā)，前端工程化，Element，Vue路由，打包部署

2年前作者：枯寂麻辣分類：Toy博客閱讀(103)違法舉報

這篇具有很好參考價值的文章主要介紹了Ajax，前后端分離開發(fā)，前端工程化，Element，Vue路由，打包部署。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

Ajax介紹

Axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="獲取數(shù)據(jù)GET" onclick="get()">

    <input type="button" value="刪除數(shù)據(jù)POST" onclick="post()">

</body>
<script>
    function get(){
        //通過axios發(fā)送異步請求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })


        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
    }

    function post(){
        //通過axios發(fā)送異步請求-post
        // axios({
        //     method: "post",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })
        // 這段代碼使用了axios庫向指定的URL發(fā)送POST請求，
        //并且?guī)в袇?shù)"id=1"。當(dāng)請求成功后，會打印出返回的數(shù)據(jù)。
        //具體來說，代碼中的method表示請求的方法，url表示請求的地址，
        //data表示請求的參數(shù)。
        //而then方法則是用來處理請求成功后的回調(diào)函數(shù)，result就是請求成功返回的數(shù)據(jù)。
        //需要注意的是，這段代碼中的URL是一個mock地址，實際開發(fā)中需要使用真實的API地址。
        //result 是一個對象，其中 data 是異步請求返回的數(shù)據(jù)

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
    }
</script>
</html>

案例 Ajax，前后端分離開發(fā)，前端工程化，Element，Vue路由，打包部署

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>圖像</th>
                <th>性別</th>
                <th>職位</th>
                <th>入職日期</th>
                <th>最后操作時間</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //發(fā)送異步請求,加載數(shù)據(jù)
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
            console.log(result.data);//在控制臺輸出result的全部數(shù)據(jù)
          })
       }
    });
</script>
</html>

前后端分離
前端工程化
1. 環(huán)境準備，nodejs安裝，D:\javaproject\javaweb\day03-Vue-Element\day03-Vue-Element\資料\NodeJS安裝文檔
2. Vue項目簡介
  4. 它本來默認端口號是8080 ，但這就和tomcat沖突了所以修改為7000
3. Vue項目開發(fā)流程

Vue組件庫Element

pagination分頁組件，table表格組件，Dialog對話框組件，F(xiàn)orm表單組件等。查看官網(wǎng)
vue頁面生成步驟，
1. 因為在main.js這個入口文件中引用的是APP.vue這個根組件
2. App.vue這個根組件引用的是<element-view>?</element-view>這個組件。
3. 下面就是element

<template>
  <div>
    <!-- button按鈕 -->
    <el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>

    <br />

    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

    <!-- Pagination 分頁 -->
    <el-pagination background layout="total,sizes, prev, pager, next, jumper" 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
     :total="1000"></el-pagination>

     <br><br>

     <!-- Dialog對話框 -->
     <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true">打開嵌套表格的 Dialog</el-button>

    <el-dialog title="收貨地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>


    <!-- Dialog對話框-Form表單 -->
    <el-button type="text" @click="dialogFormVisible = true">打開嵌套Form的 Dialog</el-button>

    <el-dialog title="Form表單" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活動名稱">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="活動區(qū)域">
          <el-select v-model="form.region" placeholder="請選擇活動區(qū)域">
            <el-option label="區(qū)域一" value="shanghai"></el-option>
            <el-option label="區(qū)域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="活動時間">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: ''
      },
      gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange:function(val){
        alert("每頁記錄數(shù)變化" + val)
    },
    handleCurrentChange:function(val){
        alert("頁碼發(fā)生變化" + val)
    },
    onSubmit:function(){
        alert(JSON.stringify(this.form));
    }
  }
};
</script>

<style>
</style>

一些重要組件的使用 Ajax，前后端分離開發(fā)，前端工程化，Element，Vue路由，打包部署

Vue路由
1. router，配置路由
2. 什么位置點擊跳轉(zhuǎn)
3. App.vue配置
打包部署
1. 打包，npm run build后會出現(xiàn)一個dist目錄
2. netstat -ano | findStr 80(尋找那個進程占用了80端口pid)，如果發(fā)現(xiàn)那個進程是系統(tǒng)進程，那我們就把Nginx端口號改了，在conf配置文件中的nginx.conf文件中將listen 改成90。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-450048.html

?

?

到了這里，關(guān)于Ajax，前后端分離開發(fā)，前端工程化，Element，Vue路由，打包部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

探索現(xiàn)代前端工程化工具與流程：提升開發(fā)效率和項目質(zhì)量
前端工程化是指利用各種工具和技術(shù)來提高前端開發(fā)效率、代碼質(zhì)量和團隊協(xié)作的一種開發(fā)模式。它的背景和發(fā)展與前端技術(shù)的演進密切相關(guān)。在過去，前端開發(fā)主要依靠手工編寫 HTML、CSS和JavaScript 來構(gòu)建網(wǎng)頁。隨著互聯(lián)網(wǎng)的發(fā)展和前端技術(shù)的不斷演進，前端的工作變得更
2024年02月14日
瀏覽(92)
前端Vue入門-day03-用Vue實現(xiàn)工程化、組件化開發(fā)
(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）目錄生命周期 Vue 生命周期和生命周期的四個階段? Vue 生命周期函數(shù)（鉤子函數(shù)）案例-create的應(yīng)用案例-mounted的應(yīng)用工程化開發(fā) 腳手架 Vue CLI 開發(fā) Vue 的兩種方式基本介
2024年02月15日
瀏覽(119)
前端工程化實戰(zhàn)：React 模塊化開發(fā)、性能優(yōu)化和組件化實踐
前端工程化實戰(zhàn)是指通過組織工作流程、使用工具和技術(shù)來提高前端開發(fā)效率和質(zhì)量的一種方法。常見的前端工程化實踐包括模塊化開發(fā)、自動化構(gòu)建、代碼檢查和測試、性能優(yōu)化等。下面將簡要介紹模塊化開發(fā)、性能優(yōu)化和組件化實踐。模塊化開發(fā) 在 React 中實現(xiàn)模塊化開
2023年04月10日
瀏覽(100)
前端工程化搭建私有組件庫組件從開發(fā)到發(fā)布私有npm倉庫的全過程
前言基于Vue3.0 + TS的組件從開發(fā)組件庫到發(fā)布私有npm倉庫的全過程環(huán)境這里列出本文所使用的環(huán)境版本 vue 3.0 vue/cli 4.5.9 nodeJs 14.15.1 npm 6.14.8 vue --version @vue/cli 4.5.9 npm -v 6.14.8 node -v v14.15.1 步驟創(chuàng)建項目使用 vue-cli 創(chuàng)建一個 vue3 項目，假設(shè)項目名為 avatar-ui-vue vue create avatar-u
2024年02月02日
瀏覽(979)
前端工程化詳解——理解與實踐前端工程化
前言：前端工程化一直是一個老生常談的問題，不管是面試還是我們在公司做基建都會經(jīng)常提到前端工程化，那么為什么經(jīng)常會說到前端工程化，并沒有聽過后端工程化、Java工程化或者Python工程化呢？我們理解的前端工程化是不是一直都是Webpack的性能調(diào)優(yōu)，或者是一個cli工
2024年02月02日
瀏覽(102)
為react項目添加開發(fā)/提交規(guī)范（前端工程化、eslint、prettier、husky、commitlint、stylelint）
因歷史遺留原因，接手的項目沒有代碼提醒/格式化，包括 eslint、pretttier，也沒有 commit 提交校驗，如 husky、commitlint、stylelint，與其期待自己或者同事的代碼寫得完美無缺，不如通過一些工具來進行規(guī)范和約束。 eslint 是一個代碼校驗工具，用來規(guī)范項目代碼風(fēng)格。初始化通
2024年02月14日
瀏覽(93)
前端工程化
手把手帶你走進Babel的編譯世界 - 掘金 (juejin.cn) 我們所寫的代碼轉(zhuǎn)換為機器能識別的一種樹形結(jié)構(gòu)，本身是由一堆節(jié)點（Node）組成，每個節(jié)點都表示源代碼中的一種結(jié)構(gòu)。不同結(jié)構(gòu)用類型（Type）來區(qū)分，常見的節(jié)點類型有Identifier(標識符)，Expression(表達式)，VariableDeclarat
2023年04月11日
瀏覽(100)
前端工程化-VUE
高效的開發(fā)離不開基礎(chǔ)工程的搭建。本章主要介紹如何使用Vue進行實際SPA項目的開發(fā)，這里使用的是目前熱門的JavaScript應(yīng)用程序模塊打包工具Webpack，進行模塊化開發(fā)、代碼編譯和打包。 Vue腳手架指的是Vue-cli，它是一個專門為單頁面應(yīng)用快速搭建繁雜程序的腳手架，它可以輕
2024年02月08日
瀏覽(98)
什么是前端工程化？
前端工程化是一種思想，而不是某種技術(shù)。主要目的是為了提高效率和降低成本，也就是說在開發(fā)的過程中可以提高開發(fā)效率，減少不必要的重復(fù)性工作等。 tip 現(xiàn)實生活舉例建房子誰不會呢？請幾個工人一上來就開始弄，在建筑的過程中缺了材料就叫個工人去買，發(fā)現(xiàn)工期
2024年02月15日
瀏覽(97)
前端工程化-NPM
NPM代表npmjs.org這個網(wǎng)站，這個站點存儲了很多Node.js的第三方功能包。 NPM的全稱是Node Package Manager，它是一個Node.js包管理和分發(fā)工具，已經(jīng)成為非官方的發(fā)布Node模塊（包）的標準。它可以讓JavaScript開發(fā)者能夠更加輕松地共享代碼和共用代碼片段，并且通過NPM管理需要分享的代
2024年02月09日
瀏覽(310)

<b id="u3vhp"></b>