富贵资源网 Design By www.hznty.com
要求
- 了解Express框架
- 了解node.js常用模块：express，body-parser，mysql
- 了解express Router
- 了解HTML form表单
- 了解MySQL Server 及安装使用
- 了解SQLyog使用
环境
- OS: Win10
- Node.js: v12.19.0
- Express: v4.17.1
- Yarn: v1.22.10
- 使用VScode IDE
- body-parser：1.19.0
- mysql: 2.18.1
- MySQL Server：5.7
- SQLyog:V12.9
准备
首先在Win10上安装Mysql，一路Next就行。安装完成使用SQLyog连接MySQL Server。连接成功需要创建数据库和数据表
Schema：
CREATE TABLE user ( username char(20) NOT NULL, password char(20) NOT NULL, email char(30) DEFAULT NULL, address char(20) DEFAULT NULL, phonenumber char(20) DEFAULT NULL, logintime int(20) DEFAULT NULL, id int(20) NOT NULL AUTO_INCREMENT, PRIMARY KEY (id), KEY username (username) ) ENGINE=InnoDB DEFAULT CHARSET=utf8
实战
前端
3个page, login.html, register.html.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆注册</title> <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <a href="./register.html" rel="external nofollow" >注册</a> <a href="./login.html" rel="external nofollow" >登录</a> </body> </head> </html>
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆注册</title> <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <form action="/login" method="GET" > <label for="">账号:</label> <input name="user" type="text" placeholder="请输入账号"> <br> <label for="">密码:</label> <input type="password" name="password" placeholder="请输入密码"> <br> <input type="submit" value="登录"> </form> </body> </head> </html>
register.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆注册</title> <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <form action="/register" method="POST"> <label for="">账号:</label> <input name="user" type="text" placeholder="请输入账号"> <br> <label for="">密码:</label> <input name="psw" type="password" placeholder="请输入密码"> <br> <label for="">重复密码:</label> <input name="pswa" type="password" placeholder="请重复密码"> <br> <input type="submit" value="注册"> </form> </body> </head> </html>
后端 server.js
var express = require("express");
var bodyParser = require("body-parser");
var router = require("./routers");
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.use('/', router);
module.exports = app;
Router
router/index.js, 调用封装好的数据库接口：queryUer, addUser
const express=require("express");
const dao = require("../dao/db");
const router=express.Router();
router.get("/login", function(req,res){
console.dir(req.query);
try{
dao.queryUser({username:req.query.user},function(err,record){
if(err){
console.log(err);
throw error;
}
console.log(record);
if(record && record.password == req.query.password){
res.send(`${req.query.user}:登陆成功`);
}else{
res.send(`${req.query.user}:登陆失败,检查登陆信息是否正确`);
}
});
} catch(error){
console.log(error);
res.send(`${req.body.user}: 登陆失败`);
}
})
router.post("/register", function(req,res){
console.dir(req.body);
try{
if(req.body.psw == req.body.pswa){
dao.addUser({username:req.body.user,password:req.body.psw});
res.send(`${req.body.user}: 注册成功`);
} else {
console.log(error);
res.send(`${req.body.user}: 注册失败:,检查登陆信息是否正确`);
}
} catch(error){
console.log(error);
res.send(`${req.body.user}: 注册失败`);
}
})
module.exports = router;
数据库接口db.js
dao/db.js
var mysqlClient= require("./mysql");
function addUser (userInfo,callabck){
console.log("addUser:"+ userInfo);
var sql= `insert into user(username,password) values('${userInfo.username}','${userInfo.password}')`;
console.log("sql:"+ sql);
mysqlClient(sql,function(err,rows){
if(err){
console.log("err:"+err);
callabck(err,null);
} else{
console.log("addUser result:");
console.log(rows);
callabck(null,rows);
}
})
}
function queryUser (userInfo,callabck){
console.log("queryUser:"+ userInfo);
var sql= `select * from user where username='${userInfo.username}'`;
console.log("sql:"+ sql);
mysqlClient(sql, function(err,rows){
if(err){
console.log("err:"+err);
callabck(err,null);
} else{
rows && rows.length>0 "htmlcode">
const mysql = require("mysql");
const pool = mysql.createPool({
host:"localhost",
user:"root",
password:"*****",
database:"test"
});
function query(sql,callback){
pool.getConnection(function(err,connection){
if(err){
callback(err,null);
return
}
connection.query(sql, function (err,rows) {
callback(err,rows);
connection.release();
});
});
}
module.exports = query;
mysql module
yarn add mysql
运行index.js
cd src/ && node index.js
结果及演示
浏览器看效果及整个过程。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。