python 全棧開發，Day126(創業故事,軟件部需求,內容採集,顯示內容圖文列表,MongoDB數據導入導出JSON)

時間 2019-11-17

標籤 python 開發 day126 day 創業故事軟件需求內容採集顯示圖文列表 mongodb 數據導入導出 json 欄目 Python 简体版

原文原文鏈接

做業講解

下載代碼：javascript

HBuilder APP和flask後端登陸css

連接：https://pan.baidu.com/s/1eBwd1sVXTNLdHwKRM2-ytg 密碼：4pcwhtml

如何打開APP和後端flask，請參數昨天的文章前端

進入flask後端程序目錄，建立文件setting.pyhtml5

設置MongoDB信息，以及json返回格式java

import pymongo

client = pymongo.MongoClient(host="127.0.0.1", port=27017)
MONGO_DB = client["bananabase"]


RET = {
    # 0: false 2: True
    "code": 0,
    "msg": "",  # 提示信息
    "data": {}
}

View Code

修改後端的 manager.pygit

from flask import Flask, request,jsonify
from setting import MONGO_DB
from setting import RET

app = Flask(__name__)


@app.route('/')
def hello_world():
    return 'Hello World!'


@app.route('/login',methods=["POST"])
def login():
    username = request.form.get("username")
    password = request.form.get("password")
    if username == "xiao" and password == "123":
        return "歡迎登錄"

    return "登錄失敗"


@app.route('/reg',methods=["POST"])
def reg():
    """
    註冊
    :return: {"code":0,"msg":"","data":""}
    """
    try:
        username = request.form.get("username")
        password = request.form.get("password")
        age = request.form.get("age")
        nickname = request.form.get("nickname")
        gender = request.form.get("gender")
        phone = request.form.get("phone")

        user_info = {
            "username": username,
            "password": password,
            "age": age,
            "nickname": nickname,
            "gender": gender,
            "phone": phone
        }

        res = MONGO_DB.users.insert_one(user_info)
        user_id = str(res.inserted_id)

        RET["code"] = 0
        RET["msg"] = "註冊成功"
        RET["data"] = user_id
    except Exception as e:
        RET["code"] = 1
        RET["msg"] = "註冊失敗"

    return jsonify(RET)

if __name__ == '__main__':
    app.run("0.0.0.0", 9527, debug=True)

View Code

此時，項目結構以下：github

./
├── manager.py
├── setting.py
├── static
└── templates

全局變量

因爲多個html頁面，須要引用同一個變量。這個時候，須要定義一個全局變量！如何定義呢？web

默認包含了mui的html文件都導入mui.js文件。那麼將變量寫在mui.js中，就能夠實現全部頁面共享了！mongodb

因爲開發環境的電腦的IP是自動獲取的，隔一段時間，就須要修改一次。那麼html中發送POST請求時，URL中的IP地址不能寫死！

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

修改mui.js，定義全局變量，務必使用windows

 * MUI核心JS
 * @type _L4.$|Function
 */

window.serv = "http://192.168.11.85:9527"

window.styles = {
    top: "0px",
    bottom: "50px"
};

...

因爲代碼過多，用...省略了！

特別注意：雖然HBuilder,夜神模擬器,Flask後端，所有都在同一臺電腦。可是window.serv的IP地址不能是127.0.0.1。

不然點擊註冊時徹底沒有反應，後端也收不到數據！由於它發給模擬器自己了！

md5.js

MD5.js是經過前臺js加密的方式對密碼等私密信息進行加密的工具

前端註冊頁面的密碼，發送給後端時，須要用md5加密。防止密碼在網絡中被黑客截獲！須要用到md5.js

打開bootcdn網頁，搜索md5.js

https://www.bootcdn.cn/blueimp-md5/

下載md5.min.js，放到MyApp目錄中的js文件夾中！

修改reg.html，導入js，並增長相關js代碼，發送POST請求

<!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">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">用戶註冊</h1>
        </header>
        <div class="mui-content">
            <form class="mui-input-group" style="margin-top: 15px;">
                <div class="mui-input-row">
                    <label>用戶名</label>
                    <input type="text" class="mui-input-clear" placeholder="請輸入用戶名" id="username">
                </div>
                <div class="mui-input-row">
                    <label>密碼</label>
                    <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="pwd">
                </div>
                <div class="mui-input-row">
                    <label>確認密碼</label>
                    <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="repwd">
                </div>
                <div class="mui-input-row">
                    <label>暱稱</label>
                    <input type="text" class="mui-input-clear" placeholder="請輸入暱稱" id="nickname">
                </div>
                <div class="mui-input-row mui-radio mui-left">
                    <label>男</label>
                    <input name="gender" type="radio" value="1">
                </div>
                <div class="mui-input-row mui-radio mui-left">
                    <label>女</label>
                    <input name="gender" type="radio" value="2" checked>
                </div>
                <div class="mui-input-row">
                    <label>年齡</label>
                    <input type="text" class="mui-input-clear" placeholder="請輸入年齡" id="age">
                </div>
                <div class="mui-input-row">
                    <label>電話</label>
                    <input type="text" class="mui-input-clear" placeholder="請輸入電話" id="phone">
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary" id="reg">註冊</button>
                    <button type="button" class="mui-btn mui-btn-danger mui-action-back">返回</button>
                </div>
            </form>
        </div>
    </body>

    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <!--加載md5-->
    <script src="js/md5.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        mui.init()
        // id爲reg的標籤綁定點擊事件
        document.getElementById("reg").addEventListener("tap",function(){
            
            // 獲取全部性別列表
            var gender_list = document.getElementsByName("gender")

            var pwd = document.getElementById("pwd").value;  //密碼
            
            if (pwd.length == 0){
                mui.toast("密碼不能爲空")
                return
            }
            
            var repwd = document.getElementById("repwd").value;  //確認密碼
            // 判斷2次密碼
            if(pwd != repwd) {
                mui.toast("兩次密碼輸入不一致")
                return
            }
            // md5方法爲md5.min.js內置方法
            pwd = md5(pwd);  //使用md5方法對密碼作md5

            var username = document.getElementById("username").value;  //用戶名
            var age = document.getElementById("age").value;  //年齡
            var nickname = document.getElementById("nickname").value;  //暱稱
            var phone = document.getElementById("phone").value;  //電話

            var gender = null;  //性別
            // 遍歷性別列表
            for(var i = 0; i < gender_list.length; i++) {
                // checked表示選中，當標籤被被選中時
                if(gender_list[i].checked) {
                    // 獲取選中的性別，i表示索引
                    gender = gender_list[i].value;
                }
            }
            
            // 發送POST請求
            mui.post(
                // window.serv + "/reg"表示 http://192.168.11.85:9527/reg
                window.serv + "/reg", {
                    // 下面是須要發送的鍵值對
                    username: username,
                    password: pwd,
                    gender: gender,
                    age: age,
                    nickname: nickname,
                    phone: phone
                },
                function(data){
                    // 因爲後端返回的是json，這裏須要反序列化
                    console.log(JSON.stringify(data))
                    if (!data.code){
                        mui.toast(data.msg)
                    }else{
                        mui.toast(data.msg)
                    }
                }
            )
            
        })
    </script>

</html>

View Code

使用模擬器訪問

底部會有提示

使用客戶端打開MongoDB，查看數據

查看HBuilder控制檯輸出：

 {"code":0,"data":"5b9bb768e1253281608e96eb","msg":"註冊成功"} at reg.html:114

因爲後端的登陸邏輯，用戶名和密碼寫死了，須要從MongoDB中獲取

修改 manager.py

from flask import Flask, request,jsonify
from setting import MONGO_DB
from setting import RET

app = Flask(__name__)


@app.route('/')
def hello_world():
    return 'Hello World!'


@app.route('/login',methods=["POST"])
def login():
    """
    登錄驗證
    :return: settings -> RET
    """
    try:
        RET["code"] = 1
        RET["msg"] = "用戶名或密碼錯誤"
        RET["data"] = {}

        username = request.form.get("username")
        password = request.form.get("password")

        user = MONGO_DB.users.find_one({"username": username, "password": password})

        if user:
            # 因爲user中的_id是ObjectId對象,須要轉化爲字符串
            user["_id"] = str(user.get("_id"))
            RET["code"] = 0
            RET["msg"] = "歡迎登錄"
            RET["data"] = {"user_id": user.get("_id")}

    except Exception as e:
        RET["code"] = 1
        RET["msg"] = "登錄失敗"

    return jsonify(RET)


@app.route('/reg',methods=["POST"])
def reg():
    """
    註冊
    :return: {"code":0,"msg":"","data":""}
    """
    try:
        username = request.form.get("username")
        password = request.form.get("password")
        age = request.form.get("age")
        nickname = request.form.get("nickname")
        gender = request.form.get("gender")
        phone = request.form.get("phone")

        user_info = {
            "username": username,
            "password": password,
            "age": age,
            "nickname": nickname,
            "gender": gender,
            "phone": phone
        }

        res = MONGO_DB.users.insert_one(user_info)
        user_id = str(res.inserted_id)

        RET["code"] = 0
        RET["msg"] = "註冊成功"
        RET["data"] = user_id
    except Exception as e:
        RET["code"] = 1
        RET["msg"] = "註冊失敗"

    return jsonify(RET)

if __name__ == '__main__':
    app.run("0.0.0.0", 9527, debug=True)

View Code

修改 login.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" style="margin-top: 15px;">
                    <label>用戶名</label>
                    <input type="text" class="mui-input-clear" placeholder="請輸入用戶名" id="username">
                </div>
                <div class="mui-input-row">
                    <label>密碼</label>
                    <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="pwd">
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-red" id="login">登錄</button>
                    <button type="button" class="mui-btn mui-btn-green" id="reg">註冊</button>
                </div>
            </form>
        </div>
    </body>

    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <!--加載md5-->
    <script src="js/md5.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        mui.init()
        document.getElementById("login").addEventListener("tap", function() {
            var uname = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;
            pwd = md5(pwd);
            
            mui.post(
                window.serv + "/login", {
                    username: uname,
                    password: pwd
                },
                function(data) {
                    // 因爲後端返回的是json，這裏須要反序列化
                    console.log(JSON.stringify(data))
                    if (!data.code){
                        mui.toast(data.msg)
                    }else{
                        mui.toast(data.msg)
                    }
                }
            );
        });

        document.getElementById("reg").addEventListener("tap", function() {
            mui.openWindow({
                url: "reg.html",
                id: "reg.html"
            })
        })
    </script>

</html>

View Code

因爲MongoDB中的用戶表的密碼字段，使用了md5加密。因此這裏發送給後端的密碼，也須要md5加密

從新登陸，輸入正確的用戶名和密碼

底部提示

做業要求，登陸成功後，將用戶ID返回給前端，而且由index頁面打印歡迎{用戶ID}登錄

這個時候，須要使用開火(fire)事件

修改 login.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" style="margin-top: 15px;">
                    <label>用戶名</label>
                    <input type="text" class="mui-input-clear" placeholder="請輸入用戶名" id="username">
                </div>
                <div class="mui-input-row">
                    <label>密碼</label>
                    <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="pwd">
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-red" id="login">登錄</button>
                    <button type="button" class="mui-btn mui-btn-green" id="reg">註冊</button>
                </div>
            </form>
        </div>
    </body>

    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <!--加載md5-->
    <script src="js/md5.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        mui.init()
        document.getElementById("login").addEventListener("tap", function() {
            var uname = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;
            pwd = md5(pwd);
            
            mui.post(
                window.serv + "/login", {
                    username: uname,
                    password: pwd
                },
                function(data) {
                    // 因爲後端返回的是json，這裏須要反序列化
                    console.log(JSON.stringify(data))
                    if (!data.code){
                        // mui.toast(data.msg)
                        // index頁面的WebviewById爲HBuilder
                        var index = plus.webview.getWebviewById("HBuilder")
                        // 觸發fire事件,發送數據
                        mui.fire(index,"login",{msg:data.msg + data.data.user_id})
                    }else{
                        mui.toast(data.msg)
                    }
                }
            );
        });

        document.getElementById("reg").addEventListener("tap", function() {
            mui.openWindow({
                url: "reg.html",
                id: "reg.html"
            })
        })
    </script>

</html>

View Code

修改 index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" id="index">
                <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">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">郵件</span>
            </a>
            <a class="mui-tab-item" id="login">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">設置</span>
            </a>
        </nav>
    </body>
    <script type="text/javascript" charset="utf-8">
        mui.init({
            subpages: [{
                url: "main.html",
                id: "main.html",
                styles: window.styles
            }]
        });
        mui.plusReady(function() {
            console.log(JSON.stringify(plus.webview.currentWebview()))
        });

        document.getElementById("phone").addEventListener("tap", function() {
            mui.toast("你點擊了電話按鈕");

            mui.openWindow({
                url: "phone.html",
                id: "phone.html",
                styles: window.styles,
                extras: {
                    user_id: 123456
                }
            })
        })

        document.getElementById("index").addEventListener("tap", function() {
            mui.openWindow({
                url: "main.html",
                id: "main.html",
                styles: window.styles
            })
        })

        document.getElementById("login").addEventListener("tap", function() {
            mui.openWindow({
                url: "login.html",
                id: "login.html",
                styles: window.styles
            })
        })
        
        document.addEventListener("login",function(data){
            // fire事件接收消息，使用data.detail
            // index是爲作顯示區分
            mui.toast("index"+data.detail.msg)
        })
    </script>

</html>

View Code

從新登陸，底部提示，效果以下：

做業需求基本上，就完成了！

可是用戶登陸以後，應該跳轉到用戶主頁纔對！

Storage

Storage模塊管理應用本地數據存儲區，用於應用數據的保存和讀取。應用本地數據與localStorage、sessionStorage的區別在於數據有效域不一樣，前者可在應用內跨域操做，數據存儲期是持久化的，而且沒有容量限制。經過plus.storage可獲取應用本地數據管理對象。

方法：

getLength: 獲取應用存儲區中保存的鍵值對的個數
getItem: 經過鍵(key)檢索獲取應用存儲的值
setItem: 修改或添加鍵值(key-value)對數據到應用數據存儲中
removeItem: 經過key值刪除鍵值對存儲的數據
clear: 清除應用全部的鍵值對存儲數據
key: 獲取鍵值對中指定索引值的key值

參考連接：

http://www.html5plus.org/doc/zh_cn/storage.html

新建一個 user_info.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">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell"><span>用戶名</span><span id="username" class="mui-pull-right">111</span></li>
                <li class="mui-table-view-cell"><span>暱稱</span><span id="nickname" class="mui-pull-right">22</span></li>
            </ul>

            <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="logout">退出登錄</button>
        </div>

    </body>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        mui.init()
        mui.back = function() {};
        mui.plusReady(function() {
            // 當前web視圖
            var Sdata = plus.webview.currentWebview();
            mui.post(
                window.serv + "/user_info", {
                    // Sdata.user_id,這裏面的user_id是由login.html傳遞過來的
                    user_id: Sdata.user_id
                },
                function(data) {
                    console.log(JSON.stringify(data));
                    // 修改頁面的text屬性
                    document.getElementById("username").innerText = data.username;
                    document.getElementById("nickname").innerText = data.nickname;
                }
            )
        })

        document.getElementById("logout").addEventListener("tap", function() {
            // 刪除storage裏面的user屬性
            plus.storage.removeItem("user")
            // 跳轉頁面login.html
            mui.openWindow({
                url: "login.html",
                id: "login.html",
                styles: window.styles
            })
        })
    </script>

</html>

View Code

修改login.html，給user_info.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" style="margin-top: 15px;">
                    <label>用戶名</label>
                    <input type="text" class="mui-input-clear" placeholder="請輸入用戶名" id="username">
                </div>
                <div class="mui-input-row">
                    <label>密碼</label>
                    <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="pwd">
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-red" id="login">登錄</button>
                    <button type="button" class="mui-btn mui-btn-green" id="reg">註冊</button>
                </div>
            </form>
        </div>
    </body>

    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <!--加載md5-->
    <script src="js/md5.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        mui.init()
        document.getElementById("login").addEventListener("tap", function() {
            var uname = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;
            pwd = md5(pwd);
            
            mui.post(
                window.serv + "/login", {
                    username: uname,
                    password: pwd
                },
                function(data) {
                    // 因爲後端返回的是json，這裏須要反序列化
                    console.log(JSON.stringify(data))
                    if (!data.code){
                        // mui.toast(data.msg)
                        // index頁面的WebviewById爲HBuilder
                        //var index = plus.webview.getWebviewById("HBuilder")
                        // 觸發fire事件,發送數據
                        //mui.fire(index,"login",{msg:data.msg + data.data.user_id})
                        mui.toast(data.msg + data.data.user_id);
                        //window.location.Storage.setItem("user",data.data.user_id);
                        //修改或添加鍵值(key-value)對數據到應用數據存儲中
                        plus.storage.setItem("user", data.data.user_id);
                        mui.openWindow({
                            url:"user_info.html",
                            id:"user_info.html",
                            styles:window.styles,
                            //使用 extras實現頁面間傳值
                            extras:{
                                // 傳輸user_id
                                user_id:data.data.user_id
                            }
                        });
                    }else{
                        mui.toast(data.msg)
                    }
                }
            );
        });

        document.getElementById("reg").addEventListener("tap", function() {
            mui.openWindow({
                url: "reg.html",
                id: "reg.html"
            })
        })
    </script>

</html>

View Code

修改後端 manager.py，增長uesr_info

from flask import Flask, request,jsonify
from setting import MONGO_DB
from setting import RET
from bson import ObjectId

app = Flask(__name__)


@app.route('/')
def hello_world():
    return 'Hello World!'


@app.route('/login',methods=["POST"])
def login():
    """
    登錄驗證
    :return: settings -> RET
    """
    try:
        RET["code"] = 1
        RET["msg"] = "用戶名或密碼錯誤"
        RET["data"] = {}

        username = request.form.get("username")
        password = request.form.get("password")

        user = MONGO_DB.users.find_one({"username": username, "password": password})

        if user:
            # 因爲user中的_id是ObjectId對象,須要轉化爲字符串
            user["_id"] = str(user.get("_id"))
            RET["code"] = 0
            RET["msg"] = "歡迎登錄"
            RET["data"] = {"user_id": user.get("_id")}

    except Exception as e:
        RET["code"] = 1
        RET["msg"] = "登錄失敗"

    return jsonify(RET)


@app.route('/reg',methods=["POST"])
def reg():
    """
    註冊
    :return: {"code":0,"msg":"","data":""}
    """
    try:
        username = request.form.get("username")
        password = request.form.get("password")
        age = request.form.get("age")
        nickname = request.form.get("nickname")
        gender = request.form.get("gender")
        phone = request.form.get("phone")

        user_info = {
            "username": username,
            "password": password,
            "age": age,
            "nickname": nickname,
            "gender": gender,
            "phone": phone
        }

        res = MONGO_DB.users.insert_one(user_info)
        user_id = str(res.inserted_id)

        RET["code"] = 0
        RET["msg"] = "註冊成功"
        RET["data"] = user_id
    except Exception as e:
        RET["code"] = 1
        RET["msg"] = "註冊失敗"

    return jsonify(RET)


@app.route('/user_info', methods=["POST"])
def user_info():
    user_id = request.form.get("user_id")

    # "password": 0 表示忽略密碼字段
    res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)}, {"password": 0})
    if res:
        res["_id"] = str(res.get("_id"))

    RET["code"] = 0
    RET["msg"] = ""
    RET["data"] = res

    return jsonify(res)

if __name__ == '__main__':
    app.run("0.0.0.0", 9527, debug=True)

View Code

使用模擬器從新登陸，會自動跳轉用戶頁面，效果以下：

底部有提示

總結：

mui的全局變量：
    配置文件,使用windows

    頁面視圖中，使用storage：
    plus.storage.setItem("key",value) # 設置storage全局變量
    plus.storage.getItem("key") # 獲取全局的storage 獲取到了就是 value 獲取不到就是 Null 
    plus.storage.removeItem("key") # 清除storage

1、創業故事

背景人物

老張

老張，它是一個擁有十幾年工做經驗的銷售，40歲左右。籍貫是黑龍江哈爾濱，長子5歲，小女3歲。在北京闖蕩多年，長期與妻小分離。不想讓孩子用手機溝通，由於有輻射。

忽然想孩子了，怎麼辦呢？思考了一問題，留守兒童如何父母建議有效的溝通。對於孩子而言，玩具是陪伴時間最長的。如何讓讓玩具成爲孩子夥伴幫助孩子成長，讓玩具成爲與父母溝通的橋樑？

那麼玩具須要能發送語音消息，玩具還能夠和周圍的小夥伴溝通。造成一個良好的社交圈！

這個時候，打了一個電話給老李

老李

老李，作了幾十年的產品，懂一點技術，37歲。籍貫是陝西西安，女兒4歲。在在北京闖蕩多年，也是留守了本身的女兒在外地。接到老張的電話以後，立馬想到須要技術實現。

這個時候，想到了一個技術比較不錯的閆帥。

閆帥

閆帥，29歲，作了8年的技術，曾經與老李是同事，接到老李電話，一拍即合。

故事劇情

老張從打電話到公司組建，花了3天的時間
老李，負責設計產品。
閆帥介入，想到涉及到硬件了。對於硬件不精通，須要請硬件老師。招兵買馬，組件了技術團隊！

公司成立

1.行政人力財務綜合部 1我的
2.產品部：老李 + UI 小姐姐 2我的
3.軟件部：閆帥 + 1前端 + 後端 3我的
4.硬件部：江老師 + 硬件工程師（1人）
5.營銷部：老張 + 1 個運營

2、軟件部需求

項目的需求明確

1.留守兒童，讓玩具成爲孩子夥伴幫助孩子成長，讓玩具成爲與父母溝通的橋樑（語音消息）
2.能讓玩具成爲一個朋友圈的溝通工具（社交圈）

細化需求

1.玩具：硬件方案--（皮毛(真皮)175，硬件135 ，人工硬件組裝15，皮毛人工60，運費：12，包裝35）訂價:499，初期銷售了20個!
2.讓玩具成爲孩子夥伴
3.幫助孩子成長
4.讓玩具成爲與父母溝通的橋樑（語音消息）
5.若是能讓玩具成爲一個朋友圈的溝通工具（社交圈）

如何開發

閆帥與老李溝通商討如何開發，閆帥開始部署後端
1. 1個前端 + 閆帥 + 1個全棧工程師(先作後端在作前端)
2. 由於閆帥的疏忽嚴厲批評一次前端，前端離職了，全棧工程師包攬了前端的活
3. 全棧工程師通過8個月以後，成爲了公司的產品的大拿

人工智能

爲啥不作ai底層開發?150萬上下，不足以支撐底層開發!
使用第三方：百度ai，體驗不行！花錢買了科大訊飛的服務

3、內容採集

分析數據

主要是針對兒童的，須要採集一些兒歌。這裏使用喜馬拉雅FM，官方地址：

https://www.ximalaya.com/

點擊兒童分類，這裏主要採集一千零一晚上頻道，由於聲音比較好聽。具備優秀的配音員團隊。

https://www.ximalaya.com/zhubo/9216785/

選擇一千零一晚上經典兒歌專輯

https://www.ximalaya.com/ertong/424529/

先來訪問新年偏偏的連接，在新窗口中打開

https://www.ximalaya.com/ertong/424529/7713678

點擊分享

點擊展開獲取聲音連接

點擊微電臺的連接

連接以下：

http://m.ximalaya.com/sound/7713678

打開瀏覽器工具，點擊network

點擊上面的播放按鈕，它會發送網絡請求，點擊7713678.json

查看Preview，它是一個json數據，這個就是咱們須要的。

往下拉，找到play_path，複製地址，網頁直接訪問！

這裏的文件名，進行了加密。單這不重要，只要能訪問就行！

http://audio.xmcdn.com/group12/M00/3B/B2/wKgDXFWcw12y8TanAAtkIsI9320251.m4a

網頁就直接播放了

經過這一段json，咱們須要5個信息

播放地址(play_path)，圖片地址(cover_url)，簡介(intro)，暱稱(nickname)，標題(title)

查看Headers，它的請求地址是

http://m.ximalaya.com/tracks/7713678.json

和前面的7713678.json是同樣的

和專輯頁面的id也是同樣的

那麼經過這個id，拼接路徑，就能夠訪問其餘歌曲了，規律是：

http://m.ximalaya.com/tracks/歌曲id.json

採集數據

這裏使用的是requests模塊。請確保安裝了

pip install requests

新建一個文件 xiaopapa.py

import requests

XMLY_URL = "http://m.ximalaya.com/tracks/"

# 從專輯列表獲取的a標籤的herf屬性
content_url = "/ertong/424529/7713678"

# rsplit從右向左尋找，以某個元素爲中心將左右分割成兩個元素並放入列表中
# rsplit("/",1) 這裏面的1表示分割次數,只分割一次
# [-1] 取最後一個元素
pid = content_url.rsplit("/",1)[-1]  # 獲取歌曲id,也就是7713678

# 拼接url，也就是http://m.ximalaya.com/tracks/7713678.json
xiaopapa_url = XMLY_URL + pid + ".json"


content = requests.get(xiaopapa_url)  # get方式訪問url
# 獲取返回結果，使用content.content。因爲是bytes類型，須要解碼
print(content.content.decode("utf-8"))

View Code

執行輸出，因爲內容過長，這裏省略了一部分

{"id":7713678,"play_path_64":"...","play_path_32":"...","play_path":"http://audio.xmcdn.com/group12/M00/3B/B2/wKgDXFWcw12y8TanAAtkIsI9320251.m4a","duration":92,"title":"新年偏偏","nickname":"一千零一晚上頻"...}

注意：此連接，不要頻繁範圍，不然會封鎖IP的！

f-string

它是一種改進Python格式字符串的新方法。

好消息是，F字符串在這裏能夠節省不少的時間。他們確實使格式化更容易。他們自Python 3.6開始加入標準庫。您能夠在PEP 498中閱讀全部內容。

也稱爲「格式化字符串文字」，F字符串是開頭有一個f的字符串文字，以及包含表達式的大括號將被其值替換。表達式在運行時進行渲染，而後使用__format__協議進行格式化。與往常同樣，Python文檔是您想要了解更多信息的最佳讀物。

如下是f-strings可讓你的生活更輕鬆的一些方法。

簡單例子

語法與str.format()使用的語法相似，可是在一些細節部分，比較囉嗦。看看這是多麼容易可讀：

name = "Eric"
age = 74
res = f"Hello, {name}. You are {age}."
print(res)

執行輸出：

Hello, Eric. You are 74.

使用大寫字母F也是有效的：

res = F"Hello, {name}. You are {age}."

執行輸出，效果同上！

若是你正好使用了Python 3.6，丟棄format()，用f()吧！

上面的xiaopapa.py，輸出的是一個json數據，須要反序列化，獲取須要的5個信息

import requests
import json

XMLY_URL = "http://m.ximalaya.com/tracks/"

# 從專輯列表獲取的a標籤的herf屬性
content_url = "/ertong/424529/7713678"

# rsplit從右向左尋找，以某個元素爲中心將左右分割成兩個元素並放入列表中
# rsplit("/",1) 這裏面的1表示分割次數,只分割一次
# [-1] 取最後一個元素
pid = content_url.rsplit("/",1)[-1]  # 獲取歌曲id,也就是7713678

# 拼接url，也就是http://m.ximalaya.com/tracks/7713678.json
xiaopapa_url = XMLY_URL + pid + ".json"


content = requests.get(xiaopapa_url)  # get方式訪問url
# 獲取返回結果，使用content.content。因爲是bytes類型，須要解碼
content_dict = json.loads(content.content.decode("utf8"))

play_path = content_dict.get("play_path")  # 播放地址
cover_url = content_dict.get("cover_url")  # 圖片地址

intro = content_dict.get("intro")  # 簡介
nickname = content_dict.get("nickname")  # 暱稱
title = content_dict.get("title")  # 標題

print(play_path)
print(cover_url)
print(intro)
print(nickname)
print(title)

View Code

執行輸出：

http://audio.xmcdn.com/group12/M00/3B/B2/wKgDXFWcw12y8TanAAtkIsI9320251.m4a
http://fdfs.xmcdn.com/group9/M04/3B/E1/wKgDZlWcvRKwSOIMAAD3201gPxc590.jpg
【一千零一晚上】經典兒歌
一千零一晚上頻道
新年偏偏

有了這些信息，就能夠下載音頻和圖片了

新建目錄audio和audio_img

此時目錄結構以下：

./
├── audio
├── audio_img
├── manager.py
├── setting.py
├── static
├── templates
└── xiaopapa.py

寫入文件

爲了統一管理，將喜馬拉雅FM的url和文件目錄寫入配置文件

修改setting.py

import pymongo

client = pymongo.MongoClient(host="127.0.0.1", port=27017)
MONGO_DB = client["bananabase"]


RET = {
    # 0: false 2: True
    "code": 0,
    "msg": "",  # 提示信息
    "data": {}
}

XMLY_URL = "http://m.ximalaya.com/tracks/"  # 喜馬拉雅連接

# 文件目錄
import os

AUDIO_FILE = os.path.join(os.path.dirname(__file__), "audio")
AUDIO_IMG_FILE = os.path.join(os.path.dirname(__file__), "audio_img")

View Code

修改manager.py，文件名使用uuid4，防止重名

import requests
import json
import os
import setting
from uuid import uuid4

XMLY_URL = "http://m.ximalaya.com/tracks/"

# 從專輯列表獲取的a標籤的herf屬性
content_url = "/ertong/424529/7713678"
category = "erge"  # 分類

# rsplit從右向左尋找，以某個元素爲中心將左右分割成兩個元素並放入列表中
# rsplit("/",1) 這裏面的1表示分割次數,只分割一次
# [-1] 取最後一個元素
pid = content_url.rsplit("/",1)[-1]  # 獲取歌曲id,也就是7713678

# 拼接url，也就是http://m.ximalaya.com/tracks/7713678.json
xiaopapa_url = XMLY_URL + pid + ".json"


content = requests.get(xiaopapa_url)  # get方式訪問url
# 獲取返回結果，使用content.content。因爲是bytes類型，須要解碼
content_dict = json.loads(content.content.decode("utf8"))

play_path = content_dict.get("play_path")  # 播放地址
cover_url = content_dict.get("cover_url")  # 圖片地址

intro = content_dict.get("intro")  # 簡介
nickname = content_dict.get("nickname")  # 暱稱
title = content_dict.get("title")  # 標題

file_name = f"{uuid4()}"  # 隨機文件名
audio = f"{file_name}.mp3"  # 音頻
image = f"{file_name}.jpg"  # 圖片

audio_file = requests.get(play_path).content  # 訪問音頻連接,獲取二進制數據
with open(os.path.join(setting.AUDIO_FILE, audio), "wb") as f:
    f.write(audio_file)  # 寫入文件

image_file = requests.get(cover_url).content  # 訪問圖片連接,獲取二進制數據
with open(os.path.join(setting.AUDIO_IMG_FILE, image), "wb") as f:
    f.write(image_file)  # 寫入文件

View Code

執行 manager.py，此時audio和audio_img分別多出一個文件

80c5fe21-de1a-4b59-a9c6-cbeb1c2691be.mp3

80c5fe21-de1a-4b59-a9c6-cbeb1c2691be.jpg

寫入 MongoDB 數據庫

誰知道，這2個文件，對應是新年偏偏呢？須要寫入數據庫，這裏採用MongoDB

修改 manager.py

import requests
import json
import os
import setting
from uuid import uuid4

XMLY_URL = "http://m.ximalaya.com/tracks/"

# 從專輯列表獲取的a標籤的herf屬性
content_url = "/ertong/424529/7713678"
category = "erge"  # 分類

# rsplit從右向左尋找，以某個元素爲中心將左右分割成兩個元素並放入列表中
# rsplit("/",1) 這裏面的1表示分割次數,只分割一次
# [-1] 取最後一個元素
pid = content_url.rsplit("/",1)[-1]  # 獲取歌曲id,也就是7713678

# 拼接url，也就是http://m.ximalaya.com/tracks/7713678.json
xiaopapa_url = XMLY_URL + pid + ".json"


content = requests.get(xiaopapa_url)  # get方式訪問url
# 獲取返回結果，使用content.content。因爲是bytes類型，須要解碼
content_dict = json.loads(content.content.decode("utf8"))

play_path = content_dict.get("play_path")  # 播放地址
cover_url = content_dict.get("cover_url")  # 圖片地址

intro = content_dict.get("intro")  # 簡介
nickname = content_dict.get("nickname")  # 暱稱
title = content_dict.get("title")  # 標題

file_name = f"{uuid4()}"  # 隨機文件名
audio = f"{file_name}.mp3"  # 音頻
image = f"{file_name}.jpg"  # 圖片

audio_file = requests.get(play_path).content  # 訪問音頻連接,獲取二進制數據
with open(os.path.join(setting.AUDIO_FILE, audio), "wb") as f:
    f.write(audio_file)  # 寫入文件

image_file = requests.get(cover_url).content  # 訪問圖片連接,獲取二進制數據
with open(os.path.join(setting.AUDIO_IMG_FILE, image), "wb") as f:
    f.write(image_file)  # 寫入文件

content_db = {
    "title": title,
    "nickname": nickname,
    "avatar": image,
    "audio": audio,
    "intro": intro,
    "category":category,  # 分類
    "play_count": 0  # 播放次數
}

setting.MONGO_DB.sources.insert_one(content_db)  # 插入一條數據

View Code

執行 manager.py，使用mongodb客戶端，查看數據。發現有一條數據，效果以下：

再錄入幾條數據，打開網頁：

https://www.ximalaya.com/ertong/424529/

複製幾首歌的id，好比這樣

<a title="魚兒水中游" href="/ertong/424529/7713768">魚兒水中游</a>
<a title="祝你聖誕快樂" href="/ertong/424529/7713763">祝你聖誕快樂</a>
<a title="祖國祖國咱們愛你" href="/ertong/424529/7713762">祖國祖國咱們愛你</a>
<a title="最美的圖畫" href="/ertong/424529/7713760">最美的圖畫</a>

修改 manager.py，修改最後的id，由於424529(專輯)是同樣的

content_url = "/ertong/424529/7713678"

改爲

content_url = "/ertong/424529/7713768"

它表示魚兒水中游這首歌曲，運行一次。

其餘歌曲，依次類推。最後MongoDB中有5首歌曲

5、顯示內容圖文列表

後端接口

既然數據庫有數據了，那麼就須要展現到圖文列表了。要替換這部份內容

進入flask後端目錄，新建目錄serv，在此目錄下建立文件get_file.py，用來獲取音頻和圖片

from flask import Blueprint, send_file
from setting import AUDIO_FILE
from setting import AUDIO_IMG_FILE
import os

getfile = Blueprint("getfile", __name__)

@getfile.route("/get_audio/<filename>")
def get_audio(filename):  # 獲取音頻
    sendfile = os.path.join(AUDIO_FILE, filename)
    return send_file(sendfile)

@getfile.route("/get_image/<filename>")
def get_image(filename):  # 獲取圖片
    sendfile = os.path.join(AUDIO_IMG_FILE, filename)
    return send_file(sendfile)

View Code

繼續新建content.py

from flask import Blueprint, jsonify
from setting import MONGO_DB
from setting import RET

cont = Blueprint("cont", __name__)


@cont.route("/content_list", methods=["POST"])
def content_list():  # 內容列表
    res_list = list(MONGO_DB.sources.find({}))  # 字典轉換列表

    for index, item in enumerate(res_list):  #返回 enumerate(枚舉)對象
        # 因爲_id是ObjectId對象,轉換爲字符串
        res_list[index]["_id"] = str(item.get("_id"))

    RET["code"] = 0
    RET["msg"] = ""
    RET["data"] = res_list

    return jsonify(RET)  # 返回json數據

View Code

修改 manager.py，註冊2個藍圖

from flask import Flask, request,jsonify
from setting import MONGO_DB
from setting import RET
from bson import ObjectId
from serv import get_file
from serv import content

app = Flask(__name__)

app.register_blueprint(get_file.getfile)
app.register_blueprint(content.cont)

@app.route('/')
def hello_world():
    return 'Hello World!'


@app.route('/login',methods=["POST"])
def login():
    """
    登錄驗證
    :return: settings -> RET
    """
    try:
        RET["code"] = 1
        RET["msg"] = "用戶名或密碼錯誤"
        RET["data"] = {}

        username = request.form.get("username")
        password = request.form.get("password")

        user = MONGO_DB.users.find_one({"username": username, "password": password})

        if user:
            # 因爲user中的_id是ObjectId對象,須要轉化爲字符串
            user["_id"] = str(user.get("_id"))
            RET["code"] = 0
            RET["msg"] = "歡迎登錄"
            RET["data"] = {"user_id": user.get("_id")}

    except Exception as e:
        RET["code"] = 1
        RET["msg"] = "登錄失敗"

    return jsonify(RET)


@app.route('/reg',methods=["POST"])
def reg():
    """
    註冊
    :return: {"code":0,"msg":"","data":""}
    """
    try:
        username = request.form.get("username")
        password = request.form.get("password")
        age = request.form.get("age")
        nickname = request.form.get("nickname")
        gender = request.form.get("gender")
        phone = request.form.get("phone")

        user_info = {
            "username": username,
            "password": password,
            "age": age,
            "nickname": nickname,
            "gender": gender,
            "phone": phone
        }

        res = MONGO_DB.users.insert_one(user_info)
        user_id = str(res.inserted_id)

        RET["code"] = 0
        RET["msg"] = "註冊成功"
        RET["data"] = user_id
    except Exception as e:
        RET["code"] = 1
        RET["msg"] = "註冊失敗"

    return jsonify(RET)


@app.route('/user_info', methods=["POST"])
def user_info():
    user_id = request.form.get("user_id")

    # "password": 0 表示忽略密碼字段
    res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)}, {"password": 0})
    if res:
        res["_id"] = str(res.get("_id"))

    RET["code"] = 0
    RET["msg"] = ""
    RET["data"] = res

    return jsonify(res)

if __name__ == '__main__':
    app.run("0.0.0.0", 9527, debug=True)

View Code

此時目錄結構以下：

./
├── audio
├── audio_img
├── manager.py
├── serv
│   ├── content.py
│   └── get_file.py
├── setting.py
├── static
├── templates
└── xiaopapa.py

重啓 manager.py，訪問頁面：

http://127.0.0.1:9527/get_image/4ed490e8-aded-4f23-8a7c-c845e48ec778.jpg

注意：後面的圖片地址，從MongoDB中複製一條便可！

效果以下：

使用postman訪問content_list

前端展現

修改js目錄下的mui.js，增長全局變量serv_imge

window.serv = "http://192.168.11.86:9527"
window.serv_imge = window.serv+"/get_image/";

window.styles = {
    top: "0px",
    bottom: "50px"
};
...

修改mian.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-scroll-wrapper">
            <div class="mui-scroll">
                <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="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1537023056923&amp;di=e50b27f1a9d34e586e421b50ff5cc0b0&amp;imgtype=0&amp;src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201508%2F18%2F173910p7045xys71x4zfyh.jpg"
                                        width="300px" height="400px">
                                </a>
                            </div>
                            <!-- 第二張 -->
                            <div class="mui-slider-item">
                                <a href="#">
                                    <img src="http://placehold.it/400x300">
                                </a>
                            </div>
                            <!-- 第三張 -->
                            <div class="mui-slider-item">
                                <a href="#">
                                    <img src="http://placehold.it/400x300">
                                </a>
                            </div>
                            <!-- 第四張 -->
                            <div class="mui-slider-item">
                                <a href="#">
                                    <img src="http://placehold.it/400x300">
                                </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-3">
                            <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-3">
                            <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-3">
                            <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-3">
                            <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-3">
                            <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-3">
                            <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" id="content_list">

                    </ul>
                </div>
            </div>

        </div>
    </body>

    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        mui.init()
        mui('.mui-scroll-wrapper').scroll()
        mui.back = function() {
            mui.toast("不讓你點")
        };
        
        mui.plusReady(function(){
            // 發送post請求
            mui.post(
                window.serv+"/content_list",  //訪問內容列表
                {},  //參數爲空
                function(data){
                    console.log(JSON.stringify(data));
                    // for循環列表
                    for (var i = 0; i < data.data.length; i++) {
                        create_content(data.data[i])  // 執行自定義方法create_content
                    }
                }
            )
            
        })
        
        document.addEventListener("talk",function(data){
            mui.toast(data.detail.talk);
        })
        
        function create_content(content){    // 建立內容標籤    
            var litag = document.createElement("li");  // 建立li標籤
            litag.className = "mui-table-view-cell mui-media";  //添加class
            var atag = document.createElement("a");  // 建立a標籤
            atag.id = content._id;  // 設置id
            
            
            var imgtag = document.createElement("img");
            imgtag.className = "mui-media-object mui-pull-left";
            
            imgtag.src = window.serv_imge + content.avatar;  //拼接圖片路徑
            //console.log(window.serv_imge + content.avatar);
            
            var divtag = document.createElement("div");
            divtag.className = "mui-media-body";
            divtag.innerText = content.title;
            var ptag = document.createElement("p");
            ptag.className = "mui-ellipsis";
            ptag.innerText = content.intro;
             
             litag.appendChild(atag);  //追加到li標籤中
             atag.appendChild(imgtag);
             atag.appendChild(divtag);
             divtag.appendChild(ptag);
             
             document.getElementById("content_list").appendChild(litag);  //將li標籤添加到ul中
        
        }
        
    </script>

</html>

View Code

使用模擬器訪問，效果以下：

總結：

mui的全局變量：
    plus.storage.setItem("key",value) # 設置storage全局變量
    plus.storage.getItem("key") # 獲取全局的storage 獲取到了就是 value 獲取不到就是 Null 
    plus.storage.removeItem("key") # 清除storage
    
    
2018年9月14日
故事（創業故事）北京xxxxxx科技有限公司：
    背景人物：
        1.老張：40+ 籍貫是黑龍江哈爾濱 長子5 小女3 在北京闖蕩 長期與妻小分離 不想讓孩子用手機 忽然想孩子了
            思考了一問題：留守兒童，玩具，讓玩具成爲孩子夥伴幫助孩子成長，讓玩具成爲與父母溝通的橋樑（語音消息）
            若是能讓玩具成爲一個朋友圈的溝通工具（社交圈） 銷售
        
        2.老李：37 懂一點技術的產品 陝西西安 1女4歲 在北京闖蕩 也是留守了本身的女兒 接到老張的電話 須要技術實現
        
        3.閆帥：29 技術 作了8年 與老李是同事，一拍即合 接到老李電話
        
    故事劇情：
        老張從打電話到公司組建，3天
        老李，設計產品
        閆帥介入，涉及到硬件，須要請硬件老師，技術團隊
        
        公司成立了：
        1.行政人力財務綜合部 1我的
        2.產品部：老李 + UI 小姐姐 2我的
        3.軟件部：閆帥 + 1前端 + 後端 3我的
        4.硬件部：江老師 + 硬件工程師（0人） 1我的
        5.營銷部：老張 + 1 運營 
        
        項目的需求明確：
            留守兒童，玩具，讓玩具成爲孩子夥伴幫助孩子成長，讓玩具成爲與父母溝通的橋樑（語音消息）
            若是能讓玩具成爲一個朋友圈的溝通工具（社交圈）
            
            1.玩具：硬件方案-------（皮毛175，硬件135 ，人工硬件組裝15，皮毛人工60，運費：12，包裝35）499 20 
            
            2.讓玩具成爲孩子夥伴
            3.幫助孩子成長
            4.讓玩具成爲與父母溝通的橋樑（語音消息）
            5.若是能讓玩具成爲一個朋友圈的溝通工具（社交圈）
            
        
        閆帥與老李溝通商討如何開發，閆帥開始部署後端
            1. 1前端 + 閆帥 + 你 先作後端在作前端 全棧工程師
            2. 由於閆帥的疏忽嚴厲批評一次前端，前端離職了，你吹牛逼說前端兩週能夠學完成 
            3. 你 成爲了公司的產品的大拿 4個月 8個月
        
        
        人工智能：
            150萬上下，不足以支撐底層開發的
            第三方：百度ai，太爛了，花錢買了科大訊飛的服務
        
            
    倒閉：
        硬件方案（成本太高）
        管理問題
        資金鍊，不足以支撐更換硬件方案了
        
        
展開軟件部需求：
    2.讓玩具成爲孩子夥伴 （聊天溝通，內容點播）
    3.幫助孩子成長 （智能百科）
    4.讓玩具成爲與父母溝通的橋樑（語音消息，websocket ，IM通信，天然語言處理）
    5.若是能讓玩具成爲一個朋友圈的溝通工具（社交圈）（C端與C端的交流）
    6.app：能與玩具對話 + 內容 + 遙控 + 控制玩具的通信錄
    
    孩子說話         --- 百度語音識別 + 天然語言處理
    孩子說話點歌     --- 天然語言處理 + 內容採集 + 內容名稱理解
    聊天溝通         --- 圖靈
    智能百科         --- 圖靈
    語音消息        --- websocket（語音通信）+ IM通信
    c端交流            --- 玩具主動發起消息 ，天然語言處理
    
開發者日誌：（開發者筆記）    
1.基於百度ai 和 tuling123 智能對話
2.基於websocket實現了智能語音對話

2018年9月14日：
項目第一天：        
1.內容採集：
    採坑：XMLY採集內容層層加密 分享按鈕獲得了一個M端的地址，從這個地址中得到到了 
        "http://m.ximalaya.com/tracks/id.json" 獲取音頻的全部參數
    基於 request / MongoDB    實現數據採集和存儲
    
    
2.App顯示內容圖文列表：
    定義了兩個接口 get_image content_list
    接口/get_image 獲取圖片
    接口/content_list 獲取內容列表
    
    app： create_content(content) 用來建立 圖文列表元素的
        坑： 點擊事件還未完成
    
    
3.註冊 登錄 自動登錄 退出
    

項目名稱：智能玩具
項目闡述：需求+完成結果 
項目技術：
    1.基於baidu-aip 和 tuling123 智能對話
    2.基於websocket實現了智能語音對話
    3.基於requests實現內容採集

View Code

完整代碼，請參考連接：

https://github.com/987334176/Intelligent_toy/archive/v1.0.zip

5、MongoDB數據導入導出

主要有2種導出格式，分別爲CSV和JSON。推薦使用JSON，爲何呢？

由於導出爲csv時，第一行，就是表的字段名，從第二行開始，纔是真正的數據！假設數據有5行

所以，導入時，會有6行。那麼多出的一行，就是字段名。這顯然不是咱們想要的！這個問題，暫時沒法解決！

因此推薦使用JSON

導出

mongoexport -d 本地數據庫名 -c 本地數據表 --type=json -f 表字段(用逗號隔開) -o 本地存儲路徑

好比：導出bananabase庫中的sources中的字段_id,title,nickname,avatar,audio,intro,category,play_count 到sources.json中：

注意：必需要指定字段，不然報錯！

mongoexport -d bananabase -c sources --type=json -f _id,title,nickname,avatar,audio,intro,category,play_count -o ./sources.json

導入

將本地json文件導入到本地數據庫

mongoimport --db 本地數據庫名 --collection 本地數據表 --file ~/table.json --type json

好比：假設sources表被刪除了，使用sources.json來恢復

mongoimport --db bananabase --collection sources --file sources.json --type json

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。