脚本宝典收集整理的这篇文章主要介绍了

手把手教你vue配置请求本地json数据

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:<br /><span class="img-wrap"><img data-src="/img/remote/1460000017280226" src="/img/remote/1460000017280226" alt="" title="" style="cursor: pointer; display: inline;"></span><br />在build文件夹下找到webpack.dev.conf.js文件,在<a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> portfinder = require('portfinder')后添加</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code><span class="hljs-keyword">const</span> express = <span class="hljs-keyword">require</span>(<span class="hljs-string">'express'</span>) <span class="hljs-keyword">const</span> app = express() <span class="hljs-keyword">const</span> appData = <span class="hljs-keyword">require</span>(<span class="hljs-string">'../data.json'</span>) <span class="hljs-comment">// 加载本地json文件</span> <span class="hljs-keyword">const</span> seller = appData.seller <span class="hljs-comment">// 获取对应本地数据</span> <span class="hljs-keyword">const</span> goods = appData.goods <span class="hljs-keyword">const</span> ratings = appData.ratings <span class="hljs-keyword">const</span> apiRoutes = express.Router() app.<span class="hljs-keyword">use</span>(<span class="hljs-string">'/api'</span>,apiRoutes)</code></pre> <p>然后找到devServer,插入以下代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//然后找到devSeerver,在里面添加 before (app) { app.get('/api/seller',(reg,res) => {<br /> res.json({<br /> errno: 0,<br /> data: seller<br /> }) // 接口返回json数据,上面配置的数据seller就复制给data请求后调用<br /> }),<br /> app.get('/api/goods',(reg,res) => {<br /> res.json({<br /> errno: 0,<br /> data: goods<br /> }) // 接口返回json数据,上面配置的数据goods就复制给data请求后调用<br /> }),<br /> app.get('/api/ratings',(reg,res) => {<br /> res.json({<br /> errno: 0,<br /> data: ratings<br /> }) // 接口返回json数据,上面配置的数据ratings就复制给data请求后调用<br /> })//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860<br /> }//帮助突破技术瓶颈,提升思维能力" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">//然后找到devSeerver,在里面添加</span> before (app) { app.get(<span class="hljs-string">'/api/seller'</span>,<span class="hljs-function">(<span class="hljs-params">reg,res</span>) =&gt;</span> { res.json({ errno: <span class="hljs-number">0</span>, data: seller }) <span class="hljs-comment">// 接口返回json数据,上面配置的数据seller就复制给data请求后调用</span> }), app.get(<span class="hljs-string">'/api/goods'</span>,<span class="hljs-function">(<span class="hljs-params">reg,res</span>) =&gt;</span> { res.json({ errno: <span class="hljs-number">0</span>, data: goods }) <span class="hljs-comment">// 接口返回json数据,上面配置的数据goods就复制给data请求后调用</span> }), app.get(<span class="hljs-string">'/api/ratings'</span>,<span class="hljs-function">(<span class="hljs-params">reg,res</span>) =&gt;</span> { res.json({ errno: <span class="hljs-number">0</span>, data: ratings }) <span class="hljs-comment">// 接口返回json数据,上面配置的数据ratings就复制给data请求后调用</span> })<span class="hljs-comment">//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860</span> }<span class="hljs-comment">//帮助突破技术瓶颈,提升思维能力</span></code></pre> <p>请求访问</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> import header from './components/header/header.vue'</p> <p>const ERR_OK = 0</p> <p>export default { data () { return { seller: {} } }, created () { this.$http.get('/api/seller').then((response) => { response = response.body; // 获取到数据 if (response.errno === ERR_OK) { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.seller = response.data; console.log(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.seller); }//欢迎加入前端全栈开发交流圈一起学习交流:864305860 })//面向1-3年前端人员 },//帮助突破技术瓶颈,提升思维能力 components: { 'v-header': header } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> header <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/header/header.vue'</span> <span class="hljs-keyword">const</span> ERR_OK = <span class="hljs-number">0</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">seller</span>: {} } }, created () { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$http.get(<span class="hljs-string">'/api/seller'</span>).then(<span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> { response = response.body; <span class="hljs-comment">// 获取到数据</span> <span class="hljs-keyword">if</span> (response.errno === ERR_OK) { <span class="hljs-keyword">this</span>.seller = response.data; <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.seller); }<span class="hljs-comment">//欢迎加入前端全栈开发交流圈一起学习交流:864305860</span> })<span class="hljs-comment">//面向1-3年前端人员</span> },<span class="hljs-comment">//帮助突破技术瓶颈,提升思维能力</span> components: { <span class="hljs-string">'v-header'</span>: header } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>最后重新启动项目即可访问npm run dev<br /><strong>结语</strong></p> <p>感谢您的观看,如有不足之处,欢迎批评指正。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

手把手教你vue配置请求本地json数据

全部内容,希望文章能够帮你解决

手把手教你vue配置请求本地json数据

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过