<p><code></p> <blockquote><p>接上一节,咱们现在已经有了二个接口,分别是,</p></blockquote> <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="app.get('/node_a'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">app.<span class="hljs-keyword">get</span>(<span class="hljs-string">'/<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_a'</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="app.get('/node_a'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">app.<span class="hljs-keyword">get</span>(<span class="hljs-string">'/node_a'</span></code></pre> <p>以后还会有更多的接口,那么有必要在一个单独的地方来统一管理所有的接口。</p> <blockquote><p>在src目录下新建一个文件:api_dev.js,代码如下:</p></blockquote> <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 port = 5678; const BASEURL = 'http://localhost:' + port; const API_LIST = { // 查询条件 node_a : BASEURL + '/node_a', // 查询结果 node_b : BASEURL + '/node_b' } module.exports = API_LIST" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs java"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> port = <span class="hljs-number">5678</span>; <span class="hljs-keyword">const</span> BASEURL = <span class="hljs-string">'http://localhost:'</span> + port; <span class="hljs-keyword">const</span> <a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a>_LIST = { <span class="hljs-comment">// 查询条件</span> node_a : BASEURL + <span class="hljs-string">'/node_a'</span>, <span class="hljs-comment">// 查询结果</span> node_b : BASEURL + <span class="hljs-string">'/node_b'</span> } <span class="hljs-keyword">module</span>.<span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s</span> = API_LIST</code></pre> <blockquote><p>这样就把所有的接口都放在<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>_LIST对象中,并向外导出,然后在需要使用的地方,直接import导入之后,就对象.属性的方式就可以使用了。就像下面这样,</p></blockquote> <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><br /> import axios from 'axios'<br /> import API_LIST from '@/APIList.config'</p> <p>...<br /> methods:{<br /> sendBtn(){<br /> let _val = this.$refs.inputRef.value;<br /> // console.log( _val )</p> <p> axios.get( API_LIST.node_a ,{<br /> params:{ v_data : _val }<br /> });<br /> }," 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> ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span> <span class="hljs-keyword">import</span> API_LIST <span class="hljs-keyword">from</span> <span class="hljs-string">'@/APIList.config'</span> ... methods:{ sendBtn(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> _val = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$refs.inputRef.value; <span class="hljs-comment">// console.log( _val )</span> axios.get( API_LIST.node_a ,{ <span class="hljs-attr">params</span>:{ <span class="hljs-attr">v_data</span> : _val } }); },</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVboiex?w=880&amp;h=431" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接: http://www.js-code.com/node-js/node-js_29747.html