【前后端分离搭建流程 Vue + SpringBoot】

前端 Vue 项目构建

vue 项目创建方式有二种： 1、命令行构建 2、vue 资源管理器创建 (vue ui)

命令行构建

	1、vue create 项目名
	2、选择对应配置，然后回车
	3、选择 vue 版本号
	
	至于前端项目具体依赖要看各项目功能点，根据功能模块选择添加哪些依赖。对于后端开发者而言添加以下
依赖基本上够用了。
	axios、vue-router、mockjs、element-ui（似情况而定）

请求代理（重要）

	module.exports = {
	    lintOnSave: false,
	    devServer: {
	        proxy: {
	            '/api': {
	                target: 'http://127.0.0.1:56010', //接口域名
	                changeOrigin: true,             //是否跨域
	                ws: true,                       //是否代理 websockets
	                secure: true,                   //是否https接口
	                pathRewrite: {                  //路径重置
	                    '^/api': ''
	                }
	            }
	        }
	    }
	}

	// 请求方式
	url: '/api/sys/queryUserById/' 	=>	'/api' 必须要

后端 SpringBoot 构建

跨域配置

	前后端分离必须要跨域配置，否则请求地址访问不到
		1、 @CrossOrigin
			在控制层 Controller 类上加个@CrossOrigin注解，只对当前类下所有接口可跨域。也可以加在方法上。注意此注解必须在 jdk 1.8 以上才有效
		2、网关统一配置跨域

application.yml 文件配置

	server:
	  port: 56010	# 端口
	spring:
	  application:
	    name: employment-system # 指定服务名
	  datasource:
	    driver-class-name: com.mysql.jdbc.Driver	# mysql 驱动（mysql 5、8 驱动不同）
	    url: jdbc:mysql://ip地址:端口/数据库名称?serverTimezone=UTC&useSSL=false
	    username: 用户名
	    password: 密码

总结

其实前后端分离并不难。在 vue 项目中主要就是请求接口的代理问题。而请求代理可分全局统一代理和局部代理。
在单体项目中发送请求是: /user/login
而在 vue 项目中发送请求方式可以是： http://ip 地址:端口/user/login，也可以通过统一代理模式 /api/user/login 这样发送请求