使用HBuilder+MUI+Flask后端服务器框架+Mongodb数据库开发手机APP
1.开发准备HBuilder:
1.下载安装HBuilder
2.创建APP项目
3.代码示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="main">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" id="emil">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" id="setting">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label" >设置</span>
</a>
</nav>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init({
subpages:[{
url:'main.html',
id:'main.html',
styles:{
top:"0px",
bottom:"50px"
},
extras:{}
}]
});
document.getElementById('main').addEventListener('tap',function () {
mui.openWindow('main.html','main',{
styles:{
top:"0px",
bottom:"50px"
} }); })
document.getElementById('setting').addEventListener('tap',function () {
mui.openWindow({
url:"login.html",
id:"login.html",
styles:{
top:"0px",
bottom:"50px"
}
});
})
</script>
</body>
</html>
首页HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://192.168.11.181:8600/img1">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://192.168.11.181:8600/img2">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://192.168.11.181:8600/img3">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://192.168.11.181:8600/img4">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div> <ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul> <ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
</ul>
</div>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
主页
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登陆</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" id="pwd" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" id="login">登录</button>
<button type="button" class="mui-btn mui-btn-danger" id="sigin">注册</button>
</div>
</form> </div>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init() document.getElementById('login').addEventListener('tap',function () {
var username = document.getElementById("username").value;
var pwd = document.getElementById("pwd").value;
mui.post('http://192.168.11.181:8600/login',{
username:username,
pwd:pwd,
},function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
if (data.erromsg==null) {
mui.toast(data.msg)
mui.openWindow('index.html','index',{})
mui.openWindow('main.html','main',{})
} else{
mui.toast(data.erromsg)
}
},'json'
);
})
document.getElementById('sigin').addEventListener('tap',function () {
mui.openWindow('sigin.html','sigin',{
styles:{
top:"0px",
bottom:"50px"
}
});
}) </script>
</body>
</html>
登陆HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">注册</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" id="pwd" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-input-row">
<label>确认密码</label>
<input type="password" id="repwd" class="mui-input-password" placeholder="请确认密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" id="login">登录</button>
<button type="button" class="mui-btn mui-btn-danger" id="sigin">注册</button>
</div>
</form>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
document.getElementById('sigin').addEventListener('tap',function () {
var username = document.getElementById("username").value;
var pwd = document.getElementById("pwd").value;
var repwd = document.getElementById("repwd").value;
mui.post('http://192.168.11.181:8600/sigin',{
username:username,
pwd:pwd,
repwd:repwd
},function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
if (data.erromsg==null) {
mui.toast(data.msg)
} else{
mui.toast(data.erromsg)
}
},'json'
);
})
document.getElementById('login').addEventListener('tap',function () {
mui.openWindow('login.html','login',{
styles:{
top:"0px",
bottom:"50px"
}
});
}) </script>
</body>
</html>
注册HTML
写前端代码可以参考mui官网文档:http://dev.dcloud.net.cn/mui
2.后端代码:
1.MongoDB数据库准备
2.Python中配置MongoDB
示例代码
import pymongo
conn = pymongo.MongoClient('127.0.0.1',27017)
MONGODB = conn["tuling"] # tuling 是数据库的名字
mongodb
from flask import Flask, request, render_template, redirect, jsonify,send_file
from db import MONGODB app = Flask(__name__) @app.route('/login',methods=['POST'])
def login():
username = request.form.get('username')
pwd = request.form.get('pwd')
ret = list(MONGODB.user.find({"name":username},{'_id':0}))
if pwd == ret[0].get('pwd'):
return jsonify({"msg":"登陆成功","erromsg":None})
else:
return jsonify({'msg':"登陆失败","erromsg":',密码输入错误'}) @app.route('/sigin',methods=['POST'])
def sigin():
username = request.form.get('username')
pwd = request.form.get('pwd')
re_pwd = request.form.get('repwd')
if pwd == re_pwd:
MONGODB.user.insert_one({'name':username,'pwd':re_pwd})
return jsonify({"msg":"注册成功","errormsg":None})
else:
return jsonify({"msg": "注册失败", "errormsg": '两次密码输入的不一样'}) @app.route('/img1')
def img1():
return send_file('.\static\img\img1.png') @app.route('/img2')
def img2():
return send_file('.\static\img\img2.png') @app.route('/img3')
def img3():
return send_file('.\static\img\img3.png') @app.route('/img4')
def img4():
return send_file('.\static\img\img4.png') if __name__ == '__main__':
app.run('0.0.0.0',8600)
Python 逻辑代码
3.在模拟器上运行:
修改端口.
之后点击运行即可
4.在真机上运行,
1.确保手机USB调试打开,下载一个应用宝,能连接上手机即可
2.运行即可
3.手机和电脑需在同一个局域网内,方可连上服务器
使用HBuilder+MUI+Flask后端服务器框架+Mongodb数据库开发手机APP的更多相关文章
- MongoDB 数据库开发规范
MongoDB 数据库开发规范 转载自-落雨_ https://developer.aliyun.com/article/255536 简介: mongoDB库的设计 mongodb数据库命名规范:d ...
- 用mui框架开发手机app项目实践中的那些事儿
http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是j ...
- 爬虫——Scrapy框架案例一：手机APP抓包
以爬取斗鱼直播上的信息为例: URL地址:http://capi.douyucdn.cn/api/v1/getVerticalRoom?limit=20&offset=0 爬取字段:房间ID. ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
- MUI框架开发HTML5手机APP
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发
经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...
- hbuilder 手机app开发系列（一）
最佳答案好水啊,实在看不过眼,首先apicloud是一个框架,hbuidler是ide工具,两者没什么可比性.我来推荐一个国外免费开源的项目吧,Ionic framework,我之所以推荐它是因为它支 ...
- 基于C#的MongoDB数据库开发应用（4）--Redis的安装及使用
在前面介绍了三篇关于MongoDB数据库的开发使用文章,严格来讲这个不能归类于MongoDB数据库开发,不过Redis又有着和MongoDB数据库非常密切的关系,它们两者很接近,Redis主要是内存中 ...
随机推荐
- web框架开发-Django简介
MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...
- Mysql共享锁、排他锁、悲观锁、乐观锁及其使用场景
一.相关名词 |--表级锁(锁定整个表) |--页级锁(锁定一页) |--行级锁(锁定一行) |--共享锁(S锁,MyISAM 叫做读锁) |--排他锁(X锁,MyISAM 叫做写锁) |--悲观锁( ...
- 用CMD打开chrome并导航到百度(golang)
首选在cmd中输入(注意:根据你的电脑路径修改,可能是Progra~1): C:\Progra~\Google\Chrome\Application\chrome.exe www.baidu.com ...
- android开发学习 ------- 关于getSupportFragmentManager()不可用的问题
在Android开发中,少不了Fragment的运用. 目前在实际运用中,有v-4包下支持的Fragment以及app包下的Fragment,这两个包下的FragmentManager获取方式有点区别 ...
- PHP命令执行与防范
命令执行漏洞是指攻击者可以随意执行系统命令,是高危漏洞之一. 命令连接符:& && || | 如:ping www.baidu.com && ne ...
- Centos7 利用crontab定时执行任务及配置方法
crond是什么? crond 和crontab是不可分割的.crontab是一个命令,常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于 ...
- 【学习总结】GirlsInAI ML-diary day-7-数据类型转换
[学习总结]GirlsInAI ML-diary 总 原博github链接-day7 回顾之前见到的常见数据类型 int 整数 float 浮点数 bool 布尔值 string 字符串 ... 1- ...
- spark-MLlib之线性回归
>>提君博客原创 http://www.cnblogs.com/tijun/ << 假定线性拟合方程: 提君博客原创 变量 Xi 是 i 个变量或者说属性 参数 ai 是 ...
- JAVA String类型和原型模式
如上例所述,变量a,b和它们的值10,20都是存在栈里面,声明的所以String类型的引用也都是存在栈里.而字符串abc是存在字符串常量池中,new出来的String对象则是存在堆里. String ...
- Eclipse maven hadoop -- java.io.IOException: No FileSystem for scheme: hdfs
2019-01-10 概述 今天在Windows系统下新安装了Eclipse和maven的环境,想利用Maven构建一个Hadoop程序的,结果却发现程序运行时一直报 “No FileSystem f ...