Fork me on GitHub 盒子
盒子
文章目录
  1. 最终效果
  2. 项目文件结构
  3. 步骤
    1. 首先新建一个login.jade文件,代码如下(注意缩进,间隔为2字间距,md不缩进-_-!)
    2. 编写对应scss和js并引入
    3. 根据上一篇文章,开两个cmd,一个mongod –dbpath D:\database,另外一个mongo。
    4. 交互部分
    5. 因为express4.X以上已经把session模块分离出来了,所以必须要多引入依赖模块express-session
  4. 结束

Nodejs+Express+Mongodb搭建简单的应用(3)

最终效果

Alt text

项目文件结构

先把文件结构贴出来利于后续流程说明

Alt text

步骤

首先新建一个login.jade文件,代码如下(注意缩进,间隔为2字间距,md不缩进-_-!)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
extends layout
block link
link(rel='stylesheet', href='/stylesheets/1.0.0/login.css')
block content
canvas#jm-funnyBackground
div.loginBox.abs-mt
div.title
h3
div.u-name
h4 用户名:
input.username#Name(tabindex='1', placeholder='请输入用户名',name='Name', type='text')
div.u-pwd
h4 密码:
input.password#Password(tabindex='2', placeholder='请输入密码',name='Password', type='password')
a.logon#Logon(href='javascript:;') 登录
block script
script(src='/javascripts/modules/funnyBackground/funnyBackground.js')
script(src='/javascripts/modules/login/login.js')

extend是jade模板的一大特色,继承,另外一大特色是mixin,以后再叙(实际项目我已经更换为artTemplate了)。

编写对应scss和js并引入

根据上一篇文章,开两个cmd,一个mongod –dbpath D:\database,另外一个mongo。

  • use database,建立database数据库

  • 接下来为数据库里添加用户表,存放登录用户名和密码,db.usercollection.insert({“username”:”admin”, “password”:”123456”})

  • 这时候可以通过mongoVUE或者cmd find 可以看到在database这数据库中已经增加了一张usercollection的表,里面有三个字段,_id,username, password,如下图:

Alt text

交互部分

login.js 截取部分交互代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
self.getAjaxData("/login",{username: username,password:password},"post","json",self.loginCallback) // 发ajax请求到localhost:3000/login
loginCallback: function (data) { // ajax成功回调
if(data.code == 200){
window.location = '/index';
} else if(data.code == 201) {
alert("您输入的用户名或密码不正确");
}
},
getAjaxData: function (url, data, type, dataType, callback, failFn) {
$.ajax({
url: url,
data: data,
type: type,
dataType: dataType,
success: function (data) {
callback && callback(data);
},
error: function () {
failFn && failFn();
}
});
}
  • 首先通过ajax给localhost:3000/login发出请求

  • 然后在node中处理请求,req.body.*就是ajax传入的data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
router.post('/login', function (req, res, next) {
// 请求带过来的data在req.body里
var username = req.body.username;
var password = req.body.password;
var collection = db.get('usercollection'); //获得数据库中的集合(类似关系数据库中的表)
collection.find({"username": username, "password": password}, {}, function (e, docs) { //取得所有的集合数据, 渲染到页面上,关键字是data,第一个{}表示where,第二个{}表示显示隐藏,第三个为回调函数
if (docs != "") {
req.session.username = docs[0].username;
req.session.password = docs[0].password;
res.send({"code": 200}); // 200 表示登录成功
} else {
res.send({"code": 201}); // 201 表示登录失败
}
});
});
  • node通过res.send给ajax返回了一个json,里面只有一个状态参数code

  • login.js去判断,如果登录成功,则进行页面跳转,window.location = “/index”

  • node拦截localhost:3000/index,并进行数据渲染,这里利用了session进行参数存储,判断登录状态亦可使用

1
2
3
4
5
6
7
/*GET index page */
router.get('/index', function (req, res, next) {
var docs = res.session;
res.render('index', {
"data": docs
});
});

因为express4.X以上已经把session模块分离出来了,所以必须要多引入依赖模块express-session

  • 在app.js中增加
1
2
3
4
5
6
7
8
var session = require('express-session');
app.use(session({
secret: "McChen", // 必填参数,可随意取名
name: "loginMes", // 存入cookies的参数名
cookie: {maxAge: 60000 * 60 * 24 * 15}, // cookie的生命周期
resave: false, // 必须,否则session会报错
saveUninitialized: true 必须,否则session会报错
}));
  • 之后便可以愉快的利用res.session进行存储了

结束

至此,一个与数据库交互的登录页面已经基本完成


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen