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>