之前做项目一直依赖于fastmock去封装现成的接口，但是fastmock虽好但是应该不能和数据库联动，在拖延了几个月后我痛定思痛决定要自己写接口，按照一般的做法应该都是用java去封装接口比较多，但是我偏不想用java，我就爱用js，诶就是玩，然后发现nodejs的相关资料确实是不怎么多，看了各种视频各种文章才勉勉强强摸索到一些，好在最终还是弄明白了，那就浅记录一下8
这是html的代码，这里有一个小坑吧，在我写get请求的时候一开始都是用params去传参数，但是这时候我写后端的思路就好像sjb一样，完全没有想到之所以获取不到传递的参数是因为接收的参数写错了，正确的是req.query，而我最开始一直写req.params
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>GET2</button>
<script>
var qs = Qs
var btns = document.querySelectorAll('button');
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
/* axios.default.baseURL='http://127.0.0.1:8000'; */
/* btns[0].addEventListener('click', function() {
//'http://127.0.0.1:3001/test/2'
axios.post('http://127.0.0.1:3002/api/test', qs.stringify({
id: 1,
})).then(function(res) {
console.log(res);
})
}) */
const id = 2
btns[0].addEventListener('click', function() {
//'http://127.0.0.1:3001/test/2'
axios({
method: "GET",
url: `http://127.0.0.1:3002/api/test/${id}`
}).then(value => {
console.log(value);
})
})
btns[2].addEventListener('click', function() {
axios({
method: "GET",
url: 'http://127.0.0.1:3002/api/get2',
params:{
id:2
}
}).then(value => {
console.log(value);
})
})
btns[1].addEventListener('click', function() {
//'http://127.0.0.1:3001/test/2'
axios({
method: "POST",
url: `http://127.0.0.1:3002/api/post`,
data:{
title:'tt',
completed:27
}
}).then(value => {
console.log(value);
})
})
</script>
</body>
</html>
接下来是服务器的代码：
这里需要注意的地方是因为我本地的html用的端口是8848但是服务器开启在3002端口，所以会有跨域的问题，这里需要npm i cors然后把他引入，除此之外还可以npm i body-parser用来处理post提交过来的数据
const app = express()
app.use(express.urlencoded({
entended: false
}))
const cors = require('cors');
app.use(cors());
const qs = require('qs')
const bodyParser = require('body-parser');
const router = require('./route.js')
const sql = require('./测试/sql.js')
app.use(bodyParser.json());
// 解析 application/x-www-form-urlencoded
app.use(bodyParser.urlencoded());
app.use('/api', sql)
app.listen(3002, () => {
console.log('本地')
})
接下来就是连接数据库的代码啦
这里我分成两个部分（但是写的时候是在一个文件里面的）
第一个部分是去连接数据库，这里因为我之前就建好了数据库所以直接在数据库创建连接里面去配置数据库的相关信息，然后调用connect方法去连接，运行上面的js文件成功后会出现link-success，表明已经连接上了数据库
const app = express()
const mysql = require('mysql')
const db = mysql.createConnection({
host: 'localhost',
user: "root",
password: "123456",
database: "nodemysql"
})
db.connect((err) => {
if (err) throw err
console.log('link-success')
})
接下来就是写接口，访问时切记不要直接访问 http://127.0.0.1:3002/test，而是要访问http://127.0.0.1:3002/api/test，因为之前的服务器上有这样一行代码app.use('/api', sql)，这意味着匹配请求路径是/api的请求。
| 请求格式 | 接口格式 |
|---|---|
| .../test/${id} | /test/:id |
| ...get2(带params) | /get2(sql语句中解析传递过来的参数) |
| .../post(带data) | /post(同上) |
app.get("/test/:id", (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', '*');
let sql = `select title from todos where id=${req.params.id}`;
console.log(req.body)
db.query(sql, (err, result) => {
if (err) {
console.log(err)
} else {
console.log(result)
res.send(JSON.stringify(result))
}
})
})
app.get("/get2", (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', '*');
let sql = `select title from todos where id=${req.query.id}`;
console.log(req.query)
db.query(sql, (err, result) => {
if (err) {
console.log(err)
} else {
console.log(result)
res.send(JSON.stringify(result))
}
})
})
app.post("/post", (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', '*');
console.log(req.body)
let todo = {
title: "todo2",
completed: 2
};
//写个问号 防止sql注入 会在执行时把post传进sql语句 替换问号
let sql = "INSERT INTO todos SET?";
db.query(sql, req.body, (err, result) => {
if (err) {
console.log(err)
} else {
console.log(result)
res.send("todos added")
}
})
})
//这个非常重要，一定要暴露出去否则会出大问题
module.exports = app
