客户端和服务端交互

客户端和服务端交互（注册用户）

---

使用nodejs编写服务端代码，前端通过jquery发起post请求，后端得到数据后向数据库中添加用户信息

---

客户端（通过jquery发起请求）

1、定义input框用来输入用户名和密码

用户名:
密码:
注册

2、给button绑定点击事件

1、在点击后获取到输入框的值，并赋值给username和password
2、通过jquery发起post请求，在{}中将username和password的值传到服务器
3、打印res查看结果

$('button').on('click', () => {
            var username = $('#username').val();
            var password = $('#password').val();
            console.log(username);
            $.post(
                'http://127.0.0.1:3007/api/reguser',
                {
                    username: username,
                    password: password
                },
                (res) => {
                    console.log(res);
                }
            )
        })

---

数据库

1、新建数据库my_db_01

2、新建ev_users用户表，id设置key

---

服务端（node.js）

新建文件夹并初始化

1、在当前目录下打开终端执行npm init -y初始化包管理工具

2、安装express模块 npm i [email protected]

3、安装mysql模块npm i [email protected]

新建db文件夹，下新建index.js

//导入mysql模块
const mysql = require('mysql')
//连接数据库
const db = mysql.createPool({
  host: '127.0.0.1',
  user: 'root',
  password: '123456',
  database: 'my_db_01',
})

module.exports = db

4、新建router_handler文件夹，下新建user.js文件，写注册用户的处理函数

// 导入数据库操作模块
const db = require('../db/index')
// 注册新用户的处理函数
exports.regUser = (req, res) => {
  // 获取客户端提交到服务器的用户信息
  const userinfo = req.body

  // 定义 SQL 语句，查询用户名是否被占用
  const sqlStr = 'select * from ev_users where username=?'
  db.query(sqlStr, userinfo.username, (err, results) => {
    // 执行 SQL 语句失败
    if (err) {
      return res.send({ status: 1, message: err.message })
    }
    // 判断用户名是否被占用
    if (results.length > 0) {
      return res.send({ status: 1, message: '用户名被占用，请更换其他用户名！' })
    }

    // 定义插入新用户的 SQL 语句
    const sql = 'insert into ev_users set ?'
    // 调用 db.query() 执行 SQL 语句
    db.query(sql, { username: userinfo.username, password: userinfo.password }, (err, results) => {
    // 判断 SQL 语句是否执行成功
    if (err) return res.send({ status: 1, message:err.message })
    // 判断相应数是否为 1
    if (results.affectedRows !== 1) return res.send({status: 1, message: '注册用户失败，请稍后再试！' })
    // 注册用户成功
    res.send({ status: 0, message: '注册成功！' })
    })
  })
}

5、新建router文件夹，下新建user.js

const express = require('express')
const router = express.Router()

// 导入用户路由处理函数对应的模块
const user_handler = require('../router_handler/user')

// 注册新用户
router.post('/reguser', expressJoi(reg_login_schema), user_handler.regUser)

module.exports = router

6、根目录下新建app.js文件导入用户路由处理函数对应的模块

// 导入 express
const express = require('express')
// 创建服务器的实例对象
const app = express()

// 导入并使用用户路由模块
const userRouter = require('./router/user')
app.use('/api', userRouter)
// 启动服务器
app.listen(3007, () => {
  console.log('api server running at http://127.0.0.1:3007')
})

---

完成之后

启动mysql

开启服务端node .\app.js

打开客户端进入调试模式

服务端返回注册成功

数据库新增了一条数据

ok，大功告成！

---