SpringBoot|SpringBoot + Vue 前后端分离架构搭建 SpringBoot+Vue前后端分离架构搭建

技术相关：SpringBoot、Jpa、Vue、MySQ
工具相关：后端：idea，前端：vscode
下面直接刷操作喽。这里重点讲前后端的分离的实现，主要包括以下几个步骤：
（1）vue.js项目搭建
（2）后端springboot项目搭建
（3）前端相关页面及配置
（4）后端代码及配置
（1）vue.js项目搭建
这里用项目用vue-cli搭建就好，默认已安装好node.js及镜像脚手架等。步骤如下：
进入cmd窗口及vue项目需要放置的目录，比如想把项目放d盘根目录就进入D盘；
执行命令 vue init webpack wjmm-vue，这里 webpack 是以 webpack 为模板生成项目，还可以替换为 pwa、simple 等其他的参数， wjmm-vue是设定的项目名称，执行命令将在当前路径创建对应的项目和文件夹；

文章图片

下面创建过程会有其他提示（确认项目名称之类的），简单点就一系列回车按默认设定就好，
中间会问是否安装 vue-router，要输入 Y（表示是）然后回车，要用vue-router 构建单页面应用。
还有问是否使用 es-lint，同上。剩下其他不必要可以输入N然后回车。
项目创建完成后可以去文件夹查看或者用其他开发工具打开，一般我用vscod写vue部分代码，在vscode终端（TERMINAL）创建vue项目，和命令行创建操作是一样的，进入需要创建项目的路径输入一样的创建命令就好。
输入npm run dev 运行项目，访问 http://localhost:8080，确认下项目正常就行。

文章图片

（2）后端SpringBoot项目搭建
在idea创建，新建项目，选择 Spring Initializr，点击 Next，然后命名，注意后面选择选择web项目即可。
前后端初始化阶段完成，下面是开始。
（3）前端相关页面及配置
前端页面：首先进行简单登录页面设计，右键 src\components 文件夹，新建一个 File，命名为 Login.vue 。代码如下：

标签中写了登录界面， methods 中定义登录按钮的点击方法，即向后端 /login 接口发送数据，获得成功的响应后，页面跳转到 /index。因为之前设置了默认的 URL，所以请求实际上发到了 http://localhost:8443/api/login。
然后新建登录成功的界面，右键 src\components 文件夹，新建一个 directory，命名为 home，再在 home 下新建一个 Appindex.vue ，为首页组件，这里写个 Hello World做为跳转测试就好。

下面进入前端配置阶段
设置反向代理：修改 src\main.js ，代码如下：

import Vue from 'vue' import App from './App' import router from './router' // 设置反向代理，前端请求默认发送到 http://localhost:8443/api var axios = require('axios') axios.defaults.baseURL = 'http://localhost:8443/api' // 全局注册，之后可在其他组件中通过 this.$axios 发送数据 Vue.prototype.$axios = axios Vue.config.productionTip = falsenew Vue({ el: '#app', router, components: { App }, template: '' })

配置页面路由：修改 src\router\index.js ，代码如下：

import Vue from 'vue' import Router from 'vue-router' // 导入刚才编写的组件 import AppIndex from '@/components/home/AppIndex' import Login from '@/components/Login'Vue.use(Router)export default new Router({ routes: [ // 下面都是固定的写法 { path: '/login', name: 'Login', component: Login }, { path: '/index', name: 'AppIndex', component: AppIndex } ] })

跨域支持（使后端能够访问到前端的资源）：修改 config\index.js ，找到 proxyTable 位置，修改为以下内容：

proxyTable: { '/api': { target: 'http://localhost:8443', changeOrigin: true, pathRewrite: { '^/api': '' } } }

初始登录界面如下：

文章图片

（4）后端代码及配置
首先在 src\main\java\com.whale.wjmm文件夹下(启动类的同级目录)，新建一个 pojo （放实体类）文件夹或者包，然后新建 User类，代码如下：
在pojo同级目录新建 result 文件夹，创建 Result 类，Result 类是为了构造 response，主要是响应码。代码如下：

public class Result { //响应码 private int code; public Result(int code) { this.code = code; }public int getCode() { return code; }public void setCode(int code) { this.code = code; }}

在 wjmm下新建 controller 包，新建 LoginController 类，代码如下：

import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.util.HtmlUtils; import com.evan.wj.pojo.User; import java.util.Objects; @Controller public class LoginController {@CrossOrigin @PostMapping(value = "https://www.it610.com/article/api/login") @ResponseBody public Result login(@RequestBody User requestUser) { // 对 html 标签进行转义，防止 XSS 攻击 String username = requestUser.getUsername(); username = HtmlUtils.htmlEscape(username); if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) { String message = "账号密码错误"; System.out.println("test"); return new Result(400); } else { return new Result(200); } } }

在这里Controller 是对响应进行处理的部分。不连接数据库的化默认设定账号是 admin，密码是 123456，分别与接收到的 User 类的 username 和 password 进行比较，根据结果返回不同的 Result，即不同的响应码。前端如果接收到成功的响应码（200），则跳转到 /index 页面。
最后，在 src\main\resources 文件夹下的 application.properties 文件配置端口，加上 server.port=8443（和vue端口保持一致）
【SpringBoot|SpringBoot + Vue 前后端分离架构搭建】这样就完成了前后端分离的基础功能和所有配置，同时运行两个项目，访问localhost:8080/#/login，zhhao
为上面默认的admin和123456