vue+flask前后端分离项目(1)

最近公司项目需要我进行包装一下,厉害的大佬们训练好模型,全周期工程师我负责在用户和大佬代码之间搭桥,用vue+flask完成整个项目的搭建和部署。
写完前端写后端,写完后端改nginx,改完nginx配服务器环境,全周期超爽有木有~
这是总结第一篇,总结vue搭建纯前端项目以及在开发环境配置nodejs反向代理绕过浏览器跨域限制。

新建vue项目

本项目的node和npm为全局安装版本,node>=6.0.0npm>=3.0.0,使用vue-cli进行一键配置。
新建项目命令:

1
2
3
4
mkdir projectName
vue init webpack client
cd client
npm run dev

用浏览器打开http://127.0.0.1:8080看到有vue图片出现即启动成功。

文件目录格式如下图所示,需要在component中编写vue组件,在router中的index.js中配置路由。
vue目录结构

这时可能会出现一个问题,例如需要访问页面http://://127.0.0.1:8080/a/,浏览器却始终显示首页内容,url显示为http://://127.0.0.1:8080/a#/,解决方式是在index.js中添加一个mode参数,充分利用 history.pushState API来完成URL跳转。

1
2
3
4
export default new Router({
mode:'history',
routes: [{}]
});

生成打包命令:

1
npm run build

打包将在原目录下生成dist文件夹,static下面是打包后的静态文件
dist目录

vue中使用less

1
cnpm install less less-loader --save--dev

style中添加如下代码:

1
2
3
<style lang="less" scoped>
@import '../assets/reset.less';
</style>

使用axios发送请求

vue中推荐使用axios进行http请求处理。

1
cnpm install axios --save--dev

script中这样使用:

1
2
3
4
5
6
7
8
9
import axios from 'axios';
axios.post(reqPath+'upload',form,config).then((res) => {
let data = res.data;
if(data.code == 0){
//do something
}
}).catch((error) => {
console.error(error);
});

开发环境允许跨域

当我的客户端发起一个post请求后,迟迟没有收到server端的返回结果,打开控制台,发现了以下提示:
浏览器跨域
在求助一个朋友之后得知,chrome内核已经把http头为json的返回强制做了cros ,即使加了跨域头也不行。所以需要在开发环境中使用nodejs做反向代理。
build/webpack.dev.conf.js中修改代码如下:

1
2
3
4
5
6
7
8
9
10
devServer: {
proxy: {
'/api': {
target: 'serverip:port',
headers: {
'host': ''
}
}
}
}

这样配置之后,请求接口时不要写完整地址,写成例如./api/upload的形式,即可绕过跨域限制。

记录一个问题

我在向后端发请求时还遇到过这样一个问题:
error1
查阅资料后发现时找不到资源,我重启服务端之后问题解决。


vue+flask前后端分离项目(1)
https://guoningyan.com/2019/06/20/vue-flask前后端分离项目(1)/
作者
Ningyan Guo
发布于
2019年6月20日
许可协议