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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
微信小程序 网络通信实现详解
Jul 23 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
PHP模板解析类实例
2015/07/09 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
图文详解vue框架安装步骤
2019/02/12 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
Python中查看文件名和文件路径
2017/03/31 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
python使用KNN算法手写体识别
2018/02/01 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
对Python信号处理模块signal详解
2019/01/09 Python
python实现代码统计程序
2019/09/19 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
个人委托书
2014/07/31 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
早会开场白台词大全
2015/06/01 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Java spring定时任务详解
2021/10/05 Java/Android