開發環境說明：
- 要安裝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>
控制檯運行結果：
