一、通过MySQL建立数据库及表
CREATE DATABASE shopdata;
CREATE TABLE IF NOT EXISTS users(
userid VARCHAR(20) PRIMARY KEY,
password VARCHAR(20),
company VARCHAR(20),
tel VARCHAR(11),
email VARCHAR(20)
);
INSERT INTO users
VALUES('user001', 'hjh123456', 'alibaba', '13765427897', '[email protected]'),
('user002', 'hjh456789', 'baidu', '13765431357', '[email protected]'),
('user003', '123hjh456', 'sina', '15837261028', '[email protected]');
二、、使用Nodejs+express建立工程
-
安装好Nodejs
终端下输入node --version回显示版本，则已安装好
-
安装MySQL
-
安装express
-
进入项目文件夹执行命令
-
npm init -y
-
npm install express --save
-
-
通过应用生成器工具 express-generator 快速创建一个应用的骨架
-
继续在当前目录下执行
-
npx express-generator(运行 Express 应用程序生成器)
-
npm install(安装所有依赖包)
-
-
运行项目
-
npm start
执行过此命令后
即可在浏览器中输入
http://localhost:3000显示如下则成功
-
-
将MySQL引入项目
终端键入命令
npm install mysql --save
-
生成的目录结构如下(
login.html与register.html是我后来加的)
经过以上步骤，项目基础框架已经搭建完成
三、修改端口号
强烈建议
我个人搭建完项目之后，一直要不是验证出错，就是404
重新npm start则一直显示
也尝试了sudo lsof -i port:3000，以及killport 3000然而不行，也不知道为什么，搞了1个多小时。
最后把端口号修改完后就可以了 = =！
修改方式
进入工作目录的bin下的www文件中，
将||后面的数字改成端口号就可以了，我这里改成了30010，之后就可以顺利的npm start了
四、前端页面及完成效果
1、登录页面
2、注册页面部分
如果输入框未填写内容
内容未填写完整
两次填写的密码不同
登录成功显示内容
五、主要代码部分
1、对于app.js的设置 app.js中
-
将login路由引入到app.js中
-
将此路由作为根目录
-
设置监听端口
2、登录实现部分 login.js中
/**
*登录验证功能
*/
router.get('/login',function(req,res){
var userid = req.query.userid
var pwd = req.query.pwd
var query1 = "select * from users where userid='"+userid+"' and password='"+pwd+"'"
connection.query(query1,function(err,result){
if (err) throw err;
console.log("!!!",result)
if(result.length==0){
res.send("用户名或密码错误")
}else{
req.session.userid = userid;
console.log("数据插入成功")
// res.send("登录成功")
// res.redirect("/index.html");
res.send("登录成功<br>欢迎你"+userid +"")
}
})
})
3、注册实现部分 login.js中
/***
* 注册功能
*/
router.get('/register',function(req,res){
var userid = req.query.userid;
var password = req.query.pwd;
var company = req.query.comp;
var tel = req.query.tel;
var email = req.query.email;
var user = [userid,password,company,tel,email];
var querystr = 'insert into users(userid,password,company,tel,email) values(?,?,?,?,?)';
connection.query(querystr,user,function(err,result){
if(err)
{
// 跳转回注册页面
res.redirect("/register.html");
}
console.log("***")
// 跳转到登录页面
res.sendfile(path.join(__dirname,"../public/login.html"))
})
})
4、连接数据库 login.js中
var connection = mysql.createConnection({
host:'localhost',
port:'3306',
user:'root',
password:'123456',//数据库密码
database:'shopdata'//数据库名
})
connection.connect()
5、登录页面
<!--
* @Descripttion:
* @version:
* @Author: jimmyhuang
* @Date: 2020-04-10 20:53:54
* @LastEditors: jimmyhuang
* @LastEditTime: 2020-04-11 15:23:28
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<title>登录</title>
<link type="text/css" rel="stylesheet" href="stylesheets/login.css">
</head>
<body>
<div id="logo">
<img src="images/tblogo.jpeg" id="logoimg">
</div>
<!-- action设置为login -->
<form action="login">
<div id="userinput">
<input type="text" name="userid" placeholder="手机号/邮箱/会员名" />
</div>
<div id="passinput">
<input type="password" name="pwd" placeholder="请输入登录密码" />
</div>
<div style="margin-top: 10px">
<a href="" class="under" style="float: left;margin-left: 30px">短信验证码登录</a>
<a href="register.html" class="under" style="float: right;margin-right: 30px">免费注册</a>
</div>
<div id="loginbtnframe">
<!-- <input type="submit" value="登录" id="loginbtn"> -->
<button type="submit" id="loginbtn">登录</button>
</div>
</form>
</body>
</html>
6、注册页面
<!--
* @Descripttion:
* @version:
* @Author: jimmyhuang
* @Date: 2020-04-10 20:54:06
* @LastEditors: jimmyhuang
* @LastEditTime: 2020-04-11 16:13:28
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<meta charset="UTF-8">
<title>注册页面</title>
<link type="text/css" rel="stylesheet" href="stylesheets/register.css">
<script type="text/javascript" src="javascripts/register.js"></script>
</head>
<body>
<div class="header">
<h2 id="headtext01">手机号注册</h2>
<h3 id="headtext02">亲，欢迎注册淘宝账号</h3>
</div>
<form action="register">
<div id="inputFrame">
<input type="text" placeholder="请输入用户名" name="userid" class="info" id="userid" onblur="checkUserid()" ><span id="useridSpan" class="inputSpan"></span>
<input type="password" placeholder="请输入密码" name="pwd" class="info" id="psw" onblur="checkPsw()" ><span id="pswSpan"></span>
<input type="password" placeholder="请再次输入密码" name="repwd" class="info" id="confirmpsw" onblur="checkComPsw()" ><span id="conpswSpan"></span>
<input type="text" placeholder="请输入公司名" name="comp" class="info" id="company" onblur="checkCompany()" ><span id="companySpan"></span>
<input type="text" placeholder="请输入电话号码" name="tel" class="info" id="tel" onblur="checkTel()" ><span id="telSpan"></span>
<input type="text" placeholder="请输入电子邮箱" name="email" class="info" id="mail" onblur="checkMail()" ><span id="mailSpan"></span>
</div>
<div id="registerbtnframe">
<button id="registerbtn" type="submit" onclick="completeInfo()">同意协议并注册</button>
</div>
</form>
<div id="announce">
<a style="color: darkgray">已阅读并同意以下协议:</a>
<a class="treaty" href="">淘宝平台服务协议</a>
<a class="treaty" href="">隐私权政策</a>
<a class="treaty" href="">法律声明</a>
<a class="treaty" href="">支付宝及客户端服务协议</a>
</div>
</body>
</html>
