nodejs开发cms系统第一篇之用户登录
2016-07-26 13:54
381 查看
摘要: cms,用户登录
所有的后台系统都有一个登录页面，它是整个后台系统的入口，用于进行身份验证，功能不是很复杂，说简单的确很简单。由于它是整个后台系统的入口，也是整个后台系统的门面，登录页面设计的好坏也在一定程度上会影响使用这个系统的用户体验，而简洁美观的设计界面往往能给登录用户一个良好的第一感觉。为了找到满意的登录页面，今天下午花了不少时间，在网上找各种登录页面设计素材，去了不少网站，看了二十几个设计页都觉得不够简约而美，感觉都是只能做demo使用的那种。最后终于找到一个还算满意的登录页，个人觉得既简洁又清新大气，但还不是完全满足需要，于是又修改下样式就拿来直接用了。
下面是效果图：
一、生成express项目
打开cmd，进入工作目录，执行
express -e SimpleCMS
即可生成名为SimpleCMS的项目骨架
进入SimpleCMS目录，执行
express install
安装所需依赖模块
二、生成验证码
生成验证码这里用的是ccap，一个比较高效生成图片的模块
执行命令npm install ccap --save
安装完成后就可以使用它来生成验证码了，看代码：
var ccap = require('ccap')();//引入ccap模块
var ary = ccap.get();//默认生成6位随机字符串。
var txt = ary[0];//验证码文字
var buf = ary[1];//图片二进制流
console.log(txt);
console.log(buf);
生成验证码就是这么简单，几行代码就可以了。上面代码是在控制台生成验证码，那么如何将验证码图片显示到浏览器呢？
只需要通过express提供的response对象把上面的二进制图片流buf响应给浏览器即可，所以只需要response.end(buf);即可。
三、前端登录页面
1、在项目的views目录下新建login.ejs用于显示登录页面，内容如下:
<!DOCTYPE html>
<title><%=title%></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/javascripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/javascripts/login.js"></script>
<link href="css/login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>欢迎使用CMS系统</h1>
<div class="login" style="margin-top:50px;">
<div class="header">
<div class="switch" id="switch">
<a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a>
<div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;">
</div>
</div>
</div>
<div class="web_qr_login" id="web_qr_login" style="display: block; height: 335px;">
<!--登录-->
<div class="web_login" id="web_login">
<div class="login-box">
<div class="login_form">
<form action="/login" name="loginform" accept-charset="utf-8" id="loginform" class="loginForm" method="post">
<div id="errMsg" class="err"></div>
<div class="uinArea" id="uinArea">
<label class="input-tips" for="username">帐号：</label>
<div class="inputOuter" id="uArea">
<input type="text" id="username" name="username" class="inputstyle" title="Enter your name" />
</div>
</div>
<div class="pwdArea" id="pwdArea">
<label class="input-tips" for="password">密码：</label>
<div class="inputOuter" id="pArea">
<input type="password" id="password" name="password" class="inputstyle"/>
</div>
</div>
<div class="pwdArea" id="codeArea">
<label class="input-tips-checkcode" for="checkcode">验证码：</label>
<div class="inputOuterCode" id="cArea">
<input type="text" id="checkcode" name="checkcode" class="inputcodestyle"/>
<img src="/checkcode" class="imgcodestyle" onclick='changeCode()'/>
</div>
</div>
<div style="padding-left:50px;margin-top:20px;">
<input type="button" id="btnLogin" value="登 录" style="width:150px;" class="button_blue"/>
</div>
</form>
</div>
</div>
</div>
<!--登录end-->
</div>
</div>
<div class="jianyi">*推荐使用ie8或以上版本ie浏览器或Chrome内核浏览器访问本站</div>
</body>
</html>
2、在项目根目录下新建/util/CaptchaUtil.js方便生成验证码工具类
在项目的routes目录下新建captcha.js用于处理生成和刷新验证码的请求，代码如下：
var express = require('express');
var router = express.Router();
var captcha = require('./../util/CaptchaUtil');
router.get('/', function(req, res) {
var cap=captcha.get();
var buf=cap[1];
res.end(buf);
});
module.exports = router;
3、登录验证
前端登录验证脚本也很简单，主要验证下帐号、密码的格式合不合法，验证码正不正确，验证通过了就直接提交表单给后端处理了，相信有js基础的大家都会写，文章最后会将源码献上，大家可以看看代码运行体验下。
四、后端登录验证
后端登录验证离不开数据库，因为注册的用户信息都是存在数据库里的，主要是验证下登录用户填写的验证码是否正确以及账户和密码跟数据库中的用户信息是否匹配。这里使用的是mysql数据库.
1、创建数据库和表，sql脚本如下：
CREATE DATABASE db_cms DEFAULT CHARSET utf8 COLLATE utf8_general_ci;
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
`id` int(20) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL DEFAULT '',
`pwd` varchar(32) NOT NULL DEFAULT '',
`email` varchar(30) NOT NULL DEFAULT '',
`type` varchar(5) NOT NULL DEFAULT '',
`create_time` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
创建好后，初始化数据:
INSERT INTO `db_cms`.`t_user` (`id`, `name`, `pwd`, `email`, `type`, `create_time`) VALUES ('1', 'admin','21232f297a57a5a743894a0e4a801fc3', '', '1', '2016-01-16 23:15:30');
即添加一个帐号和密码为admin的用户,其中密码经过了md5加密
2、mysql登录验证
在项目根目录下新建/database/mysql/User.js用于连接mysql进行登录验证，查询代码比较简单，就不贴出了
3、md5工具类
在项目util目录下新建Md5Util.js即md5加密工具类
4、处理登录请求
在项目的routes目录下新建login.js用于处理登录的get和post请求，代码如下：
var express = require('express');
var router = express.Router();
var user = require('./../database/mysql/User');
var md5 = require('./../util/Md5Util');
//处理get请求返回登录页面
router.get('/', function(req, res) {
res.render('login', { title: '登录CMS' });
});
//处理post请求，接收提交表单参数
router.post('/', function(req, res) {
var name=req.body.name;//接收表单name参数
var pwd=req.body.pwd;
var code=req.body.checkcode;
password=md5(password);//md5加密密码
var loginUser={username:name,password:pwd};
user.login(loginUser);
});
module.exports = router;
5、增加路由配置
app.js是整个后端程序的入口，里面配置了路由、引入了express框架等第三方模块，加入登录和验证码路由：
var login = require('./routes/login');
var captcha = require('./routes/captcha');
app.use('/login', login);
app.use('/captcha', captcha);
至此，登录功能的所有开发都完成了。
五、运行项目
进入项目根目录，npm start ，浏览器访问:localhost:3000/即可看到登录页面，进行登录。
好了，终于写完了，源码已上传网盘，今天就到这里。
所有的后台系统都有一个登录页面，它是整个后台系统的入口，用于进行身份验证，功能不是很复杂，说简单的确很简单。由于它是整个后台系统的入口，也是整个后台系统的门面，登录页面设计的好坏也在一定程度上会影响使用这个系统的用户体验，而简洁美观的设计界面往往能给登录用户一个良好的第一感觉。为了找到满意的登录页面，今天下午花了不少时间，在网上找各种登录页面设计素材，去了不少网站，看了二十几个设计页都觉得不够简约而美，感觉都是只能做demo使用的那种。最后终于找到一个还算满意的登录页，个人觉得既简洁又清新大气，但还不是完全满足需要，于是又修改下样式就拿来直接用了。
下面是效果图：
一、生成express项目
打开cmd，进入工作目录，执行
express -e SimpleCMS
即可生成名为SimpleCMS的项目骨架
进入SimpleCMS目录，执行
express install
安装所需依赖模块
二、生成验证码
生成验证码这里用的是ccap，一个比较高效生成图片的模块
执行命令npm install ccap --save
安装完成后就可以使用它来生成验证码了，看代码：
var ccap = require('ccap')();//引入ccap模块
var ary = ccap.get();//默认生成6位随机字符串。
var txt = ary[0];//验证码文字
var buf = ary[1];//图片二进制流
console.log(txt);
console.log(buf);
生成验证码就是这么简单，几行代码就可以了。上面代码是在控制台生成验证码，那么如何将验证码图片显示到浏览器呢？
只需要通过express提供的response对象把上面的二进制图片流buf响应给浏览器即可，所以只需要response.end(buf);即可。
三、前端登录页面
1、在项目的views目录下新建login.ejs用于显示登录页面，内容如下:
<!DOCTYPE html>
<title><%=title%></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/javascripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/javascripts/login.js"></script>
<link href="css/login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>欢迎使用CMS系统</h1>
<div class="login" style="margin-top:50px;">
<div class="header">
<div class="switch" id="switch">
<a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a>
<div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;">
</div>
</div>
</div>
<div class="web_qr_login" id="web_qr_login" style="display: block; height: 335px;">
<!--登录-->
<div class="web_login" id="web_login">
<div class="login-box">
<div class="login_form">
<form action="/login" name="loginform" accept-charset="utf-8" id="loginform" class="loginForm" method="post">
<div id="errMsg" class="err"></div>
<div class="uinArea" id="uinArea">
<label class="input-tips" for="username">帐号：</label>
<div class="inputOuter" id="uArea">
<input type="text" id="username" name="username" class="inputstyle" title="Enter your name" />
</div>
</div>
<div class="pwdArea" id="pwdArea">
<label class="input-tips" for="password">密码：</label>
<div class="inputOuter" id="pArea">
<input type="password" id="password" name="password" class="inputstyle"/>
</div>
</div>
<div class="pwdArea" id="codeArea">
<label class="input-tips-checkcode" for="checkcode">验证码：</label>
<div class="inputOuterCode" id="cArea">
<input type="text" id="checkcode" name="checkcode" class="inputcodestyle"/>
<img src="/checkcode" class="imgcodestyle" onclick='changeCode()'/>
</div>
</div>
<div style="padding-left:50px;margin-top:20px;">
<input type="button" id="btnLogin" value="登 录" style="width:150px;" class="button_blue"/>
</div>
</form>
</div>
</div>
</div>
<!--登录end-->
</div>
</div>
<div class="jianyi">*推荐使用ie8或以上版本ie浏览器或Chrome内核浏览器访问本站</div>
</body>
</html>
2、在项目根目录下新建/util/CaptchaUtil.js方便生成验证码工具类
在项目的routes目录下新建captcha.js用于处理生成和刷新验证码的请求，代码如下：
var express = require('express');
var router = express.Router();
var captcha = require('./../util/CaptchaUtil');
router.get('/', function(req, res) {
var cap=captcha.get();
var buf=cap[1];
res.end(buf);
});
module.exports = router;
3、登录验证
前端登录验证脚本也很简单，主要验证下帐号、密码的格式合不合法，验证码正不正确，验证通过了就直接提交表单给后端处理了，相信有js基础的大家都会写，文章最后会将源码献上，大家可以看看代码运行体验下。
四、后端登录验证
后端登录验证离不开数据库，因为注册的用户信息都是存在数据库里的，主要是验证下登录用户填写的验证码是否正确以及账户和密码跟数据库中的用户信息是否匹配。这里使用的是mysql数据库.
1、创建数据库和表，sql脚本如下：
CREATE DATABASE db_cms DEFAULT CHARSET utf8 COLLATE utf8_general_ci;
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
`id` int(20) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL DEFAULT '',
`pwd` varchar(32) NOT NULL DEFAULT '',
`email` varchar(30) NOT NULL DEFAULT '',
`type` varchar(5) NOT NULL DEFAULT '',
`create_time` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
创建好后，初始化数据:
INSERT INTO `db_cms`.`t_user` (`id`, `name`, `pwd`, `email`, `type`, `create_time`) VALUES ('1', 'admin','21232f297a57a5a743894a0e4a801fc3', '', '1', '2016-01-16 23:15:30');
即添加一个帐号和密码为admin的用户,其中密码经过了md5加密
2、mysql登录验证
在项目根目录下新建/database/mysql/User.js用于连接mysql进行登录验证，查询代码比较简单，就不贴出了
3、md5工具类
在项目util目录下新建Md5Util.js即md5加密工具类
4、处理登录请求
在项目的routes目录下新建login.js用于处理登录的get和post请求，代码如下：
var express = require('express');
var router = express.Router();
var user = require('./../database/mysql/User');
var md5 = require('./../util/Md5Util');
//处理get请求返回登录页面
router.get('/', function(req, res) {
res.render('login', { title: '登录CMS' });
});
//处理post请求，接收提交表单参数
router.post('/', function(req, res) {
var name=req.body.name;//接收表单name参数
var pwd=req.body.pwd;
var code=req.body.checkcode;
password=md5(password);//md5加密密码
var loginUser={username:name,password:pwd};
user.login(loginUser);
});
module.exports = router;
5、增加路由配置
app.js是整个后端程序的入口，里面配置了路由、引入了express框架等第三方模块，加入登录和验证码路由：
var login = require('./routes/login');
var captcha = require('./routes/captcha');
app.use('/login', login);
app.use('/captcha', captcha);
至此，登录功能的所有开发都完成了。
五、运行项目
进入项目根目录，npm start ，浏览器访问:localhost:3000/即可看到登录页面，进行登录。
好了，终于写完了，源码已上传网盘，今天就到这里。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- node.js
- LeetCode 19. Remove Nth Node From End of List
- Node.js Stream(流)
- Node.js Buffer(缓冲区)
- 安装ionic报错 { [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/ionic']解决方法
- 222. Count Complete Tree Nodes
- nodejs--Express
- Confman - 针对「Node 应用」的配置文件加载模块
- [JS]Nodepad++配置Node.JS开发环境——windows
- 【Java】LeetCode进阶之路（Swap Nodes in Pairs）
- light oj 1257 Farthest Nodes in a Tree (II)(724训练题目)主要是利用了反证法： 假设 s-t这条路径为树的直径，或者称为树上的最长路 现有结论，从任意一点
- 【那些遇到的坑】—hadoop完全分布式集群搭建namenode找不到datanode，总显示0
- 【那些遇到的坑】—hadoop完全分布式集群搭建启动一直处于starting namenode
- Node.js 切近实战(九) 之Excel在线（在线编辑）
- Node.js 切近实战(十一) 之实时通讯
- Node.js EventEmitter
- Node.js 事件循环
- node.js报错 SyntaxError: Unexpected token ILLEGAL
- Node.js 回调函数
- Node.js REPL(交互式解释器)