通過上一節(jié)，我們學(xué)習(xí)了vue腳手架的相關(guān)概念以及構(gòu)建過程，那么開始我們的前后端項目吧

Vue-CLI構(gòu)建前后端分離項目

1.項目環(huán)境初始化

1.安裝 axios vue-axios（記得執(zhí)行命令要進(jìn)入項目里面執(zhí)行哦，否則就會報錯）

E:\ideaProject\vue-cli-test>npm install --save axios vue-axios?

2.main.js中引入相關(guān)庫 ?

import axios from 'axios' import VueAxios from 'vue-axios'//配置后端服務(wù)地址 axios.defaults.baseURL="http://localhost:8080" //在Vue中配置axios，在所有的Vue組件中就可以通過this.axios使用axios庫 Vue.use(VueAxios,axios)

2.分頁查詢和刪除

1.components下新建 BookTable.vue

注意：axios要通過this.axios的方式調(diào)用

<template><div class="book-table"><table><thead><tr><th>編號</th><th>圖書</th><th>作者</th><th>價格</th><th>庫存</th><th>操作</th></tr></thead><tbody><tr v-for="b in books" :key="b.bookId"><td>{{b.bookId}}</td><td>{{b.bookName}}</td><td>{{b.author}}</td><td>{{b.price}}</td><td>{{b.stock}}</td><td><button @click="removeBook(b.bookId)">刪除</button><router-link :to="{path:'/book/update',query:{bookId:b.bookId}}"><button>更新</button></router-link></td></tr></tbody></table><p><a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)"><button style="margin: 0 10px">{{page}}</button></a></p></div> </template><script>export default {name: "BookTable",data(){return {books:[],pages:[]}},created(){this.handleAClick(1);// alert('hhh');},methods:{handleAClick(i){this.axios.get("/day02/book/show",{params:{pageNum:i,pageSize:5}}).then(resp=>{let data = resp.data;console.log(data);this.books = data.books;this.pages = data.pages;})},removeBook: function (bookId) {let isDelete = confirm("確定刪除嗎?");if(!isDelete){return ;}this.axios.get("/day02/book/remove",{params:{bookId:bookId}}).then(resp=>{let responseData = resp.data;if (responseData.status == "success") {alert("刪除成功");this.handleAClick(1);}else{alert("刪除失敗");}}).catch(error=>console.log(error));*/}}} </script> <style scoped>.book-table table{margin: 0 auto;border: solid 1px darkgray;} </style>

3.在app.vue中添加如下代碼

<div id="app"><img src="./assets/logo.png"><!-- 添加如下代碼--><hr><h1>hello </h1><div><router-link to="/book/show"><button>查詢</button></router-link></div><router-view/></div>

3.解決跨域問題

出于瀏覽器的同源策略限制，同源策略會阻止一個域的javascript腳本和另外一個域的內(nèi)容進(jìn)行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協(xié)議（protocol），主機(jī)（host）和端口號（port）。前后端分離的模式下，前端頁面的js代碼和服務(wù)端的服務(wù)地址不在同一個域下，無法直接通信。

解決方案：

main.js添加如下配置

import axios from 'axios' import VueAxios from "vue-axios"axios.defaults.baseURL="http://localhost:8080" //添加的配置 axios.defaults.withCredentials = trueVue.use(VueAxios,axios)

2.服務(wù)端添加響應(yīng)頭

//設(shè)置允許跨域共享資源的前端地址 resp.setHeader("Access-Control-Allow-Origin","http://localhost:8081"); //允許client跨域請求時攜帶cookie resp.setHeader("Access-Control-Allow-Credentials","true");

4.打包部署

當(dāng)我們使用vue-cli腳手架完成一個項目后，下一步就需要打包部署項目（類似于JavaWeb項目開發(fā)后要打war包部署到tomcat中）。

執(zhí)行打包命令

#在項目目錄下執(zhí)行npm run build
E:\ideaProject\vue-cli-test>npm run build

#最后出現(xiàn)如下信息，表示打包完成
Build complete.

? Tip: built files are meant to be served over an HTTP server.
? Opening index.html over file:// won't work.

2.打包后的文件，保存在項目目錄下新生成的dist目錄下 ?

?

?3.修改index.html中靜態(tài)資源路徑

?4.將dist文件夾部署到服務(wù)器上并運(yùn)行

總結(jié)

以上是生活随笔為你收集整理的Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。