前言
在上面几篇文章中主要讲解了springboot项目创建与mybatis的整合，从这边文章开始，就开始做项目实践。
一、前后端分离的核心思想及优势
前后端分离已成为互联网项目开发的业界标准使用方式，在此项目中使用springboot+vue+axios来实现；
许多人都会问什么是前后端分离，那前后端分离又有什么优点呢？
前后端分离的核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
前后分离的优势有一下几点
1.可以实现真正的前后端解耦，前端服务器使用nginx。
前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。
（这里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）
2.发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。
页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。
接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。
双方互不干扰，前端与后端是相亲相爱的一家人。
3.在大并发情况下，我可以同时水平扩展前后端服务器，比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。
（去参加阿里的技术峰会，听他们说他们的web容器都是自己写的，就算他单实例抗10万http并发，2000台是2亿http并发，并且他们还可以根据预知洪峰来无限拓展，很恐怖，就一个首页。。。）
4.减少后端服务器的并发/负载压力
除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。
且除了第一次页面请求外，浏览器会大量调用本地缓存。
5.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
6.也许你也需要有微信相关的轻应用，那样你的接口完全可以共用，如果也有app相关的服务，
那么只要通过一些代码重构，也可以大量复用接口，提升效率。（多端应用）
7.页面显示的东西再多也不怕，因为是异步加载。
8.nginx支持页面热部署，不用重启服务器，前端升级更无缝。
9.增加代码的维护性&易读性（前后端耦在一起的代码读起来相当费劲）。
10.提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。
11.在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），
内网使用http，性能和安全都有保障。
12.前端大量的组件代码得以复用，组件化，提升开发效率，抽出来！
二、Node.js及Vue CLI 脚手架的安装
2.1 安装Node.js
附上 Vue 的官方教程：
https://cn.vuejs.org/v2/guide/
安装 Vue CLI（脚手架）需要使用 npm ，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。
node.js网站非常的友好还给我们提供了翻译功能，点击选择简体中文即可，我们看到在官网上有两个版本，左边是长期支持版本，右边是当前版本，下载哪个都行，不过推荐使用长期支持版本。
点击下载文件格式node-v12.14.0-x64 .msi，双击次文件出现如下弹框，点击运行
在此页面点击next进入下一步
到这一的时候记得选择Node.js runtime这一项，如果选择的是其他项在就需要重新更新，否则在查看node.js的按本是会提示找不到
点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：
安装过程
点击 Finish（完成）按钮退出安装向导。
检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path"，输出如下结果：
我们可以看到环境变量中已经包含了c:\node
检查Node.js版本
2.2 安装Vue CLI 脚手架
检查node.js是否安装成功
命令 node -v
如果查询的时候出现版本号，说明Node.js已经安装成功，同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号
输入 npm -g install npm ，将 npm 更新至最新版本，
注意：npm更新时如果与node.js不匹配，运行时会出现错误，所以建议不要看见什么就操作
之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。
安装 cnpm 的命令为 ：
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后就可以使用 cnpm 替代 npm 了，我不太喜欢用 cnpm，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。
本人使用的是npm故没有进行cnpm的安装；
使用 npm install -g vue-cli 安装脚手架。
安装完成后，检验是否安装成功，输入 ：
vue-V (注意：这里是大写的 “V”)
如果出现版本号，则说明安装成功。
打开 node 的安装目录，也可以看到我们全局安装的 vue-cli
用 vue-cli 来构建项目。
三、构建前端项目
3.1.通用方法
首先要创建一个工作文件夹来存放我们的项目，我创建的文件目录是C:\developWebWork\vue，大家可以随意选择存放位置
使用cmd找到我们刚才创建的文件夹，输入：CD C:
输入 cd developWebWork\vue
找到存放项目的文件夹
然后执行命令 vue init webpack wj-vue，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数，这里不再赘述。 web-vue 是我们的项目名称（White Jotter），大家也可以起别的名字。
在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，也可以按需修改，比如下图问我项目名称是不是 web-vue，直接回车确认就行。
?Project name web-vue
? Project description A Vue.js project
? Author guodan
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
nder functions are required elsewhere
注意：在出现上面情况的时候，不要着急点回车就行了，这个并不是错误
这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。
Use ESLint to lint your code? (Y/n)的意思是：使用ESLint对代码进行lint？（是/否），本人选择的是Y，出现下图直接点回车即可
? Set up unit tests (Y/n)的意思是：? 设置单元测试（是/否） ，本人选择的是Y,出现下图直接点回车即可
? Setup e2e tests with Nightwatch? (Y/n)的意思是：? 用夜班表设置e2e测试？（是/否）本人选择的是Y,出现下图直接点回车即可
到此完成，接下来就是构建项目了
到此项目创建成功
可以看到C:\developWebWork\vue 目录下生成了项目文件夹 web-vue，里面的结构如图
接下来，进入到我们的项目文件夹里(cd C:\developWebWork\vue\web-vue)，执行npm run dev，执行时报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm install ，再执行 npm run dev，若果此时还是报错4058的错误可能是没有指定运行那个Vue项目,npm找不到需要加载的项目,所以报错
找到需要运行的项目后在执行 npm run dev
输入运行的指令一定要全否则会报错，我是少输入一个v
运行成功截图如下
访问 http://localhost:8081，查看网页 demo，大工告成！
四.使用Visual Studio Code (VScode)编写前端页面
Visual Studio Code 是微软推出的跨平台编辑器。它采用经典的VS的UI布局，功能强大，扩 展性很强。
中文文档下载路径：https://legacy.gitbook.com/book/jeasonstudio/vscode-cn-doc/details
官网软件下载路径：https://code.visualstudio.com/download
下面连接讲解了如何安装vscode，不会安装的可以作为参考，我在这里不不在讲解VScode的安装了
https://blog.csdn.net/weixin_38171468/article/details/103743759
4.1.导入本地项目
选择文件---->打开文件夹----->选择自己项目就可以了，下图是我导入的vue项目
打开集成终端：查看 –> 集成终端 或者直接按 ctrl+`或者ctrl+~
输入命令cd web-vue 项目根目录
运行项目输入命令 npm run dev，项目运行中
启动成功
复制 http://localhost:8081 路径运行
持续不断的学习就是进步
转载：https://blog.csdn.net/weixin_38171468/article/details/103679904