开发环境说明:
- 要安装mysql数据库,安装方法自行百度,可参考菜鸟教程里面的安装步骤:安装MySQL数据库,也可安装一下可视化工具Navicat for MySQL。
- 安装Node.js、npm,安装方法自行百度。
- 编辑器VSCode或WebStorm,或其他前端编辑器。
接口能被成功访问的条件:打开mysql服务,node服务(即运行js文件)。操作方法请自行查找,不是文章主题哈~
一、创建一个js文件,引入开发需要的各个模块
以下几个模块需要使用npm install 模块名 -S
或yarn add 模块名
安装
const express = require('express')
const mysql = require('mysql')
const cors = require('cors') // 跨域
const bodyParser = require('body-parser') // 解析参数
二、代码实现
- 监听端口号:
const app = express()
const router = express.Router()
//启动项目,端口号为8000,监听接口
app.listen('8000', () => console.log('服务启动,http://localhost:8000/user'))
- 连接已经创建好的数据库:
//数据库信息,密码一般,默认root,我这边修改过
const database= {
host: 'localhost',
user: 'root',
password: '****',//密码
port: '3306',//数据库的端口
database: 'xxxname',//数据库名
connectTimeout: 5000, // 连接超时
multipleStatements: false // 是否允许一个query中包含多条sql语句
}
//连接数据库
const conn = mysql.createConnection(database)
app.use(cors()) //解决跨域
app.use(bodyParser.json()) //json请求
app.use(bodyParser.urlencoded({ extended: false })) // 表单请求
数据库user表:
3. 创建接口,实现功能
- 查询
//查询 '/user' 是一个接口路径(自己定义) req代表发起请求(request) res代表接收请求(response)
app.get('/user', (req, res) => {
const id = req.query.id
const sqlStr = 'SELECT * From user'; // 选择user表 根据你自己的表名 用json的格式输出
conn.query(sqlStr, id, (err, result) => {
if (err) {
return res.json({ code: 0, message: '获取失败', data: null,err:err })
}
console.log("result:", result)//打印看看变量值
console.log("len:", result.length)//打印看看变量值
if (result.length === 0) {
return res.json({ code: 0, message: '数据不存在', affectedRows: 0 })
}
return res.json({
code: 200, msg: '成功', data: result
});
//res.json(new Result({data:result})) //这是我的另一种方法 Result是一个类,如果用这行代码,请看文章最后我的函数定义。
})
})
控制台运行效果:
- 添加
//添加
app.post('/api/adduser', (req, res) => {
const user = req.body;
console.log(user);
const sqlStr = 'insert into user set ?';
conn.query(sqlStr, user, (err, result) => {
if (err) {
return res.json({ code: 0, message: 'error', affectedRows: 0 });
}
if (result.affectedRows === 0) {
return res.json({ code: 0, message: "添加失败", affectedRows: 0 })
}
res.json(new Result({ data: result })) //我用了类的方法,定义在文章末尾
})
})
发送post请求,返回成功:
数据库发生变化,新增了一条数据:
- 修改(假删除,改变状态,参数
?id=1
)
// 根据ID修改 假删除数据
app.get('/api/delUser', (req, res) => {
const id = req.query.id;//查询url的id
const sqlStr = 'update user set isdel = 1 where id=?'
conn.query(sqlStr, id, (err, result) => {
if (err) return res.json({ code: 0, message: 'error', affectedRows: 0 });
console.log("effectRows:", result.affectedRows);//1
if (result.affectedRows === 0) return res.json({ code: 0, message: '删除失败', affectedRows: 0 })
res.json({ code: 200, message: '删除成功(更新isDel)', affectedRows: result.affectedRows })
})
})
使用postman发送请求,返回成功:
表中id为1的isdel状态已修改:(刚才是0)
- 在body中携带参数的修改(修改id为3的user值)
app.post('/api/updateuser', (req, res) => {
const sqlStr = 'update user set ? where id = ?'
conn.query(
sqlStr,
[req.body, req.body.id],
(err, result) => {
if (err) return res.json({ code:0, message: '更新失败', affevtedRows: 0 })
//影响行数不等于1
if (result.affectedRows ===0 ) return res.json({ code: 1, message: '更新的用户不存在', affectedRows: 0 })
res.json({ code: 200, message: '更新成功', affectedRows: result.affectedRows })
})
})
postman发送post请求返回结果图:
数据库效果:
更改前:
更改后:
文章中有关Result类的定义,这里使用的ES5语法,后续修改为ES6语法再次发布。
function Result({ code = 200, msg = '成功', data = {} }) {
this.code = code;
this.msg = msg;
this.data = data
}
三、前端页面异步访问接口
这里使用JQuery的ajax测试:
记得引入jQuery库,也可引入jQuery库的链接
<script src="jquery-3.3.1.min.js"></script>
<script>
$.ajax({
url: 'http://127.0.0.1:8000/user', //接口地址,必须加上http:// 否则会进入error
type: 'get',
data: {
},//不传递参数
success: function (res) {
console.log(res) //调用成功的回调
},
error: function (err) {
console.log(err) //调用失败的回调
}
})
</script>
控制台运行结果: