碼上歡樂
相關內容    簡體    繁體

使用HBuilder+MUI+Flask后端服務器框架+Mongodb數據庫開發手機APP

本文轉載自   查看原文   2019-03-27 19:57   530    APP開發/ 前端/ 人工智能/ Python

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數據庫准備
參考:https://www.cnblogs.com/changtao/p/10609908.html
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.手機和電腦需在同一個局域網內,方可連上服務器

　　


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 用mui框架開發手機app項目實踐中的那些事兒 【Python】開發手機APP 基於HBuilder開發手機APP-主頁/跳轉頁面/切換選項卡 Hbuilder app開發，使用mui.ajax和服務器交互 HBuilder mui 手機app開發 Android手機app開發 ios手機app開發 打開新頁面 預加載頁面 關閉頁面 uni-app開發手機App時使用vant 開發手機APP的神器 --- ionic hbuilder 手機app開發系列（一） 用Javascript跨平台開發手機Native App MUI框架開發HTML5手機APP(一)--搭建第一個手機APP
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM