一、介绍
Express 是基于Node.js平台,快速、开放、极简的Web开发框架。
二、使用环境
必须安装Node.js;
三、使用步骤
- 在cmd命令行或vscode最外层终端中初始化。
//初始化 npm init --yes
- 安装Express
npm install express --save
- 新建服务文件,如图:
- express的使用,在js文件中:
(1)、引入express:const express = require('express');
(2)、建应用对象:const app = express();
(3)、创建路由规则:如下图
(4)、监听端口启动服务:如下图;
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin',"*");
//设置响应
response.send('Hello Express')
})
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已启动,8000端口监听中...");
})
5. 右击服务文件夹==》打开终端==》输入node 文件名称.js==》回车运行服务,如图所示:
6. 查看是否启动成功:浏览器输入自己的IP加server.js中配置的端口号。
重点:每次修改服务内容一定要重启服务
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已启动,8000端口监听中...");
})
启动成功,如图:
四、实例代码
案例结果展示:
发起请求:jQuery 请求 和 axios 请求 案例如下:
<template>
<div id="app">
<h3>jQuery 请求</h3>
<el-row>
<el-button type="info" @click="jqueryGet">jQuery-GET请求</el-button>
<el-button @click="jqueryPost">jQuery-POST请求</el-button>
<el-button type="primary" @click="jqueryAjax">jQuery-AJAX请求</el-button>
</el-row>
<h3>axios 请求</h3>
<el-row>
<el-button type="success" @click="axiosGet">axios-GET请求</el-button>
<el-button type="warning" @click="axiosPost">axios-POST请求</el-button>
</el-row>
</div>
</template>
<script>
//配置 baseURL
axios.defaults.baseURL = 'http://自己IP地址:8000';
export default {
name: 'App',
components: {
HelloWorld
},
methods: {
jqueryGet() {
$.get('http://自己IP地址:8000/jquery-server', { a: 100, b: 200 }, function (data) {
console.log(data);
}, 'json');
},
jqueryPost() {
$.post('http://自己IP地址:8000/jquery-server', { a: 100, b: 200 }, function (data) {
console.log(data);
});
},
jqueryAjax() {
$.ajax({
//url
url: 'http://自己IP地址:8000/jquery-server',
//参数
data: { a: 100, b: 200 },
//请求类型
type: 'GET',
//响应体结果
dataType: 'json',
//头信息
headers: {
c: 300,
d: 400
},
//成功的回调
success: function (data) {
console.log(data);
},
//超时时间
timeout: 2000,
//失败的回调
error: function () {
console.log('出错啦!!');
},
});
},
axiosGet() {
//GET 请求
axios.get('/axios-server', {
//url 参数
params: {
id: 100
},
//请求头信息
headers: {
name: 'atguigu',
age: 20
}
}).then(value => {
console.log(value);
});
},
axiosPost() {
axios.post('/axios-server', {
username: 'admin',
password: 'admin'
}, {
//url
params: {
id: 200
},
//请求头参数
headers: {
height: 180,
weight: 180,
}
}).then(value => {
console.log(value);
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
margin-top: 60px;
}
</style>
express服务: jQuery 服务 和 axios 服务 案例如下:
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin',"*");
//设置响应
response.send('Hello Express')
})
//jQuery 服务
app.all('/jquery-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
const data = {name:'法外狂徒张三'};
response.send(JSON.stringify(data));
})
//axios 服务
app.all('/axios-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
const data = {
name:'法外狂徒张三',
age:24,
sex:"男"
};
response.send(JSON.stringify(data));
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已启动,8000端口监听中...");
})