vue 项目前端模拟后端接口数据（vue2,vue3）

项目中或者平常自己创建demo的过程中，往往需要后端配合，但是有时候没有后端，又需要数据，此时就展示了我们前端的强大之处，自己模拟后端接口数据。
如果自定义一个模拟后端数据，
首先创建一个文件夹放置后端数据，（backApp文件夹）

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

主要的代码

let app = require("express")(); // 这里定义的是个function函数，如果没有后边这个（）在执行node app.js 时会运行报错app.get("/nav", (req, res) => {let  menus = [ {name: "河南省",path: "/henan",children: [{name: "郑州市",path: "/zhengzhou",},{name: "周口市",path: "/zhoukou",},{name: "漯河市",path: "/luohe",},],},// 其他数据往后边加就行了
]res.send(‘menus模拟名称，后边导出去’);
}）app.listen(3000, () => {console.log("3000......");
});

配置 app.js 文件之后，
执行命令 node app.js
随后
在浏览器执行 http://localhost:3000/nav
会看到页面出现我们的get结果
‘menus模拟名称，后边导出去’
就代表接口请求时通的。
然后进行我们的就去模拟，造点模拟数据，记得 res.send(模拟的名称);

模拟完后要在去
执行命令 node app.js
此时页面出现后台接口数据。
数据接口改动都是要重新执行 node app.js的

但是我们接口在项目中启用是就会发现报错，跨域了（不同源：协议，域名，端口号，有一个不一样就会报错）

前端怎么去处理呢。（当然后端处理就与句话就解决了，先看前端的代理，下边会有后端的处理）
前端：
我们在 vue.config.js列去配置代理

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({transpileDependencies: true,devServer: {open: true,proxy: {//灵活代理；请求前缀为/api时，走下面的代理"/nav": {target: "http://localhost:3000/nav", //代理服务器把请求转发给url(真正的后台服务器)changeOrigin: true, //用于控制请求头中的host值, 允许跨域//真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径pathRewrite: {"/nav": "",},},},// 这个我不喜欢，虽然也能成功// proxy: {//   //灵活代理；请求前缀为/api时，走下面的代理//   "/nav": {//     target: "http://localhost:3000", //代理服务器把请求转发给url(真正的后台服务器)//     changeOrigin: true, //用于控制请求头中的host值, 允许跨域//     //真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径//     pathRewrite: {//       "/nav": "",//     },//   },// },},
});

配置完成后要重启项目。

页面接口请求 this.$http.get(“/nav”).then((res) => {}

  created() {this.$http.get("/nav").then((res) => {//  this.$http("/nav/nav").then((res) => { // 对应不喜欢的那个console.log(res, "res");this.menus = [...res.data];});},

请求成功。数据渲染

搞定。

后端的处理

app.get("/nav", (req, res) => {res.header("Access-Control-Allow-Origin", "*"); // 就这一句话就OK了let menus = [];res.send(menus);
});

这样就OK搞定了。以后遇见跨域就让后端给你解决，当然前端你要知道咋搞的。万一碰见不给你搞的呢。

如果你有获取地址的接口
也要配置下代理

代理配置

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

vue 项目前端模拟后端接口数据（vue2,vue3）相关推荐

vue项目 - Mockjs 模拟后台接口数据
Mock 可以进行生成随机数据,模拟后端接口数据,从而实现开发时,前后端分离,提高效率. 1.安装 npm i mockjs -S or yarn add mockjs 2.引入在src文件目录下, ...
Mock（模拟后端接口数据）配合Vuex的使用
1.下载Mock cnpm install Mockjs -S 2.新建一个data.js存放新生成的mock文件编辑mock 并导出 const Mock = require('mockjs' ...
App前端及后端接口，模拟数据及返回值
App前端及后端接口,模拟数据 :接口文档目录 1. 全局状态码 6 2. 前台 7 2.1. 首页 7 2.1.1. 商品分类列表接口 7 2.1.2. 展示轮播图接口 9 2.1.3. 展示广告 ...
在vue项目前端如何实现展示动态小程序二维码
在vue项目前端如何实现展示动态小程序二维码 (就是根据所对应的商家数据展示一个动态的二维码) 首先,主要的工作还是后端和小程序前端的工作,我们vue项目的前端主要是根据他们给出的url一级所对应的参 ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果二.cssrem 插件 (px -> re ...
后端处理数据保存请求流程multer+ajax 数据库添加数据前端与后端的数据联通在business_list 页面进行数据处理 @stage3---week3--day4
后端处理基础流程 $ npx be_app -e 快速构建项目骨架 $ yarn 安装依赖包修改 package.json {"name": "be-app" ...
【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建一.项目基本结构二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...
前端调用后端接口的错误(400)
前端调用后端接口时,浏览器debug出现Failed to load resource: the server responded with a status of 400 (Bad Request) ...

vue 项目前端模拟后端接口数据（vue2,vue3）

vue 项目前端模拟后端接口数据（vue2,vue3）相关推荐

最新文章

热门文章

vue 项目 前端 模拟后端接口数据（vue2,vue3）

vue 项目 前端 模拟后端接口数据（vue2,vue3）相关推荐

最新文章

热门文章

vue 项目前端模拟后端接口数据（vue2,vue3）

vue 项目前端模拟后端接口数据（vue2,vue3）相关推荐