零基础快速开发Vue图书管理系统—登录注册篇（一）

一、图书管理系统项目功能

二、项目技术选型

• 前端主要采用：Vue3.x (vuex/vue-router)、Ant Design Vue、Axios等
• 服务端主要采用：Node.js、Koa、Mongoose等
• 数据库主要采用：MongoDB

三、使用vue-cli3创建项目

如何搭建环境看我之前写的文章：五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）

四、搭建所需的文件

在view的目录下新建Auth文件夹，里面分别放以下三个文件

前端UI框架主要采用Ant Design Vue

😛index.vue内容如下

😅index.scss内容如下：

.bg {position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-image: url("https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg");background-repeat: no-repeat;background-size: cover;background-position: center center;
}.auth {.title-info {display: flex;margin-top: 100px;text-align: center;align-items: center;justify-content: center;margin-bottom: 32px;img {width: 60px;height: 60px;}h2 {margin: 0;margin-left: 18px;}}.form {width: 400px;margin: 0 auto;.item {margin-bottom: 16px;button {width: 100%;}}}
}

🤣index.js内容如下：

 import { defineComponent } from 'vue';import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons-vue';export default defineComponent({components: {UserOutlined,LockOutlined,MailOutlined},setup() {}});

五、服务端开发

执行以下命令安装koa包

npm i @koa/router

服务端文件结构如下：

六、nodemon使用

编写调试Node的时候，项目代码做了修改，需要频繁手动停止，在重新启动，非常繁琐，使用nodemon能够监听项目文件的变动，当代码被修改后，nodemon会自动重启项目，极大方便了开发和调试

在终端中，运行如下命令，即可将nodemon安装为全局可用的工具：

npm install -g nodemon

• 传统的方式是运行node app.js命令启动项目，需要手动重启
• 现在将node命令替换为nodemon命令，使用nodemon app.js启动项目，会自动重启

七、使用JWT和Session实现登录注册

📢📢📢登录部分（服务端）

核心代码如下：

const Router = require('@koa/router');
const mongoose = require('mongoose');
const { getBody } = require('../../helpers/utils')
const jwt = require('jsonwebtoken');const User = mongoose.model('User');const router = new Router({prefix: '/auth',
});router.post('/register', async(ctx) => {// console.log(ctx.request.body);const {account,password,} = getBody(ctx);const one = await User.findOne({account,}).exec();if (one) {ctx.body = {code: 0,msg: '已存在该用户',data: null,}return;}const user = new User({account,password});const res = await user.save();ctx.body = {code: 1,msg: '注册成功',data: res,}
});
router.post('/login', async(ctx) => {const {account,password,} = getBody(ctx);const one = await User.findOne({account,}).exec();if (!one) {ctx.body = {code: 0,msg: '用户名或者密码错误',data: null,}return;}const user = {account: one.account,_id: one._id,}if (one.password === password) {ctx.body = {code: 1,msg: '登录成功',data: {user,token: jwt.sign(user, 'manage')},}return;}ctx.body = {code: 0,msg: '用户名或密码错误',data: null,}
});module.exports = router;

📢📢📢登录部分（前端）

核心代码：

 import { defineComponent, reactive } from 'vue';import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons-vue';import { auth } from '@/service';export default defineComponent({components: {UserOutlined,LockOutlined,MailOutlined,},setup() {//注册相关的逻辑const regForm = reactive({account: '',password: '',})//注册逻辑const register = () => {auth.register(regForm.account, regForm.password)}//登录相关的逻辑const loginForm = reactive({account: '',password: '',});//登录逻辑const login = () => {auth.login(loginForm.account, loginForm.password)}return {//注册相关的数据register,regForm,//登录相关的数据login,loginForm,}}});

index.vue

八、交互优化、表单校验、处理请求结果优化

登录注册逻辑校验

九、邀请码实现，完善注册流程

const Router = require('@koa/router');
const mongoose = require('mongoose');
const { getBody } = require('../../helpers/utils')
const jwt = require('jsonwebtoken');const User = mongoose.model('User');
const InviteCode = mongoose.model('InviteCode');
const router = new Router({prefix: '/auth',
});router.post('/register', async(ctx) => {const {account,password,inviteCode,} = getBody(ctx);//表单校验if (account === '' || password === '' || inviteCode === '') {ctx.body = {code: 0,msg: '字段不能为空',data: null,}return;}//找是否有邀请码const findCode = await InviteCode.findOne({code: inviteCode,}).exec();//如果没有找到邀请码if ((!findCode) || findCode.user) {ctx.body = {code: 0,msg: '邀请码不正确',data: null,}return;}//去找account为传递上来的account的用户const findUser = await User.findOne({account,}).exec();//判断是否有用户if (findUser) {//如果有表示已经存在ctx.body = {code: 0,msg: '已存在该用户',data: null,}return;}//创建用户const user = new User({account,password});//把创建的用户同步到mongdbconst res = await user.save();findCode.user = res._id;findCode.meta.updatedAt = new Date().getTime();await findCode.save();//响应成功ctx.body = {code: 1,msg: '注册成功',data: res,}
});
router.post('/login', async(ctx) => {const {account,password,} = getBody(ctx);if (account === '' || password === '') {ctx.body = {code: 0,msg: '字段不能为空',data: null,}return;}const one = await User.findOne({account,}).exec();if (!one) {ctx.body = {code: 0,msg: '用户名或者密码错误',data: null,}return;}const user = {account: one.account,_id: one._id,}if (one.password === password) {ctx.body = {code: 1,msg: '登录成功',data: {user,token: jwt.sign(user, 'manage')},}return;}ctx.body = {code: 0,msg: '用户名或密码错误',data: null,}
});module.exports = router;