通过上一节，我们学习了vue脚手架的相关概念以及构建过程，那么开始我们的前后端项目吧
Vue-CLI构建前后端分离项目
1.项目环境初始化
1.安装axios vue-axios（记得执行命令要进入项目里面执行哦，否则就会报错）
E:\ideaProject\vue-cli-test>npm install --save axios vue-axios
2.main.js中引入相关库
import axios from 'axios'import VueAxios from 'vue-axios'//配置后端服务地址axios.defaults.baseURL="http://localhost:8080"//在Vue中配置axios，在所有的Vue组件中就可以通过this.axios使用axios库Vue.use(VueAxios,axios)
2.分页查询和删除
ponents下新建BookTable.vue
注意：axios要通过this.axios的方式调用
<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脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。前后端分离的模式下，前端页面的js代码和服务端的服务地址不在同一个域下，无法直接通信。
解决方案：
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.服务端添加响应头
//设置允许跨域共享资源的前端地址resp.setHeader("Access-Control-Allow-Origin","http://localhost:8081");//允许client跨域请求时携带cookieresp.setHeader("Access-Control-Allow-Credentials","true");
4.打包部署
当我们使用vue-cli脚手架完成一个项目后，下一步就需要打包部署项目（类似于JavaWeb项目开发后要打war包部署到tomcat中）。
执行打包命令
#在项目目录下执行npm run build
E:\ideaProject\vue-cli-test>npm run build
#最后出现如下信息，表示打包完成
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中静态资源路径
4.将dist文件夹部署到服务器上并运行
