一，前言

已经连续肝了好几天了哈，在尝试前端本地数据库之后，感觉涉及的知识面太广，现在尝试了一下前后端分离，没想到成功了。关于前后端分离开发的优点其实是很大的。
前后端分离就是将一个应用拆成两个，前端应用和后端应用以 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));

四，测试

用手机模拟器打开：
我们输入一个错误的密码：

我们输入一个正确的密码：

成功登录。

五，后台输出

六，注意

在本地开启的，需要时间或者模拟器处于同一个局域网才可以正常访问后台数据。

后言

因为前后端交互的话，传输是json格式，所以我在考虑使用MongoDB，说到这个数据库，他属于nosql，储存方式也与传统的数据库不一样，它更加亲和与json数据，更加适合于前后端传输吧，之后会学习这个数据库。之后会写一篇数据库的文章！