ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue 项目 前端 模拟后端接口数据（vue2,vue3） [打印本页]
作者: 何小豆儿在此    时间: 2022-6-25 02:33
标题: vue 项目 前端 模拟后端接口数据（vue2,vue3）
项目中或者平常自己创建demo的过程中，往往需要后端配合，但是有时候没有后端，又需要数据，此时就展示了我们前端的强大之处，自己模拟后端接口数据。
如果自定义一个模拟后端数据，
首先创建一个文件夹放置后端数据，（backApp文件夹）

然后再命令终端，执行命令
npm init - y 或者 yarn init -y 初始化文件
之后
继续执行命令 npm i express request -D 下载对应的包
然后再创建新的文件，放置配置的接口数据（app.js文件）

主要的代码
  1. let app = require("express")(); // 这里定义的是个function函数，如果没有后边这个（）在执行node app.js 时会运行报错
  3. app.get("/nav", (req, res) => {
  4.         let  menus = [
  5.                 {
  6.               name: "河南省",
  7.               path: "/henan",
  8.               children: [
  9.                 {
  10.                   name: "郑州市",
  11.                   path: "/zhengzhou",
  12.                 },
  13.                 {
  14.                   name: "周口市",
  15.                   path: "/zhoukou",
  16.                 },
  17.                 {
  18.                   name: "漯河市",
  19.                   path: "/luohe",
  20.                 },
  21.               ],
  22.          },// 其他数据往后边加就行了
  23. ]
  24.         res.send(‘menus模拟名称，后边导出去’);
  25. }）
  27. app.listen(3000, () => {
  28.   console.log("3000......");
  29. });
复制代码
配置 app.js 文件之后，
执行命令 node app.js
随后
在浏览器执行 http://localhost:3000/nav
会看到页面出现我们的get结果
‘menus模拟名称，后边导出去’
就代表接口请求时通的。
然后进行我们的就去模拟，造点模拟数据，记得 res.send(模拟的名称);

模拟完后要在去
执行命令 node app.js
此时页面出现后台接口数据。
数据接口改动都是要重新执行 node app.js的
但是我们接口在项目中启用是就会发现报错，跨域了（不同源：协议，域名，端口号，有一个不一样就会报错）

前端怎么去处理呢。（当然后端处理就与句话就解决了，先看前端的代理，下边会有后端的处理）
前端 ：
我们在 vue.config.js列去配置代理
  1. const { defineConfig } = require("@vue/cli-service");
  2. module.exports = defineConfig({
  3.   transpileDependencies: true,
  4.   devServer: {
  5.     open: true,
  6.     proxy: {
  7.       //灵活代理；请求前缀为/api时，走下面的代理
  8.       "/nav": {
  9.         target: "http://localhost:3000/nav", //代理服务器把请求转发给url(真正的后台服务器)
  10.         changeOrigin: true, //用于控制请求头中的host值, 允许跨域
  11.         //真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径
  12.         pathRewrite: {
  13.           "/nav": "",
  14.         },
  15.       },
  16.     },
  17.     // 这个我不喜欢，虽然也能成功
  18.     // proxy: {
  19.     //   //灵活代理；请求前缀为/api时，走下面的代理
  20.     //   "/nav": {
  21.     //     target: "http://localhost:3000", //代理服务器把请求转发给url(真正的后台服务器)
  22.     //     changeOrigin: true, //用于控制请求头中的host值, 允许跨域
  23.     //     //真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径
  24.     //     pathRewrite: {
  25.     //       "/nav": "",
  26.     //     },
  27.     //   },
  28.     // },
  29.   },
  30. });
复制代码
配置完成后要重启项目。
页面接口请求 this.$http.get(“/nav”).then((res) => {}
  1.   created() {
  2.     this.$http.get("/nav").then((res) => {
  3.    //  this.$http("/nav/nav").then((res) => { // 对应不喜欢的那个
  4.       console.log(res, "res");
  5.       this.menus = [...res.data];
  6.     });
  7.   },
复制代码

请求成功。数据渲染
搞定。
后端的处理
  1. app.get("/nav", (req, res) => {
  2.   res.header("Access-Control-Allow-Origin", "*"); // 就这一句话就OK了
  3.   let menus = [];
  4.   res.send(menus);
  5. });
复制代码

这样就OK搞定了。以后遇见跨域就让后端给你解决，当然前端你要知道咋搞的。万一碰见不给你搞的呢。
如果你有获取地址的接口
也要配置下代理

代理配置

页面代码里执行
// this.$http.get(“/table”).then((res) => {
// console.log(res.data.rows, “res”);
// this.menus = res.data.rows;
// });
OK了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4