美文网首页程序员
一个Javascript全栈开发:Node+MongoDB+An

一个Javascript全栈开发:Node+MongoDB+An

作者: DevKyle | 来源:发表于2016-12-06 21:41 被阅读917次

    本文算是本人第一次完成一个全栈式开发,后端基于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是否已经存在。

    后端业务逻辑处理

    后端业务,包括登录,注册,获取用户详情,更新用户信息,删除用户。本文处理简单的业务逻辑。

    1. 登录逻辑:首先根据mongoose查找是否存在用户,如果存在并且密码正确,将用户保存在session里面,存进数据库里面去。下次就可以免密码访问了。
    2. 注册逻辑:首先根据模型生成一个用户,从请求体重获取需要的信息,存入到数据库。保存完成后,保存session,并返回到注册界面。
    3. 更新用户信息:在数据库中设置了用户名为主键,所以设置了用户名无法修改。修改完成返回到主界面
    4. 删除用户:从数据库中删除,返回到登录界面。

    数据库

    数据库采用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。感谢,希望大家能有收获。加油🆙

    demo地址

    相关文章

      网友评论

        本文标题:一个Javascript全栈开发:Node+MongoDB+An

        本文链接:https://www.haomeiwen.com/subject/lzormttx.html