通过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. 建立爬虫代理IP池

    单线程构建爬虫代理IP池 #!/usr/bin/python3.5 # -*- coding:utf-8 -*- import time import tempfile from lxml impor ...

  2. JDK8新特性02 Lambda表达式02_Lambda语法规则

    //函数式接口:只有一个抽象方法的接口称为函数式接口. 可以使用注解 @FunctionalInterface 修饰 @FunctionalInterface public interface MyF ...

  3. 什么是CRUD

    CRUD是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删除(Delete)几个单词的首字母简写.主要被用在描述软件系统中数据库或者持久层的基本操作功能.

  4. Javaweb学习笔记——（十八）——————事务、DBCP、C3P0、装饰者模式

    事务     什么是事务?         转账:             1.给张三账户减1000元             2.给李四账户加1000元 当给张三账户减1000元之后,抛出了异常,这 ...

  5. seleniums私房菜系列一 ---- selenium简介

    一.Selenium是什么? Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,本系列现在主要包括以下4款: 1.Selenium Core:支持DHTML的测试案 ...

  6. c# c/s 框架读取的配置文件时是app.exe.config

    c# c/s 框架读取的配置文件时是app.exe.config, 一般在bin中间中俄debug中或者Release中

  7. js伪数组转数组

    方法1: 遍历伪数组,在把值push进一个空数组中 方法2: 使用数组的slice方法,它返回的是数组,使用call或apply指向伪数组 var arr = [].slice.call(argume ...

  8. 2017CCPC秦皇岛 G题Numbers&&ZOJ3987【大数】

    题意: 给出一个数n,现在要将它分为m个数,这m个数相加起来必须等于n,并且要使得这m个数的或值最小. 思路: 从二进制的角度分析,如果这m个数中有一个数某一位为1,那么最后或起来这一位肯定是为1的, ...

  9. Karel版本的nnet1

    除了chain,nnet1, nnet2, nnet3训练时调整转移模型,chain模型使用类似与MMI的训练准则 概要 Karel Vesely的nnet1用到以下技术: 每一层进行预训练,基于RB ...

  10. Centos 02 操作系统 & Linux安装

    操作系统的概念 操作系统是沟通使用者和硬件之间传递信息的工具或程序,是电子计算机系统负责支撑应用程序运行环境以及用户操作环境的基础系统软件 硬件 ==> 系统核心 ==> 命令解释器she ...