Flask测试平台开发实战-第二篇
概述：
在上一篇我们已经将后端初始化服务后前端的vue框架初始化已经搭建完整，并且可以运行看到界面，服务正常，当然我们看到的前端数据都是mock下的假数据，并不是真实的，这篇我们来开发实现第一个功能，登录接口的打通开发实现（第一个简单的登录接口实现）
前端框架结构
├── build // 构建相关
├── mock // 项目mock 模拟数据
├── public // 公共资源
├── src // 源代码
│ ├── api // 所有接口请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理api ：请求服务端接口的配置都在这里，这里逻辑实现是用到了utils里边的封装的request.js，其中在没有正式服务接口的之前是可以直接调用上边mock里的地址，得到模拟的数据请求。
views：页面的布局，样式，功能实现的地方，一般一个vue代表一个功能页面，具体根据自身项目逻辑划分就可以。
获取登录接口
终端切换到vue-element-admin目录，执行npm run dev 编译并开发者模式运行，这里和依赖环境中启动方式保持一致即可；
用chrome打开，进入登录页面，并依次浏览器菜单-更多工具-开发者工具，进入调试模式，切换到查看网络，来查看在登录网络请求
输入admin，任意密码，点击Login，正常进入主页后我们会分别看到两个登录相关接口login 和 info，请求Request URL分别为：
http://172.16.60.60:9527/dev-api/vue-element-admin/user/login 方法post
对应返回结果如下：
{"code":20000,"data":{"token":"admin-token"}}
http://172.16.60.60:9527/dev-api/vue-element-admin/user/info?token=admin-tokenget请求如下
返回结果如下：
其实这个如果在/mock/user.js也能通过代码看到，登录接口的内容。
实现登录接口
既然已经知道登录接口的请求以及重要的返回值，那么我们就可以用flask实现这两个接口，一个是登录验证用户存在返回token，另一个是登录成功后获取用户信息。
[POST] /user/login
编写代码： app.py 或者你顺手的编辑器
# -*- coding: utf-8 -*-from flask import Flaskfrom flask import requestimport jsonapp = Flask(__name__)@app.route("/api/hello")def hello():return "Hello, World!"@app.route("/api/user/login",methods=['POST'])
def login():data = request.get_data() # 获取post请求body数据js_data = json.loads(data) # 将字符串转成json# 验证如果是admin用户名，即登录成功，返回admin的token，否则验证失败if 'username' in js_data and js_data['username'] == 'admin':result_success = {"code":20000,"data":{"token":"admin-token"}}return result_successelse:result_error = {"code":60204,"message":"账号密码错误"}return result_errorif __name__ == "__main__":app.run(debug = True)测试：运行python app.py 通过后 curl 或者 postman进行请求测试
1）登录成功
curl -X POST http://127.0.0.1:5000/api/user/login -d '{"username":"admin","password":"123456"}'非admin登录错误
curl -X POST http://127.0.0.1:5000/api/user/login -d '{"username":"root","password":"654321"}'[GET] /user/info
继续追加实现代码
@app.route("/api/user/info",methods=['GET'])def info():# 获取GET中请求token参数值token = request.args.get('token')if token == 'admin-token':result_success = {"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}return result_successelse:result_error = {"code": 60204, "message": "用户信息获取错误"}return result_error继续测试
curl 'http://127.0.0.1:5000/api/user/info?token=admin-token'到此后端代码用户登录逻辑接口实现完了，我们可以保持后端服务运行，然后让我们将前端的请求从mock切换成我们自己的服务，在原有代码中补充我们写的代码
完整代码如下：
# -*- coding: utf-8 -*-from flask import Flaskfrom flask import requestimport jsonapp = Flask(__name__)@app.route("/api/hello")def hello():return "Hello, World!"@app.route("/api/user/login",methods=['POST'])
def login():data = request.get_data() # 获取post请求body数据js_data = json.loads(data) # 将字符串转成json# 验证如果是admin用户名，即登录成功，返回admin的token，否则验证失败if 'username' in js_data and js_data['username'] == 'admin':result_success = {"code":20000,"data":{"token":"admin-token"}}return result_successelse:result_error = {"code":60204,"message":"账号密码错误"}return result_error@app.route("/api/user/info",methods=['GET'])def info():# 获取GET中请求token参数值token = request.args.get('token')if token == 'admin-token':result_success = {"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}return result_successelse:result_error = {"code": 60204, "message": "用户信息获取错误"}return result_errorif __name__ == "__main__":app.run(debug = True)请求正式服务接口
修改接口请求地址
路径 vue-element-admin/src/api/user.js ，进行打开编辑, 配置成自己写的请求的api地址( 注释掉的就是原来mock地址)
export function login(data) {return request({// url: '/vue-element-admin/user/login',url: '/api/user/login',method: 'post',data})}export function getInfo(token) {return request({// url: '/vue-element-admin/user/info',url: '/api/user/info',method: 'get',params: { token }})
}
修改一个请求域名
另外还需要修改一下默认的域名地址，文件位于根目录.env.development 里边一项改成，这里只暂时dev配置环境的。
VUE_APP_BASE_API = 'http://127.0.0.1:5000/'
运行测试
重新启动运行前端，尝试登录，查看登录状态和chrome调试模式的请求返回，你会发现并没有成功，看flask日志输出显示类似 "OPTIONS /api/user/login HTTP/1.1" 200 提示，这是由于跨域问题，简单说就是浏览器一种安全机制，至于详细的后续单独再说，这里先一个通用解决办法就是在python flask中允许跨域就好了。
跨域解决
安装python依赖包flask-cors
pip install flask-cors头部引用
from flask_cors import CORS 允许代码
app = Flask(__name__)
CORS(app, supports_credentials=True)最终联调
重新运行后端服务 python run.py
重新运行前端服务 npm run dev
输入 admin / 123456 进行登录
OK 前后端联调成功
好了，到此我们一个简单的登录流程就实现了，当然这只是一个很简单的登录接口流程，目的是为了让你掌握如何实现前端和后端接口登录的一个实现过程，后期我们会将登录这里进行重构使用更加保密的方式，密码通过Md5或者哈希的方式进行加密，这种方式才是我们目前所有市面上使用的通过登录功能，当然不着急，还是那句话，勋勋渐进，慢慢一步一步走。