vue.js学习笔记:如何加载本地json文件

在项目开发的过程中，因为无法和后台的数据做交互，所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js 项目中引入本地的json文件呢，下面就将步骤贴出来。(此时项目是由webpack打包而成)。

整个项目是由webpack打包而成。具体项目结构如下：

1：打包好的文件在此，http://pan.baidu.com/s/1dFCAzux

2：我们找到bulid>dev-server.js,然后打开

3：在里面加入这段代码，大概在17行）。

var app = express() //从这后面开始加

var appData = require('../data.json');

var seller = appData.seller;

var goods = appData.goods;

var ratings = appData.ratings;

var apiRoutes = express.Router();

apiRoutes.get('/seller',function (req,res) {

 res.json({

  errno:0,

  data:seller

 });

});

apiRoutes.get('/goods',function (req,res) {

 res.json({

  errno:0,

  data:goods

 });

});

apiRoutes.get('/ratings',function (req,res) {

 res.json({

  errno:0,

  datta:ratings

 });

});

app.use('/api',apiRoutes);

4：使用方法：

你可以在浏览器地址栏填写http://localhost:8080/api/seller  或者http://localhost:8080/api/goods  或者http://localhost:8080/api/ratings   查看数据

因为加载的json数据没有格式，看起来很乱，所以我们可以使用谷歌的扩展程序JSONView。

贴上读取数据的页面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现页面加载动画效果

    我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 <template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class="{'page-before': option.index < cu

  • vue2笔记 — vue-router路由懒加载的实现

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

  • Vue自定义图片懒加载指令v-lazyload详解

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

  • vue实现ajax滚动下拉加载，同时具有loading效果(推荐)

    vue实现ajax滚动下拉加载，同时具有loading效果(推荐)

    代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-

  • vue2组件实现懒加载浅析

    vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

  • 详解VueJs异步动态加载块

    首先定义组件为异步加载 define(['jquery','vue'],function($,Vue){ Vue.component('comp1',function(resolve){ require(['component/comp1'],resolve); }); Vue.component('comp2',function(resolve){ require(['component/comp2'],resolve); }); var b = new Vue({ el:"#app"

  • Vue-Router实现页面正在加载特效方法示例

    前言 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染到页面上. 例如

随机推荐