本文算是本人第一次完成一个全栈式开发,后端基于Node.js,数据库基于MongoDB,前端主要基于Angular来实现的一个Web开发。本文算是第一个跑通的程序,本人也是通过学习JS全栈开发的过程,慢慢的积累,踩坑的过程。在web技术快速发展的现在,采用的依赖也越来越多,版本的更迭导致网上的教程过时,本文采用的库和node版本都是当前最新的,可以让大家少踩坑啦。
本文只是实现了简单的登入的后端逻辑和简单的前端界面,简单又容易上手。功能上支持用户注册,用户登录,用户注销,删除用户等基本功能。并且支持免密码登录一定时间的功能。
后端
后端依赖项
本程序采用当前最新的node版本6.7.0,主要采用如下的依赖项
"body-parser": "~1.15.2",
"connect-mongo": "^1.3.2",
"cookie-parser": "~1.4.3",
"ejs": "~2.5.2",
"express": "~4.14.0",
"express-session": "^1.14.2",
"mongoose": "^4.7.1",
后端主程序
这节主要介绍配置后端主程序,主要包括设置中间件,建立session连接,数据库配置等。下面是一些主要的代码,完整的代码可以查看文末的连接。
// auth_server
var expressSession = require('express-session');
var mongoStore = require('connect-mongo')({session:expressSession});
var conn =mongoose.connect('mongodb://localhost/myapp');
// 当前版本mongoose已经取消了Promise,需要自己设置
mongoose.Promise = require('bluebird');
app.use(expressSession({
secret: 'SECRET',
cookie: {maxAge:60*60*1000},
resave:true,
saveUninitialized: true,
store: new mongoStore({
mongooseConnection: conn.connection,
collection: 'sessions'
})
}));
require('./routes')(app);
app.listen(3030);
后端路由
路由是后端程序重要的一个环节,本文采用RESTful API 设计,处理登入,注册,详细页面的所有页面的接口。借助于express强大的功能,能够很简单的设置接口。具体可以参考完整的代码routes.js。需要注意的是在登录之后,后台后保存这次session,并且这个过程被写进中间件中去了,那么以后用户每次访问,就会获取信息。然后就可以免密码登录了。主要就是根据req.session.user是否已经存在。
后端业务逻辑处理
后端业务,包括登录,注册,获取用户详情,更新用户信息,删除用户。本文处理简单的业务逻辑。
- 登录逻辑:首先根据mongoose查找是否存在用户,如果存在并且密码正确,将用户保存在session里面,存进数据库里面去。下次就可以免密码访问了。
- 注册逻辑:首先根据模型生成一个用户,从请求体重获取需要的信息,存入到数据库。保存完成后,保存session,并返回到注册界面。
- 更新用户信息:在数据库中设置了用户名为主键,所以设置了用户名无法修改。修改完成返回到主界面
- 删除用户:从数据库中删除,返回到登录界面。
数据库
数据库采用MongoDB,通过mongoose建模,在新建用户和登录等操作中,实现了增删查改等基本操作,如下简单代码
// 建模
var userSchema = new schema({
username:{type:String, unique:true},
password:String,
email:String,
color:String,
hashed_password:String
});
mongoose.model('User',userSchema);
// 添加一条记录
var user = new User({username:req.body.username});
user.set('email',req.body.email);
user.set('hashed_password',hashPW(req.body.password));
user.save(function (err) {
// to do something
});
// 查找,修改
User.findOne({_id:req.session.user}).exec(function (err,user) {
if (user) {
// 修改
user.set('email',req.body.email);
user.set('color',req.body.color);
// 保存
user.save(function (err) {
// to do something
});
}
});
// 删除
User.findOne({ _id: req.session.user })
.exec(function (err,user) {
if (user) {
user.remove(function (err) {
// to do something
});
}
});
实际代码可以参考文章后面链接。
前端
前端简单的写了四个界面。采用AngularJS进行前端开发。只用了ng-model
用来动态绑定数据。具体代码可以参考文后代码。
结尾
本文代码放在Github上,有需要的可以下载下来,开启mongoDB,然后切换到auth_server.js目录下运行node auth_server.js
即可(其实是我上传前忘记添加.gitignore,导致都上传了,哈哈)。
学生时代对于GitHub,没有什么特别深的感觉,觉得star太做,现在才发现,求赐star。感谢,希望大家能有收获。加油🆙
网友评论