项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register

通过 vue-cli3.0 + Element 构建项目前端,Node.js + Koa2 + MongoDB + Redis 实现数据库和接口设计,包括邮箱验证码、用户注册、用户登录、查看删除用户等功能。

1. 技术栈

  • 前端

    • 初始化项目:vue-cli3.0
    • 组件库:Element-ui
    • 路由控制/拦截:Vue-router
    • 状态管理:Vuex
  • 服务端
    • 运行环境:Node.js
    • 后台开发框架:Koa2
    • 路由中间件:Koa-router
    • 发送邮件: nodemailer
  • HTTP通讯
    • 接口请求/拦截:Axios
    • Token认证:jsonwebtoken
  • 数据库
    • MongoDB
    • 数据库操作:Mongoose
    • 缓存工具:Redis

2. 项目依赖:

  "dependencies": { "axios": "^0.18.0","crypto-js": "^3.1.9-1", "element-ui": "^2.4.5","js-cookie": "^2.2.0","jsonwebtoken": "^8.5.0", "koa": "^2.7.0","koa-bodyparser": "^4.2.1","koa-generic-session": "^2.0.1","koa-json": "^2.0.2","koa-redis": "^3.1.3","koa-router": "^7.4.0","mongoose": "^5.4.19","nodemailer": "^5.1.1","nodemon": "^1.18.10", "vue": "^2.5.21", "vue-router": "^3.0.1","vuex": "^3.0.1"}

3. 前端实现步骤

3.1 登录注册页面

通过 vue-cli3.0 + Element 构建项目前端页面

登录页(@/view/users/Login.vue):

注册页(@/view/users/Register.vue):

发送验证码前需要验证用户名和邮箱,用户名必填,邮箱格式需正确。

用户设置页(@/view/users/setting/Setting.vue)

用户登录后,可以进入用户设置页查看用户和删除用户

3.2 Vuex 状态管理

通过 vuex 实现保存或删除用户 token,保存用户名等功能。

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。

根目录下新建store文件夹,创建modules/user.js:

const user = {state: {token: localStorage.getItem('token'),username: localStorage.getItem('username')},mutations: {BIND_LOGIN: (state, data) => {localStorage.setItem('token', data)state.token = data},BIND_LOGOUT: (state) => {localStorage.removeItem('token')state.token = null},SAVE_USER: (state, data) => {localStorage.setItem('username', data)state.username = data}}
}export default user

创建文件 getters.js 对数据进行处理输出:

const getters = {sidebar: state => state.app.sidebar,device: state => state.app.device,token: state => state.user.token,username: state => state.user.username}
export default getters

创建文件 index.js 管理所有状态:

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'Vue.use(Vuex)const store = new Vuex.Store({modules: { user},getters
})export default store

3.3 路由控制/拦截

路由配置(router.js):

import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import(/* webpackChunkName: "users" */ '@/views/users/Login.vue')
const Register = () => import(/* webpackChunkName: "users" */ '@/views/users/Register.vue')
const Setting = () => import(/* webpackChunkName: "tables" */ '@/views/setting/Setting.vue') Vue.use(Router)const router = new Router({ base: process.env.BASE_URL,routes: [{path: '/login',name: 'Login',component: Login,meta: {title: '登录'}},{path: '/register',name: 'Register',component: Register,meta: {title: '注册'}},{path: '/setting',name: 'Setting',component: Setting,meta: {breadcrumb: '设置',requireLogin: true},}]
})

路由拦截:

关于vue 路由拦截参考:https://www.cnblogs.com/cckui/p/10319013.html

// 页面刷新时,重新赋值token
if (localStorage.getItem('token')) {store.commit('BIND_LOGIN', localStorage.getItem('token'))
}// 全局导航钩子
router.beforeEach((to, from, next) => {if (to.meta.title) { // 路由发生变化修改页面titledocument.title = to.meta.title}if (to.meta.requireLogin) {if (store.getters.token) {if (Object.keys(from.query).length === 0) { // 判断路由来源是否有query,处理不是目的跳转的情况next()} else {let redirect = from.query.redirect // 如果来源路由有queryif (to.path === redirect) { // 避免 next 无限循环next()} else {next({ path: redirect }) // 跳转到目的路由}}} else {next({path: '/login',query: { redirect: to.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由})}} else {next()}
})export default router

3.4 Axios 封装

封装 Axios

// axios 配置
import axios from 'axios'
import store from './store'
import router from './router'//创建 axios 实例
let instance = axios.create({timeout: 5000, // 请求超过5秒即超时返回错误headers: { 'Content-Type': 'application/json;charset=UTF-8' },
})instance.interceptors.request.use(config => {if (store.getters.token) { // 若存在token,则每个Http Header都加上tokenconfig.headers.Authorization = `token ${store.getters.token}`console.log('拿到token')}console.log('request请求配置', config)return config},err => {return Promise.reject(err)})// http response 拦截器
instance.interceptors.response.use(response => {console.log('成功响应:', response)return response},error => {if (error.response) {switch (error.response.status) {case 401:// 返回 401 (未授权) 清除 token 并跳转到登录页面store.commit('BIND_LOGOUT')router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath}})breakdefault:console.log('服务器出错,请稍后重试!')alert('服务器出错,请稍后重试!')}}return Promise.reject(error.response) // 返回接口返回的错误信息}
)export default {// 发送验证码userVerify (data) {return instance.post('/api/verify', data)},// 注册userRegister (data) {return instance.post('/api/register', data)},// 登录userLogin (data) {return instance.post('/api/login', data)},// 获取用户列表getAllUser () {return instance.get('/api/alluser')},// 删除用户delUser (data) {return instance.post('/api/deluser', data)}
}

4. 服务端和数据库实现

在根目录下创建 server 文件夹,存放服务端和数据库相关代码。

4.1 MongoDB和Redis

创建 /server/dbs/config.js ,进行数据库和邮箱配置

// mongo 连接地址
const dbs = 'mongodb://127.0.0.1:27017/[数据库名称]'// redis 地址和端口
const redis = {get host() {  return '127.0.0.1'},get port() {return 6379}
}// qq邮箱配置
const smtp = {get host() {return 'smtp.qq.com'},get user() {return '1********@qq.com' // qq邮箱名},get pass() {return '*****************' // qq邮箱授权码},// 生成邮箱验证码get code() {return () => {return Math.random().toString(16).slice(2, 6).toUpperCase()}},// 定义验证码过期时间rules,5分钟get expire() {return () => {return new Date().getTime() + 5 * 60 * 1000}}
}module.exports = {dbs,redis,smtp
}

使用 qq 邮箱发送验证码,需要在“设置/账户”中打开POP3/SMTP服务和MAP/SMTP服务。

4.2 Mongo 模型

创建 /server/dbs/models/users.js:

// users模型,包括四个字段
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const UserSchema = new Schema({username: {type: String,unique: true,required: true},password: {type: String,required: true},email: {type: String,required: true},token: {type: String,required: true}
})module.exports = {Users: mongoose.model('User', UserSchema)
}

4.3 接口实现

创建 /server/interface/user.js:

const Router = require('koa-router')
const Redis = require('koa-redis') // key-value存储系统, 存储用户名,验证每个用户名对应的验证码是否正确
const nodeMailer = require('nodemailer') // 通过node发送邮件
const User = require('../dbs/models/users').Users
const Email = require('../dbs/config')// 创建和验证token, 参考4.4
const createToken = require('../token/createToken.js') // 创建token
const checkToken = require('../token/checkToken.js') // 验证token// 创建路由对象
const router = new Router({prefix: '/api' // 接口的统一前缀
})// 获取redis的客户端
const Store = new Redis().client// 接口 - 测试
router.get('/test', async ctx => {ctx.body = {code: 0,msg: '测试',}
})// 发送验证码 的接口
router.post('/verify', async (ctx, next) => {const username = ctx.request.body.usernameconst saveExpire = await Store.hget(`nodemail:${username}`, 'expire') // 拿到过期时间console.log(ctx.request.body)console.log('当前时间:', new Date().getTime())console.log('过期时间:', saveExpire)// 检验已存在的验证码是否过期,以限制用户频繁发送验证码if (saveExpire && new Date().getTime() - saveExpire < 0) {ctx.body = {code: -1,msg: '发送过于频繁,请稍后再试'}return}// QQ邮箱smtp服务权限校验const transporter = nodeMailer.createTransport({/***  端口465和587用于电子邮件客户端到电子邮件服务器通信 - 发送电子邮件。*  端口465用于smtps SSL加密在任何SMTP级别通信之前自动启动。*  端口587用于msa*/host: Email.smtp.host,port: 587,secure: false, // 为true时监听465端口,为false时监听其他端口auth: {user: Email.smtp.user,pass: Email.smtp.pass}})// 邮箱需要接收的信息const ko = {code: Email.smtp.code(),expire: Email.smtp.expire(),email: ctx.request.body.email,user: ctx.request.body.username}// 邮件中需要显示的内容const mailOptions = {from: `"认证邮件" <${Email.smtp.user}>`, // 邮件来自to: ko.email, // 邮件发往subject: '邀请码', // 邮件主题 标题html: `您正在注册****,您的邀请码是${ko.code}` // 邮件内容}// 执行发送邮件await transporter.sendMail(mailOptions, (err, info) => {if (err) {return console.log('error')} else {Store.hmset(`nodemail:${ko.user}`, 'code', ko.code, 'expire', ko.expire, 'email', ko.email)}})ctx.body = {code: 0,msg: '验证码已发送,请注意查收,可能会有延时,有效期5分钟'}
})// 接口 - 注册
router.post('/register', async ctx => {const { username, password, email, code } = ctx.request.body// 验证验证码if (code) {const saveCode = await Store.hget(`nodemail:${username}`, 'code') // 拿到已存储的真实的验证码const saveExpire = await Store.hget(`nodemail:${username}`, 'expire') // 过期时间console.log(ctx.request.body)console.log('redis中保存的验证码:', saveCode)console.log('当前时间:', new Date().getTime())console.log('过期时间:', saveExpire)// 用户提交的验证码是否等于已存的验证码if (code === saveCode) {if (new Date().getTime() - saveExpire > 0) {ctx.body = {code: -1,msg: '验证码已过期,请重新申请'}return}} else {ctx.body = {code: -1,msg: '请填写正确的验证码'}return}} else {ctx.body = {code: -1,msg: '请填写验证码'}return}// 用户名是否已经被注册const user = await User.find({ username })if (user.length) {ctx.body = {code: -1,msg: '该用户名已被注册'}return}// 如果用户名未被注册,则写入数据库const newUser = await User.create({username,password,email,token: createToken(this.username) // 生成一个token 存入数据库})// 如果用户名被成功写入数据库,则返回注册成功if (newUser) {ctx.body = {code: 0,msg: '注册成功',}} else {ctx.body = {code: -1,msg: '注册失败'}}
})// 接口 - 登录
router.post('/login', async (ctx, next) => {const { username, password } = ctx.request.bodylet doc = await User.findOne({ username })if (!doc) { ctx.body = {code: -1,msg: '用户名不存在'}} else if (doc.password !== password) {ctx.body = {code: -1,msg: '密码错误'}} else if (doc.password === password) {console.log('密码正确')let token = createToken(username) // 生成token doc.token = token // 更新mongo中对应用户名的tokentry {await doc.save() // 更新mongo中对应用户名的tokenctx.body = {code: 0,msg: '登录成功',username,token}} catch (err) {ctx.body = {code: -1,msg: '登录失败,请重新登录'}}}
})// 接口 - 获取所有用户 需要验证 token
router.get('/alluser', checkToken, async (ctx, next) => {try {let result = []let doc = await User.find({}) doc.map((val, index) => {result.push({email: val.email,username: val.username,})}) ctx.body = {code: 0,msg: '查找成功',result}} catch (err) {ctx.body = {code: -1,msg: '查找失败',result: err}}
})// 接口 - 删除用户 需要验证 token
router.post('/deluser', checkToken, async (ctx, next) => {const { username } = ctx.request.bodytry {await User.findOneAndRemove({username: username})ctx.body = {code: 0,msg: '删除成功',}} catch (err) {ctx.body = {code: -1,msg: '删除失败',}}
})module.exports = {router
}

上面实现了五个接口:

  • 发送验证码至邮箱: router.post('/verify')
  • 注册:router.post('/register')
  • 登录:router.post('/login')
  • 获取用户列表:router.get('/alluser')
  • 删除数据库中的某个用户:router.post('/deluser')

分别对应了前面 3.4 中 axios 中的5个请求地址

4.4 JSON Web Token 认证

JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案。详情参考:http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html

分别创建 /server/token/createToken.js 和 /server/token/checkToken.js

// 创建token
const jwt = require('jsonwebtoken') module.exports = function (id) {const token = jwt.sign({id: id},'cedric1990',{expiresIn: '300s'})return token
}
// 验证token
const jwt = require('jsonwebtoken')// 检查 token
module.exports = async (ctx, next) => {// 检验是否存在 token// axios.js 中设置了 authorizationconst authorization = ctx.get('Authorization')if (authorization === '') {ctx.throw(401, 'no token detected in http headerAuthorization')}const token = authorization.split(' ')[1]// 检验 token 是否已过期try {await jwt.verify(token, 'cedric1990')} catch (err) {ctx.throw(401, 'invalid token')}await next()
}

4.5 服务端入口

根目录创建 server.js:

// server端启动入口
const Koa = require('koa')
const app =  new Koa();
const mongoose = require('mongoose')
const bodyParser = require('koa-bodyparser')
const session = require('koa-generic-session')
const Redis = require('koa-redis')
const json = require('koa-json') // 美化json格式化
const dbConfig = require('./server/dbs/config')const users = require('./server/interface/user.js').router// 一些session和redis相关配置
app.keys = ['keys', 'keyskeys']
app.proxy = true
app.use(session({ store: new Redis()})
)app.use(bodyParser({extendTypes: ['json', 'form', 'text']
}))app.use(json())// 连接数据库
mongoose.connect(dbConfig.dbs,{ useNewUrlParser: true }
)mongoose.set('useNewUrlParser', true)
mongoose.set('useFindAndModify', false)
mongoose.set('useCreateIndex', true)const db = mongoose.connection
mongoose.Promise = global.Promise // 防止Mongoose: mpromise 错误db.on('error', function () {console.log('数据库连接出错')
})db.on('open', function () {console.log('数据库连接成功')
})// 路由中间件
app.use(users.routes()).use(users.allowedMethods())app.listen(8888, () => {console.log('This server is running at http://localhost:' + 8888)
})

5. 跨域处理

详情参考:https://www.cnblogs.com/cckui/p/10331432.html

vue 前端启动端口9527 和 koa 服务端启动端口8888不同,需要做跨域处理,打开vue.config.js:

devServer: {port: 9527,https: false,hotOnly: false,proxy: { '/api': {target: 'http://127.0.0.1:8888/', // 接口地址changeOrigin: true,ws: true,pathRewrite: {'^/': ''}}}}

6. 接口对接

import axios from '../../axios.js'
import CryptoJS from 'crypto-js' // 用于MD5加密处理

发送验证码:

// 用户名不能为空,并且验证邮箱格式
sendCode() {let email = this.ruleForm2.emailif (this.checkEmail(email) && this.ruleForm2.username) {  axios.userVerify({username: encodeURIComponent(this.ruleForm2.username),email: this.ruleForm2.email}).then((res) => {if (res.status === 200 && res.data && res.data.code === 0) {this.$notify({title: '成功',message: '验证码发送成功,请注意查收。有效期5分钟',duration: 1000,type: 'success'})let time = 300this.buttonText = '已发送'this.isDisabled = trueif (this.flag) {this.flag = false;let timer = setInterval(() => {time--;this.buttonText = time + ' 秒'if (time === 0) {clearInterval(timer);this.buttonText = '重新获取'this.isDisabled = falsethis.flag = true;}}, 1000)}} else {this.$notify({title: '失败',message: res.data.msg,duration: 1000,type: 'error'})}})}
}

注册:

submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {axios.userRegister({username: encodeURIComponent(this.ruleForm2.username),password: CryptoJS.MD5(this.ruleForm2.pass).toString(),email: this.ruleForm2.email,code: this.ruleForm2.smscode}).then((res) => {if (res.status === 200) {if (res.data && res.data.code === 0) {this.$notify({title: '成功',message: '注册成功。',duration: 2000,type: 'success'})setTimeout(() => {this.$router.push({path: '/login'})}, 500)} else {this.$notify({title: '错误',message: res.data.msg,duration: 2000,type: 'error'})}} else {this.$notify({title: '错误',message: `服务器请求出错, 错误码${res.status}`,duration: 2000,type: 'error'})}}) } else {console.log("error submit!!");return false;}})
},

登录:

login(formName) {this.$refs[formName].validate(valid => {if (valid) { axios.userLogin({username: window.encodeURIComponent(this.ruleForm.name),password: CryptoJS.MD5(this.ruleForm.pass).toString()}).then((res) => { if (res.status === 200) {if (res.data && res.data.code === 0) {this.bindLogin(res.data.token)this.saveUser(res.data.username)this.$notify({title: '成功',message: '恭喜,登录成功。',duration: 1000,type: 'success'})setTimeout(() => {this.$router.push({path: '/'})}, 500)} else {this.$notify({title: '错误',message: res.data.msg,duration: 1000,type: 'error'})}} else {this.$notify({title: '错误',message: '服务器出错,请稍后重试',duration: 1000,type: 'error'})}})}})
},

7. 启动项目 测试接口

7.1 vue端:

$ npm run serve

7.2 启动mogod:

$ mongod

7.3 启动Redis:

$ redis-server

7.4 启动服务端server.js:

安装 nodemon 热启动辅助工具:

$ npm i nodemon
$ nodemon server.js

8. 项目目录

转载于:https://www.cnblogs.com/cckui/p/10536122.html

基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册相关推荐

  1. cli3解决 ie11语法错误 vue_基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册...

    项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...

  2. vue.js — 安装Webpake创建一个完整的项目并上传至码云

    vue.js - 安装Webpake创建一个完整的项目并上传至码云 今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...

  3. 一个简单的登录注册网页的实现

    一个简单的登录注册网页的实现 通过 标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...

  4. 小白教程——Windows下用PHP写一个简单的登录注册页面(二)

    哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...

  5. 用layui做一个简易的登录注册页面

    用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...

  6. 「前端进阶」vue+koa2+mongodb+oss阿里云部署自己的网站

    线上 线上地址:itc 项目地址:GITHUB 由于使用Element框架实现前端,并没有做移动端适配,所以建议PC端观看. 建议参考本文最后教程,将项目克隆到本地启动(不需要任何云系列产品即可本地启 ...

  7. 详细记录基于vue+nodejs+mongodb构建的商城学习(四)基于项目的node.js开发后端的学习与梳理总结...

    前置: 本系列文章是一个本人边学习边梳理的学习笔记,俗话说好脑袋不如烂笔头,再好的记忆力时间长了也会有细节忘记,本项目选择的前端框架是vue,后端开发使用是node.js,数据库使用的是mongodb ...

  8. 基于Vue3和element-plus实现一个完整的登录功能

    先看一下最终要实现的效果: 登录页面: 注册页面: (1)引入element-plus组件库 引入组件库的方式有好多种,在这里我就在main.js全局引入了. npm i element-plus - ...

  9. Vue全家桶+SSR+Koa2全栈开发美团网⑧——首页登录注册

    在pages目录下新建register.vue,点击注册按钮就能跳转至http://localhost:3000/register,因为在user.vue中写过 <nuxt-link to=&q ...

最新文章

  1. tp3 普通模式url模式_Thinkphp 3.2.3 url 路由访问模式
  2. mof提权原理及其过程
  3. Windows Server 2012 R2工作文件夹⑤:创建工作文件夹
  4. Android 7.1.1 锁屏界面启动流程
  5. MySQL FIND_IN_SET(s1,s2) 返回在字符串s2中与s1匹配的字符串的位置
  6. android 简单的音乐播放器实现播放模式的切换
  7. sqlserver存储过程入门之 游标
  8. IOS swift项目的单例模式.swift5以后的单例模式
  9. codeforces 1287A -Angry Students(模拟)
  10. C++基础知识(二)—— 变量和数据类型
  11. LeetCode 1779. 找到最近的有相同 X 或 Y 坐标的点
  12. 爬虫scrapy模块
  13. php新窗口打开链接,wordpress如何设置在新窗口打开链接
  14. 转:判断Caps Lock键是否打开,如果打开则关闭
  15. Matlab线性拟合和非线性拟合
  16. win10开机系统恢复(WinRE)中找不到系统恢复映像或功能不全的解决方法
  17. (Java)类的接口实验
  18. 一个小时学会 MySQL 数据库
  19. 股票——指数移动平均线
  20. 无线网络连接适配器的驱动程序出现问题怎么解决

热门文章

  1. php的引用变量与销毁机制
  2. Html5版本的全套股票行情图开源了,附带实现技术简介
  3. 值得推荐的好书——评《亮剑.NET.图解C#开发实战》
  4. Java控制内存的功力
  5. 基于SSM实现的民宿网站系统
  6. 基于Springboot实现图书管理系统
  7. linux判断目录,文件存在等
  8. vs2015下载 简体中文版/企业版 附邀请码
  9. 技巧.自己学会取名字,学会欣赏
  10. javascript基础学习(六)