后台项目+node+mysql

1.创建MYSQL表

mysql的可视化管理工具

 

设置栏位

注意id ，一个表只有一个主键

 

2.MYSQL查询语句

点击运行，自动生成sql语句，进行查询

 当然可以自己写查询语句啦，哈哈

查询  

SELECT * FORM 表名 // *代表所的内容

SELECT 字段1，字段2，字段3 FORM 表名 // 栏位就是字段

带有条件的查询 > < >= <= =

SELECT 字段1，字段2，字段3 FORM 表名 WHERE age>2

SELECT 字段1，字段2，字段3 FORM 表名 WHERE age>2   OR age<20 //或，取区间

SELECT 字段1，字段2，字段3 FORM 表名 WHERE age=2  AND age=20 //和

排序

SELECT * FORM 表名 ORDER BY age ASC    //ORDER BY排序  ASC升序/DESC降序

模糊查询

SELECT * FORM 表名 WHERE username LIKE "%郭郭%" //"%内容%"包含内容就行，" %内容"内容结尾，"内容%"内容开头

分页查询

//localhost:3000/userlist?page=1&size=2

SELECT * FORM 表名 LIMIT (page-1)*size,size

SELECT * FORM 表名 LIMIT 起始索引，每页有几条数据

SELECT * FORM 表名 0,2 //前两行数据

SELECT * FORM 表名 2,2//三四条数据

SELECT * FORM 表名 ORDER BY age ASC LIMIT 0,6//查询前六条数据

别名查询 （栏中替换了别名）

SELECT id AS user_id FORM 表名 

添加

INSERT INTO 表名 (字段1，字段2，...) VALUES (值1，值2)  //字段和值要对应，必填项字段必须要有 

INSERT INTO 表名 SET 字段1="值1",字段2="值2",... 

添加栏位

alter table 表名 add 字段名 字段类型;

更新

UPDATE 表名 SET 修改的字段=修改后的值  WHERE 条件

UPDATE hg_users SET age=18 WHERE id=7

删除 

DELETE FROM 表名 WHERE 条件 

DELETE FROM hg_users WHERE id=4

3.创建后端文件

cmd

npm i express --save

创建文件夹

配置主入口文件 app.js

const express = require('express') //引入express
const app = new express()
app.listen(3000,()=>{  //监听端口3000
    console.log('running');
})

 cmd 

 配置路由  如果忘记如何配置Express basic routing - Express 中文文档 | Express 中文网

 router文件夹 user-router.js配置路由

const express = require('express')//引入模块
const router =express.Router()//使用路由
router.get('/userlist',(req,res)=>{ //设置路由
    res.send('userlist')
})
module.exports=router//暴露路由对象

 app.js 配置路由 代码要放在监听端口上面！！！！

const userRouter=require('./router/user-router.js')
app.use('/api',userRouter)

测试

恭喜你！后台进步一点点，可以跑了 ！！！

逗号之后的内容可以配置到控制器中，所以咱们创建一个控制组件

router.get('/userlist',(req,res)=>{ //逗号之后的内容可以配置到控制器中，
    res.send('userlist')
})

controller文件夹 userController.js

exports.userList=(req,res)=>{
    res.send('userList')
}

在路由userlist.js中引入，就是把第二个参数拆成了一个控制器

const con=require('../controller/userColltroller')
router.get('/userlist',con.userlist)

4.post提交

router文件夹 user-router.js   配置一个post提交

router.post('/userlogin',con.userlogin)

需要在app.js 设置 接收body

//接收post发送的文本数据
app.use(express.urlencoded({
    extended:false
}))
app.use(express.json())

表单提交

 <form action="http://localhost:3000/api/register" method="post" 
    enctype="application/x-www-form-urlencoded" >
        <input type="text" name="username" id="">
        <input type="password" name="password" id="">
        <button>提交</button>
    </form>

后台接收

//用户注册
exports.userregister=(req,res)=>{
    console.log(req.body);
}

5.数据库模块  mysql - npm

把注册的模块放入数据库,下载MySQL模块

cmd

cnpm i mysql --save

在database文件夹 db.js

//引入模块
var mysql = require('mysql');
//与数据库创建连接
var connection = mysql.createConnection({
    host: 'localhost',//主机名
    user: 'root',//mysql用户名
    password: '',//mysql用户密码
    database: 'huohua'//数据库名
});
connection.query('SELECT * FROM huohuauser',(err,result)=>{
    console.log(result);
})

执行node db.js 就可以从数据库中查询出数据

6.对密码进行加密 md5 - npm

cmd 

cnpm i md5 --save

引入 

var md5 = require('md5');

使用

    let password=md5(req.body.password )//对密码加密

7.对时间格式化 Moment.js 中文网

cmd

cnpm i moment --save

引入

const moment = require('moment')

使用  更多使用请康康官网(⊙o⊙)？

    let nowTime=moment().format('YYYY-MM-DD hh:mm:ss')

8.生成图片验证码svg-captcha

cmd 

cnpm i svg-captcha --save

引入模块

var svgCaptcha = require('svg-captcha');

使用 

conterrller配置

exports.Svgcaptha=(req,res)=>{
    var captcha = svgCaptcha.create({
        size: 4, // 字符串长度
        ignoreChars: '0o1i', // 忽略非常像
        noise: 1 ,//干扰线
        color: true ,// 是否使用颜色
        background: '#cc9966' //背景颜色
    })
     res.type('svg');//这个要有
     res.status(200).send(captcha.data);//如果状态值为200时，发送验证码
     console.log(captcha.text)//打印出来验证码文本，后台就会出现
}

路由配置 

router.get('/captcha',con.Svgcaptha)

 图片配置

<img src="hhttp://localhost:3000/api/captch" id="captch"></img>
<script>
      document.querySelector('captch').onclick=function () {
            //跟上时间戳，点击时会不断的刷新
            this.src='http://localhost:3000/api/captch?t='+new Date().getTime()
        }
</script>

判断输入框中的验证码 是否正确

声明一个全局变量

var captcha=null

赋值

captcha=captcha.text.toLowerCase()

 进行判断

    if (captcha !==req.body.captcha.toLowerCase()) {
        res.json({
            status:40001,
            msg:'验证码错误'
        })
        return;//条件不符合，下面的不执行
    }

9.一个完整的注册实例

const { connection } = require("../database/db.js") //
//npm install md5 --save  加密
const md5 = require("md5")
//npm install moment --save  格式化时间
const moment = require("moment")
exports.UserList = (req, res) => {
    res.send("userlist")
}

exports.UserLogin = (req, res) => {
    res.send("UserLogin")
}

exports.UserRegister = (req, res) => {
    console.log(req.body);
    let username = req.body.username
    let password = md5(req.body.password)
    let level = req.body.level
    let nowTime = moment().format("YYYY-MM-DD HH:mm:ss")
    console.log(nowTime);

    // 注册流程
    // 先查询用户名是否存在
    // 1、如果存在，提示用户名已存在，
    // 2、如果不存在，将用户名插入到数据库中
    let userSql = `SELECT * from hg_users WHERE username="${username}"`
    connection.query(userSql, (err, result) => {
        if (err) {
            res.json({
                status: 1001,  //自定义的
                msg: "注册失败"
            })
        } else {
            console.log(result);

            if (result.length > 0) {
                //如果条件成立说明用户名已存在
                res.json({
                    status: 1002,  //自定义的
                    msg: "用户名已经存在"
                })
            } else {
                //说明用户名不存在
                let addSql = `INSERT INTO hg_users SET username="${username}",password="${password}",level=${level},is_show=1,create_time="${nowTime}"`
                connection.query(addSql, (err, resultData) => {
                    if (err) {
                        res.json({
                            status: 1003,  //自定义的
                            msg: "注册失败2"
                        })
                    } else {
                        res.json({
                            status: 200,
                            msg: "注册成功",
                            data: resultData
                        })
                    }
                })
            }


        }
    })
}

db.js

//cnpm install mysql --save
const mysql = require("mysql");

//使用步骤

// 创建一个连接
const connection = mysql.createConnection({
    host: 'localhost',  //主机名
    user: 'root',       //mysql的用户名，默认都是root
    password: '123456',  //mysql的密码
    database: 'myapp'    //数据库名
});


// connection.query("SELECT * FROM hg_users", (err, result) => {
//     console.log(result);

// })

module.exports = {
    connection
}

10.生成随机的六位短信验证码

 let phonerandom = ('000' + Math.floor(Math.random() * 99999).slice(-6))   
 res.send(phonerandom)

11.如何点击获取验证码时？得到短信验证码 

点击获取短信验证码时要发送ajax请求

 document.querySelector('#btn').onclick=function(){
            //验证码所在的路由                               随时间的变化而变化     
            let url="http://localhost:3000/api/phoneCode?t="+new Date.getTime()
            //发送一个axios请求 需要引入 axios.js
            axios.get(url).then(res=>{
                console.log(res);
            })
        }

向后台发送ajax请求，一定存在跨域问题！！！

解决跨域cors - npm

cmd

npm install --save cors

引入 app.js

var cors = require('cors')
app.use(cors())

12.随机生成用户名string-random - npm

cmd

npm i string-random

引入

const random = require('string-random');

使用

console.log(random());        //jcBvYzfa
console.log(random(16));      //d9oq0A3vooaDod8X
console.log(random(16, {numbers: false}));     //AgfPTKheCgMvwNqX
console.log(random(16, {letters: false}));     //0889014544916637
console.log(random(16, {letters: 'ABCDEFG'})); //055B1627E43GA7D8
console.log(random(16, {specials: true}));     //,o=8l{iay>AOegW[
console.log(random(16, {specials: true, numbers: false, letters: false}));    //)-[+$^%+$|)-{(]%
console.log(random(16, {specials: ':;', numbers: false, letters: false}));    //:;:;;;:;;;;;;;::
console.log(random(16, true)); //SMm,EjETKMldIM/J

9.10