【项目实战】登录与注册业务的实现（前端+后端+数据库）
本示例基于Vue.js和mint UI实现。
目录
一、数据库的创建
二、后端接口与数据库的连接
三、前端代码实现
1.注册页相关代码
2.注册页效果
3.登录页相关代码
4.登录页效果
四、注册登录演示
五、项目文件结构
一、数据库的创建
此处以Navicat软件进行创建，新建数据库reg_log.sql与数据表reg_log；
为了实现注册业务，我们在数据库中设计ID、用户名、密码、邮箱、电话号5个字段。
创建结束后保存，便可以在数据库中找到我们刚刚创建的数据库和空表。这样就可以在项目中进行连接了。
二、后端接口与数据库的连接
server文件夹 -> app.js
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const md5 = require('md5');
const pool = mysql.createPool({
host: '127.0.0.1',
port: 3306,
user: 'root',
password: '',
database: 'reg_log',
connectionLimit: 20,
charset: 'utf8'
});
const server = express();
server.use(bodyParser.urlencoded({
extended: false
}));
const cors = require('cors');
server.use(cors({
origin: ['http://localhost:8080', 'http://127.0.0.1:8080']
}));
server.post('/register', (req, res) => {
let username = req.body.username;
let password = req.body.password;
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;
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.代码释义这段代码是一个使用 Node.js 和 Express 框架构建的简单 Web 服务器，它集成了 MySQL 数据库进行用户注册和登录的功能。下面是对代码主要部分的详细解释：
引入必要的模块： express：用于创建Web服务器。mysql：用于与 MySQL 数据库进行交互。bodyParser：用于解析传入的请求体，特别是 POST 和 PUT 请求。md5：用于对密码进行 MD5 加密，虽然 MD5 在现代安全标准下被认为是不安全的，但这里仅作为示例。cors：用于处理跨源资源共享（CORS），允许来自不同源的 Web 页面请求服务器资源。创建MySQL连接池： 使用 mysql.createPool 方法创建一个连接池，这样可以更有效地管理数据库连接。连接池配置包括数据库服务器的地址、端口、用户名、密码、数据库名、最大连接数以及字符集等。创建Express服务器： 使用 express() 函数创建一个 Express 应用实例。配置中间件： 使用 bodyParser.urlencoded 中间件来解析表单数据。使用 cors 中间件来允许来自特定源的跨域请求。定义路由和处理器： 注册接口 (/register)： 接收POST请求，从请求体中获取用户名和密码。首先检查用户名是否已存在（通过查询数据库）。如果用户名不存在，则将用户名和密码（密码经过MD5加密）插入数据库，并返回成功消息。如果用户名已存在，则返回用户已存在的消息。登录接口 (/login)： 同样接收POST请求，从请求体中获取用户名和密码。使用SQL查询检查用户名和密码（密码已加密）是否匹配。如果匹配，返回成功消息和用户信息；如果不匹配，返回登录失败的消息。启动服务器： 使用 server.listen 方法启动服务器，并监听 3000 端口。当服务器成功启动时，控制台会打印 “server is running...”。三、前端代码实现
1.注册页相关代码项目文件夹 -> Register.vue
<template>
<div class="reg">
<mt-header title="用户注册">
<router-link slot="left" to="/"> 返回首页 </router-link>
<router-link to="/login" slot="right">去登录</router-link>
</mt-header>
<mt-field
type="text"
label="用户名"
placeholder="请输入用户名"
v-model="name"
:state="nameState"
@blur.native.capture="checkName"></mt-field>
<mt-field
type="password"
label="密码"
placeholder="请输入密码"
v-model="pwd"
:state="pwdState"
@blur.native.capture="checkPwd"></mt-field>
<mt-field
type="password"
label="确认密码"
placeholder="再次输入密码"
v-model="repwd"
:state="repwdState"
@blur.native.capture="checkrePwd"></mt-field>
<mt-field
label="邮箱"
placeholder="请输入邮箱"
type="email"
v-model="email"
:state="emailState"
@blur.native.capture="checkEmail"></mt-field>
<mt-field
label="手机号"
placeholder="请输入手机号"
type="tel"
v-model="phone"
:state="phoneState"
@blur.native.capture="checkPhone"></mt-field>
<mt-field
label="生日"
placeholder="请输入生日"
type="date"
v-model="birthday"></mt-field>
<mt-button class="btn" type="primary" size="large" @click="checkForm">注册</mt-button>
</div>
</template>
<style scope>
.reg .btn {
background-color: #d86931;
width: 190px;
border-radius: 0;
border: 0;
margin: auto;
}
.reg .mint-cell-wrapper {
line-height: 80px;
}
.reg {
margin-top: 14%;
}
.reg .mint-header {
background-color: #d86931;
}
.reg .btn {
background-color: #d86931;
}
</style>
<script>
export default {
data() {
return {
name: "",
nameState: "",
pwd: "",
pwdState: "",
repwd: "",
repwdState: "",
email: "",
emailState: "",
phone: "",
phoneState: "",
birthday: "",
};
},
methods: {
checkName() {
let reg = /^[a-zA-Z0-9u4E00-u9FA5]{2,6}$/;
if (reg.test(this.name)) {
this.nameState = "success";
return true;
} else {
this.nameState = "error";
return false;
}
},
checkPwd() {
let reg = /^d{6}$/;
if (reg.test(this.pwd)) {
this.pwdState = "success";
return true;
} else {
this.pwdState = "error";
return false;
}
},
checkrePwd() {
let reg = /^d{6}$/;
if (reg.test(this.repwd) && this.pwd == this.repwd) {
this.repwdState = "success";
return true;
} else {
this.repwdState = "error";
return false;
}
},
checkEmail() {
let reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;
if (reg.test(this.email)) {
this.emailState = "success";
return true;
} else {
this.emailState = "error";
return false;
}
},
checkPhone() {
let reg = /^1[3|5|7|8][0-9]d{8}$/;
if (reg.test(this.phone)) {
this.phoneState = "success";
return true;
} else {
this.phoneState = "error";
return false;
}
},
checkForm() {
if (this.checkName() && this.checkPwd() && this.checkrePwd()) {
console.log(`验证成功，执行注册业务......`);
this.axios
.post("/register", `username=${this.name}&password=${this.pwd}`)
.then((result) => {
console.log(result);
if (result.data.code == 200) {
this.$toast({
message: "注册成功",
position: "bottom",
duration: 3000,
});
this.$router.push("/login");
} else if (result.data.code == 201) {
this.$toast({
message: "用户已存在，请重新注册",
position: "bottom",
duration: 3000,
});
}
});
}
},
},
};
</script>
2.注册页效果
项目文件夹 -> Login.vue
<template>
<div class="log">
<span class="login">请登录</span>
<span class="reg">
<router-link to="/register">先去注册</router-link>
</span>
<mt-field
type="text"
label="用户名"
placeholder="请输入用户名"
v-model="name"
:state="nameState"
@blur.native.capture="checkName"></mt-field>
<mt-field
type="password"
label="密码"
placeholder="请输入密码"
v-model="pwd"
:state="pwdState"
@blur.native.capture="checkPwd"></mt-field>
<hr style="width: 85%" />
<mt-button class="btn" type="primary" size="large" @click="checkForm">登录</mt-button>
</div>
</template>
<style scoped>
.log .reg {
font-size: 18px;
}
.log .login {
font-size: 24px;
font-family: "楷体";
font-weight: 700;
margin-left: 5px;
margin-right: 210px;
line-height: 80px;
}
.log {
margin-top: 20%;
}
.log .btn {
background-color: #d86931;
width: 190px;
border-radius: 0;
border: 0;
margin: auto;
}
.log .btn1 {
background-color: white;
border: 2px solid #d86931;
color: #d86931;
width: 190px;
margin: auto;
margin-top: 30px;
}
</style>>
<script>
export default {
namespaced: true,
data() {
return {
name: "",
nameState: "",
pwd: "",
pwdState: "",
};
},
methods: {
checkName() {
let reg = /^[a-zA-Z0-9u4E00-u9FA5]{2,6}$/;
if (reg.test(this.name)) {
this.nameState = "success";
return true;
} else {
this.nameState = "error";
return false;
}
},
checkPwd() {
let reg = /^d{6}$/;
if (reg.test(this.pwd)) {
this.pwdState = "success";
return true;
} else {
this.pwdState = "error";
return false;
}
},
checkForm() {
if (this.checkName() && this.checkPwd()) {
this.axios
.post("/login", `username=${this.name}&password=${this.pwd}`)
.then((result) => {
console.log(result);
if (result.data.code == 200) {
this.$toast({
message: `欢迎您 ${this.name}`,
position: "bottom",
duration: 3000,
});
this.$store.commit("loginok", this.name);
sessionStorage.setItem("islogin", true);
sessionStorage.setItem("username", this.name);
this.$router.push("/club");
} else {
this.$toast({
message: "登录失败，请检查您的用户名和密码",
position: "bottom",
duration: 3000,
});
}
});
}
},
},
};
</script>
4.登录页效果
四、注册登录演示
按正则要求输入用户信息。
注册成功后弹窗显示并且跳转至登录页。 进行登录：
登录成功。
五、项目文件结构
因为登陆注册业务需要使用到接口并调用数据库，所以需要两个文件夹，一个是项目文件夹，作为前端；一个是server文件夹，作为后端，且这两个文件夹都需要下载 node_modules 包并单独启动；
各模块的加载、连接池的创建以及接口写于 server 下的 app.js 文件，启动时使用命令 node app.js；
而前端的页面就正常在你的项目文件夹中书写，启动时使用命令 npm run serve；
相关知识
Java实现鲜花预定系统：Oracle数据库与Spring Boot框架整合实战
从前端到后端——完整的Web开发指南
基于SpringBoot+Vue“花开富贵”花园管理系统设计和实现(源码+LW+部署讲解)
【源码+文档】基于微信小程序的网上花店系统
基于SpringBoot+Vue的花店管理系统的设计与实现(源码+lw+部署+讲解)
基于SpringBoot+Vue的软件产品展示销售系统的设计与实现(源码+lw+部署+讲解)
Java实战项目
基于springboot模式鲜花售卖商城花店网站的设计与实现 nqs65限时秒杀
Java+JSP网上花店系统设计与源码实现
基于SSM的花店管理设计与实现
网址: 【项目实战】登录与注册业务的实现（前端+后端+数据库） https://m.huajiangbk.com/newsview849500.html
| 上一篇: 新用户怎样注册qq |
下一篇: uml注册和登录的流程图,类图, |
