通过flask实现web页面简单的增删改查bootstrap美化版

项目目录结构

[root@node1 python]# tree -L 2

.

├── animate.css

├── fileutils.py

├── fileutils.pyc

├── flask_web01.py

├── static

│   ├── bootstrap-3.3.5

│   ├── bootstrap.min.css

│   ├── jquery-3.3.1.min.js

│   └── signin.css

├── templates

│   ├── add.html

│   ├── jquery.html

│   ├── list.html

│   ├── login.html

│   └── update.html

└── user.txt

3 directories, 13 files

[root@node1 python]# ls

animate.css  fileutils.py  fileutils.pyc  flask_web01.py  static  templates  user.txt

# 1.后台程序falsk_web01.py
启动web程序

#coding:utf-8

from flask import Flask,render_template,request,redirect

import fileutils

# 引入file_dict用户列表

fileutils.file_read()

app = Flask(__name__)

@app.route('/')

def index():

    return render_template('login.html')

@app.route('/loginaction/', methods = ["POST","GET"])

def login():

    error_msg = ''

    if request.method == 'GET':

        username = request.args.get('username')

        password = request.args.get('password')

    else:

        username = request.form.get('username')

        password = request.form.get('password')

    print('username:%s,password:%s' % (username,password))

    if username and password:

        if username == "admin" and password == "admin":

            return redirect('/list')

        else:

            error_msg = "username or password is wrong"

    else:

        error_msg = 'need username and password'

    return render_template('login.html', error_msg = error_msg)

@app.route('/list/')

def userlist():

    userlist = fileutils.file_read().items()

    print('userlist:%s' % userlist)

    return render_template('list.html', userlist = userlist)

@app.route('/update/')

def update():

    username = request.args.get('username')

    password = fileutils.file_read().get(username)

    user = [username, password]

    print('update:%s' % user)

    return render_template('update.html', user = user)

@app.route('/updateaction/', methods = ['POST'])

def updateaction():

    params = request.args if request.method == 'GET' else request.form

    username = params.get('username')

    password = params.get('password')

    fileutils.file_dict[username] = password

    fileutils.file_write()

    return redirect('/list/')

@app.route('/add/')

def add():

    return render_template('add.html')

@app.route('/addaction/', methods = ['POST'])

def addaction():

    params = request.args if request.method == 'GET' else request.form

    username = params.get('username')

    password = params.get('password')

    if username in fileutils.file_dict:

        return redirect('/list/')

    else:

        fileutils.file_dict[username] = password

        fileutils.file_write()

        return redirect('/list/')

@app.route('/delete/')

def delete():

    username = request.args.get('username')

    fileutils.file_dict.pop(username)

    fileutils.file_write()

    return redirect('/list/')

if __name__ == "__main__":

    app.run(host = '0.0.0.0', debug = True)

# 2.工具类fileutils.py

# coding:utf-8

file_dict = {}

# file => dict

def file_read():

    with open('user.txt') as f:

        for line in f.read().split('\n'):

            if line:

                tmp = line.split(':')

                file_dict[tmp[0]] = tmp[1]

    return file_dict

# ditc => file

def file_write():

    file_arr = []

    for user,pwd in file_dict.items():

        file_arr.append('%s:%s' % (user, pwd))

    print(file_arr)

    with open('user.txt', 'w') as f:

        f.write('\n'.join(file_arr))

if __name__ == "__main__":

    print(file_read())

    file_write()

# 3.模板文件templates中的登陆、列表、增删改查页面

①用户登录页面login.html



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>login</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/static/signin.css">

</head>

<body>

<p style="color:red">

    {{error_msg}}

</p>

<div class="container">

  <form class="form-signin" action="/loginaction/" method="post">

    <h2 class="form-signin-heading">Please sign in</h2>

    <label for="inputEmail" class="sr-only">admin_username</label>

    <input type="text" id="username" name="username" class="form-control" placeholder="admin_username" required autofocus>

    <label for="inputPassword" class="sr-only">Password</label>

    <input type="password"  name="password" id="inputPassword" class="form-control" placeholder="Password" required>

    <div class="checkbox">

    </div>

    <button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>

  </form>

</div>

</body>

</html>

②更新用户页面update.html



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>login</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

    <div class="container">

        <div class="row">

            <form class="form-inline" action='/updateaction/' method="post">

                <div class="form-group">

                    <label class="sr-only">username:</label>

                    <p class="form-control-static">{{user[0]}}</p>

                    <input type="hidden" name="username" value="{{user[0]}}" />

                </div>

                <div class="form-group">

                    <label for="inputPassword2" class="sr-only">Password: </label>

                    <input type="text" name="password" value="{{user[1]}}" class="form-control" id="inputPassword2" placeholder="Password">

                </div>

                <button type="submit" class="btn btn-success">update</button>

            </form>

        </div>

    </div>

</body>

</html>

③添加用户页面add.html



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>login</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-12">

            <form class="form-inline" action="/addaction/" method="post">

                <div class="form-group">

                <label for="exampleInputName2">username: </label>

                <input type="text" name="username" class="form-control" id="exampleInputName2" placeholder="username">

                </div>

                <div class="form-group">

                <label for="exampleInputEmail2">password: </label>

                <input type="password" name="password" class="form-control" id="exampleInputEmail2" placeholder="password">

                </div>

                <button type="submit" class="btn btn-default">添加用户</button>

            </form>

        </div>

    </div>

</div>

</body>

</html>

④列表页面list.html


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>login</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<!-- 引入流式布局 -->

<div class="container-fluid">

    <div class="row">

        <!-- 引入栅格系统占用10列(默认共12等分) -->

        <div class="col-md-10">

            <table class="table table-bordered">

                <tr class='success'>

                    <td>user</td>

                    <td>pwd</td>

                    <td>action</td>

                </tr>

                {% for user in userlist %}

                <tr class='info'>

                    <td>{{user[0]}}</td>

                    <td>{{user[1]}}</td>

                    <td>

                        <a class="btn btn-danger btn-xs" href="/delete/?username={{user[0]}}">delete</a>

                        <a class="btn btn-info btn-xs" href="/update/?username={{user[0]}}">update</a>

                        <a href="/add/">add</a>

                    </td>

                </tr>

                {% endfor %}

            </table>

        </div>

    </div>

</div>

</body>

</html>

4.用户信息文件

user.txt

tom:123

jack:123

user2:000

user1:pwd1

通过flask实现web页面简单的增删改查bootstrap美化版的更多相关文章

  1. 通过flask实现web页面简单的增删改查

    通过flask实现web页面简单的增删改查 # 1.后台程序falsk_web01.py #coding:utf-8 from flask import Flask,render_template,r ...

  2. spring boot web开发 简单的增删改查和spring boot 自带的Junit测试 案例

    创建 web项目 配置pom.xml文件   ------相当于jar包 配置application.yml -----配置文件(spring数据库连接.server服务.logging日志等) 创建 ...

  3. Java web 简单的增删改查程序(超详细)

    就是简单的对数据进行增删改查.代码如下: 1.bean层:用来封装属性及其get set方法 toString方法,有参构造方法,无参构造方法等. public class Bean { privat ...

  4. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  5. SpringMVC之简单的增删改查示例（SSM整合）

    本篇文章主要介绍了SpringMVC之简单的增删改查示例(SSM整合),这个例子是基于SpringMVC+Spring+Mybatis实现的.有兴趣的可以了解一下. 虽然已经在做关于SpringMVC ...

  6. salesforce 零基础学习（五十一）使用 Salesforce.com SOAP API 实现用户登录以及简单的增删改查(JAVA访问salesforce)

    此篇请参看:https://resources.docs.salesforce.com/202/latest/en-us/sfdc/pdf/salesforce_developer_environme ...

  7. 通过JDBC进行简单的增删改查

    通过JDBC进行简单的增删改查(以MySQL为例) 目录 前言:什么是JDBC 一.准备工作(一):MySQL安装配置和基础学习 二.准备工作(二):下载数据库对应的jar包并导入 三.JDBC基本操 ...

  8. 初试KONCKOUT+WEBAPI简单实现增删改查

    初试KONCKOUT+WEBAPI简单实现增删改查 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作.Kn ...

  9. BitAdminCore框架应用篇：（二）创建一个简单的增删改查模块

    NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...

随机推荐

  1. solr简介与安装

    solr简介: Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展,并对索引 ...

  2. 从word得到表格数据插入数据库（6位行业代码）

    复制表格到excel 点击表格左上角选中全部表格,然后crtl+c,再贴到excel中 可以发现,大类代码,单元格往下走,碰到下一个有值的之前,都是上一个的范围 填充空白单元格 1.选中前四列,然后c ...

  3. Vector集合

    Vector集合也是List接口的一个实现类,但是它是同步的,这就意味着是单线程的,速度比较慢,被ArrayList集合所取代了(PS:为什么我现在也还不知道,先记录了)

  4. java四种权限修饰符（public > protected > (default) > private）

    权限修饰符在哪里可以访问 (default) : 表示什么权限修饰符都不写 位置 public protected (default) private 同一个类 yes yes yes yes 同一个 ...

  5. select监听udp消息

    服务端 #!/usr/bin/python2.6 # -*- coding:utf-8 -*- import json import socket import select def socketse ...

  6. 分享12款 JavaScript 表格控件（DataGrid）

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  7. postfix 邮箱接收限制

    Postfix 限制 QQ 邮箱发送到 我的 test.com 域下邮箱. 1.编辑 main.cf  添加限制: smtpd_sender_restrictions = check_sender_a ...

  8. webpack学习笔记——解决多次输出的问题&自动编译之启用观察者模式，热重载

    [解决多次输出的问题] 昨天学会了用命令打包,如下 webpack entry.js bundle.js 但是会出现多次输出要表现的内容的问题,如下,执行几次上述命令,显示几次,原因是并没有清除之前输 ...

  9. redis非关系型数据库的基本语法

    导入并连接数据库: import redis # 导入redis模块,通过python操作redis 也可以直接在redis主机的服务端操作缓存数据库 import time # host是redis ...

  10. 运行APP显示两个APP图标，一个打不开，删除一个后，另一个也会消失。

    可能原因:你添加了两个intent-filter 的LAUNCHER 事件,这种情况尤其在一个项目多个module的时候容易出现 <intent-filter>               ...