当前位置：网站首页 > 热门文章 > 正文

用vue和flask实现一个前后端分离的网站，自动回答问题

bigegpt 2024-10-07 06:27 4 浏览

# 文件目录

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后台运行，

安装uwsgi

pip 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

这里面的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

flask_cors

上一篇：「Python」如何使用virtualenv创建一个Django或Flask开发环境
下一篇：百度文心一言插件开发中的几个疑惑(解答)

用vue和flask实现一个前后端分离的网站，自动回答问题

# 文件目录

# 以下是需要提前知道的

# 用flask搭建一个接口

# 用vue创建网页

# nginx启动两个server

# 解决跨域问题

# 只允许特定ip访问接口

# 总结

# 源文件地址

相关推荐

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

服务器硬件RAID性能横评(2)（服务器常用raid技术）

Python教程:第9篇字符串基本操作

k8s中三种POD调度策略介绍 k8s pod间调用

用vue和flask实现一个前后端分离的网站，自动回答问题

# 文件目录

# 以下是需要提前知道的

# 用flask搭建一个接口

# 用vue创建网页

# nginx启动两个server

# 解决跨域问题

# 只允许特定ip访问接口

# 总结

# 源文件地址

相关推荐

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

服务器硬件RAID性能横评(2)（服务器常用raid技术）

Python教程:第9篇 字符串基本操作

k8s中三种POD调度策略介绍 k8s pod间调用

Python教程:第9篇字符串基本操作