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 相关文章推荐
js下拉菜单语言选项简单实现
Sep 23 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 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常用代码
2006/11/23 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
javascript数字时钟示例分享
2014/04/23 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
jQuery表单选择器用法详解
2019/08/22 jQuery
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
pycharm 使用心得(四)显示行号
2014/06/05 Python
python中Genarator函数用法分析
2015/04/08 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python检测生僻字的实现方法
2016/10/23 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
药学专业个人自我评价
2013/11/11 职场文书
单位授权委托书范本
2014/09/26 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年环保工作总结
2014/11/26 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
Java实现简单小画板
2022/06/10 Java/Android
mysql数据库如何转移到oracle
2022/12/24 MySQL