如何实现前后端分离项目?(SpringBoot+Vue)
一 编写后端接口/*** 登录方法* @param requestHTTP请求* @param response HTTP响应* @return 返回消息*/@PostMapping("/api/login")public ReturnMessage testYanZheng( @RequestBody User user, HttpServletRequest request, HttpServ
一 编写后端接口
/**
* 登录方法
* @param request HTTP请求
* @param response HTTP响应
* @return 返回消息
*/
@PostMapping("/api/login")
public ReturnMessage testYanZheng( @RequestBody User user, HttpServletRequest request, HttpServletResponse response) {
}
二 安装并使用axios
1.安装axios: npm install axios
2.使用axios
main.js文件中引入axios:
import axios from 'axios'
Vue.prototype.$axios = axios
在项目需要调用后端接口处使用:
axios.post('/api/login',
{
username:'',
password:''
},
)
.then(function(response){
if(response.data.code===999){
alert("用户名或密码错误")
}
})
.catch(function(error){
alert(error)
})
三 解决跨域问题
使用proxyTable解决开发环境中跨域问题
config/index.js:
proxyTable: {
"/api":{
target:"http://127.0.0.1:8089",
changeOrigin: true,
pathRewrite:{
"/api":"/api"
}
}
四 关于content-type
1.application/x-www-form-urlencoded
2.multipart/form-data
3.application/json
4.text/xml
目前只使用到json格式,后端用@RequestBody接收前端参数。
五 vue前端项目打包部署
1.修改相关配置
config/index.js:
assetsPublicPath 属性从’/’ 改为 ‘./’
build/util.js:
添加 publicPath: ‘…/…/’
2 运行npm run build命令,产生一个dist文件夹。
3nginx 部署
(1) 配置nginx环境变量
(2)配置项目路径
(3)dist文件夹中的两个文件拷贝到nginx的html目录下,里面默认的两个文件删掉。
(4)启动nginx ,输入网址localhost,成功启动项目。
start nginx:启动nginx
nginx -s reload :修改配置后重新加载生效
nginx -s quit:停止nginx
npm install -g rimraf 安装
rimraf node_modules 删除node_modules
更多推荐
所有评论(0)