如何使用nodejs寫一個接口
很多時候后台沒有數據的時候，前端需要自己模擬后台接口，但是對於我們這些前端來說學習成本有點大，因為后台不管java 還是php都是一門語言，需要時間去學習的，所以我們可以用node.js來模仿一下后台數據，下面說一下具體流程
1、需要安裝node.js 沒有的自行下載https://nodejs.org/zh-cn/
2、需要安裝npm 因為好多配置需要用到
3、可以使用 npm -v 和 node -v 來檢查是否安裝成功
准備工作差不多了那就開始上代碼
1、首先創建一個空文件夾 名字自己隨便命名 然后終端打開 我這命名為 node_demo
2、初始化項目 npm init 如果慢的話，推薦使用 淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org 然后使用cnpm init
3、安裝各種依賴 cnpm install express --save 這是創建服務的如果是最簡單的可以只安裝這一個就可以了
4、cnpm install cors --save 解決跨域問題
5、cnpm install body-parser --save 獲取前台傳參的參數
6、cnpm install mysql --save 數據庫
7、cnpm install multer --save 中間件上傳文件處理formdata類型的表單數據
8、cnpm install cookie-parser --save cookie的使用
構建完成以后目錄結構 一個node_modules文件夾和package.json文件
package.json文件如下
9、創建app.js 名字隨便定義 啟動項目 node app.js 內容如下
//導入express框架 var express = require("express"); var app = express(); //解決跨域問題 const cors = require('cors'); // 中間件 獲取參數的 const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true})); app.use(cors()); //獲取json數據 var data = require('./data.json') app.all("*", function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OP0TIONS"); res.header("X-Powered-By", "3.2.1"); res.header("Content-Type", "application/json;charset=utf-8"); next(); }); app.post('/123', function(req, res) { res.status(200), //json格式 res.json(data) //傳入頁面 // res.send() }); var server = app.listen(3000, function() { var host = server.address().address; var port = server.address().port; console.log("服務器啟動成功了端口是", port); })
我這是使用了 npm start 是因為我在上面配置了
10、創建json數據 data.json 數據根據自己的需要填寫 這邊寫的 簡單的 {"name": "尼古拉丁 * 趙四"}
11、開始請求數據創建 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<button type="button" class= "btn">按鈕</button>
<script type="text/javascript">
$(".btn").on('click',function(){
$.ajax({
type: "post",
url: "http://127.0.0.1:3000/123",
data:{
id:88,
name:'pp'
},
async: true,
success: function(res) {
console.log(res)
}
});
})
</script>
</body>
</html>
12、點擊 按鈕 接口就請求成功了
git 地址
https://gitee.com/songyulin11/node_demo.git
|