前端通过Express框架搭建本地模拟服务器

一、介绍

Express 是基于Node.js平台，快速、开放、极简的Web开发框架。

二、使用环境

必须安装Node.js；

三、使用步骤

1. 在cmd命令行或vscode最外层终端中初始化。

   //初始化
   npm init --yes

2. 安装Express

   npm install express --save

3. 新建服务文件，如图：

   

4. 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端口监听中...");
})