webapp 前后端分离开发【MUI+Flask】

2022 年 6 月 03 日
本文字数：1179 字
阅读完需：约 4 分钟

一，前言

已经连续肝了好几天了哈，在尝试前端本地数据库之后，感觉涉及的知识面太广，现在尝试了一下前后端分离，没想到成功了。关于前后端分离开发的优点其实是很大的。前后端分离就是将一个应用拆成两个，前端应用和后端应用以 JSON 格式进行数据交互。

二，后端配置

采用 Flask 框架，这个框架是轻量级的哈，非常的好学。我们先来引入库：

from flask import Flask,request,jsonify

复制代码

解释：因为传入前端是 json 数据，所以采用 jsonify 方式传值。

写一下基本路由:

app = Flask(__name__)@app.route("/login",methods=['POST'])

复制代码

前端那边是 POST 方式。

username = request.form.get("username")password = request.form.get("password")

复制代码

我们 get 到它的值哈，把它存起来。

先不建立数据库哈。 关于数据库，我正在纠结使用 sqllite 还是 MongoDB，因为 MongoDB 传 json 有很大的优势哈，相对于比较方便，但是没有接触过，还需要抽出半天时间来学习一下皮毛。

我们先用简单的方法，设置一个账号和密码。，账号密码暂时设为上进小菜猪和 123456.只用与测试哈。

if username=="上进小菜猪" and password == "123456":        return jsonify({"status": 200, "msg":"欢迎登录"})else:        return jsonify({"status": 201, "msg":"密码错误"})

复制代码

最后设置端口号：

if __name__=='__main__':    app.run("0.0.0.0",9527,debug=True)

复制代码

三，前端配置 Ajax

我们来一起查看一下 mui 文档文档里面是这样写的，我复制到下面，这个是官方给提供的参考模板，说白了就是一个原生的 AJAX 是吧。和网页端的没有任何区别的。服务器返回响应，根据响应结果，分析是否登录成功；

mui.post('http://server-name/login.php',{    username:'username',    password:'password'  },function(data){    //服务器返回响应，根据响应结果，分析是否登录成功；    ...  },'json');

复制代码

我们按照格式来写一下哈：

console.log("登录按钮");     var username = document.getElementById("username").value;     var password = document.getElementById("password").value;     //提交     mui.post('http://xxxxxx:xxxxx/login',{         "username":username,         "password":password       },function(data){         console.log("从服务端返回数据,准备判断");         console.log(data.code);         console.log(JSON.stringify(data));

复制代码