Express+MySQL实现登录注册的demo

时间：2020-02-03 13:29:24 阅读：99 评论：0 收藏：0 [点我收藏+]

标签：btn sql 插入图片 UNC 引擎 pass oct res viewport

> MySQL5.7.20
###### demo准备
安装MySQL，安装完毕之后添加系统环境变量在`cmd`中启动服务：`net start mysql57`，如果是安装MySQL8.0则服务名默认时`mysql80`，测试安装MySQL是否安装成功：`mysql -V`
安装`express`前提时已经安装`Node`,`npm`是安装`Node`自身携带的
###### demo开始
1. 首先新建一个文件夹，名称尽量是英文的
2. 快速创建项目：`npm init -y`
3. 新建一个`app.js`文件， Node服务端的主要书写地，也不是主要
4. 首先创建启动服务

```javascript
const express = require(‘express‘);
const app = express()
app.get(‘/‘,function(req,res){
res.send(‘Node服务启动成功‘) // 返回数据到前端
})
app.listen(3001)
```
5. 在浏览器上输入`localhost:3001`效果如下图：
![Node启动服务](https://img-blog.csdnimg.cn/20200201191544815.png)
6. 新建`views`文件夹，存放展示页面，例如：`index.html`
7. 建立mysql连接

```javascript
const mysql = require(‘msyql‘)
var connsql = mysql.createConnection({
host:‘127.0.0.1‘,
port:‘3306‘,
user:‘root‘,
password:‘root123‘,
database:‘db‘ // 数据库
})
connsql.connect() // 开启与数据库连接
```
8. 由于访问地址时展示的是假数据，这里我们需要展示具有表单的HTML页面
```javascript
app.engine(‘html‘,require(‘express-art-template‘)) // 渲染html引擎
app.get(‘/‘,(req,res){
res.render(‘index.html‘) // 默认登录页面
})
app.get(‘/‘,(req,res){
res.render(‘register.html‘) // 注册页面![在这里插入图片描述](https://img-blog.csdnimg.cn/20200201193933500.png)
})
```
9. index.html页面

```html
<body>
<h1>登录页面！</h1>
<div><span>账号：</span><input type="text" name="user"></div>
<div><span>密码：</span><input type="password" name="pwd"></div>
<div>
<input type="submit" value="登录" id="btn">
<a href="/register"><button>注册</button></a>
<span class="spa1"><span class="asd"></span></span>
</div>
</body>
```
![登录页面截图](https://img-blog.csdnimg.cn/20200201193949267.png)
10. 注册页面与登录页面差不多一致
![注册页面截图](https://img-blog.csdnimg.cn/20200201194210715.png)
11. 登录

```javascript
app.use(‘/login‘, (req, res)=> {
var login = {
"user": req.body.user, // 获取input中的user值
"pwd": req.body.pwd // 获取input中的pwd值
}

// 定义查询sql语句
var loginsql = "select username,password from db_table where username=‘" + login.user + "‘and password=‘" + login.pwd + "‘"

// 执行查询
connsql.query(loginsql, (err, result)=> {
if (err) {
console.log(‘err message:‘, err)
return
}
if (result == ‘‘) {
console.log(‘用户名或密码错误！‘)
res.json({ code: -1, msg: ‘用户名或密码错误！‘ })

} else {
console.log(‘用户名密码匹配成功！‘)
res.json({ code: 1, msg: ‘登录成功‘ })

}
})
})
```
12. 注册
```javascript
app.use(‘/regs‘, (req, res) => {
var regs = {
"user": req.body.user,
"pwd": req.body.pwd
}
// 插入sql语句
var regssql = "insert into db_table(username,password) values(‘" + regs.user + "‘,‘" + regs.pwd + "‘)";
// 查询sql语句
var selsql = "select username from db_table where username=‘" + regs.user + "‘"

//将用户名和密码插入到数据表中的函数
function regfun() {
connsql.query(regssql, (err, result)=> {
if (err) {
console.log(err);
return
}
res.json({code:1,msg:"注册成功"})
console.log(‘注册成功‘)
})
}
// 先查询用户名是否存在，在决定注册插入用户名和密码
connsql.query(selsql, (err, result)=>{
if (err) {
console.log(err)
return
}
if (result == ‘‘) {
regfun() // 执行插入函数
} else {
res.json({code:-1,msg:"注册失败，用户名已存在"})
console.log(regs.user + ‘用户名已存在‘)
}

})
})
```
13. 登录的ajax请求

```javascript
$(function(){
$(‘#btn‘).click(function(){
var user=$(‘input[type=text]‘)
var pwd=$(‘input[type=password]‘)
var logindata={user:user.val(),pwd:pwd.val()}
if(user.val().length==0&&pwd.val().length==0){
$(‘.spa1‘).text(‘用户名和密码不能为空‘)
}else{
$.ajax({
type:‘post‘,
url:‘/login‘,
dataType:‘json‘,
data:logindata,
success:function(data){
if(data.code>1){
$(‘.asd‘).text(data.msg)
}
$(‘.asd‘).text(data.msg)
},
error:function(error){
console.log(error)
}
})
}
})

})
</script>
```
14. 注册的ajax请求

```javascript
<script>
$(function () {
$(‘#btn‘).click(function () {
var user = $(‘input[type=text]‘)
var pwd1 = $(‘input[name=pwd1]‘)
var pwd2 = $(‘input[name=pwd2]‘)
var msg=$(‘.msg‘)
var datas = { user: user.val(), pwd: pwd1.val() }

15. ###### 至此登录注册就做完了，由于是小白，可能其中存在问题，也欢迎交流学习，最后附上完整代码
16. app.js
```javascript
const express = require(‘express‘)
const mysql = require(‘mysql‘)
const app = express()
var bodyParser = require(‘body-parser‘)

var connsql = mysql.createConnection({
host: ‘127.0.0.1‘,
port: ‘3306‘,
user: ‘root‘,
password: ‘2232723904‘,
database: ‘db‘

})
connsql.connect()

app.engine(‘html‘, require(‘express-art-template‘))
app.use(‘/public/‘, express.static(‘./public/‘))

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.get(‘/‘, (req, res)=> {
// res.sendFile( __dirname +"/views/"+ "index.html" );
res.render(‘index.html‘)
})

app.get(‘/register‘, (req, res)=> {
// res.sendFile( __dirname +"/views/"+ "register.html" );
res.render(‘register.html‘)
})

app.use(‘/login‘, (req, res)=> {
var login = {
"user": req.body.user,
"pwd": req.body.pwd
}

var loginsql = "select username,password from db_table where username=‘" + login.user + "‘and password=‘" + login.pwd + "‘"
connsql.query(loginsql, (err, result)=> {
if (err) {
console.log(‘err message:‘, err)
return
}
if (result == ‘‘) {
console.log(‘用户名或密码错误！‘)
res.json({ code: -1, msg: ‘用户名或密码错误！‘ })

} else {
console.log(‘用户名密码匹配成功！‘)
res.json({ code: 1, msg: ‘登录成功‘ })

}
})
})

app.use(‘/regs‘, (req, res) => {
var regs = {
"user": req.body.user,
"pwd": req.body.pwd
}
var regssql = "insert into db_table(username,password) values(‘" + regs.user + "‘,‘" + regs.pwd + "‘)";
var selsql = "select username from db_table where username=‘" + regs.user + "‘"
function regfun() {
connsql.query(regssql, (err, result)=> {
if (err) {
console.log(err);
return
}
res.json({code:1,msg:"注册成功"})
console.log(‘注册成功‘)
})
}
connsql.query(selsql, (err, result)=>{
if (err) {
console.log(err)
return
}
if (result == ‘‘) {
regfun()
} else {
res.json({code:-1,msg:"注册失败，用户名已存在"})
console.log(regs.user + ‘用户名已存在‘)
}

})
})

app.listen(3000)

// connsql.end()

```
17. index.html

```html
<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录页面</title>
<style>
.spa1{color: #ff160e;}
.asd{color: #0bc52a;}
</style>
</head>

</html>
<script>
$(function(){
$(‘#btn‘).click(function(){
var user=$(‘input[type=text]‘)
var pwd=$(‘input[type=password]‘)
var logindata={user:user.val(),pwd:pwd.val()}
if(user.val().length==0&&pwd.val().length==0){
$(‘.spa1‘).text(‘用户名和密码不能为空‘)
}else{
$.ajax({
type:‘post‘,
url:‘/login‘,
dataType:‘json‘,
data:logindata,
success:function(data){
if(data.code>1){
$(‘.asd‘).text(data.msg)
}
$(‘.asd‘).text(data.msg)
},
error:function(error){
console.log(error)
}
})
}
})

})
</script>
```
18. register.html

```html
<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册页面</title>
<style>
.msg{color: #ff160e;}
.asd{color: #0bc52a;}
</style>
</head>

</html>
<script>
$(function () {
$(‘#btn‘).click(function () {
var user = $(‘input[type=text]‘)
var pwd1 = $(‘input[name=pwd1]‘)
var pwd2 = $(‘input[name=pwd2]‘)
var msg=$(‘.msg‘)
var datas = { user: user.val(), pwd: pwd1.val() }

if (user.val().length == 0 || pwd1.val().length == 0 || pwd2.val().length == 0) {
msg.text(‘请输入用户名和密码‘)
return false
} else if (pwd1.val() !== pwd2.val()) {
msg.text(‘两次密码输入不一致‘)
return false
} else {
$.ajax({
type: ‘POST‘,
url: ‘/regs‘,
dataType: ‘json‘,
data: datas,
success: function (data) {
if(data.code>0){
$(".asd").text(data.msg)
}
$(".asd").text(data.msg)
},
error: function (error) {
console.log(error)
}
})
}
})
$(‘button‘).click(function(){
location.href=‘/‘
})
})
</script>
```
19. ps: 在安装第三方包时后面要加 `-S`或`-D`例如：`cnpm i express -S`,这样做的作用是保存在配置文件`package.json`中，方便别人下载包时，直接下载，省时省力。
20. 注册成功的mysql数据表
![数据表](https://img-blog.csdnimg.cn/20200201205741792.png)
21. 源码地址：[https://github.com/dillonleader/login-demo](https://github.com/dillonleader/login-demo)

Express+MySQL实现登录注册的demo

标签：btn sql 插入图片 UNC 引擎 pass oct res viewport

原文地址：https://www.cnblogs.com/dillonl/p/12255233.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行