Maison >interface Web >js tutoriel >Comment demander du json local en utilisant vue
Cette fois, je vais vous montrer comment utiliser vue pour demander du json local, et quelles sont les précautions à prendre pour utiliser vue pour demander du json local. Ce qui suit est un cas pratique, jetons un coup d'œil.
Trouvez le fichier webpack.dev.conf.js dans le dossier build, ajoutez
const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appData.seller // 获取对应本地数据 const goods = appData.goods const ratings = appData.ratings const apiRoutes = express.Router() app.use('/api',apiRoutes)
après const portfinder = require('portfinder') puis recherchez devServer et insérez le code suivant :
//然后找到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请求后调用 }) }
Demander l'accès
<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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. php site chinois !
Lecture recommandée :
Résumé du composant global Vue
angular6.0 permet un chargement paresseux
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!