vue开发请求本地数据

最新推荐文章于 2024-09-05 18:05:07 发布

Fecker

最新推荐文章于 2024-09-05 18:05:07 发布

阅读量2k

点赞数

分类专栏：前端 JavaScript 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Fecker/article/details/83117555

版权

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

1.新建一个与index同级的db.json文件，里面放入假数据

2.在入口main.js中添加

import VueResource from 'vue-resource'

Vue.use(VueResource)

3.分别在webpack.dev.conf.js中的const portfinder = require('portfinder')后面和Devserver后面添加‘---------’内的代码

const portfinder = require('portfinder')
//加载假数据-----------
const express = require('express')
const app = express()//请求server
var appData = require('../db.json')//加载本地数据文件
var getNewsList = appData.getNewsList//获取对应的本地数据
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通过路由请求数据
//--------------------- 
//作者：Fecker
//来源：优快云 Fecker
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    //返回数据-------------
    before(app) {
      app.get('/api/getNewsList', (req, res) => {
        res.json({
          data: getNewsList
        })//接口返回json数据，上面配置的数据getNewsList就赋值给data请求后调用
      })
      },
    /*--------------------- 
    作者：Fecker
    来源：优快云 */

4.在export default里附上如下代码即可

created: function() {
        this.$nextTick(function () {
          this.$http.get('http://localhost:8080/api/getNewsList').then(function(res) {
            console.log(res.data)
            this.newsList = res.data.data;
          })
        })
      },