flask 接口让别人能访问_flask搭建一个前后端分离的系统

我们通常说三端，pc端，android端和ios端。如果前后端不分离，相当是要做三套系统。如果前后端分离的话，可以共用一个后端，前端各自做自己的，不用管后端。

前后端不分离
在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。

这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App后端还需再开发一套接口。

前后端分离
在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。

在前后端分离的应用模式中，前端与后端的耦合度相对较低。

在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。

OK，我们来尝试用vue做前端，flask做后端，来做一个前后端分离的系统。

首先用CLI来装vue.
Vue- CLI是vue官方提供的脚手架工具,默认已经帮我们搭建好了一套利用webpack管理vue的项目结构。

我们网上看到的很多文档，都是CLI2的，都会有各种配置文件。我们现在用CLI3，就不需要怎么配置。省心很多。

在Vue- CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹。
首先，我们要配置源：

npm config set registry https://registry.npm.taobao.org

或者：

npm install --registry=https://registry.npm.taobao.org

全局安装：

npm install -g @vue/cli

检查是否安装成功：

vue -V

创建项目：

vue create my-project

项目就创建好了，打开看一下

运行：

npm run serve

浏览器里面输入地址，就可以看到页面了。

CLI3里面还有一个可以用UI界面来控制的。
敲入：

vue ui

就可以通过ui来创建项目，配置插件和打包了，很方便的。

好了，看完前端，来配置后端：
Python 不像 Node.js，通过 NPM 安装包时，只需要一个参数就能区分全局和当前项目环境，安装在当前项目环境的包永远不会影响其它的项目环境。但是 Python 不行，所以为了各个项目之间的环境独立，我们需要安装 virtualenv，把每个项目都放在一个封闭的虚拟环境中，这样项目彼此间就不会影响了。
安装 virtualenv：

pip install virtualenv

创建虚拟环境：

virtualenv venv

venv 是虚拟环境的名字，所以只要你喜欢，换成什么都可以。
进入虚拟环境：

venvScriptsactivate

退出虚拟环境：
venvScriptsdeactivate
安装 Flask：

pip install Flask

安装 flask-cors，用来解决开发时的跨域问题：

pip install flask-cors

安装 pylint，用来检查代码：

pip install pylint

安装 yapf，用来格式化代码：

pip install yapf

先将前端的代码写好，现在对vue还不是太熟，就简单写一个index：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><input v-model="message"><button type="button"  @click="get_password">submit</button><p>account is: {{ message }}</p><p>password is: {{ password }}</p><script>var v1 = new Vue({el: '#app1',data: {message: 'stest',password: '',},watch : {my(v) {this.password = this.get_password();}},methods: {get_password() {axios.get('/accounts', {headers: {'Access-Control-Allow-Origin': '*',},crossDomain: true,contentType: "application/json",params: {account: this.message,//接口配置参数（相当于url?id=xxxx）},}).then((res) => {console.log(res.data['password']);//处理成功的函数 相当于successthis.password = res.data['password']}).catch(error => console.log(error))}}})</script></body>
</html>

然后在项目里面建一个文件夹，叫backend，建一个app.py

from flask import Flask,render_template,request,jsonifyapp = Flask(__name__)# 通过 static_folder 指定静态资源路径，以便 index.html 能正确访问 CSS 等静态资源
# template_folder 指定模板路径，以便 render_template 能正确渲染 index.html
app = Flask(__name__, static_folder="../dist/static", template_folder="../dist")@app.route('/')
def index():'''当在浏览器访问网址时，通过 render_template 方法渲染 dist 文件夹中的 index.html。页面之间的跳转交给前端路由负责，后端不用再写大量的路由'''return render_template("index.html")@app.route('/accounts', methods=['GET'])
def get_accounts():if request.method == "GET":username = request.args.get("account")password = "aaa" #query_account(username)if password == "":return "no result"else:#return render_template("home.html",message=username,password=password)return jsonify({"password": password})if __name__ == '__main__':app.run()

接着将前端build一下，生成一个dist目录

然后运行：

flask run

浏览器中输入：127.0.0.1:5000

看起来通了。
这个关键点是：

# 通过 static_folder 指定静态资源路径，以便 index.html 能正确访问 CSS 等静态资源
# template_folder 指定模板路径，以便 render_template 能正确渲染 index.html
app = Flask(__name__, static_folder="../dist/static", template_folder="../dist")

美中不足是，vue还不熟练，还有些小问题要处理。

好了，前后端能通了，也能融合到一起了。

更多精彩，请关注微信公众号：python粉丝团

flask 接口让别人能访问_flask搭建一个前后端分离的系统相关推荐

Django+vue搭建一个前后端分离的web 一
项目用到的技术: Vue.bootstrap.Django.python: 前后端分离项目的搭建和目录结构介绍: 创建Django项目: jango-admin startproject 项目名称目 ...
记录使用springboot+vue框架搭建一个前后端分离的demo（后端项目）
我用的工具版本:idea2019.1.3 vue2.9.6 jdk1.8 数据库用的是mysql 数据库名字叫mydatabase,表名字叫t_b_member 一.最终项目结构 member是项目名 ...
基于springboot 快速搭建简单前后端分离项目-后台框架
目录 1.新建project 2.选择依赖 3.简单配置 4.数据库准备 5.完成后台逻辑代码 5.1创建java实体对象 5.2创建repository 5.3单元测试 5.4编写controlle ...
黑加仑妞使用vue+flask做全栈开发的全过程（实现前后端分离）
黑加仑妞使用vue+flask做全栈开发的全过程(实现前后端分离) 花了几天的时间终于在本地把前后端跑通了,以一篇博客记录我这几天的心酸... 1.安装nodejs(自带npm,可能会出现版本错误, ...
vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建（四）（完）...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目新建backend_parent. 为了 ...
centos7 vim查找_实战 | 一文掌握Centos7下搭建Django前后端分离项目部署环境
点击上方 "Python Web与Django大咖之路"关注我! 工作原理一.安装nginx 安装依赖包 yum install gcc gcc-c++ pcre-deve ...
SpringBoot+El-upload实现上传文件到通用上传接口并返回文件全路径(若依前后端分离版源码分析)
场景 SpringBoot+ElementUI实现通用文件下载请求(全流程图文详细教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
自己搭建一个前后端的项目-适合新手学习
前提:这篇文章不适合大佬去看,因为我自己也是比较菜的.我只是分享下我的一些经验. 接下来我将会介绍三个方面: 小程序端 :想要学习小程序的同学可以看看你能学习到什么: 页面的布局,对返回的数据进行操 ...
后端搭建MySQL_Docker前后端分离实战之搭建MYSQL集群
这门慕课实战对想了解Docker的人很有帮助.感谢神思者l大佬 renren-fast 后台:SpringBoot+SSM+Shiro+swagger(API调试)+Redis+JWT(单点登录) L ...

flask 接口让别人能访问_flask搭建一个前后端分离的系统

flask 接口让别人能访问_flask搭建一个前后端分离的系统相关推荐

最新文章

热门文章

flask 接口 让别人能访问_flask搭建一个前后端分离的系统

flask 接口 让别人能访问_flask搭建一个前后端分离的系统相关推荐

最新文章

热门文章

flask 接口让别人能访问_flask搭建一个前后端分离的系统

flask 接口让别人能访问_flask搭建一个前后端分离的系统相关推荐