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:接口数据怎么显示在界面

相关文章
|
2月前
|
数据采集 JSON 数据处理
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
抓取和分析JSON数据:使用Python构建数据处理管道
|
1月前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
|
1月前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据:从编码到解码
在现代Web开发中,JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据,包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法,可以显著提升JSON处理的性能,确保系统快速稳定运行。
|
2月前
|
JSON JavaScript Java
在Java中处理JSON数据:Jackson与Gson库比较
本文介绍了JSON数据交换格式及其在Java中的应用,重点探讨了两个强大的JSON处理库——Jackson和Gson。文章详细讲解了Jackson库的核心功能,包括数据绑定、流式API和树模型,并通过示例演示了如何使用Jackson进行JSON解析和生成。最后,作者分享了一些实用的代码片段和使用技巧,帮助读者更好地理解和应用这些工具。
178 0
在Java中处理JSON数据:Jackson与Gson库比较
|
1月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
193 0
|
2月前
|
JSON API 数据格式
商品详情数据JSON格式示例参考(api接口)
JSON数据格式的商品详情数据通常包含商品的多个层级信息,以下是一个综合多个来源信息的JSON数据格式的商品详情数据示例参考:
|
2月前
|
存储 JSON 前端开发
JSON与现代Web开发:数据交互的最佳选择
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。
82 0
|
7月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
80 3
|
7月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统