// 创建MySQL连接池
const pool = mysql.createPool({
host: ‘127.0.0.1’, //MySQL服务器地址
port: 3306, //MySQL服务器端口号
user: ‘root’, //数据库用户的用户名
password: ‘’, //数据库用户密码
database: ‘reg_log’, //数据库名称
connectionLimit: 20, //最大连接数
charset: ‘utf8’ //数据库服务器的编码方式
});
// 创建服务器对象
const server = express();
server.use(bodyParser.urlencoded({
extended: false
}));
// 加载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”>
<mt-button class=“btn” type=“primary” size=“large” @click=“checkForm”>登录