通过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.txt3 directories, 13 files[root@node1 python]# lsanimate.css ?fileutils.py ?fileutils.pyc ?flask_web01.py ?static ?templates ?user.txt# 1.后台程序falsk_web01.py
启动web程序
#coding:utf-8from flask import Flask,render_template,request,redirectimport 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-8file_dict = {}# file => dictdef 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 => filedef 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.txttom:123jack:123user2:000user1:pwd1通过flask实现web页面简单的增删改查bootstrap美化版
原文地址：https://www.cnblogs.com/reblue520/p/8473329.html