express+vue+mongodb+session 实现注册登录功能


Posted in Javascript onDecember 06, 2018

主要实现如下功能:

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

先看下效果:

1. 首先服务器重启后,在地址栏中输入 http://localhost:8081/ 后,会重定向到登录页面来,如下图所示:

express+vue+mongodb+session 实现注册登录功能

2. 如果没有账号的话,我们可以注册一个账号,进入注册页面,如下图所示:

express+vue+mongodb+session 实现注册登录功能

3. 如果用户名和密码没有输入,或者输入的格式不合法的话,会如下提示所示:

express+vue+mongodb+session 实现注册登录功能

express+vue+mongodb+session 实现注册登录功能

4. 当用户注册成功后,可以看到如下页面了

express+vue+mongodb+session 实现注册登录功能

5. 我们去登录页面,进行登录,如下:

express+vue+mongodb+session 实现注册登录功能

6. 登录成功后,会跳转到列表页面,如下图所示:

express+vue+mongodb+session 实现注册登录功能

下面的增删改查操作的流程,我就不再介绍了,和我之前的 express+mongodb+vue 实现增删改查中的演示是一样的。

7. 下面我们来看看我们的数据库中是否增加了刚刚注册的用户账号了,如下图所示:

express+vue+mongodb+session 实现注册登录功能

上面的四个账号都是我注册的,在数据库中可以看到,注册成功了。

注意:如果某个用户注册过了,你再使用相同的账号继续注册话,是不能注册,会提示该账号已经注册过了,如下图所示:

express+vue+mongodb+session 实现注册登录功能

下面还是来看下我们项目的整个目录架构如下:

### 目录结构如下:
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, 因此在我们列表页面中使用接口方式如:类似于如下这样的:

express+vue+mongodb+session 实现注册登录功能

都是 /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)。

如下日志记录:
express+vue+mongodb+session 实现注册登录功能

具体的代码这边就不多解释,有兴趣的话可以去github上下载代码查看下哦。

查看github上源码

总结

以上所述是小编给大家介绍的express+vue+mongodb+session 实现注册登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
js验证框架实现代码分享
May 18 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
Three.JS实现三维场景
Dec 30 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
如何使用puppet替换文件中的string
Dec 06 #Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 #Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 #Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 #Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 #Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 #Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 #Javascript
You might like
php 高效率写法 推荐
2010/02/21 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
iOS10推送通知开发教程
2016/09/19 PHP
Yii2单元测试用法示例
2016/11/12 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript事件问题
2009/09/05 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
在windows系统中实现python3安装lxml
2016/03/23 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
简述安装Slackware Linux系统的过程
2012/01/12 面试题
EJB的激活机制
2013/10/25 面试题
护士的岗位职责
2013/12/04 职场文书
本科毕业生求职信
2014/06/15 职场文书
党员志愿者活动总结
2014/06/26 职场文书
检察院起诉书
2015/05/20 职场文书
关于教师节的广播稿
2015/08/19 职场文书
《穷人》教学反思
2016/02/19 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis