您现在的位置是: 网站首页 >Flask >Flask搭建微电影视频网站 Flask

【Flask微电影】08.搭建后台页面-密码修改、主页控制面板

admin2018年10月31日 17:18 Flask | Python 709人已围观

Flask搭建微电影视频网站简介 利用Flask搭建微电影视频网站 Github地址:https://github.com/xyliurui/FlaskMovie

Github地址:https://github.com/xyliurui/FlaskMovie ## 搭建后台修改密码页面 ### 添加pwd.html修改密码模板 ```html {% extends 'admin/base.html' %} {% block content %} <section class="content-header"> <h1>微电影管理系统</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 个人资料</a></li> <li class="active">修改密码</li> </ol> </section> <section class="content" id="showcontent"> <div class="row"> <div class="col-md-12"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">修改密码</h3> </div> <form role="form"> <div class="box-body"> <div class="form-group"> <label for="input_pwd">旧密码</label> <input type="password" class="form-control" id="input_pwd" placeholder="请输入旧密码!"> </div> <div class="form-group"> <label for="input_newpwd">新密码</label> <input type="password" class="form-control" id="input_newpwd" placeholder="请输入新密码!"> </div> </div> <div class="box-footer"> <button type="submit" class="btn btn-primary">修改</button> </div> </form> </div> </div> </div> </section> {% endblock %} ``` 访问 http://127.0.0.1:5000/admin/pwd/ 即可修改密码 ![BLOG_20181031_171914_17](/media/blog/images/2018/10/BLOG_20181031_171914_17.png "博客图集BLOG_20181031_171914_17.png") ### 添加后台修改密码视图 ```python @admin.route("/pwd/") def pwd(): return render_template('admin/pwd.html') ``` ### 修改base.html修改密码链接 **app/templates/admin/base.html** ```html <div class="pull-left"> <a href="{{ url_for('admin.pwd') }}" class="btn btn-default btn-flat">修改密码</a> </div> ``` ## 修改后台主页控制面板 用于系统管理 ### 修改index.html主页页面 ```html {% extends 'admin/base.html' %} {% block content %} <section class="content-header"> <h1>微电影管理系统</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li> <li class="active">控制面板</li> </ol> </section> <section class="content" id="showcontent"> <div class="row"> <div class="col-md-6"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">内存使用率</h3> </div> <div class="box-body" id="meminfo" style="height:600px;"></div> </div> </div> <div class="col-md-6"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">系统设置</h3> </div> <form role="form"> <div class="box-body" style="height:600px;"> <div class="form-group"> <label for="input_speed">限制速率大小</label> <input type="text" class="form-control" id="input_speed" placeholder="请输入限制速率!" value="512"> </div> <div class="form-group"> <label for="input_mem">限制内存大小</label> <input type="text" class="form-control" id="input_mem" placeholder="请输入限制内存!" value="10m"> </div> <div class="form-group"> <label for="input_num">限制客户端数量</label> <input type="text" class="form-control" id="input_num" placeholder="请输入限制客户端数量!" value="4"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">保存并重启服务</button> </div> </div> </form> </div> </div> </div> </section> {% endblock %} {% block js %} <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script> <script> var myChart = echarts.init(document.getElementById('meminfo')); option = { backgroundColor: "white", tooltip: { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [{ name: '内存使用率', type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 50, name: '内存使用率' }] }] }; setInterval(function () { option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; myChart.setOption(option, true); }, 2000); </script> <script> // 激活菜单栏 $(document).ready(function() { $("#g-1").addClass('active'); $("#g-1-1").addClass('active'); }) </script> {% endblock %} ``` ### 修改base.html添加选中首页激活 ```html <li class="treeview" id="g-1"> <a href="#"> <i class="fa fa-home" aria-hidden="true"></i> <span>首页</span> <span class="label label-primary pull-right">1</span> </a> <ul class="treeview-menu"> <li id="g-1-1"> <a href="{{ url_for('admin.index') }}"> <i class="fa fa-circle-o"></i> 控制面板 </a> </li> </ul> </li> ``` 访问 http://127.0.0.1:5000/admin/ 即可看到首页控制面板 ![BLOG_20181031_171903_62](/media/blog/images/2018/10/BLOG_20181031_171903_62.png "博客图集BLOG_20181031_171903_62.png")

很赞哦! (0)

文章交流

  • emoji
0人参与,0条评论

当前用户

未登录,点击   登录

站点信息

  • 建站时间:网站已运行839天
  • 系统信息:Linux
  • 后台程序:Python: 3.6.6
  • 网站框架:Django: 2.2.12
  • 文章统计:250 篇
  • 文章评论:45 条
  • 腾讯分析网站概况-腾讯分析
  • 百度统计网站概况-百度统计
  • 公众号:微信扫描二维码,关注我们
  • QQ群:QQ加群,下载网站的学习源码
返回
顶部
标题 换行 登录
网站