<p><code></p> <h2 id="articleHeader0">github 地址: <a href="https://github.com/liangfengbo/vue-cli-project" rel="nofollow noreferrer" target="_blank">https://github.com/liangfengbo/vue-cli-project 点击进入</a><br /> </h2> <h2 id="articleHeader1">vue-cli-project</h2> <ul> <li>已构建配置好的<a href="http://www.js-code.com/tag/vuejs" title="vuejs" target="_blank">vuejs</a>全家桶项目,统一管理后端接口 | 获取数据 | 请求数据,已包含vue-router,vuex,api,ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>. webpack, 储存用vue-ls, 异步async/await, css less. 下载即使用项目开发。</li> <li>喜欢或对你有帮助的话请点star&#x2728;&#x2728;,Thanks.</li> </ul> <blockquote><p>A <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js project</p></blockquote> <h3 id="articleHeader2">使用</h3> <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="# 安装服务 npm install # 启动服务 npm run dev " title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"><span class="hljs-comment"># 安装服务</span> npm install <span class="hljs-comment"># 启动服务</span> npm run dev </code></pre> <h3 id="articleHeader3">说明</h3> <h4>src架构</h4> <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.vue ├── api │ ├── doctor.js │ └── fetch.js ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── libs │ └── util.js ├── main.js ├── router │ └── index.js ├── store │ ├── index.js │ ├── modules │ └── mutation-types.js └── views └── doctor" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>├── <span class="hljs-selector-tag">App</span><span class="hljs-selector-class">.vue</span> ├── <span class="hljs-selector-tag">api</span> │ ├── <span class="hljs-selector-tag">doctor</span><span class="hljs-selector-class">.js</span> │ └── <span class="hljs-selector-tag">fetch</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag">assets</span> │ └── <span class="hljs-selector-tag">logo</span><span class="hljs-selector-class">.png</span> ├── <span class="hljs-selector-tag">components</span> │ └── <span class="hljs-selector-tag">HelloWorld</span><span class="hljs-selector-class">.vue</span> ├── <span class="hljs-selector-tag">libs</span> │ └── <span class="hljs-selector-tag">util</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag">router</span> │ └── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag">store</span> │ ├── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> │ ├── <span class="hljs-selector-tag">modules</span> │ └── <span class="hljs-selector-tag">mutation-types</span><span class="hljs-selector-class">.js</span> └── <span class="hljs-selector-tag">views</span> └── <span class="hljs-selector-tag">doctor</span></code></pre> <p>处理数据页面这2大块,把数据和页面分离,在vuex里面做请求数据,页面只需要做调用数据。</p> <p>请求接口这块再细分,接口和请求接口分开,我使用了最新的async/await函数做数据请求</p> <h4>api文件夹 主要放后端提供的接口,如</h4> <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="import fetch from './fetch'; export default { // 获取医生列表 list(params) { return fetch.get('/doctor/list', params) }, // 获取医生详情信息 detail(id) { return fetch.post('/doctor/detail/' + id); }, }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> fetch <span class="hljs-keyword">from</span> <span class="hljs-string">'./fetch'</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> { <span class="hljs-comment">// 获取医生列表</span> list(params) { <span class="hljs-keyword">return</span> fetch.get(<span class="hljs-string">'/doctor/list'</span>, params) }, <span class="hljs-comment">// 获取医生详情信息</span> detail(id) { <span class="hljs-keyword">return</span> fetch.post(<span class="hljs-string">'/doctor/detail/'</span> + id); }, }</code></pre> <h4>fetch.js 文件是封装ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>请求,以及请求处理,和http状态码的等处理</h4> <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="import Util from '../libs/util' import qs from 'qs' import Vue from 'vue' Util.ajax.defaults.headers.common = { 'X-Requested-With': 'XMLHttpRequest' }; Util.ajax.interceptors.request.use(config => {<br /> /**<br /> * 在这里做loading ...<br /> * @type {string}<br /> */</p> <p> // 获取token<br /> config.headers.common['Authorization'] = 'Bearer ' + Vue.ls.get(&quot;web-token&quot;);<br /> return config</p> <p>}, error => {<br /> return Promise.reject(error)</p> <p>});</p> <p>Util.ajax.interceptors.response.use(response => {</p> <p> /**<br /> * 在这里做loading 关闭<br /> */</p> <p> // 如果后端有新的token则重新缓存<br /> let newToken = response.headers['new-token'];</p> <p> if (newToken) {<br /> Vue.ls.set(&quot;web-token&quot;, newToken);<br /> }</p> <p> return response;</p> <p>}, error => {<br /> let response = error.response;<br /> if (response.status == 401) {<br /> // 处理401错误</p> <p> } else if (response.status == 403) {<br /> // 处理403错误</p> <p> } else if (response.status == 412) {<br /> // 处理412错误</p> <p> } else if (response.status == 413) {<br /> // 处理413权限不足</p> <p> }</p> <p> return Promise.reject(response)</p> <p>});</p> <p>export default {<br /> post(url, data) {</p> <p> return Util.ajax({<br /> method: 'post',<br /> url: url,<br /> data: qs.stringify(data),<br /> timeout: 30000,<br /> headers: {<br /> 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'<br /> }<br /> })<br /> },</p> <p> get(url, params) {<br /> return Util.ajax({<br /> method: 'get',<br /> url: url,<br /> params,<br /> })<br /> },</p> <p> delete(url, params) {<br /> return Util.ajax({<br /> method: 'delete',<br /> url: url,<br /> params<br /> })<br /> },</p> <p> put(url, data) {</p> <p> return Util.ajax({<br /> method: 'put',<br /> url: url,<br /> data: qs.stringify(data),<br /> timeout: 30000,<br /> headers: {<br /> 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'<br /> }<br /> })<br /> }<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> Util <span class="hljs-keyword">from</span> <span class="hljs-string">'../libs/util'</span> <span class="hljs-keyword">import</span> qs <span class="hljs-keyword">from</span> <span class="hljs-string">'qs'</span> <span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> Util.ajax.defaults.headers.common = { <span class="hljs-string">'X-Requested-With'</span>: <span class="hljs-string">'XMLHttpRequest'</span> }; Util.ajax.interceptors.request.use(<span class="hljs-function"><span class="hljs-params">config</span> =&gt;</span> { <span class="hljs-comment">/** * 在这里做loading ... * @type {string} */</span> <span class="hljs-comment">// 获取token</span> config.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Bearer '</span> + Vue.ls.get(<span class="hljs-string">"web-token"</span>); <span class="hljs-keyword">return</span> config }, error =&gt; { <span class="hljs-keyword">return</span> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/promise" title="浏览关于“Promise”的文章" target="_blank" class="tag_link">Promise</a></span>.reject(error) }); Util.ajax.interceptors.response.use(<span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> { <span class="hljs-comment">/** * 在这里做loading 关闭 */</span> <span class="hljs-comment">// 如果后端有新的token则重新缓存</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> newToken = response.headers[<span class="hljs-string">'new-token'</span>]; <span class="hljs-keyword">if</span> (newToken) { Vue.ls.set(<span class="hljs-string">"web-token"</span>, newToken); } <span class="hljs-keyword">return</span> response; }, error =&gt; { <span class="hljs-keyword">let</span> response = error.response; <span class="hljs-keyword">if</span> (response.status == <span class="hljs-number">401</span>) { <span class="hljs-comment">// 处理401错误</span> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (response.status == <span class="hljs-number">403</span>) { <span class="hljs-comment">// 处理403错误</span> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (response.status == <span class="hljs-number">412</span>) { <span class="hljs-comment">// 处理412错误</span> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (response.status == <span class="hljs-number">413</span>) { <span class="hljs-comment">// 处理413权限不足</span> } <span class="hljs-keyword">return</span> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/promis" title="浏览关于“Promis”的文章" target="_blank" class="tag_link">Promis</a>e</span>.reject(response) }); <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { post(url, data) { <span class="hljs-keyword">return</span> Util.ajax({ <span class="hljs-attr">method</span>: <span class="hljs-string">'post'</span>, <span class="hljs-attr">url</span>: url, <span class="hljs-attr">data</span>: qs.stringify(data), <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>, <span class="hljs-attr">headers</span>: { <span class="hljs-string">'Content-Type'</span>: <span class="hljs-string">'application/x-www-form-urlencoded; charset=UTF-8'</span> } }) }, get(url, params) { <span class="hljs-keyword">return</span> Util.ajax({ <span class="hljs-attr">method</span>: <span class="hljs-string">'get'</span>, <span class="hljs-attr">url</span>: url, params, }) }, <span class="hljs-keyword">delete</span>(url, params) { <span class="hljs-keyword">return</span> Util.ajax({ <span class="hljs-attr">method</span>: <span class="hljs-string">'delete'</span>, <span class="hljs-attr">url</span>: url, params }) }, put(url, data) { <span class="hljs-keyword">return</span> Util.ajax({ <span class="hljs-attr">method</span>: <span class="hljs-string">'put'</span>, <span class="hljs-attr">url</span>: url, <span class="hljs-attr">data</span>: qs.stringify(data), <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>, <span class="hljs-attr">headers</span>: { <span class="hljs-string">'Content-Type'</span>: <span class="hljs-string">'application/x-www-form-urlencoded; charset=UTF-8'</span> } }) } } </code></pre> <h4>在vuex里面做请求,比如请求医生列表,用async/await,拿到数据存进store数据里面</h4> <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="├── index.js ├── modules │ └── doctor.js └── mutation-types.js import doctor from '../../api/doctor' import * as types from '../mutation-types' <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> state = {<br /> // 医生列表<br /> doctorList: [],<br /> // 医生详情信息<br /> doctorDetail: null,<br /> };</p> <p><a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> mutations = {<br /> // 设置医生列表<br /> [types.SET_DOCTOR_LIST](state, data) {<br /> state.doctorList = data<br /> },<br /> // 设置医生详情信息<br /> [types.SET_DOCTOR_DETAIL](state, data) {<br /> state.doctorDetail = data<br /> },<br /> };</p> <p><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> actions = {</p> <p> /**<br /> * 获取医生顾问列表<br /> * @param state<br /> * @param commit<br /> * @param params<br /> * @returns {<a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e<void>}<br /> */<br /> async getDoctorList({state, commit}, params) {<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> ret = await doctor.list(params);<br /> commit(types.SET_DOCTOR_LIST, ret.data.data);<br /> },</p> <p> /**<br /> * 获取医生详情信息<br /> * @param state<br /> * @param commit<br /> * @param id 医生ID<br /> * @returns {<a href="http://www.js-code.com/tag/promise" title="Promise" target="_blank">Promise</a><void>}<br /> */<br /> async getDoctorDetail({state, commit}, id) {<br /> let ret = await doctor.detail(id);<br /> commit(types.SET_DOCTOR_DETAIL, ret.data.data);<br /> }<br /> };</p> <p>export default {<br /> state,<br /> actions,<br /> mutations<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">├── index.js ├── modules │ └── doctor.js └── mutation-types.js <span class="hljs-keyword">import</span> doctor <span class="hljs-keyword">from</span> <span class="hljs-string">'../../api/doctor'</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">'../mutation-types'</span> <span class="hljs-keyword">const</span> state = { <span class="hljs-comment">// 医生列表</span> doctorList: [], <span class="hljs-comment">// 医生详情信息</span> doctorDetail: <span class="hljs-literal">null</span>, }; <span class="hljs-keyword">const</span> mutations = { <span class="hljs-comment">// 设置医生列表</span> [types.SET_DOCTOR_LIST](state, data) { state.doctorList = data }, <span class="hljs-comment">// 设置医生详情信息</span> [types.SET_DOCTOR_DETAIL](state, data) { state.doctorDetail = data }, }; <span class="hljs-keyword">const</span> actions = { <span class="hljs-comment">/** * 获取医生顾问列表 * @param state * @param commit * @param params * @returns {Promise&lt;void&gt;} */</span> <span class="hljs-keyword">async</span> getDoctorList({state, commit}, params) { <span class="hljs-keyword">let</span> ret = <span class="hljs-keyword">await</span> doctor.list(params); commit(types.SET_DOCTOR_LIST, ret.data.data); }, <span class="hljs-comment">/** * 获取医生详情信息 * @param state * @param commit * @param id 医生ID * @returns {Promise&lt;void&gt;} */</span> <span class="hljs-keyword">async</span> getDoctorDetail({state, commit}, id) { <span class="hljs-keyword">let</span> ret = <span class="hljs-keyword">await</span> doctor.detail(id); commit(types.SET_DOCTOR_DETAIL, ret.data.data); } }; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { state, actions, mutations } </code></pre> <h4>在页面里需要执行引入:</h4> <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="import {mapActions, mapState} from 'vuex'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> {mapActions, map<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span></code></pre> <h4>代码可以具体看文件的代码</h4> <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="└── doctor ├── detail.vue └── list.vue <script> import {mapActions, mapState} from 'vuex'</p> <p> export default { components: {}, data() { return {} }, computed: { ...mapState({ doctorList: state => state.doctor.doctorList, }) }, async created() { // 医生类型 <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> params = {type: 'EXP'}; // 获取医生列表 await <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.getDoctorList(params); }, methods: { ...mapActions([ // 获取医生列表 'getDoctorList' ]),</p> <p> // 路由跳转方法 routeLink(link) { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$router.push({path: link}); }, } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">└── doctor ├── detail.vue └── list.vue &lt;script&gt; <span class="hljs-keyword">import</span> {mapActions, mapState} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">components</span>: {}, data() { <span class="hljs-keyword">return</span> {} }, <span class="hljs-attr">computed</span>: { ...mapState({ <span class="hljs-attr">doctorList</span>: <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state.doctor.doctorList, }) }, <span class="hljs-keyword">async</span> created() { <span class="hljs-comment">// 医生类型</span> <span class="hljs-keyword">let</span> params = {<span class="hljs-attr">type</span>: <span class="hljs-string">'EXP'</span>}; <span class="hljs-comment">// 获取医生列表</span> <span class="hljs-keyword">await</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.getDoctorList(params); }, <span class="hljs-attr">methods</span>: { ...mapActions([ <span class="hljs-comment">// 获取医生列表</span> <span class="hljs-string">'getDoctorList'</span> ]), <span class="hljs-comment">// 路由跳转方法</span> routeLink(link) { <span class="hljs-keyword">this</span>.$router.push({<span class="hljs-attr">path</span>: link}); }, } } &lt;<span class="hljs-regexp">/script&gt;</span></code></pre> <h4>核心就是把数据和页面分离,细分把接口,请求数据用vuex做处理,在页面获取数据都做统一管理项目。可以具体看项目里面的代码。</h4> <h2 id="articleHeader4">github 地址: <a href="https://github.com/liangfengbo/vue-cli-project" rel="nofollow noreferrer" target="_blank">https://github.com/liangfengbo/vue-cli-project 点击进入</a><br /> </h2> <p></code></p>

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