2024年【项目实战】登录与注册业务的实现（前端+后端+数据库，抖音音视频开发

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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

  

  

}));

// 加载CORS模块

const cors = require(‘cors’);

// 使用CORS中间件

server.use(cors({

origin: [‘http://localhost:8080’, ‘http://127.0.0.1:8080’]

}));

//用户注册接口

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

//console.log(md5(‘12345678’));

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

let username = req.body.username;

let password = req.body.password;

//以username为条件进行查找操作，以保证用户名的唯一性

let sql = ‘SELECT COUNT(id) AS count FROM reg_log WHERE username=?’;

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

if (error) throw error;

let count = results[0].count;

if (count == 0) {

// 将用户的相关信息插入到数据表

sql = ‘INSERT reg_log(username,password) VALUES(?,MD5(?))’;

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

if (error) throw error;

res.send({

message: ‘ok’,

code: 200

});

})

} 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”>

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。