• 用Flask前端框架开发简易网页


    一、实现流程介绍

     下面是优化后代码,只是展示手机号功能,后端逻辑可以根据自己需求实现

    from flask import Flask, request, render_template
    auth = Flask(__name__)
    
    
    @auth.route('/crm_msg', methods=['GET', 'POST'])
    def crm_msg():
         if request.method =='POST':
            count = request.form["phone"]
            return count
    
         return render_template('index.html')
    
    
    if __name__ == '__main__':
        auth.run(debug=True)
    

      

    二、运行脚本会生成一个网址

    三、浏览器访问连接,记得后面加上路由

     四、附上html脚本

    <html>
        <head>
        <title>Purple_loginform Website Template | Home :: w3layouts</title>
        <link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<style type="text/css">
    			.big{
    			font-size:20px;
    			}
    			a{
    			text-decoration:none;
    			}
    
    			.font_bk{border:1px solid #ccc;
    
    			bai#content {
                border: solid #f00;   /*设置边框样式跟颜色du*/
                margin: 0 auto;   /*设置div居中*/
                 200px;  /*设置div宽度*/
                height: 200px; /*设置div高度*/
                border- 5px; /*设置边框宽度*/
                background: #ff0;  /*设置背景色*/
    			}
    
    
    		</style>
        </head>
    
        <!-- contact-form -->
        <div class="message warning">
        <div class="inset">
    		<img src="https://pic50.t8tcdn.com/adcms/ad/201811/28/ce1a1b88849e763383c5ade218f73d8c93218.jpg" style=" 1910.4px;height:75.8px"/>
        	<div class="login-head">
    			<h2>请输入手机号查询验证码</h2>
        		 <div class="alert-close"> </div>
        	</div>
        		<form action="{{ url_for('crm_msg') }}" method="post">
        			<li>
        				<input type="text" name="phone" class="text" value="phoneNo" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'phoneNo';}"><a href="#" class=" icon user"></a>
        			</li>
        				<div class="clear"> </div>
        			<li>
        				<!--<input type="password" name="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"> <a href="#" class="icon lock"></a>
        			</li> -->
        			<div class="clear"> </div>
        			<div class="submit">
        				<input type="submit" value="查询" >
    					<h2 align="center" 环节导航>
    
    					<div class="big">
    						<h3>常用工具</h3><hr>
    						<a href="https://tool.lu/timestamp/" target="_blank">时间戳转换工具</a>•
    						<a href="https://www.json.cn//" target="_blank">Json解析工具</a>•
    						<a href="https://cli.im/" target="_blank">草料二位码</a>
    
    
    					</div>
    
    
    					<div class="clear">  </div>
        			</div>
    
        		</form>
        		</div>
        	</div>
        	</div>
        	<div class="clear"> </div>
        <!--- footer --->
        <div class="footer">
        	<p>@Author : owen.liu jack</p>
    
        </div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    C++ 什么是多态
    *和&的使用
    静态链接库与动态链接库
    利尔达CC3200模块烧写程序笔记
    创龙TMS320C6748开发找不到 tl.dsp.evm6748的问题研究
    RTSC和XDCTool的理解
    创龙DSP6748开发板SYS/BIOS的LED闪烁-第2篇
    Coap协议学习笔记-第一篇
    linux进程的学习笔记(未完)
    创龙DSP6748开发板LED闪烁-第一篇
  • 原文地址:https://www.cnblogs.com/onelove1/p/14646085.html
Copyright © 2020-2023  润新知