day94 - 智能玩具作业 · Issue #IZEKB · 老男孩python全栈20期/教学计划

```
1.使用Mui制作一个登陆注册功能的App
```
### # index.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">炒鸡APP</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="img/3.png">
       	      </a>
       	    </div>
       	    
       	    <div class="mui-slider-item">
       	      <a href="#">
       	        <img src="img/1.png">
       	      </a>
       	    </div>
       	    
       	    <div class="mui-slider-item">
       	      <a href="#">
       	        <img src="img/2.png">
       	      </a>
       	    </div>
       	    
       	    <div class="mui-slider-item">
       	      <a href="#">
       	        <img src="img/3.png">
       	      </a>
       	    </div>
       	    
       	    <div class="mui-slider-item mui-slider-item-duplicate">
       	      <a href="#">
       	        <img src="img/1.png">
       	      </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>
       	</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>
       	
    </div>
   	<nav class="mui-bar mui-bar-tab">
   	    <a class="mui-tab-item mui-active">
   	        <span class="mui-icon mui-icon-home"></span>
   	        <span class="mui-tab-label">首页</span>
   	    </a>
   	    <a class="mui-tab-item">
   	        <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-person" id="login"></span>
   	        <span class="mui-tab-label">登录</span>
   	    </a>
   	    <a class="mui-tab-item">
   	        <span class="mui-icon mui-icon-gear"></span>
   	        <span class="mui-tab-label">设置</span>
   	    </a>
   	</nav>
</body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	mui.init()
	document.getElementById('login').addEventListener('tap',function () {
	    mui.openWindow({
    		url:"login.html",
    		id:"login",
    		styles:{
      			top:"0px",
      			bottom:"55px",
    		}
    	});
	})
</script>
</html>
```
### # login.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">
	    <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" method="post">
		    <div class="mui-input-row">
		        <label>用户名</label>
		    <input id="username" type="text" class="mui-input-clear" placeholder="请输入用户名">
		    </div>
		    <div class="mui-input-row">
		        <label>密码</label>
		        <input id="passowrd" type="password" class="mui-input-password" placeholder="请输入密码">
		    </div>
		    <div class="mui-button-row">
		        <button type="button" class="mui-btn mui-btn-primary" id="en">确认</button>
		        <button type="button" class="mui-btn mui-btn-danger" >取消</button>
		    </div>
		</form>
	</div>
</body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()

from db_connect import db

app = Flask(__name__)

@app.route("/login", methods=["POST"])
def login():
    user_info = request.form.to_dict()
    res = db.users.find_one(user_info)
    if res:
        res["_id"] = str(res.get("_id"))
        return jsonify({"code": 0, "msg": "登录成功", "data": res})
    else:
        db.users.insert_one(user_info)
        print(db)
        return jsonify({"code": 1, "msg": "注册并登录成功"})

if __name__ == "__main__":
    app.run("0.0.0.0", 9000)

```
```
3.使用MongoDB数据存储
```
### db_connect.py
```python
from pymongo import MongoClient

client = MongoClient(host="127.0.0.1", port=27017)
db = client["Login"]

```
![输入图片说明](https://images.gitee.com/uploads/images/2019/0718/224257_b533555e_4956261.gif "1.gif")
![输入图片说明](https://images.gitee.com/uploads/images/2019/0718/224516_31756abb_4956261.png "hw1-3.png")

老男孩python全栈20期/教学计划

内容风险标识

day94 - 智能玩具作业

评论 (39)

老男孩python全栈20期/教学计划 .gitee-modal { width: 500px !important; }

内容风险标识

day94 - 智能玩具 作业

评论 (39)

搜索帮助

老男孩python全栈20期/教学计划

day94 - 智能玩具作业