express介绍
express介绍 - 掘金 (juejin.cn)已经在这篇文章中介绍过,这里不再介绍。
1.安装express
首先,打开终端窗口,输入yarn init,然后name选项中输入任意名字【注意:不能为中文】
然后输入yarn add express进行安装
最后再输入 yarn add mysql 安装数据库
这样前期部署工作已经完成。
2.创建一个网页,用于注册和登陆
代码如下
<form action="http://127.0.0.1:8000/register" method="post">
用户名:<input type="text" name="username"><br>
密码:<input type="password" name="pwd"><br>
确认密码:<input type="password" name="conpwd"><br>
<input type="submit" value="注册" id="btn">
<input type="reset" value="清空">
</form>
<form action="http://127.0.0.1:8000/login" method="post">
用户名:<input type="text" name="username"><br>
密码:<input type="password" name="pwd"><br>
<input type="submit" value="登录" id="btn">
</form>
<script>
//获取密码元素节点
let pwd = document.querySelector("input[name='pwd']");
//获取确认密码元素节点
let conpwd = document.querySelector("input[name='conpwd']");
//获取注册按钮元素节点
let btn = document.getElementById('btn');
btn.onclick = function () {
//判断密码与确认密码是否相等。
if (pwd.value.trim() != conpwd.value.trim()) {
alert("两次输入的密码不一致!")
return false;
}
}
</script>
3.封装一个数据库
代码如下
const mysql = require("mysql");
const pool = mysql.createPool({
host:"localhost",
user:"root",
password:"123456",
database:"newstudent", //本地数据库,名字要对应好
// 可选
queueLimit:3,
connectionLimit:20
})
//添加一个query方法
let query = function(sql,callBack){
pool.getConnection((err,conn)=>{
if (err) {
console.log(err);
return
}
conn.query(sql,(err,data)=>{
if (err) {
console.log(err);
return
}
if (callBack) {
callBack(data);
}
})
});
}
//封装 插入一条数据。
let insert = (table,datas,callBack)=>{
//拼接SQL
let fields = '';//字段
let values = '';//值
for (const k in datas) {
fields += k+"," //拼接字段
values += `'${datas[k]}',`
}
//清除最后一位的逗号。
fields = fields.slice(0,-1);
values = values.slice(0,-1);
let sql = `INSERT INTO ${table} (${fields}) VALUES (${values})`;
query(sql,callBack)
};
//封装一个删除方法
let del = (table,datas,callBack)=>{
let arr = ['1=1']; //避免datas为空时,出现异常错误。
for (const k in datas) {
arr.push(`${k} = '${datas[k]}'`);
}
let sql = `delete from ${table} where ${arr.join(" and ")}`;
query(sql,callBack)
}
/**
* 修改方法
* @param {string} table 表名
* @param {object} sets 修改的字段与值
* @param {object} wheres 判断条件
* @param {Function} callBack 回调函数
*/
let update = (table,sets,wheres,callBack)=>{
//准备一个数组,用来拼接 where子句
let whereArr = ['1=1']; //避免datas为空时,出现异常错误。
for (const k in wheres) {
whereArr.push(`${k} = '${wheres[k]}'`);
}
//准备一个数组,用来拼接 set 子句
let setArr = [];
for (const k in sets) {
setArr.push(`${k} = '${sets[k]}'`)
}
let sql = `UPDATE ${table} SET ${setArr.join(",")} WHERE ${whereArr.join(" and ")}`
query(sql,callBack)
}
module.exports = {
query,
insert,
del,
update
};
4.创建app.js
代码如下
const express = require('express');
const db = require("./db");
const app = express()
const port = 8000;
//解析post参数
app.use(express.urlencoded({extended:false}));
app.get('/', (req, res) => res.send('Hello World!'))
app.post("/login",(req,res)=>{
//获取用户名和密码
let {username,password} = req.body;
//查询数据库
let sql = `select * from user where username = '${username}' and pwd = '${pwd}'`;
db.query(sql,data=>{
if (data.length>0) {
res.send("登录成功")
} else {
res.send("登录失败")
}
})
})
app.post('/register', (req, res) => {
let { username, pwd } = req.body;
res.writeHead(200, {
'Content-Type': 'text/html;charset=utf-8'
});
db.insert('user', { username: username, pwd: pwd }, (data) => {
if (data.affectedRows > 0) {
res.end("注册成功!")
} else {
res.end("注册失败!")
}
})
})
app.listen(8000, () => console.log(`Example app listening on port 8000!`))
验证
首先打开命令终端,输入 node app.js
然后打开网页,点击注册
打开Navicat for MySQL 可以看到数据库中已经添加二狗用户名
然后进行登陆验证
至此大功告成!