Vue移动端框架Mint UI教程-调用模拟json数据(五)

简介: Vue移动端框架Mint UI教程-调用模拟json数据(五)

1:安装

npm install vue-resource

2:打开main.js

注册

import VueResource from 'vue-resource'
Vue.use(VueResource)

3:在项目里面创建一个json文件

4:json文件的内容

{
    "seller": {
        "name": "我是王小婷",
        "description": "前端开发工程师",
        "supports": [
            {
                "type": 0,
                "description": "日更博客打卡"
            }, {
                "type": 1,
                "description": "90后前端妹子"
            }
        ]
    }
}

5:打开build文件底下的webpack.dev.conf.js

写入代码

const express = require('express') 
const app = express() 
var appData = require('../data.json') //加载本地数据文件 
var seller = appData.seller //获取对应的本地数据 
var goods = appData.goods 
var ratings = appData.ratings 
var apiRoutes = express.Router() 
app.use('/api', apiRoutes)

找到 devServer: {},写入以下代码

before(app) { app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
      }),

6:OK,这个时候,可以在浏览器输入我们的服务接口

http://localhost:8080/api/seller

是可以看到json文件的数据格式的

7:现在要在控制台查看,在当前要查看的页面写出代码

 created () { this.$http.get('http://localhost:8080/api/seller').then((response) => {
         console.log(response)
       })
     }

8:npm run dev 运行项目

9:在浏览器里面输入http://localhost:8080

打开项目

注意8080端口要和my.vue里面打印的端口保持一致

调出控制台,可以看见,接口数据已经显示在控制台了

10:接口数据怎么显示在界面

相关文章
|
19天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
38 1
|
19天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
40 1
|
25天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
27 3
|
27天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
46 2
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
2月前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
88 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
1月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
1110 2
|
1月前
|
消息中间件 存储 JSON
rabbitmq基础教程(ui,java,springamqp)
本文提供了RabbitMQ的基础教程,包括如何使用UI创建队列和交换机、Java代码操作RabbitMQ、Spring AMQP进行消息发送和接收,以及如何使用不同的交换机类型(fanout、direct、topic)进行消息路由。
25 0
rabbitmq基础教程(ui,java,springamqp)
|
1月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
112 0
|
1月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
34 0