2024年前端最全【项目实战】登录与注册业务的实现（前端+后端+数据库(1)，面向Web前端开发者的复习指南

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

})

} else {

res.send({

message: ‘user exists’,

code: 201

});

}

});

});

// 用户登录接口

server.post(‘/login’, (req, res) => {

//获取用户名和密码信息

let username = req.body.username;

let password = req.body.password;

// SQL语句

let sql = ‘SELECT id,username FROM reg_log WHERE username=? AND password=MD5(?)’;

pool.query(sql, [username, password], (error, results) => {

if (error) throw error;

if (results.length == 0) { //登录失败

res.send({

message: ‘login failed’,

code: 201

});

} else { //登录成功

res.send({

message: ‘ok’,

code: 200,

result: results[0]

});

}

});

});

// 指定服务器对象监听的端口号

server.listen(3000, () => {

console.log(‘server is running…’);

});

**三、**前端代码实现

---

1.注册页相关代码

返回首页

去登录

<mt-field

type=“text”

label=“用户名”

placeholder=“请输入用户名”

v-model=“name”

:state=“nameState”

@blur.native.capture=“checkName”>

<mt-field

type=“password”

label=“密码”

placeholder=“请输入密码”

v-model=“pwd”

:state=“pwdState”

@blur.native.capture=“checkPwd”>

<mt-field

type=“password”

label=“确认密码”

placeholder=“再次输入密码”

v-model=“repwd”

:state=“repwdState”

@blur.native.capture=“checkrePwd”>

<mt-field

label=“邮箱”

placeholder=“请输入邮箱”

type=“email”

v-model=“email”

:state=“emailState”

@blur.native.capture=“checkEmail”>

<mt-field

label=“手机号”

placeholder=“请输入手机号”

type=“tel”

v-model=“phone”

:state=“phoneState”

@blur.native.capture=“checkPhone”>

<mt-field

label=“生日”

placeholder=“请输入生日”

type=“date”

v-model=“birthday”>

<mt-button class=“btn” type=“primary” size=“large” @click=“checkForm”>注册

2.注册页效果

3.登录页相关代码

请登录

先去注册

<mt-field

type=“text”

label=“用户名”

placeholder=“请输入用户名”

v-model=“name”

:state=“nameState”

@blur.native.capture=“checkName”>

<mt-field

type=“password”

label=“密码”

placeholder=“请输入密码”

v-model=“pwd”

:state=“pwdState”

@blur.native.capture=“checkPwd”>

---

<mt-button class=“btn” type=“primary” size=“large” @click=“checkForm”>登录