利用python flask框架和layui模板构建网页

最新推荐文章于 2025-03-01 08:43:34 发布

niceme！

最新推荐文章于 2025-03-01 08:43:34 发布

阅读量1.7k

点赞数

文章标签： python flask 开发语言

本文链接：https://blog.csdn.net/m0_70247753/article/details/132146957

版权

本页面写了一个登陆页面和一个查询页面：查询页面有增删改查和导出数据到excel文件的功能

登陆页面：loging_myself.html

查询页面：query_myself.html

后台py文件：query_myself.py

使用flask框架首先要创建一个项目，然后再项目中创建虚拟环境，如下，one为我创建的项目，fir是我创建的虚拟环境，写的html文件要放在templates中，这是硬性规定

此外，还需要引入

loging_myself.html

query_myself.html

query_myself.py

loging_myself.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link rel="stylesheet" href="../static/lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../static/css/public.css" media="all">
</head>
<body>
<style>
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
  <div class="demo-login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="工号" lay-reqtext="请输入工号" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="初始密码为123456" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
      <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
    </div>
  </div>
</form>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
layui.use(function(){
  var $ = layui.jquery;
  var form = layui.form;
  var layer = layui.layer;
  // 提交事件
  form.on('submit(demo-login)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    var param=JSON.stringify(field)
    // layer.alert(param, {
    //   title: '当前填写的字段值'
    // });
      // 此处可执行 Ajax 等操作
      $.ajax({ 
            url:'/login_myself',   
            type:'post',
            data:{"datas":param},    
            dataType:'JSON',    
            success:function(response){   
              if(response.msg.search("登陆成功") != -1){// 如果響應消息中包含“登录成功”，則顯示消息並重新加載頁面。  
                 
                        layer.msg("你好，我是将臣",{icon: 1, time: 1000}); //提交成功后刷新页面
                        window.location.href="/query_myself"
                        // window.location.href="../templates/query_myself.html"
                      }else{      
                        layer.alert(response.msg); 
                        }
              console.log(response)
              console.log("success")
                // window.location.href='../templates/query_myself.html'
            },
            error:function (data) {
                }     
            });
    return false; // 阻止默认 form 跳转
  });
});
</script>
</body>
</html>

query_myself.html

最低0.47元/天解锁文章