Home > Web Front-end > JS Tutorial > How to request local json data in vue configuration

How to request local json data in vue configuration

php中世界最好的语言
Release: 2018-04-12 10:03:41
Original
2636 people have browsed it

This time I will show you how to request local json data in vue configuration. What are the precautions for vue configuration to request local json data? The following is a practical case, let's take a look.

Find the webpack.dev.conf.js file in the build folder and add

after const portfinder =

require

('portfinder') Then find devServer and insert the following code:

 //然后找到devSeerver,在里面添加
  before (app) {
   app.get('/api/seller',(reg,res) => {
    res.json({
     errno: 0,
     data: seller
    }) // 接口返回json数据,上面配置的数据seller就复制给data请求后调用
   }),
   app.get('/api/goods',(reg,res) => {
    res.json({
     errno: 0,
     data: goods
    }) // 接口返回json数据,上面配置的数据goods就复制给data请求后调用
   }),
   app.get('/api/ratings',(reg,res) => {
    res.json({
     errno: 0,
     data: ratings
    }) // 接口返回json数据,上面配置的数据ratings就复制给data请求后调用
   })
  }
Copy after login

Request access to

<script>
import header from './components/header/header.vue'
const ERR_OK = 0
export default {
 data () {
  return {
   seller: {}
  }
 },
 created () {
  this.$http.get('/api/seller').then((response) => {
   response = response.body; // 获取到数据
   if (response.errno === ERR_OK) {
    this.seller = response.data;
    console.log(this.seller);
   }
  })
 },
 components: {
  'v-header': header
 }
}
</script>
Copy after login

Finally restartStart the project to access npm run dev

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

What are the methods of Dataframe query in pandas

How to implement Baidu speech recognition api in python Detailed explanation

The above is the detailed content of How to request local json data in vue configuration. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template