APP开发之进阶完善篇【题小满APP】【MUI+Flask+MongoDB+H5】
source link: https://blog.51cto.com/u_15568258/5951277
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Table of Contents
👨💻作者简介: 我是上进小菜猪。
📗✉️如果文章知识点有错误的地方,请指正! 和大家一起学习一起进步🎈
📗PS：全网各个平台ID为上进小菜猪的都是我。
最近几天都在加紧开发app，没有花时间去记录博客，现在刚完成了一个游戏积分排名的功能。暂时闲下来记录一下这几天写的东西，当然有些开发的细节记不太清楚了，大体的记录一下。
二，增加签到模块
2.1，前端设计
前端设计比较简单，我充当UI设计了一张一般般的图片，之后设计了一个登录按钮。
写了应该js监控点击事件，作用于前后端的交互。
先来一个效果图吧：
document.getElementById('sign').addEventListener('tap', function() {
mui.post('http://XXXXXXXXXXX/sign', {
"flag": '1',
}, function(data) {
console.log("从服务端返回数据,准备判断");
console.log(data.flagx);
if(data.flagx=='1'){
$('.dialog').fadeIn()
flag=false;
};
if(flag)
{
if(data.flagx=='0')
{
mui.toast("题小满提醒您：今天已经签到过了，不要贪心哦！");
};
}
上面代码块解释：
因为网络安全的原因，发起请求端口已经去掉了。
这里就是一个简单的Ajax。其实没有什么需要讲的。
注意一下mui.post是框架封装的一个ajax，其实是差不多的。
这里写了一个if(flag)的作用是防止多次请求，返回多次，爆了一个不太友好的bug问题。写了一个标识排除了一下子。
2.2，后端设计
后端设计到的数据库内容比较多。
数据库设计：
增加了一个sign_day字段。这个字段我设计为了应该字符串以；来分割不同的日期值。（PS：这里的作用是为了判断今天或者某天的日期是不是已经签到过了，防止刷分。）
遇到一个bug：
因为之前有了一定的用户数据，如果这个时候来获取到sign_day就会因为该条信息没有这个字段而报错。
处理方法：
try:
judge['sign_day']
except:
db.mongo.update_one(
find_name,
{'$set':{"sign_day":None}
}
)
x写一个尝试获取，如果报错说明这是以前的用户，我们给他加一个字段。
now = str(datetime.date.today())
上述代码解释：
这里我使用了python的date模块，获取到今天的日期，转化为str存储到now变量里。
if(now in str(judge['sign_day'])):
return jsonify({"stayus":200,"mag":"今天已经签到过了哦！","flagx":'0'})
上述代码块解释：
这里是一个判断分支：
如果今天的日期已经在sign_day字段里存在了，说明今天已经签到过了，这样的话不会执行添加积分操作。
根据上文：其他情况的话：
if(judge['sign_day']==None):
sign_str=now
上述代码块解释：
这里这样设计的原因是：因为我的数据库是用；为分隔符来标识的，所以当某一个用户是第一次进行签到操作的话，我们需要直接赋值now变量现在的目标值。
elif(judge['sign_day']!=None):
sign_str=judge['sign_day']
sign_str=sign_str+";"+now
上述代码块解释：
这一块对应上文的if语句。这里当然就是某一个用户不是第一次进行签到操作。
这里当然要进行一个；的操作来区分不同的日期。
sign_jifeng=judge['jifeng']+8
我这里设计的是如果签到成功的话，该用户的积分加8分。
db.mongo.update_one(
find_name,
{'$set':{"sign_day":sign_str,"jifeng":sign_jifeng}
}
)
上述代码块解释：
当然，上述需要做的都已经做完了，接下来就是一个更新数据库的操作。
学过MongoDB的人都知道，我们以用户名为目标建，更新我们的sign_day【存储日期字段】和jifeng【签到成功积分+8的操作】。
return jsonify({"stayus":200,"mag":"成功签到，计入积分！","flagx":'1'})
最后我们处理完后端的一系列操作，传递值给前端，做为响应。
此部分成功上线通过测试！
三，增加日历功能
此处，模块为存前端建设，主要运用了JavaScript语言处理一系列的问题操作。
先上效果图：
部分代码展示：
这部分是一个日历的动态算法，没有什么好说的。
四，近期更新日志
近期更新功能：
————————————————————————————————
1.增加签到功能
2，增加日历功能
3，增加游戏模块
4，增加翻译功能 （申请了百度翻译api）
5，增加天气功能（申请了和风天气api）
6，增加填空答题功能
7，样式优化
五，本文内容代码附录：
后端主要代码：
# 签到模块
@app.route("/xxx",methods=['POST','GET'])
def xxx():
find_name={"username":session['username']}
judge=db.mongo.find_one(find_name)
try:
judge['sign_day']
except:
db.mongo.update_one(
find_name,
{'$set':{"sign_day":None}
}
)
flag = request.form.get('flag')
now = str(datetime.date.today())
sign_str=''
if(now in str(judge['sign_day'])):
return jsonify({"stayus":200,"mag":"今天已经签到过了哦！","flagx":'0'})
else:
if(judge['sign_day']==None):
sign_str=now
elif(judge['sign_day']!=None):
sign_str=judge['sign_day']
sign_str=sign_str+";"+now
sign_jifeng=judge['jifeng']+8
db.mongo.update_one(
find_name,
{'$set':{"sign_day":sign_str,"jifeng":sign_jifeng}
}
)
return jsonify({"stayus":200,"mag":"成功签到，计入积分！","flagx":'1'})
前端主要代码：
<script type="text/javascript">
var flag=true;
mui.init();
if(flag)
{
document.getElementById('sign').addEventListener('tap', function() {
mui.post('http://XXXXXXXXXX/sign', {
"flag": '1',
}, function(data) {
console.log("从服务端返回数据,准备判断");
console.log(data.flagx);
if(data.flagx=='1'){
$('.dialog').fadeIn()
flag=false;
};
if(flag)
{
if(data.flagx=='0')
{
mui.toast("题小满提醒您：今天已经签到过了，不要贪心哦！");
};
}
// mui.openWindow({
// url: "./login.html",
// id: "./login.html",
// createNew: false
// });
}, 'json');
})
};
//签到
// $('#sign').click(function(){
// $('.dialog').fadeIn()
// // 以下为模拟签到，具体应该根据后端返回的数据来处理逻辑
// var index = $('.sign-info .num span.active').length;
// console.log(index)
// })
// 关闭弹窗
$('.dialog-close,.dialog .mask').click(function(){
$('.dialog').fadeOut()
})
// 关闭弹窗
// $('.dialog-close,.dialog .mask').click(function() {
// $('.dialog').fadeOut()
// })
// mui.plusReady(function() {
// var primaryBack = mui.back;
// mui.back = function() {
// var wobj = plus.webview.getWebviewById("../index.html");
// wobj.reload(true);
// primaryBack();
// }
// })
</script>
本次就先记录一下前俩个更新内容，太多了写不完，之后有时间我继续记录哈。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK