一个前端的接口是如何搭建的

今天在网上学习的时候发现一个困惑我的问题

他直接通过一个路径访问到了一个json格式的文件，现在需求是跨域用8080这个端口向8000端口取数据，实现8080端口上应用的动态获取数据，如何去搭建这个临时数据文件并且能让8080访问到啊

既然是静态的，可以考虑写在一个项目里面

jsonp
后端转

vue.config.js配置代理

  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7637293
这篇博客也不错, 你可以看下给数组中的每一个json对象动态添加键值对
除此之外, 这篇博客: 前后模拟后端接口返回数据中的 请求本地 json 文件，返回数据 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

json文件中写入数据：

// message.json
{
  "code":"000",
  "message":"message",
  "lists":[
      {
        "name":"小张",
        "sex":"男",
        "age": "21"
      },
      {
        "name":"小丽",
        "sex":"女",
        "age":"18"
      }
      ,
      {
        "name":"小白",
        "sex":"女",
        "age":"18"
      }
    ]
}

前端进行数据请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>请求本地json文件数据</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function () {
        // 请求路径是当前文件的相对路径
        $.ajax({
            url:'list.json',
            contentType: 'application/json',
            type: 'get',   
            dataType:'JSON',
           
            success: function (res) {
				console.log("成功");
                if(res.code == '000'){
                    console.log(res);
                    $('body').html(JSON.stringify(res));
                }else{
                    alert(res.message);
                }
            },
            Error: function (xhr, type, errorThrown) {
                console.log(errorThrown);
            }
        });
    })
</script>
</body>
</html>

在这里插入图片描述

您还可以看一下黄菊华老师的微信小程序Json数据使用专题课程中的微信小程序入门到就业课（全栈课）学习说明【建议看下】小节, 巩固相关知识点

以下回答由chatgpt基于相关博客总结生成:

要在前端搭建一个允许跨域访问的接口，可以通过搭建一个临时的服务器，来提供访问数据的接口。

具体步骤如下：

安装一个简单的服务器：可以使用node.js中的express框架快速搭建一个服务器。

// 安装express和cors依赖
npm install express cors

创建一个server.js文件，并在其中引入express和cors，并配置一些基本的服务器设置。

// 引入express和cors
const express = require('express');
const cors = require('cors');

// 创建express实例
const app = express();

// 允许所有域名跨域访问
app.use(cors());

// 设置监听端口
const PORT = 8000;

// 启动服务器
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

在server.js文件中创建一个路由来响应前端的请求，并读取json文件并返回数据。

// 引入fs模块用于读取文件
const fs = require('fs');

// 创建路由处理请求
app.get('/api/data', (req, res) => {
  // 读取json文件
  fs.readFile('message.json', 'utf8', (err, data) => {
    if (err) {
      console.log(err);
      res.status(500).json({ error: 'Internal Server Error' }});
    } else {
      // 将json字符串转换为json对象
      const jsonData = JSON.parse(data);
      // 返回json数据给前端
      res.json(jsonData);
    }
  });
});

修改前端代码，将请求路径修改为服务器的接口地址。

$(function () {
  $.ajax({
    url: 'http://localhost:8000/api/data',
    contentType: 'application/json',
    type: 'get',
    dataType: 'json',
    success: function (res) {
      console.log("成功");
      if (res.code == '000') {
        console.log(res);
        $('body').html(JSON.stringify(res));
      } else {
        alert(res.message);
      }
    },
    error: function (xhr, status, error) {
      console.log(error);
    }
  });
});

在命令行中运行server.js文件。

node server.js

现在，你可以在浏览器中访问http://localhost:8080，前端就可以通过8080端口访问到8000端口上的数据了。