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

通过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

"en">

    "UTF-8">
    
    "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    "stylesheet" type="text/css" href="/static/signin.css">


"color:red">
    {{error_msg}}


class="container">

  
class="form-signin" action="/loginaction/" method="post">
    
class="form-signin-heading">Please sign in
    for="inputEmail" class="sr-only">admin_username
    "text" id="username" name="username" class="form-control" placeholder="admin_username" required autofocus>
    for="inputPassword" class="sr-only">Password
    "password"  name="password" id="inputPassword" class="form-control" placeholder="Password" required>
    
class="checkbox">
    
    class="btn btn-lg btn-primary btn-block" type="submit">登陆
  





②更新用户页面update.html

"en">

    "UTF-8">
    
    "stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">



    
class="container">
        
class="row">

            
class="form-inline" action='/updateaction/' method="post">
                
class="form-group">
                    class="sr-only">username:
                    
class="form-control-static">{{user[0]}}
                    "hidden" name="username" value="{{user[0]}}" />
                
                
                
class="form-group">
                    for="inputPassword2" class="sr-only">Password: 
                    "text" name="password" value="{{user[1]}}" class="form-control" id="inputPassword2" placeholder="Password">
                
                "submit" class="btn btn-success">update
            

        

    



③添加用户页面add.html

"en">

    "UTF-8">
    
    "stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">


class="container">
    
class="row">
        
class="col-md-12">
            
class="form-inline" action="/addaction/" method="post">
                
class="form-group">
                for="exampleInputName2">username: 
                "text" name="username" class="form-control" id="exampleInputName2" placeholder="username">
                
                
class="form-group">
                for="exampleInputEmail2">password: 
                "password" name="password" class="form-control" id="exampleInputEmail2" placeholder="password">
                
                "submit" class="btn btn-default">添加用户
            
        
    




④列表页面list.html

"en">

    "UTF-8">
    
    "stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">




class="container-fluid">
    
class="row">
        
        
class="col-md-10">
            class="table table-bordered">
                class='success'>
                    
                {% for user in userlist %}
                class='info'>
                    
                {% endfor %}
            
user
                    
pwd
                    
action
                
{{user[0]}}
                    
{{user[1]}}
                    

                        class="btn btn-danger btn-xs" href="/delete/?username={{user[0]}}">delete
                        class="btn btn-info btn-xs" href="/update/?username={{user[0]}}">update
                        "/add/">add
                    
                
        
    




4.用户信息文件

user.txt

tom:123
jack:123
user2:000
user1:pwd1