最近因項目需要，學習了用flask搭建web項目，以下是自己的使用感悟
Flask框架結構
static：存儲一些靜態資源
templates：存儲對應的view
app.py：涉及到頁面的跳轉，以及與數據庫的連接
實戰案例-登錄注冊開發
注冊頁
register.html:
- 注意在引用資源時，路徑為：/static/...
- 在js內進行頁面跳轉，不可直接寫對應的頁面，需要些對應的路由地址：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Material Admin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="all,follow">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
<link rel="stylesheet" href="/static/css/style.default.css" id="theme-stylesheet">
</head>
<body>
<div class="page login-page">
<div class="container d-flex align-items-center">
<div class="form-holder has-shadow">
<div class="row">
<!-- Logo & Information Panel-->
<div class="col-lg-6">
<div class="info d-flex align-items-center">
<div class="content">
<div class="logo">
<h1>歡迎注冊</h1>
</div>
<p>鐵路軌道保護與監控</p>
</div>
</div>
</div>
<!-- Form Panel -->
<div class="col-lg-6 bg-white">
<div class="form d-flex align-items-center">
<div class="content">
<div class="form-group">
<input id="register-username" class="input-material" type="text" name="registerUsername" placeholder="請輸入用戶名/姓名" >
<div class="invalid-feedback"> 用戶名必須在2~10位之間 </div>
</div>
<div class="form-group">
<input id="register-password" class="input-material" type="password" name="registerPassword" placeholder="請輸入密碼" >
<div class="invalid-feedback"> 密碼必須在6~10位之間 </div>
</div>
<div class="form-group">
<input id="register-passwords" class="input-material" type="password" name="registerPasswords" placeholder="確認密碼" >
<div class="invalid-feedback"> 兩次密碼必須相同 且在6~10位之間 </div>
</div>
<div class="form-group">
<button id="regbtn" type="button" name="registerSubmit" class="btn btn-primary">注冊</button>
</div>
<small>已有賬號?</small><a href="login.html" class="signup"> 登錄</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript files-->
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/bootstrap.min.js"></script>
<script> $(function(){ var flagName=false; var flagPas=false; var flagPass=false; /*驗證用戶名*/
var name,passWord,passWords; $("#register-username").change(function(){ name=$("#register-username").val(); if(name.length<2||name.length>10){ $("#register-username").removeClass("form-control is-valid"); $("#register-username").addClass("form-control is-invalid"); flagName=false; }else{ $("#register-username").removeClass("form-control is-invalid"); $("#register-username").addClass("form-control is-valid"); flagName=true; } }); /*驗證密碼*/ $("#register-password").change(function(){ passWord=$("#register-password").val(); if(passWord.length<6||passWord.length>18){ $("#register-password").removeClass("form-control is-valid"); $("#register-password").addClass("form-control is-invalid"); flagPas=false; }else{ $("#register-password").removeClass("form-control is-invalid"); $("#register-password").addClass("form-control is-valid"); flagPas=true; } }); /*驗證確認密碼*/ $("#register-passwords").change(function(){ passWords=$("#register-passwords").val(); if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){ $("#register-passwords").removeClass("form-control is-valid"); $("#register-passwords").addClass("form-control is-invalid"); flagPass=false; }else{ $("#register-passwords").removeClass("form-control is-invalid"); $("#register-passwords").addClass("form-control is-valid"); flagPass=true; } }); $("#regbtn").click(function(){ if(flagName&&flagPas&&flagPass){ alert(name+" "+passWord); $.ajax({ url:"/register_sub", data:{"username":name,"password":passWord},//前面命名，后面是值
type:"POST", dataType:"text", success: function(data){ if(data=="yes") { alert("注冊成功！"); location.href = "/"; } }, error:function (e) { console.log(e); alert("出錯了"); } }) }else{ if(!flagName){ $("#register-username").addClass("form-control is-invalid"); } if(!flagPas){ $("#register-password").addClass("form-control is-invalid"); } if(!flagPass){ $("#register-passwords").addClass("form-control is-invalid"); } } }) }) </script>
</body>
</html>
注冊時會訪問：/register_sub，他在app.py內，具體實現如下：
展示效果為：
登錄頁
login.html：
登錄頁涉及到登錄的判斷，回訪問路由：/login：
<!DOCTYPE html>
<html>
<head>
<title>Gadget Sign Up Form a Flat Responsive Widget Template :: w3layouts </title>
<!-- Meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Meta tags -->
<!-- font-awesome icons -->
<link href="/static/css/font-awesome.min.css" rel="stylesheet">
<!-- //font-awesome icons -->
<!--stylesheets-->
<link href="/static/css/style.css" rel='stylesheet' type='text/css' media="all">
<!--//style sheet end here-->
<link href="//fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
</head>
<body>
<h1 class="error">鐵道保護與監控</h1>
<!---728x90--->
<div class="w3layouts-two-grids">
<!---728x90--->
<div class="mid-class">
<div class="img-right-side">
<h3 style="font-family: '楷體'">歡迎登陸</h3>
<img src="/static/images/b11.png" class="img-fluid" alt="">
</div>
<div class="txt-left-side">
<h2 style="font-family: '楷體'"> Sign Up Here </h2>
<div class="form-left-to-w3l">
<span class="fa fa-user-o" aria-hidden="true"></span>
<input type="text" id="username" placeholder="Name" required="">
<div class="clear"></div>
</div>
<div class="form-left-to-w3l ">
<span class="fa fa-lock" aria-hidden="true"></span>
<input type="password" id="password" placeholder="Password" required="">
<div class="clear"></div>
</div>
<div class="main-two-w3ls">
<div class="left-side-forget">
<input type="checkbox" class="checked" id="remember">
<span class="remenber-me">Remember me </span>
</div>
<div class="right-side-forget">
<a href="#" class="for">Forgot password...?</a>
</div>
</div>
<div class="btnn">
<button type="submit" id="login" onclick="login()">Sign Up </button>
</div>
<div class="w3layouts_more-buttn">
<h3>Don't Have an account..? <a href="/register">Register here</a>
</h3>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!---728x90--->
<footer class="copyrigh-wthree">
<p> © 2019 Gadget Sign Up Form. All Rights Reserved | Design by <a href="http://www.W3Layouts.com" target="_blank">W3Layouts</a>
</p>
</footer>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function login() { var username=$("#username").val(); var password=$("#password").val(); if($('#remember').is(':checked')) { localStorage.setItem("username",username); localStorage.setItem("password",password); } if (username == "" || password == "") alert("請將信息填寫完整！"); else { localStorage.setItem("username",username); $.ajax({ url: "/login", type: "POST", data: {"username": username, "password": password}, dataType: "text", async: true, success: function (data) { if (data == "yes") { alert("登錄成功！！"); location.href = "/index"; }else{ alert("用戶名或密碼錯誤！！") } }, error: function (e) { alert("出現錯誤！！"); } }); } } $(function () { }) </script>
</body>
</html>
登錄成功后，回訪問路由：/index，進入主頁面
登錄頁展示效果：
主頁面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你好</title>
<link rel="stylesheet" href="/static/css/font.css">
<link rel="stylesheet" href="/static/css/xadmin.css">
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/xadmin.js"></script>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="index">
<!-- 頂部開始 -->
<div class="container">
<div class="logo">
<a href="index.html">鐵道保護與監控</a></div>
<div class="left_open">
<a><i title="展開左側欄" class="iconfont"></i></a>
</div>
<ul class="layui-nav left fast-add" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;">+新增</a>
<dl class="layui-nav-child">
<!-- 二級菜單 -->
<dd>
<a onclick="xadmin.open('最大化','http://www.baidu.com','','',true)">
<i class="iconfont"></i>彈出最大化</a></dd>
<dd>
<a onclick="xadmin.open('彈出自動寬高','http://www.baidu.com')">
<i class="iconfont"></i>彈出自動寬高</a></dd>
<dd>
<a onclick="xadmin.open('彈出指定寬高','http://www.baidu.com',500,300)">
<i class="iconfont"></i>彈出指定寬高</a></dd>
<dd>
<a onclick="xadmin.add_tab('在tab打開','member-list.html')">
<i class="iconfont"></i>在tab打開</a></dd>
<dd>
<a onclick="xadmin.add_tab('在tab打開刷新','member-del.html',true)">
<i class="iconfont"></i>在tab打開刷新</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav right" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 小峰仔</a>
<dl class="layui-nav-child">
<!-- 二級菜單 -->
<dd>
<a onclick="xadmin.open('個人信息','http://www.baidu.com')">個人信息</a></dd>
<dd>
<a onclick="xadmin.open('切換帳號','http://www.baidu.com')">切換帳號</a></dd>
<dd>
<a href="./login.html">退出</a></dd>
</dl>
</li>
<!-- <li class="layui-nav-item to-index">-->
<!-- <a href="/">前台首頁</a></li>-->
</ul>
</div>
<!-- 頂部結束 -->
<!-- 中部開始 -->
<!-- 左側菜單開始 -->
<div class="left-nav">
<div id="side-nav">
<ul id="nav">
<li>
<a onclick="xadmin.add_tab('查詢頁面','select.html')">
<i class="layui-icon left-nav-li" lay-tips="信息查詢"></i>
<cite>信息查詢</cite>
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="訂單管理"></i>
<cite>訂單管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('訂單列表','order-list.html')">
<i class="iconfont"></i>
<cite>訂單列表</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('訂單列表1','order-list1.html')">
<i class="iconfont"></i>
<cite>訂單列表1</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="分類管理"></i>
<cite>分類管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('多級分類','cate.html')">
<i class="iconfont"></i>
<cite>多級分類</cite></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左側菜單結束 -->
<!-- 右側主體開始 -->
<div class="page-content">
<div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
<ul class="layui-tab-title">
<li class="home">
<i class="layui-icon"></i>我的桌面</li></ul>
<div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
<dl>
<dd data-type="this">關閉當前</dd>
<dd data-type="other">關閉其它</dd>
<dd data-type="all">關閉全部</dd>
</dl>
</div>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src='/' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
</div>
</div>
<div id="tab_show"></div>
</div>
</div>
<div class="page-content-bg"></div>
<style id="theme_style"></style>
<!-- 右側主體結束 -->
<!-- 中部結束 -->
<script>
</script>
</body>
</html>
展示效果如下：
總結
個人本次開發，主要是先熟練的掌握基本的CRUD，然后再結合項目的需要，進行相應模塊的學習，基本的搭建流程已熟悉，接下來就是學習一些圖表展示，對代碼進行分類，實現工程化項目管理
本次的項目主要是數據的可視化展示，因此接下來主要的方向還是數據的展示，以及更好，更熟練的掌握Flask框架的使用