整个系统采用Inspinia admin
inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计。使用Bootstrap 3 Framework,HTML5和CSS3,等技术开发而成。
inspinia admin 包含大量的可重复使用的UI组件的集合,并与最新的jQuery插件集成。
可以用于所有类型的Web应用程序,如自定义管理面板,项目管理系统,管理仪表板,应用程序后端,CMS或CRM。
在本微小项目应用的技术有flask、flask_sqlalchemy,flask_paginate,bootstrap、jquery,ajax,往小里说用到了sweetalert,jquery.metisMenu,bootstrap-datetimepicker,总的来说是个尝试性的微小项目,实现了系统的登陆、主页面、用户信息的查询、增加、删除、修改等功能。
整体页面功能说明
页面名称 | 页面功能 |
---|---|
404.html | 404错误页面 |
500.html | 500错误页面 |
base.html | base页面 |
home.html | 主页面 |
login.html | 登陆页面 |
userinfo.html | 用户主页面 |
useradd.html | 用户新增页面 |
userupdate.html | 用户修改页面 |
整体前端框架使用到的css文件,后续还会用到echarts
/static/css/bootstrap.min.css | bootstrap CSS库 |
---|---|
/static/font-awesome/css/font-awesome.css | font-awesome图标 |
/static/css/animate.css | CSS3动画库 |
/static/css/style.css | 常规的style |
/static/css/metisMenu.css | 导航栏插件 |
/static/css/iconfont/iconfont.css | 阿里巴巴矢量图标库 |
/static/css/bootstrap-datetimepicker.min.css | bootstrap日期控件 |
/static/css/sweetalert.css | 漂亮的弹窗口插件 |
整体前端框架使用到的js文件,后续还会用到echarts
/static/js/inspinia.js | 一套后台管理模板 |
---|---|
/static/js/jquery.js | jquery |
/static/js/bootstrap.min.js | bootstrap |
/static/js/plugins/metisMenu/jquery.metisMenu.js | 导航栏插件 |
/static/js/plugins/slimscroll/jquery.slimscroll.min.js | jQuery滚动条插件 |
/static/js/plugins/pace/pace.min.js | 页面进度条插件 |
/static/js/bootstrap-datetimepicker.min.js | bootstrap日期控件 |
/static/js/locales/bootstrap-datetimepicker.zh-CN.js | bootstrap日期控件-中文支持 |
/static/js/sweetalert.min.js | 漂亮的弹窗口插件 |
关于flask主功能,后续将改造成blueprint方式,并将数据操作进行分离
功能 | 路由 | 内部函数 | html页面 |
---|---|---|---|
# 将原生SQL语句返回结果集转换为字典 | def datatodict(): | ||
# 检查登陆情况 | def login_check(): | login.html | |
# 上下文钩子 | def my_context_process(): | ||
# 错误处理-404页面 | @app.errorhandler(404) | def internal_error(error): | 404.html |
# 错误处理-500页面 | @app.errorhandler(500) | def internal_error(error): | 500.html |
# 登陆页面 | @app.route("/") | def login(): | login.html |
# 登录页面的提交验证 | @app.route("/login") | def slogin(): | home.html |
# 注销页面 | @app.route("/logout") | def logout(): | login.html |
# 管理系统主页面 | @app.route('/home') | def home(): | home.html |
# 当前信息主页面 | @app.route('/userinfo') | def userinfo(): | userinfo.html |
# 添加用户主页面 | @app.route('/userinfo/useradd') | def useradd(): | useradd.html |
# 添加用户主页面响应 | @app.route('/userinfo/useradd') | def useradd(): | userinfo.html |
# 删除用户主页面提交响应 | @app.route('/userinfo/userdelete') | def userdelete(): | userinfo.html |
# 修改用户主页面 | @app.route('/userinfo/userupdate/<userid>') | def userupdate(): | userupdate.html |
# 修改用户主页面响应 | @app.route('/userinfo/userupdate/<userid>') | def userupdate(): | userinfo.html |
登陆页面样式
主用户页面样式
用户修改操作