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

上进小菜猪 发表于 2022/04/01 11:35:23 2022/04/01
【摘要】 🍋欢迎关注🍋[APP开发从0到1]🍋共同努力 一,前言已经连续肝了好几天了哈,在尝试前端本地数据库之后,感觉涉及的知识面太广,现在尝试了一下前后端分离,没想到成功了。关于前后端分离开发的优点其实是很大的。前后端分离就是将一个应用拆成两个,前端应用和后端应用以 JSON 格式进行数据交互。 二,后端配置采用Flask框架,这个框架是轻量级的哈,非常的好学。我们先来引入库:from fla...

🍋欢迎关注
🍋[APP开发从0到1]
🍋共同努力

一,前言

已经连续肝了好几天了哈,在尝试前端本地数据库之后,感觉涉及的知识面太广,现在尝试了一下前后端分离,没想到成功了。关于前后端分离开发的优点其实是很大的。
前后端分离就是将一个应用拆成两个,前端应用和后端应用以 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数据,更加适合于前后端传输吧,之后会学习这个数据库。之后会写一篇数据库的文章!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。