express vue mongodb会话实现注册和登录功能

时间：2021-08-28 来源：互联网编辑：宝哥软件园浏览：次

主要实现以下功能：

1.支持注册和登录功能。注册后，用户可以登录。登录后，他们将进入列表添加、删除和修改页面。2.支持session session，也就是说设置了登录多长时间到期。如果用户没有登录，他将被重定向到登录页面。如果用户登录，关闭浏览器，直接进入列表查询页面，他会直接进入列表页面。3.列表数据增加了分页功能。4.将请求记录在数据库中。

先看效果：

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

2.如果没有账号，我们可以注册账号，进入注册页面，如下图所示：

3.如果没有输入用户名和密码，或者输入的格式不合法，会出现如下提示：

4.当用户注册成功时，您可以看到以下页面

5.让我们转到登录页面，按如下方式登录：

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

下面我就不介绍添加、删除、修改、检查的过程了，和我之前在express mongodb vue中的演示是一样的。

7.让我们看看新注册的用户帐户是否已经添加到我们的数据库中，如下图所示：

以上四个账号都是我注册的。从数据库中可以看到，注册是成功的。

注意：如果用户已经注册，如果继续使用同一个账户注册，则无法注册，系统会提示该账户已经注册，如下图所示：

让我们看一下我们项目的整个目录结构，如下所示：

一些代码如下：

//引入表达模块const express=require(' express ')；//引入session onst session=require(' express-session ')；//创建应用对象const app=express()；//加载路由const addAndDelete=require(' ./routes/addAndDelete ')；const regAndLogin=require(' ./routes/regandlog in ')；const userSession=require(' ./routes/用户会话’)；const body parser=require(' body-parser ')；const fs=require(' fs ')；const path=require(' path ')；//mongose-morganconst mor gan=required(' mongose-mor gan ')；app。使用(BodyParser。JSON())；app。使用(BodyParser。URL编码({扩展： false })；app。使用(会话({ secret : ' kong zhi '，//对会话编号相关的甜饼干进行加密签名cookie : { max age : 1000 * 60 * 10//设置会议的有效时间，单位为毫秒，设置有效期为10分钟}}));//记录器添加数据库操作日志记录https://www。npmjs。com/package/mongose-morganapp。使用(mor gan({ connectionstring : ' MongoDB ://localhost :27017/DataDB ' })；//使用app.use('/user '，addAndDelete)；app.use('/reglogin '，regandlog in)；app.use('/user '，用户会话)；如上代码，加载路由后，然后使用使用了，对应的路线文件下的射流研究…文件，代码分别如下：

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

//引入表达模块const express=require(' express ')；常数路由器快递.路由器();//引入user.jsconst User=require('./API/addAndDelete’)；router.post('/add '，用户。添加)；router.post('/query '，用户。查询)；router.post('/del '，用户。del)；router.post('/update '，用户。更新)；module.exports=路由器；2.routes/regAndLogin.js代码如下：

const express=require(' express ')；常数路由器快递.路由器();const RegAndLogin=require('./API/regandLogIng’)；router.post('/regist '，regandlog in。注册)；router.post('/login '，regandlog in。登录)；//注销router.post('/logout '，regandlog in。注销)；module.exports=路由器；

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

const express=require(' express ')；常数路由器快递.路由器();const userSession=require('./API/userSession’)；router.post('/usersession '，用户会话。用户会话)；module.exports=路由器；

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

/add，/query，/update，/del，因此在我们列表页面中使用接口方式如：类似于如下这样的：

都是/user/add，/user/query，/user/update，/user/del这样的接口，比如说我们使用/用户/添加帖子请求这样的接口的时候，他们会调用到routes/addAndDelete.js中的router.post('/add '，用户。添加)；这里面的User.add方法，所以它就会调用到api/addAndDelete.js中的增加函数，如下代码所示：

常量用户=要求('./数据库/模型/用户');//新增信息模块。出口。add=function(req，res，next){ const User=new User({ name : req。尸体。姓名，年龄，性别。尸体。sex })；user.save((err，docs)={ if(err){ RES . send({ ' code ' : 1，' errorMsg': '新增失败' });} else { res.send({ 'code': 0，message': '新增成功' });} });next()；};

因此会调用数据库的操作，会在数据库中增加一条数据。如上代码，会应用到数据库/模型/用户这个表中的代码：

/* 定义一个用户的架构*/const mongose=require('./db。js’)；常量架构=猫鼬。图式；//创建一个模型const UserSchema=新架构({ name: { type: String}，//属性名字，类型为字符串年龄： {类型：数字，默认值： 30 },//属性年龄，类型为号码，默认值为30性： { type : String } })；//导出模型模块常量用户=模块。exports=mongose。模型(‘用户’，用户模式)；

因此会创建用户表，并且在表中插入对应的数据。

以上只是说明添加接口的调用方式，其他接口设计都是一样的。我不多解释了。对应/user，我们将在webpack中配置devServer来解决跨域问题，因为我现在启动两个服务，节点端的端口是3001，我的webpack上的端口是8081，会跨域，所以webpack中的devServer需要配置如下：

devServer: { port: 8081，//host: '0.0.0 '，header RS : { ' X-foo ' : ' 112233 ' }，inline: true，overlay: true，Stats: '仅限错误'，proxy : { '/user ' 3: { target : ' 3http://1222

4.app.js中使用mongose-mor gan插件，当数据库操作接口时，会写入日志。例如，当报告错误时，可以在服务器端看到错误消息。该应用编程接口的具体用途可以是

看看npm库(https://www . npmjs.com/package/mongose-mor gan)。

日志记录如下：