python实战项目前后端分离flask_用vue和flask实现一个前后端分离的网站，自动回答问题...

# 文件目录

1- 根目录是 /root/code,

2- flask_demo和vue_demo都是放在这个目录下的，

3- nginx下的两个配置文件是放在/etc/nginx/conf.d/下的，

4- app.service是放在

/etc/systemd/system/下的

# 以下是需要提前知道的

1- 这是一个小demo，提供了具体的操作,

2- 基于vue官方的例子，点击这里,

3- 用nginx来解决跨域问题

4- 只允许特定ip访问接口，配置nginx来实现

# 用flask搭建一个接口

1- 编写app.py

运行python app.py，会默认启动5000端口，

在浏览器里面访问 http://127.0.0.1:5000 就可以访问到json字符串，

页面显示的是：

{"answer": "yes", "forced": false}

正好是app.py里面配置的返回结果

2- uwsgi直接用python app.py启动，不能后台运行，

所以这里使用uwsgi来启动app.py，让flask后台运行，

安装uwsgipip install uwsgi

编写wsgi.py

这里写wsgi.py方便配置ini文件

编写flask_demo.ini

然后就可以通过

uwsgi --ini flask_demo.ini

来后台启动flask

3- 把flask弄成一个服务这样的话就可以用systemctl来管理，更加方便.

编写app.service

启动flask：

systemctl start app

这样就启动flask了，

还有以下这些命令：

重启：

systemctl restart app

停止

systemctl restart app

接口部分就弄好了。

# 用vue创建网页

编写index.html

axios.get('http://remote_ip/')

这里面的remote_ip得换成服务器ip或者127.0.0.1，

前端页面就写好了。

# nginx启动两个server

分别配置接口和前端页面，

配置文件的路径是

/etc/nginx/conf.d/

1- 接口的配置文件是mysite.conf

配置文件里面的remote_ip要替换成具体的ip，

这里其实就是外部请求你的公网ip，然后再转发到本地的5000端口，

5000端口再返回结果，外部浏览器得到结果。

2- 前端的配置文件是vue.conf

这里就是简单地指定一下index.html，换了一个端口，

记得把remote_ip替换成具体ip，

3- 报错上面两个配置文件弄好了之后，启动nginx一般会报错，

是因为没有给index.html, app.py这些文件权限

chmod +x -R /root/code/

我的文件都放在/root/code/下面，所以这里这样加了权限

+x 是授予权限-R 是递归授予权限，就是文件夹和子文件夹下的文件，都一次性授予了权限

4- 启动启动flask

systemctl start app

启动nginx

nginx

# 解决跨域问题

在前端里面，直接访问同一个ip，不同端口，是不被允许的，这种情况就是跨域，

这里可以用nginx来解决

添加headers，来允许其他域的请求

# 只允许特定ip访问接口

# 总结

前后端分离好处是很明显的，不仅可以分工合作，同时开工，也不会把前后端的东西杂糅在一起，思路会更加清晰。

# 源文件地址

https://github.com/otfsenter/vue_flask_configuration