Node.jsをインストールする
プロジェクトを配置する新しいファイルを作成し、ファイル内でターミナルを開いて初期化します
npm init依存関係をインストールする
- Express —— Node.js プラットフォームをベースとした、高速かつオープンで最小限の Web 開発フレームワークです。
- body-parser - フォームを解析するために使用されます。
- mysql - リレーショナル データベース管理システム。
- cors - クロスドメインの問題を解決するために使用されます。
npm install express body-parser mysql cors --saveファイル内に新しいファイル app.js を作成し、依存関係を導入してインターフェイスの作成を開始します。
変更後に Node.js を再実行する必要がある
/* 引入express框架 */
const express = require('express');
const app = express();
/* 引入cors */
const cors = require('cors');
app.use(cors());
/* 引入body-parser */
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.all('*', function (req, res, next) {
if (!req.get('Origin')) return next();
// use "*" here to accept any origin
res.set('Access-Control-Allow-Origin', '*');
res.set('Access-Control-Allow-Methods', 'GET');
res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
// res.set('Access-Control-Allow-Max-Age', 3600);
if ('OPTIONS' == req.method) return res.send(200);
next();
});
app.get('/', (req, res) => {
res.send('<p style="color:red">服务已启动</p>');
})
app.get('/api/list', (req, res) => {
res.json({
code: 200,
message: '成功',
data: {
list: [
{
id:'1',
name:'张三',
gae:'18'
},
{
id:'2',
name:'李四',
gae:'20'
}
]
}
});
})
/* 监听端口 */
app.listen(3000, () => {
console.log('listen:3000');
})その後、インターフェイスを呼び出すことができます
インデックス.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<body>
<button id="btn1">发起GET请求</button>
</body>
<script>
document.querySelector('#btn1').addEventListener('click', function () {
var url = 'http://localhost:3000/api/list' // 这里设置你本机的ip:端口号
axios.get(url).then(function (res) {
console.log(res.data)
})
})
</script>
</html>