本文讲解SpringBoot和Vue项目搭建的最小化原型，非常方便后续同类知识点的学习，同时也是非常棒的脚手架，可快速搭建各种实验的基础框架，本文实践于2022年7月10号，练习前建议仔细核对相关软件版本，避免引起不必要的麻烦。
在前后端项目分离之前，java工程师一般身兼两职，又做前端也做后端。项目规模大的团队可能有美工或js工程师分担一部分工作。部署也往往都堆砌在一起，互联网电商行业好一些，为响应百万级以上请求，一般会将静态文件单独部署到apache、nginx等http应用中并逐步引入cdn服务。
现今前端项目如雨后春笋般涌现，各项技术日新月异，作为后端工程师不可避免的也需要多少学习一下前端知识，简单地说方便项目联调联试，未来成为一个优秀全栈工程师或架构师也是非常有必要的。
因篇幅所限，SpringBoot项目搭建请参考我们提供的另一份文档。
一、Vue开发环境搭建
当前国内网络环境能找到的Vue文档大多基于2.0版本，语法与当前3.0差异极大，因此本文提供手把手的教程，从头学习。
开发环境准备工作：
- 实验测试时间于2022年7月10日
- 开发机采用 Win10 64位操作系统
- 开发IDE采用Visual Studio Code 1.69.0
- 运维Shell采用Windows Terminal 1.13，你也可以用OS自带的cmd
- Node.js采用官方LTS最新版v16.16，并设置了
阿里云镜像加速 - vue采用3.0版本
Tip: 以上工具文档均可在网上轻松搜索得到，但大多陈旧、版本不一，建议参考本文实现方式
安装调试：
# Node.js的安装不难，主要是版本的选择要小心谨慎，尽量选择官方最新的LTS版本，避免麻烦，必要时回退一个版本 一路next即可安装好node.js # 设置淘宝镜像源加速 npm --registry=https://registry.npm.taobao.org install # 安装vue和cli npm install vue npm install -g @vue/cli # 启动UI界面程序进行项目搭建，相比命令行很少出错！ vue ui
二、Vue项目搭建
vue项目的使用其实就引入vue.js即可，为方便协同开发、各种插件测试，建议采用node平台并以项目的形式进行创建，易于后续的开发和维护。
当前环境版本：
G:\桌面\vue-study\nodetest2>node -v v16.16.0 G:\桌面\vue-study\nodetest2>npm -v 8.11.0 G:\桌面\vue-study\nodetest2>vue -V @vue/cli 5.0.8
项目搭建：采用web ui的形式，简单、舒心，我们需要把全部精力投入到关键业务开发，而不是无关的事情上！
插件安装：项目创建后，我们需要安装常用的三个插件，采用ui界面操作是非常简单的
- vuex，大型项目中管理数据状态的一种机制，将Vue中所有的状态（数据）抽离出来进行统一管理
- vue-router，vue的路由机制，避免一堆的a标签，也是vue响应这么迅速的关键！
- axios，用于与后端通讯，类似以前Ajax组件
项目代码一览：
- App.vue 项目
入口文件，源于自动生成，需增加一个book入口方便测试和查看。 - router/index.js 路由文件，设置我们项目的展示层内容
- views/bookView.vue 项目主要展示文件，也是日常反复编译调试的地方
1/3、App.vue 项目自动生成，增加router-link关于book的入口
<template> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>| <router-link to="/book">Book</router-link> </nav> <router-view/> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } nav { padding: 30px; } nav a { font-weight: bold; color: #2c3e50; } nav a.router-link-exact-active { color: #42b983; } </style>
2/3、router/index.js 项目自动生成，增加book的路由匹配规则
import { createRouter, createWebHashHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') }, { /* 匹配请求 */ path: '/book', name: 'book', component: () => import(/* webpackChunkName: "book" */ '../views/BookView.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router
3/3、views/bookView.vue
<template> <div> <table border="1px"> <tr> <td>编号</td> <td>图书名称</td> <td>作者</td> <td>出版社</td> <td>页数</td> <td>价格</td> </tr> <!-- 循环展示数据 --> <tr v-for="elem in books"> <td>{{ elem.id }}</td> <td>{{ elem.bookName }}</td> <td>{{ elem.author }}</td> <td>{{ elem.publish }}</td> <td>{{ elem.pages }}</td> <td>{{ elem.price }}</td> </tr> </table> {{ msg }} </div> </template> <script> export default { name: "Book", data() { /* 数据造假 */ return { msg: 'Hello Vue', books: [ { id: 1, bookName: '平凡的世界', author: '张三', publish:'开心出版社', pages:'100', price:'100.01' }, { id: 2, bookName: '月亮与六便士', author: '李四', publish:'快乐出版社', pages:'90', price:'99.01' } ] } }, /* created()是初始化方法，用于向后端请求数据 */ created() { const _this = this const axios = require('axios'); axios.get("http://localhost:8080/list") .then(function (resp) { _this.books = resp.data; }); axios.get("http://localhost:8082/test") .then(function (resp) { _this.msg = resp.data; }) } } </script> <style scoped> </style>
三、Vue项目测试
本项目测试成功的原则标准：
- 编译器自检无严重bug
- web服务可正常启动
- book页面的两个数据接口均正常返回，开启后端服务后，替换为后端数据！
运行检查：可在项目目录下执行npm run serve或在vsc编辑器中运行任务，执行npm:serve经检查，一切正常！
服务检查：浏览器访问，接口也正常返回
后端服务开启测试，也一切正常！
四、Vue项目部署
前后端分离后，这块工作也就分配到了前端工程师手中，所以前端兄弟适当学一下运维工作也是有趣的
编译打包
# 生成dist文件夹 npm run build
部署运行：将dist文件夹中的全部内容复制到tomcat的ROOT目录中，并启动tomcat，访问web一切OK！
结语
SpringBoot +Vue前后端分离/集成项目非常轻松的完成，其实中间踩坑无数，折腾了好多天，有个人基础不扎实，也被网上各种不同版本的资料误导，这里倡导程序员朋友们，平时多做做输出，务求完整，利人利己，提高非常快。避免工作多年，技术仅停留在入职三年内！
