Instale o Node.js
Download do URL | Rede Chinesa Node.js
Crie um novo arquivo para colocar o projeto, abra o terminal no arquivo para inicializar
npm init
instalar dependências
- express —— Baseado na plataforma node.js, um framework de desenvolvimento web rápido, aberto e minimalista.
- body-parser - usado para analisar o formulário.
- mysql - sistema de gerenciamento de banco de dados relacional.
- cors - usado para resolver problemas entre domínios.
npm install express body-parser mysql cors --save
Crie um novo arquivo app.js no arquivo, introduza dependências e comece a escrever interfaces
O Node.js precisa ser executado novamente após a alteração
/* 引入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');
})
Então você pode chamar a interface
index.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>