通过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
<!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美化版的更多相关文章
- 通过flask实现web页面简单的增删改查
通过flask实现web页面简单的增删改查 # 1.后台程序falsk_web01.py #coding:utf-8 from flask import Flask,render_template,r ...
- spring boot web开发 简单的增删改查和spring boot 自带的Junit测试 案例
创建 web项目 配置pom.xml文件 ------相当于jar包 配置application.yml -----配置文件(spring数据库连接.server服务.logging日志等) 创建 ...
- Java web 简单的增删改查程序(超详细)
就是简单的对数据进行增删改查.代码如下: 1.bean层:用来封装属性及其get set方法 toString方法,有参构造方法,无参构造方法等. public class Bean { privat ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- SpringMVC之简单的增删改查示例（SSM整合）
本篇文章主要介绍了SpringMVC之简单的增删改查示例(SSM整合),这个例子是基于SpringMVC+Spring+Mybatis实现的.有兴趣的可以了解一下. 虽然已经在做关于SpringMVC ...
- salesforce 零基础学习（五十一）使用 Salesforce.com SOAP API 实现用户登录以及简单的增删改查(JAVA访问salesforce)
此篇请参看:https://resources.docs.salesforce.com/202/latest/en-us/sfdc/pdf/salesforce_developer_environme ...
- 通过JDBC进行简单的增删改查
通过JDBC进行简单的增删改查(以MySQL为例) 目录 前言:什么是JDBC 一.准备工作(一):MySQL安装配置和基础学习 二.准备工作(二):下载数据库对应的jar包并导入 三.JDBC基本操 ...
- 初试KONCKOUT+WEBAPI简单实现增删改查
初试KONCKOUT+WEBAPI简单实现增删改查 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作.Kn ...
- BitAdminCore框架应用篇：（二）创建一个简单的增删改查模块
NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...
随机推荐
- Trailing slash
Trailing Slash common case It's common for URLs with a trailing slash to indicate a directory, and t ...
- Sublime Text 3 浅色主题
1.参考 如何优雅使用Sublime Text3(Sublime设置豆沙绿背景色和自定义主题) Fluidvision Inspiredgithub LightRays Mac 20Classic P ...
- 2016vijos 1-2 股神小L（堆)
维护前i天的最优解,那么在后面可能会对前面几天的买卖情况进行调整 如果前面买入,买入的这个在后面一定不会卖出 如果前面卖出,卖出的这个可能会在后面变成买入,因为买这个,卖后面的会获得更多的收益 用一个 ...
- hdu 6383
题意是说给定一个序列,能否通过任意次对部分数字 +1,对部分数字 -2的操作使得序列在满足全部非负且任意两元素的差值不超过1的前提下最小值最大,求最大值. 一开始的时候没有注意到整个序列全是非负数,还 ...
- HDU 6345(子串查询 暴力)
题意是每组给定一个字符串,在有限查询次数内输出所要查询区间的字典序最小的子串个数. 字典序最小的子串,就是所查询区间中字典序最小的单个字符,问题就转化成了求一段区间内字典序最小的字符个数. 开始时盲目 ...
- Spark源码剖析 - SparkContext的初始化(二)_创建执行环境SparkEnv
2. 创建执行环境SparkEnv SparkEnv是Spark的执行环境对象,其中包括众多与Executor执行相关的对象.由于在local模式下Driver会创建Executor,local-cl ...
- java实现Excel数据导出
java实现Excel数据导出: 目前,比较常用的实现Java导入.导出Excel的技术有两种Jakarta POI和Java Excel Jakarta POI 是一套用于访问微软格式文档的Java ...
- Mark Text - 下一代所见即所得的Markdown编辑器
Mark Text 所输及所见,摒弃了众多 markdown 编辑器左边写作右边预览的写作方式,巧妙的将编辑和预览融为一体.snabbdom 作为 Mark Text 的渲染引擎,保证了极速渲染编辑页 ...
- TensorFlow从入门到理解（四）：你的第一个循环神经网络RNN（分类例子）
运行代码: import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # set rando ...
- EcustOJ P109跳一跳(离散化+dp)
题目链接 感觉这道题我看了很多天,胡思乱想啊,一开始觉得记忆化搜索会可能T啊,,可能出题人的数据卡的好就稳T了的感觉..后来想了想,好像离散化一下,记一下位置之后再记忆化搜索就应该稳了吧..(好像直接 ...