express+vue+mongodb+session 实现注册登陆

上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能，那么今天是在那个基础之上作了扩展，首先实现的功能有以下：

1. 支持注册，登陆功能，用户能够注册完成后，进行登陆，登陆完成后会进入到列表增删改查页面。
2. 支持session会话，也就是说设置了多长时间登陆过时，若是用户没有登陆，直接进查询列表页面，会重定向到登陆页面去，若是用户登陆了后，把浏览器关掉，直接输入列表查询页面，会直接进入列表页面的。
3. 列表数据加入了分页功能。
4. 对数据库中的请求加入了日志记录。

该代码和以前的实现增删改查代码，目录有所调整，目的想文件目录更加清晰。咱们在讲解以前，仍是和以前同样，先看下效果：
1. 首先服务器重启后，在地址栏中输入 http://localhost:8081/ 后，会重定向到登陆页面来，以下图所示：

2. 若是没有帐号的话，咱们能够注册一个帐号，进入注册页面，以下图所示：

3. 若是用户名和密码没有输入，或者输入的格式不合法的话，会以下提示所示：

4. 当用户注册成功后，能够看到以下页面了

5. 咱们去登陆页面，进行登陆，以下：

6. 登陆成功后，会跳转到列表页面，以下图所示：

下面的增删改查操做的流程，我就再也不介绍了，和我以前的 express+mongodb+vue 实现增删改查中的演示是同样的。

 7. 下面咱们来看看咱们的数据库中是否增长了刚刚注册的用户帐号了，以下图所示：

上面的四个帐号都是我注册的，在数据库中能够看到，注册成功了。

注意：若是某个用户注册过了，你再使用相同的帐号继续注册话，是不能注册，会提示该帐号已经注册过了，以下图所示：

下面仍是来看下咱们项目的整个目录架构以下：

### 目录结构以下：
demo1                                       # 工程名
|   |--- dist                               # 打包后生成的目录文件             
|   |--- node_modules                       # 全部的依赖包
|   |----database                           # 数据库相关的文件目录
|   | |---db.js                             # mongoose类库的数据库链接操做
|   | |---models                            # 存放全部模型表
|   | | |--- user.js                        # 增删改查用户数据表
|   | | |--- userTable.js                   # 用户帐号表
|   |--- app
|   | |---index
|   | | |-- views                           # 存放全部vue页面文件
|   | | | |-- list.vue                      # 列表数据
|   | | | |-- index.vue
|   | | | |-- login.vue                     # 用户登陆页面
|   | | | |-- regist.vue                    # 用户注册页面
|   | | |-- components                      # 存放vue公用的组件
|   | | |-- js                              # 存放js文件的
|   | | |-- css                             # 存放css文件
|   | | |-- store                           # store仓库
|   | | | |--- actions.js
|   | | | |--- mutations.js
|   | | | |--- state.js
|   | | | |--- mutations-types.js
|   | | | |--- index.js
|   | | | |
|   | | |-- app.js                          # vue入口配置文件
|   | | |-- router.js                       # 路由配置文件
|   |--- api                                # 保存全部接口操做的文件
|   | |--- addAndDelete.js                  # 增删改查的接口
|   | |--- regAndLogin.js                   # 注册登陆的接口
|   | |--- userSession.js                   # 用户session有效的接口
|   |--- routes                             # 存放全部的路由文件
|   | |--- addAndDelete.js                  # 增删改查路由
|   | |--- regAndLogin.js                   # 注册和登陆路由
|   | |--- userSession.js                   # session路由
|   |--- views
|   | |-- index.html                        # html文件
|   |--- webpack.config.js                  # webpack配置文件 
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel转码文件
|   |--- app.js                             # express入口文件

首先咱们先看下 根目录下的 app.js 文件代码(服务器代码)：

部分代码以下：

// 引入express模块
const express = require('express');
// 引入session
const session = require('express-session');
// 建立app对象
const app = express();

// 加载路由
const addAndDelete = require('./routes/addAndDelete');
const regAndLogin = require('./routes/regAndLogin');
const userSession = require('./routes/userSession');

const bodyParser = require("body-parser");

const fs = require('fs');
const path = require('path');

// mongoose-morgan
const morgan = require('mongoose-morgan');

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(session({
  secret: 'kongzhi', // 对 session id 相关的cookie 进行加密签名
  cookie: {
    maxAge: 1000 * 60 * 10  // 设置 session的有效时间，单位为毫秒，设置有效期为10分钟
  }
}));

// Logger 添加数据库操做日志记录  https://www.npmjs.com/package/mongoose-morgan
app.use(morgan({
  connectionString: 'mongodb://localhost:27017/dataDb'
}));

// 使用
app.use('/user', addAndDelete);
app.use('/reglogin', regAndLogin);
app.use('/user', userSession);

如上代码，加载路由后，而后使用 use了，对应的 routes文件下的js文件，代码分别以下：

1. routes/addAndDelete.js 代码以下：

// 引入express 模块 
const express = require('express');

const router = express.Router();

// 引入user.js
const User = require('../api/addAndDelete');

router.post('/add', User.add);

router.post('/query', User.query);

router.post('/del', User.del);

router.post('/update', User.update);

module.exports = router;

2. routes/regAndLogin.js 代码以下：

const express = require('express');

const router = express.Router();

const RegAndLogin = require('../api/regAndLogin');

router.post('/regist', RegAndLogin.registered);

router.post('/login', RegAndLogin.login);

// 注销
router.post('/logout', RegAndLogin.logout);

module.exports = router;

3. routes/userSession.js 代码以下：

const express = require('express');

const router = express.Router();

const userSession = require('../api/userSession');

router.post('/usersession', userSession.usersession);

module.exports = router;

所以对于 app.use('/user', addAndDelete); 的时候，会调用 routes/addAndDelete.js 下的请求方法，分别为：

/add, /query, /update, /del, 所以在咱们列表页面中使用接口方式如：相似于以下这样的：

都是 /user/add, /user/query, /user/update, /user/del 这样的接口，好比说咱们使用 /user/add post请求这样的接口的时候，他们会调用到 routes/addAndDelete.js 中的router.post('/add', User.add); 这里面的 User.add方法，因此它就会调用到 api/addAndDelete.js 中的add函数，以下代码所示：

const User = require('../database/models/user');
// 新增信息
module.exports.add = function(req, res, next) {
  const user = new User({
    name: req.body.name,
    age: req.body.age,
    sex: req.body.sex
  });
  user.save((err, docs) => {
    if (err) {
      res.send({ 'code': 1, 'errorMsg': '新增失败' });
    } else {
      res.send({ "code": 0, 'message': '新增成功' });
    }
  });
  next();
};

所以会调用数据库的操做，会在数据库中增长一条数据。如上代码，会应用到 database/models/user 这个表中的代码：

/*
 定义一个user的Schema
*/
const mongoose = require('../db.js');
const Schema = mongoose.Schema;

// 建立一个模型
const UserSchema = new Schema({
  name: { type: String}, // 属性name，类型为String
  age: { type: Number, default: 30 }, // 属性age，类型为Number，默认值为30
  sex: { type: String }
});

// 导出model模块
const User = module.exports = mongoose.model('User', UserSchema);

所以会建立user表，而且在表中插入对应的数据。

如上只是解释下增长接口的调用方式，其余的接口设计也是同样的。就很少解释了。对应 /user 这样的，咱们在webpack中的devServer中会配置下，解决跨域问题，由于我如今是启动两个服务的，node端的端口是 3001, 而个人webpack的端口是8081， 会存在跨域的，所以webpack的 devServer 须要作以下配置的：

devServer: {
  port: 8081,
  // host: '0.0.0.0',
  headers: {
    'X-foo': '112233'
  },
  inline: true,
  overlay: true,
  stats: 'errors-only',
  proxy: {
    '/user': {
      target: 'http://127.0.0.1:3001',
      changeOrigin: true  // 是否跨域
    },
    '/combineFile': {
      target: 'http://127.0.0.1:3001',
      changeOrigin: true,  // 是否跨域,
      pathRewrite: {
        '^/combineFile' : ''  // 重写路径
      }
    },
    '/reglogin': {
      target: 'http://127.0.0.1:3001',
      changeOrigin: true  // 是否跨域
    }
  }
},

4. app.js 中使用了 mongoose-morgan 这个插件，为了数据库操做接口的时候，写入日志，好比报错的时候能够在服务器端看到报错信息，该API的具体使用能够
看下 npm库（https://www.npmjs.com/package/mongoose-morgan）。

以下日志记录：

具体的代码这边就很少解释，有兴趣的话能够去github上下载代码查看下哦。

查看github上源码