AI 助理
备案控制台
开发者社区 数据库 文章 正文

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

2023-02-14 23072
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端主要采用：Vue3.x (vuex/vue-router)、Ant Design Vue、Axios等

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

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

2345_image_file_copy_482.jpg

二、项目技术选型

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

2345_image_file_copy_483.jpg

三、使用vue-cli3创建项目

2345_image_file_copy_484.jpg

四、搭建所需的文件

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

2345_image_file_copy_485.jpg

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

2345_image_file_copy_486.jpg

2345_image_file_copy_487.jpg

😛index.vue内容如下

<template>
    <div class="auth">
        <div class="bg"></div>
        <div class="title-info">
            <img src="https://ncstatic.clewm.net/rsrc/2020/1016/02/4757e4910cb527fc040d019a93ded74f.png?x-oss-process=image/resize,w_750/format,gif/sharpen,100/quality,Q_80/interlace,1/auto-orient,1"
                alt="">
            <h2 class="title">图书后台管理系统</h2>
        </div>
        <div class="form">
            <a-tabs>
                <a-tab-pane key="1" tab="登录">
                    <div class="item">
                        <a-input size="large" placeholder="账户">
                            <template v-slot:prefix>
                                <UserOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a-input size="large" placeholder="密码">
                            <template v-slot:prefix>
                                <LockOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a href="">忘记密码</a>
                    </div>
                    <div class="item">
                        <a-button size="large" type="primary">
                            登录
                        </a-button>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="注册">
                    <div class="item">
                        <a-input size="large" placeholder="账户">
                            <template v-slot:prefix>
                                <UserOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a-input size="large" placeholder="密码">
                            <template v-slot:prefix>
                                <LockOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a-input size="large" placeholder="邀请码">
                            <template v-slot:prefix>
                                <MailOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a-button size="large" type="primary">
                            注册
                        </a-button>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>
<script src="./index.js">
</script>
<style lang="scss" scoped>
    @import './index.scss'
</style>

😅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

服务端文件结构如下：

2345_image_file_copy_488.jpg

2345_image_file_copy_498.jpg

2345_image_file_copy_499.jpg

2345_image_file_copy_500.jpg

2345_image_file_copy_501.jpg

六、nodemon使用

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

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

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

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

2345_image_file_copy_502.jpg

2345_image_file_copy_503.jpg

2345_image_file_copy_504.jpg

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

2345_image_file_copy_505.jpg

2345_image_file_copy_506.jpg

核心代码如下：

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;

📢📢📢登录部分（前端）

2345_image_file_copy_507.jpg

2345_image_file_copy_508.jpg

核心代码：

 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

2345_image_file_copy_509.jpg

<template>
    <div class="auth">
        <div class="bg"></div>
        <div class="title-info">
            <img src="https://ncstatic.clewm.net/rsrc/2020/1016/02/4757e4910cb527fc040d019a93ded74f.png?x-oss-process=image/resize,w_750/format,gif/sharpen,100/quality,Q_80/interlace,1/auto-orient,1"
                alt="">
            <h2 class="title">图书后台管理系统</h2>
        </div>
        <div class="form">
            <a-tabs>
                <a-tab-pane key="1" tab="登录">
                    <div class="item">
                        <a-input 
                        v-model:value="loginForm.account"
                        size="large" 
                        placeholder="账户">
                            <template v-slot:prefix>
                                <UserOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a-input 
                        v-model:value="loginForm.password"
                        size="large" 
                        placeholder="密码">
                            <template v-slot:prefix>
                                <LockOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a href="">忘记密码</a>
                    </div>
                    <div class="item">
                        <a-button 
                        @click="login"
                        size="large" 
                        type="primary">
                            登录
                        </a-button>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="注册">
                    <div class="item">
                        <a-input 
                        size="large"
                        placeholder="账户"
                        v-model:value="regForm.account"
                        >
                            <template v-slot:prefix>
                                <UserOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a-input 
                        size="large" 
                        placeholder="密码"
                        v-model:value="regForm.password"
                        >
                            <template v-slot:prefix>
                                <LockOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a-input size="large" placeholder="邀请码">
                            <template v-slot:prefix>
                                <MailOutlined />
                            </template>
                        </a-input>
                    </div>
                    <div class="item">
                        <a-button 
                        size="large" 
                        type="primary"
                        @click="register">
                            注册
                        </a-button>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>
<script src="./index.js">
</script>
<style lang="scss" scoped>
    @import './index.scss'
</style>

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

登录注册逻辑校验

2345_image_file_copy_510.jpg

2345_image_file_copy_511.jpg

2345_image_file_copy_512.jpg

2345_image_file_copy_513.jpg

2345_image_file_copy_514.jpg

2345_image_file_copy_515.jpg

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

2345_image_file_copy_516.jpg

2345_image_file_copy_517.jpg

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
    });
    //把创建的用户同步到mongdb
    const 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;
文章标签：
JavaScript
前端开发
NoSQL
MongoDB
数据库
关键词：
vue注册VUE.js
注册VUE.js
开发vue VUE.js
VUE.js图书管理系统
vue登录VUE.js
游客2jnzr4hskqhfw
目录
相关文章
CamilleKing
|
2天前
|
JavaScript API
vue学习（13）监视属性
vue学习（13）监视属性
CamilleKing
11 2
人间真情在哪儿
|
2天前
|
JavaScript
vue 函数化组件
vue 函数化组件
人间真情在哪儿
92 53
CamilleKing
|
2天前
|
JavaScript 前端开发
vue学习（15）watch和computed
vue学习（15）watch和computed
CamilleKing
9 1
CamilleKing
|
2天前
|
JavaScript
vue学习（14）深度监视
vue学习（14）深度监视
CamilleKing
10 0
花非花雾非雾11
|
3天前
|
JavaScript
vue中watch的用法
vue中watch的用法
花非花雾非雾11
17 3
无所不能的蛋蛋
|
3天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
无所不能的蛋蛋
171 61
甜甜的笑容12378
|
3天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
甜甜的笑容12378
19 7
CamilleKing
|
10天前
|
JavaScript
vue学习（4）数据绑定
vue学习（4）数据绑定
CamilleKing
32 10
CamilleKing
|
10天前
|
JavaScript 前端开发
vue学习（6）
vue学习（6）
CamilleKing
31 9
CamilleKing
|
10天前
|
JavaScript 开发者
vue学习（5）
vue学习（5）
CamilleKing
24 7