Node---egg框架基础(3)--注册账户逻辑

最新推荐文章于 2022-08-07 21:30:27 发布

偷只猫来养

最新推荐文章于 2022-08-07 21:30:27 发布

阅读量942

点赞数 1

文章标签： node.js javascript

本文链接：https://blog.csdn.net/qq_42602282/article/details/107772090

版权

Node—egg框架基础(3)–注册账户逻辑

众所周知，目前的大多数后台框架都是基于MVC模式的，egg也不例外，这里讲解一个使用MVC模式做的注册功能，其中涉及到了MVC以及数据库等。
首先了解一下什么是MVC:

M：模型层——指的是service层，在egg中它是用来处理数据库数据的
V：视图层——指的是与用户交互的内容
C：控制层——指的是Controller层

按照步骤创建好项目，并添加了数据库等配置文件后：

1、模型层：

const Service = require('egg').Service;//引入egg中的service模块
class mysqlService extends Service {//自定义类继承service，类名不固定
    async regist(username, pwd, pwd1) {//自定义异步方法处理数据，方法名不固定
        let result = null;
        //先查看用户输入的用户名是否已经存在
        let sql1 = 'select * from userDate where username = ?';
        let re1 = await this.ctx.app.mysql.query(sql1, [username]);
        console.log(re1);
        if (re1.length == 1) {
        //用户名已经存在时，返回数据对用户进行提示
            result = '用户名已经存在';
            return result;
        } else {
        //用户名不存在时（这里可以根据自己要求添加用户名、密码的格式等等验证）
            console.log(pwd == pwd1);
            //判断用户两次输入的密码是否相同
            if (pwd1 == pwd) {
            //用户名通过并且两次输入的密码相同时，再将用户输入的数据写入数据库
                let sql2 = 'insert into userDate(username, pwd) values(?,?)';
                let re2 = await this.ctx.app.mysql.query(sql2, [username, pwd]);
                result = '可以注册';
                return result;
            } else {
            //了两次密码不同返回数据对用户进行提示
                result = '请确认密码相同';
                return result;
            }

        }
    }
module.exports = mysqlService;

2、控制层：所有模型层的数据都要通过控制层传入

const Controller = require('egg').Controller;
class mysqlController extends Controller{
    async regist(){
        let username = this.ctx.request.query.username;//获取用户输入的数据
        let pwd = this.ctx.request.query.pwd;
        let pwd1 = this.ctx.request.query.pwd2;
        console.log(username, pwd, pwd1);
        //从模型层返回执行结果并最终反馈给视图层
        let result = await this.ctx.service.mysqlService.regist(username, pwd, pwd1);
        console.log(result);
        this.ctx.response.body = result;
    }
module.exports = mysqlController;

3、路由：必须的内容，每写一个controller方法都要添加一条路由

module.exports = app => {
    const {router, controller} = app;
    router.get('/regist.do', controller.mysqlController.regist);
}

4、视图层：实现用户交互功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    //引入axios模型用于发送ajax请求到控制层
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            text-align: center;
        }

        #err {
            color: red;
        }
    </style>
    <script>
        function login(){
            window.location.href = '/public/login.html';
        }
        function regist(){
            let username = document.getElementById('username').value;
            let pwd1 = document.getElementById('pwd-1').value;
            let pwd2 = document.getElementById('pwd-2').value;
            let err = document.getElementById('err');
            //发送get请求，也可以发送post请求，严格来说更应该在登录注册写post请求
            axios.get('/regist.do', {//'regist.do'要与路由中的路径对应相同
                params: {//get请求要写params，post不用，可以直接以对象的格式写参数
                    username: username,
                    pwd: pwd1,
                    pwd2: pwd2
                }
            }).then(res => {//返回的结果
                let result = res.data;
                if(result == '用户名已存在' || result == '请确认密码相同'){
                    err.innerHTML = result;
                }else{
                    err.innerHTML = '注册成功';
                    location.href = '/public/login.html';
                }
            }).catch(e => {
                console.log(e);
            })
        }
    </script>
</head>
<body>
    <h5>注册</h5>
    <input type="text" placeholder="请输入用户名" id="username"><br>
    <input type="password" placeholder="请输入密码" id="pwd-1"><br>
    <input type="password" placeholder="请再次输入密码" id="pwd-2"><br>
    <button onclick="login()">登录</button>
    <button onclick="regist()">提交</button>
    <div id="err"></div>
</body>
</html>

偷只猫来养

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Node---egg框架基础(3)--注册账户逻辑

Node—egg框架基础(3)–注册账户逻辑众所周知，目前的大多数后台框架都是基于MVC模式的，egg也不例外，这里讲解一个使用MVC模式做的注册功能，其中涉及到了MVC以及数据库等。首先了解一下什么是MVC:M：模型层——指的是service层，在egg中它是用来处理数据库数据的V：视图层——指的是与用户交互的内容C：控制层——指的是Controller层按照步骤创建好项目，并添加了数据库等配置文件后：1、模型层：const Service = require('egg').Servi
复制链接

扫一扫