新闻cms管理系统(二) ---- 后台登录功能
1、页面准备：
（1）前端资源的导入：将准备好的页面添加到项目中，放到Public目录下（公共的页面样式、js、图片等资源）
（2）添加登录的视图模板
将登录页面的视图放到Amin>View>Login>index.html中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href=""> <title>新闻cms内容管理平台</title> <!-- Bootstrap core CSS -->
<link href="/Public/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <![endif]-->
</head> <body>
<style>
.s_center {
margin-left: auto;
margin-right: auto;
}
</style>
<div class="s_center container col-lg-6 "> <form class="form-signin" enctype="multipart/form-data" method="post">
<h2 class="form-signin-heading">请登录</h2>
<label class="sr-only">用户名</label>
<input type="text" class="form-control" name="username" placeholder="请填写用户名" required autofocus>
<br />
<label class="sr-only">密码</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
<br />
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="login.check()">登录</button>
</form> </div> <!-- /container -->
<script src="/Public/js/jquery.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
（3）添加登录的控制器和方法
完成代码实现：（文件位置：Admin>Controller>LoginController.class.php）
<?php
namespace Admin\Controller;
use Think\Controller;
class LoginController extends Controller {
public function index(){
$this->display(); //默认加载View>Login>index.html
}
}
（3）浏览器访问
http://172.17.0.2/index.php?m=admin&c=login&a=index
（4）页面显示
2、数据库准备
（1）数据库恢复： >mysql : source /var/www/html/cms.sql
（2）数据库配置：（位置：Common>Conf>config.php和db.php）
1)config.php配置 //允许加载其他配置文件，其文件名为（多个文件的文件名用逗号隔开）
'LOAD_EXT_CONFIG' => 'db'
2）db.php数据库配置 <?php
return array( 'DB_TYPE' => 'mysql',
'DB_HOST' => '127.0.0.1', //数据库服务器主机ip地址
'DB_USER' => 'root', //数据库用户名
'DB_PWD' => '', //数据库用户密码
'DB_PORT' => 3306, //数据库端口号
'DB_NAME' => 'cms', //数据库名
'DB_CHARSET' => 'utf8', //数据库编码
'DB_PREFIX' => 'cms_' //数据库前缀名 );
2、layer插件
(1）layer插件准备：
官方下载地址: http://layer.layui.com
官方教程： www.layui.com/doc/modules/layer.html
layer插件包括extend目录、skin目录和layer.js文件
完整文件放到项目下的dialog目录(位置: Public>js>dialog)
（2）插件二次封装：
为便于在此项目中使用，再对项目需要的弹出层进行二次封装，命名为dialog.js(位置：Public>js>dailog.js)
（3）常用弹出层：
1）错误弹出层
// 错误弹出层
error: function(message) {
layer.open({
content:message,
icon:2,
title : '错误提示',
});
},
2）成功弹出层
// 成功弹出层
success : function(message,url) {
layer.open({
content : message,
icon : 1,
yes : function(){
location.href=url;
},
});
},
3）确认弹出层
// 确认弹出层
confirm : function(message, url) {
layer.open({
content : message,
icon:3,
btn : ['是','否'],
yes : function(){
location.href=url;
},
});
}
4）无须跳转弹出层
//无需跳转到指定页面的确认弹出层
toconfirm : function(message) {
layer.open({
content : message,
icon:3,
btn : ['确定'],
});
}
（4）弹出层的调用：
1）引入本系统的类库dialog.js文件 （在Amin>View>Login>index.html中引入）
<script src="/Public/js/dialog.js"></script>
2）引入第三方插件layer.js文件（在Amin>View>Login>index.html中引入）
<script src="/Public/js/dialog/layer.js"></script>
3）调用（js文件）
dialog.error("这是弹出的消息内容")；
3、数据校验
(1)数据提交的两种方式：
1）同步提交数据：页面跳转（体验不好）
2）异步提交数据：通过js的ajax请求，页面不跳转，异步请求地址
(2)异步请求的实现：
1）jquery框架的ajax实现手册 http://jquery.cuishifeng.cn/
2）$.ajax()、 $.get()、 $.post()三种方式的理解
(3)前端登录的业务处理:
1）js校验：(位置: Public>js>admin>login.js)
/**
* 前端登录业务类
*/
var login = {
check : function() {
// 获取登录页面中的用户名 和 密码
var username = $('input[name="username"]').val();
var password = $('input[name="password"]').val(); if(!username) {
dialog.error('用户名不能为空');
}
if(!password) {
dialog.error('密码不能为空');
} var url = "/index.php?m=admin&c=login&a=check";
var data = {'username':username,'password':password};
// 执行异步请求 $.post
$.post(url,data,function(result){
if(result.status == 0) {
return dialog.error(result.message);
}
if(result.status == 1) {
return dialog.success(result.message, '/index.php?m=admin&c=index');
} },'JSON'); }
}
2）html表单触发（Amin>View>Login>index.html文件）
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="login.check()">登录</button>
3)login.js文件引入（在Amin>View>Login>index.html中引入）
<script src="/Public/js/admin/login.js"></script>
3）浏览器运行效果
(4)后端php业务处理:
1)check方法的数据校验：
$username = $_POST['username'];
$password = $_POST['password'];
if(!trim($username)) {
return show(0,'用户名不能为空');
}
if(!trim($password)) {
return show(0,'密码不能为空');
}
前端的数据校验是js实现的，其在浏览器中是可视的，用户是可看到的，为避免用户对修改js文件规避数据校验,所以必须在服务器端再次校验
show()公共方法的封装：（多处地方要用到，所以作为公共函数封装到Common/Common/function.php文件）
/**展示数据
* @param $status 状态码
* @param $message 展示的消息内容
* @param array $data
*/
function show($status, $message,$data=array()) {
$result = array(
'status' => $status,
'message' => $message,
'data' => $data,
); exit(json_encode($result));
}
2）数据校验通过的数据处理一-------用户不存在（登录失败）（check方法）
$ret = D('Admin')->getAdminByUsername($username); //查询admin表中是否存在该用户
if(!$ret || $ret['status'] !=1) {
return show(0,'该用户不存在');
}
if($ret['password'] != getMd5Password($password)) {
return show(0,'密码错误');
}
判断用户是否存在----操作数据库查询数据（Application/Common/Model/adminModel.class.php）
<?php
namespace Common\Model;
use Think\Model; class AdminModel extends Model { private $_db = '';
public function __construct() {
$this->_db = M('admin'); //实例化admin表
} public function getAdminUsername($username) {
$ret = $this->_db->where('username="'.$username.'"')->find();
return $ret;
}
}
对用户输入的密码进行md5加密（Application/Common/Common/function.php）
function getMd5Password($password) {
return md5($password . C('MD5_PRE')); // C('MD5_PRE')访问配置文件中'MD5_PRE'配置项的设置值
}
注：直接md5加密也不是太安全，所以配置一个自定义的前缀，然后再进行md5加密，相对更安全
MD5_PRE配置（Application/Common/Conf/config.php）
'MD5_PRE' => 'my_cms',
3）数据校验通过的数据处理二-------用户存在（登录成功）（check方法）
//将用户信息保存到session中
session('adminUser', $ret);
return show(1,'登录成功');
(5)浏览器运行效果
4、退出登录（利用session失效）
(1)设置访问后台页面时的session判断
public function index() {
if(session('adminUser')) {
$this->redirect('/iindex.php?m=admin&c=index');
}
$this->display(); //默认加载View>Login>index.html
}
(2)后台首页面退出登录的请求
<li>
<a href="/index.php?m=admin&c=login&a=logout"><i class="fa fa-fw fa-power-off"></i> 退出</a>
</li>
(3)添加logout控制器方法处理退出登录
public function logout() {
session('adminUser', null);
$this->redirect('/index.php?m=admin&c=login&a=index');
}
退出成功后自动跳转到后台登录页面。
后台登录功能完成！
新闻cms管理系统(二) ---- 后台登录功能的更多相关文章
- 九十三：CMS系统之cms后台登录功能
config form from wtforms import Form, StringField, IntegerFieldfrom wtforms.validators import Email, ...
- Python：名片管理系统（增加登录功能后出现问题，求教）
我将一个简单的名片管理系统定义成了函数.. 2层. 一个登录界面: 一个名片管理系统使用界面: 逻辑是:登录成功=>跳入名片系统使用界面,同时,跳出登录界面,给出欢迎使用,程序结束. 此时问题来 ...
- 新闻cms管理系统(三) ------菜单管理
1.前期准备工作 (1)模板介绍 添加菜单的模板页面 菜单管理首页: 添加菜单页面: (2)公共类引入介绍 公共函数文件的引入(位置: Application/Admin/Controller/Com ...
- 新闻cms管理系统 (补)-----路由优化一
修改后台的入口文件,将访问后台页面的入口文件设为admin.php,并且访问该文件的模块默认为admin模块. 添加后台入口文件具体操作步骤: (1)项目目录下新建admin.php (2)实现入口文 ...
- 新闻cms管理系统(一) ---- thinkphp框架准备
1.thinkphp介绍 一个快速.简单的基于MVC和面向对象的轻量级PHP开发框架 MVC:M数据层. V视图层 . C控制层 优点: (1)入手非常快 (2)thinkpjp提供核心内库.文件.函 ...
- 绿色的银行类cms管理系统模板——后台
链接:http://pan.baidu.com/s/1pK7Vu9X 密码:4cc5
- 【代码审计】VAuditDemo 后台登录功能验证码绕过
在 admin/logCheck.php中 $_POST['user']和$_POST['pass'] 未经过任何过滤或者编码处理就传入到$query中,可能存在万能密码绕过机制 但是$pass经过了 ...
- 27、Flask实战第27天：cms后台登录
cms后台登录界面 后台登录页面,我们不用自己写,只需要去Bootstrap中文网去找一个模板改一下就行 这里使用的模板是:https://v3.bootcss.com/examples/signin ...
- 新闻cms管理系统功能介绍
一. 后台登录功能 1.后台登录 2.数据校验 3. dialog插件 4.layer插件 5. 退出登录(利用session失效) 二. 菜单管理 1.后台入口文件优化 2.公共文件引入 3.菜单的 ...
随机推荐
- mysql update/delete in 子查询改写
#子查询(不支持) limit ,); #改写 limit ,) t ; #子查询(不支持) delete from `user` where id in ( ) ); #改写 delete from ...
- poj 2417 Discrete Logging ---高次同余第一种类型。babystep_gaint_step
Discrete Logging Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 2831 Accepted: 1391 ...
- 关于StringBuffe()长度和初始化长度的问题归纳
晚上做一个习题,发现了一个关于StringBuffer()长度的问题 根据理解大致可以归为以下知识. 直接上代码分析吧 public class StringBuffer_length_capacit ...
- ArcGISPlotSilverlightAPI For WPF
这两天有个需求,在地图上做标绘箭头,效果如下图. Arcgis for WPF 10.2.5.0版本,然而官方文档中没有这种API,自己去写一个呢,又感觉无从下手.无奈去网上搜索了一下,发现一篇好文: ...
- ContentProvider与ContentResolver
使用ContentProvider共享数据: 当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.虽然使用其他方法也可以对外共享数据,但数据 ...
- Chromebook 阿里云ECS 配置 jupyter Notebook
前言 新购入一台Chromebook Pixel ,为方便机器学习编程,用学生版的阿里云ECS搭建了jupyter Notebook 为减少下次踩坑,参考链接记录如下: 参考链接 阿里云使用笔记(一) ...
- Ubuntu 16.04 Apache2 更改访问html根路径方案（可解决403）
(1)确定html文件在服务器主机上的部署路径.例:/home/rl/vc/ (2)修改 vim sites-enabled/000-default.conf 中 DirectoryRoot 为 : ...
- jquery 之 $().each和$.each()
一.选择器+遍历(dom操作)分为两种: 第一种: $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); <!DOCTYPE ht ...
- spring boot(3)-Rest风格接口
Rest接口 虽然现在还有很多人在用jsp,但是其实这种动态页面早已过时,现在前端流行的是静态HTML+ rest接口(json格式).当然,如果是单台服务器,用动态还是静态页面可能没什么很大区别,但 ...
- python中的内容编码
一.python编码简介 1)编码格式简介 python解释器在加载 .py 文件中的代码时,会对内容进行编码(默认ASCII),ASCII(American Standard Code for In ...