通过上一节，我们学习了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.分页查询和删除

1.components下新建 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跨域请求时携带cookie
resp.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文件夹部署到服务器上并运行

Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署相关推荐

从零到一 django + vue 构建前后端分离项目
(本文在win10环境下进行) django 和 vue 的优点 django的python血统,开发起来基本上是站在巨人的肩膀上,用起来顺手,加上drf这个restful API 框架,SaltSt ...
Vue 脚手架结合 SpringBoot 构建前后端分离入门项目（实现增删改查）
Vue 脚手架构建前后端分离项目项目简介与预览数据库建表主要模块代码 index.js 路由代码 User.vue 用户组件 RAP2 创建接口进行测试切换路由组件的显示: this.$rou ...
最细致的Spring Boot结合Vue前后端分离项目打包部署步骤（搭配Nginx）
文章目录前言一.环境准备二.SpringBoot项目打jar包 1.1 使用Maven的package插件打包 1.2 上传至Linux服务器三.Vue项目打包 1.1 修改后台请求地址 1. ...
新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互
导语:路漫漫其修远兮,吾将上下而求索前篇: 新手摸爬滚打:vue+springboot前后端分离项目演示(一)--vue cli创建vue2项目新手摸爬滚打:vue+springboot前后端分离 ...
Django+vue前后端分离项目构建
本项目用的Django是4.0.4版本,vue是2.0版本一.背景主要介绍如何使用后端Django + 前端Vue 的技术栈快速地搭建起一套web项目的框架 1.Django项目和应用的创建 pi ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
Vue 实现前后端分离项目
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue实现前后端分离项目的初体验经过之前学习的Vue的知识: vue基本指令 vue组件 vue- ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
视频教程-Python+Vue+Django前后端分离项目实战-Python
Python+Vue+Django前后端分离项目实战教学风格独特,以学员视角出发设计课程,难易适度,重点突出,架构清晰,将实战经验融合到教学中.讲授技术同时传递方法.得到广大学员的高度认可. 王进 ...

Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署