<h2 id="articleHeader0">初始化项目</h2> <p>使用 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-cli3 初始化项目<sup>1</sup></p> <p>安装 Element UI<br />安装 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-i18n,做相关配置<sup>2,3</sup></p> <blockquote><p>原则上需要对 Element 也做 I18n 的处理,但是我觉得 Element 中已经有很完善的多语言翻译,而 Element 自身尚不支持 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>-i18n 7+ 版本,要特殊处理,所以就算了,这里直接使用了 Element 自带的方法。</p></blockquote> <h2 id="articleHeader1">项目结构</h2> <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=". |-- <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>.config.js<br /> |-- package.json<br /> |-- public<br /> | `-- index.html<br /> |-- src<br /> | |-- App.vue<br /> | |-- assets<br /> | | |-- override-element-ui.less // 覆盖 Element 默认样式<br /> | | `-- image // 图片文件目录<br /> | |-- components // 所有非 `<router-view ></span>` 中显示的页面的 Vue 组件<br /> | | |-- mainMenu.vue // 左侧导航<br /> | | |-- pureTitle.vue // 通用的 Title 组件,项目中有多个页面会用到<br /> | | |-- search.vue // 通用的 Search 头部组件,同样会用到<br /> | | `-- userCenter.vue // 字面意思用户中心,目前只需要显示用户名,handle 用户退出操作。可预见:下拉菜单操作、头像显示等...<br /> | |-- main.js // Vue-cli 生成的项目基本文件<br /> | |-- router.js // Vue-cli 生成,路由<br /> | |-- store // Vuex相关<br /> | | |-- index.js<br /> | | |-- mutationTypes.js<br /> | | `-- module // 这里按照路由划分了 module,不一定对<br /> | | | |-- someModule.js<br /> | | | `-- elseModule.js<br /> | |-- utils<br /> | | |-- i18n // 国际化支持<br /> | | | |-- index.js<br /> | | | `-- lang // 语言字符串文件<br /> | | | |-- en.json<br /> | | | `-- zh.json<br /> | | |-- request // 处理所有 ajax 请求<br /> | | | |-- index.js // 基于 ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>,封装了需要用到的方法,例如 token 的处理<br /> | | | |-- someComponentName.js // 基于组件分割的请求,在 Vuex action 中调用独立方法<br /> | | | `-- elseComponentName.js<br /> | | |-- timeHelper.js // 时间戳转换帮助函数<br /> | | `-- userHelper.js // 保存用户信息帮助函数<br /> | `-- views // `<router-view ></router-view> 下内容显示组件`<br /> | |-- Home.vue<br /> | |-- Login.vue<br /> | |-- MainPage.vue<br /> | |-- Manage.vue<br /> | `-- Verify.vue<br /> |-- .env.development // 环境变量 process.env<br /> |-- .env.production // 生产环境下的环境变量<br /> `-- vue.config.js // 更改 Vue-cli 默认配置" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>. |<span class="hljs-comment">-- <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>.config.js</span> |<span class="hljs-comment">-- package.json</span> |<span class="hljs-comment">-- public</span> | `<span class="hljs-comment">-- index.html</span> |<span class="hljs-comment">-- src</span> | |<span class="hljs-comment">-- App.vue</span> | |<span class="hljs-comment">-- assets </span> | | |<span class="hljs-comment">-- override-element-ui.less // 覆盖 Element 默认样式</span> | | `<span class="hljs-comment">-- image // 图片文件目录</span> | |<span class="hljs-comment">-- components // 所有非 `&lt;router-view /&gt;` 中显示的页面的 Vue 组件</span> | | |<span class="hljs-comment">-- mainMenu.vue // 左侧导航</span> | | |<span class="hljs-comment">-- pureTitle.vue // 通用的 Title 组件,项目中有多个页面会用到</span> | | |<span class="hljs-comment">-- search.vue // 通用的 Search 头部组件,同样会用到</span> | | `<span class="hljs-comment">-- userCenter.vue // 字面意思用户中心,目前只需要显示用户名,handle 用户退出操作。可预见:下拉菜单操作、头像显示等...</span> | |<span class="hljs-comment">-- main.js // Vue-cli 生成的项目基本文件</span> | |<span class="hljs-comment">-- router.js // Vue-cli 生成,路由</span> | |<span class="hljs-comment">-- store // Vuex相关</span> | | |<span class="hljs-comment">-- index.js</span> | | |<span class="hljs-comment">-- mutationTypes.js</span> | | `<span class="hljs-comment">-- module // 这里按照路由划分了 module,不一定对</span> | | | |<span class="hljs-comment">-- someModule.js</span> | | | `<span class="hljs-comment">-- elseModule.js</span> | |<span class="hljs-comment">-- utils</span> | | |<span class="hljs-comment">-- i18n // 国际化支持</span> | | | |<span class="hljs-comment">-- index.js</span> | | | `<span class="hljs-comment">-- lang // 语言字符串文件</span> | | | |<span class="hljs-comment">-- en.json</span> | | | `<span class="hljs-comment">-- zh.json</span> | | |<span class="hljs-comment">-- request // 处理所有 ajax 请求</span> | | | |<span class="hljs-comment">-- index.js // 基于 ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>,封装了需要用到的方法,例如 token 的处理</span> | | | |<span class="hljs-comment">-- someComponentName.js // 基于组件分割的请求,在 Vuex action 中调用独立方法</span> | | | `<span class="hljs-comment">-- elseComponentName.js</span> | | |<span class="hljs-comment">-- timeHelper.js // 时间戳转换帮助函数</span> | | `<span class="hljs-comment">-- userHelper.js // 保存用户信息帮助函数</span> | `<span class="hljs-comment">-- views // `&lt;router-view /&gt; 下内容显示组件`</span> | |<span class="hljs-comment">-- Home.vue</span> | |<span class="hljs-comment">-- Login.vue</span> | |<span class="hljs-comment">-- MainPage.vue</span> | |<span class="hljs-comment">-- Manage.vue</span> | `<span class="hljs-comment">-- Verify.vue</span> |<span class="hljs-comment">-- .env.development // 环境变量 process.env</span> |<span class="hljs-comment">-- .env.production // 生产环境下的环境变量</span> `<span class="hljs-comment">-- vue.config.js // 更改 Vue-cli 默认配置</span></code></pre> <h2 id="articleHeader2">Element</h2> <h3 id="articleHeader3">按需加载</h3> <p>先看一张项目初始状态下,全局引入 Element &amp; 按需引入打包大小的对比:</p> <p><span class="img-wrap"><img data-src="/img/bVbhL4i?w=609&amp;h=170" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="全局引入" title="全局引入" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbhL4n?w=575&amp;h=160" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="按需引入" title="按需引入" style="cursor: pointer;"></span></p> <h4>How</h4> <p>参考:<a href="https://element.eleme.io/#/zh-CN/component/quickstart#an-xu-yin-ru" rel="nofollow noreferrer" target="_blank">按需引入</a></p> <p>需要注意的地方是:</p> <ol> <li>不用新建 <code>.<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>rc</code> 文件,只需要更改 <code>babel.config.js</code> </li> <li>使用 Vue-cli 初始化项目后, <code>presets</code> 中为 <code>['@vue/app']</code>,不需要更改为 element 官网中的 <code>es2015</code> 。原因是 babel 的目前版本已经不推荐按照 JavaScript 版本来区分编译目标。(// todo:添加相关链接)</li> </ol> <p>可用的 <code>babel.config.js</code> 文件如下:</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="module.exports = { presets: [ ['@vue/app'], ], plugins: [ [ 'component', { 'libraryName': 'element-ui', &quot;styleLibraryName&quot;: &quot;theme-chalk&quot; } ] ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-attr">presets</span>: [ [<span class="hljs-string">'@vue/app'</span>], ], <span class="hljs-attr">plugins</span>: [ [ <span class="hljs-string">'component'</span>, { <span class="hljs-string">'libraryName'</span>: <span class="hljs-string">'element-ui'</span>, <span class="hljs-string">"styleLibraryName"</span>: <span class="hljs-string">"theme-chalk"</span> } ] ] }</code></pre> <h3 id="articleHeader4">覆盖默认样式</h3> <p>正常情况下,可以通过直接修改对应 class 的内容修改。但含有 foo__bar 类似格式的样式不会应用 scoped(因为不是同一个 Vue 实例),因此修改不会生效。</p> <p>可以通过在 *.vue 中不使用 <code>scope</code> 来解决这个问题,Element 在 Issue 中也<a href="https://github.com/ElemeFE/element/issues/377#issuecomment-253447667" rel="nofollow noreferrer" target="_blank">吐槽过</a>。虽然我不认为 scope 不是一个好的解决方案。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>因此,我选择了在 <code>main.js</code> 中引入外部样式表,例如<code>override-element-ui.less</code>,在外部样式表中修改 foo__bar 类名的样式。</p> <h2 id="articleHeader5">路由设计</h2> <p><code>route.js</code> 主要设计如下:</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=" routes: [ { path: '/login', name: 'login', component: Login }, { path: '/', name: 'home', component: Home, children: [ { path: '/index', component: mainPage }, { path: '/manage', component: manage, children: [ { path: 'user/:uumsid&amp;:userid', component: userDetail }, { path: 'enterprise/:id', component: insDetail }, { path: '/', component: manageList }, ] }, { path: '/verify', component: Verify, }, { path: '/verify/:id', component: VerifyDetail }, { path: '*', redirect: '/index' }, ] }, ]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> routes: [ { <span class="hljs-attr">path</span>: <span class="hljs-string">'/login'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'login'</span>, <span class="hljs-attr">component</span>: Login }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'home'</span>, <span class="hljs-attr">component</span>: Home, <span class="hljs-attr">children</span>: [ { <span class="hljs-attr">path</span>: <span class="hljs-string">'/index'</span>, <span class="hljs-attr">component</span>: mainPage }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/manage'</span>, <span class="hljs-attr">component</span>: manage, <span class="hljs-attr">children</span>: [ { <span class="hljs-attr">path</span>: <span class="hljs-string">'user/:uumsid&amp;:userid'</span>, <span class="hljs-attr">component</span>: userDetail }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'enterprise/:id'</span>, <span class="hljs-attr">component</span>: insDetail }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>, <span class="hljs-attr">component</span>: manageList }, ] }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/verify'</span>, <span class="hljs-attr">component</span>: Verify, }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/verify/:id'</span>, <span class="hljs-attr">component</span>: VerifyDetail }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'*'</span>, <span class="hljs-attr">redirect</span>: <span class="hljs-string">'/index'</span> }, ] }, ]</code></pre> <p>555...不太想贴代码,感觉太乱、太长。</p> <p>但不贴又说不清楚。</p> <p>简单来说,项目只分为两个部分。登陆页和功能页。</p> <p>根路由绑定到了登陆后的首页。</p> <p>首页包含头部标题、左侧菜单还有显示内容的 <code>&lt;router-view /&gt;</code>。</p> <p>因此,如果用户仅输入 <code>location.host</code> 访问网站,会被带到 <code>${host}/index</code> 页面。另外,访问任意未被匹配的 path,都会重定向到 <code>index</code> 页面。</p> <p>这个时候会出现两个分支:</p> <p>判断本地是否存在用户信息是否存在 ? 进行正常操作 :重定向到登录页</p> <h2 id="articleHeader6">如何保存用户信息和登陆状态</h2> <p>整个系统只需要分成需要登录和不需登陆两个部分。</p> <p>当前所开发的系统除登录页外,都需要登录后访问。</p> <p>这个部分和路由设计强相关。何时判断用户是否登录在上一部分已经解释过。</p> <p>使用 <code>localstorage</code> 来持久化保存用户信息,处理用户刷新页面以及一段时间内关闭浏览器后不用重新登录的需求。(一段时间为30min)</p> <p>在 <code>Home.vue</code> 的 created() 钩子中做如下操作:</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=" created() { let userInfo = getUserFromLocal('userinfo') let verifiedUserInfo = (info) => {<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> now = new Date().getTime()<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> PASS_TIME = 1000 * 60 * 30 // 30min<br /> if (!info) return false<br /> if (now - info.time < PASS_TIME) return true return false } if (!!verifiedUserInfo(userInfo)) { this.onRefresh(userInfo) } else { this.$router.push({path: '/login'}) } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> created() { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> userInfo = getUserFromLocal(<span class="hljs-string">'userinfo'</span>) <span class="hljs-keyword">let</span> verifiedUserInfo = <span class="hljs-function">(<span class="hljs-params">info</span>) =&gt;</span> { <span class="hljs-keyword">let</span> now = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime() <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> PASS_TIME = <span class="hljs-number">1000</span> * <span class="hljs-number">60</span> * <span class="hljs-number">30</span> <span class="hljs-comment">// 30min</span> <span class="hljs-keyword">if</span> (!info) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span> <span class="hljs-keyword">if</span> (now - info.time &lt; PASS_TIME) <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span> } <span class="hljs-keyword">if</span> (!!verifiedUserInfo(userInfo)) { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.onRefresh(userInfo) } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">this</span>.$router.push({<span class="hljs-attr">path</span>: <span class="hljs-string">'/login'</span>}) } }</code></pre> <p>其中,<code>getUserFromLocal</code> 是在 <code>userHelper.js</code> 中写的从 localstorage 中获取数据的方法。通过判断用户信息是否存在以及是否过期来决定是跳转到登录页还是直接使用当前已有的用户信息。</p> <p>// 我不觉得这是一个很完美的方案,但根据我搜索的资料来看,确实没有详细说过这方面内容的文章。所以,期待能看到更好的方案。</p> <h2 id="articleHeader7">如何优雅的触发表单验证</h2> <p><code>Element</code> 的<a href="https://element.eleme.io/#/zh-CN/component/form#form-attributes#biao-dan-yan-zheng" rel="nofollow noreferrer" target="_blank">表单验证方法</a></p> <p>但没有给出 <code>async-validator</code> 支持的表单验证触发方式。</p> <p>经过<a href="https://regular-ui.github.io/ui-field/validation/" rel="nofollow noreferrer" target="_blank">查找</a>,支持的触发方式有: <code>submit, blur, input</code></p> <p>我选择的方案是在规则中使用 <code>submit</code> 时验证(指表单提交时触发,因此实际情况中永远不会触发,但能满足需求,即手动触发验证。)</p> <p>同时,在点击登录或者发送请求按钮时,调用 <code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$refs.[formEl].validate((boolean) =&gt; { // callback})</code></p> <p>清除表单验证结果: <code>&lt;form-item @focus='clearValidate'&gt;...</code></p> <p>当表单项很多时,也可以在<code>&lt;form &gt;...</code>中调用<code>clearValidate(prop)</code>, prop 指表单项的 name 值。</p> <h2 id="articleHeader8">输入框内容过滤</h2> <p>产品有一个需求是,在搜索用户信息时,只能通过邮箱搜索,并且只能输入字母、数字以及@。因此,我们需要对用户输入数据时即时进行过滤。(别问我为什么不在用户输入完成后提示错误,这是需求。</p> <p>我选择了 watch 输入框 value 的值:</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="value(val) { this.$nextTick(() => {<br /> this.value = this.reg ? val.replace(this.reg, '') : val<br /> })<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">value(val) { <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-keyword">this</span>.value = <span class="hljs-keyword">this</span>.reg ? val.replace(<span class="hljs-keyword">this</span>.reg, <span class="hljs-string">''</span>) : val }) }</code></pre> <p>这里的坑就是需要在 $nextTick() 中更新 value 值,因为 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 元素这时才刷新。</p> <p>这个需求有许多 blog 都给出过不同的解决方案,可以多看看选择一下。</p> <h2 id="articleHeader9">获取数据时的细节问题</h2> <h3 id="articleHeader10">ajax 的封装</h3> <p>基于 axios</p> <p><code>./utils/request/index.js</code>:</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="import axios from 'axios' // BASE_HOST 通过 .env.[development|production] 配置。注意:每个变量都要用 VUE_APP作为前缀,否则不能识别 const BASE_HOST = process.env.VUE_APP_API_BASE const TIME_OUT = 1000 * 10 /** * * @param URL {string} * @param params {Object} */ export function POST(URL, params) { if (!URL.includes(BASE_HOST)) URL = BASE_HOST + URL return axios({ method: 'post', url: URL, data: params, timeout: TIME_OUT }) } export function GET(URL, data) { // like POST } /** * @param URL {string} * @param token {string} * @param params {Object} */ export function GET_WITH_TOKEN(URL, token, params) { if (!URL.includes(BASE_HOST)) URL = BASE_HOST + URL return GET(URL, { params, headers: { token: token }, timeout: TIME_OUT }) } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span> <span class="hljs-comment">// BASE_HOST 通过 .env.[development|production] 配置。注意:每个变量都要用 VUE_APP作为前缀,否则不能识别</span> <span class="hljs-keyword">const</span> BASE_HOST = process.env.VUE_APP_<a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a>_BASE <span class="hljs-keyword">const</span> TIME_OUT = <span class="hljs-number">1000</span> * <span class="hljs-number">10</span> <span class="hljs-comment">/** * * @param URL {string} * @param params {Object} */</span> <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">POST</span>(<span class="hljs-params">URL, params</span>) </span>{ <span class="hljs-keyword">if</span> (!URL.includes(BASE_HOST)) URL = BASE_HOST + URL <span class="hljs-keyword">return</span> axios({ <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>: params, <span class="hljs-attr">timeout</span>: TIME_OUT }) } <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">GET</span>(<span class="hljs-params">URL, data</span>) </span>{ <span class="hljs-comment">// like POST</span> } <span class="hljs-comment">/** * @param URL {string} * @param token {string} * @param params {Object} */</span> <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">GET_WITH_TOKEN</span>(<span class="hljs-params">URL, token, params</span>) </span>{ <span class="hljs-keyword">if</span> (!URL.includes(BASE_HOST)) URL = BASE_HOST + URL <span class="hljs-keyword">return</span> GET(URL, { params, <span class="hljs-attr">headers</span>: { <span class="hljs-attr">token</span>: token }, <span class="hljs-attr">timeout</span>: TIME_OUT }) } </code></pre> <p>封装了基本的 GET,POST等方法,没想到什么特别的作用,也没有想到不好的地方,留着为了以防万一。(事实上,也用上了。比如超时处理。但是,超时处理在下一层也能做。但这样的话登陆就需要单独设置超时了。)</p> <p>GET_WITH_TOKEN(以及 POST_WITH_TOKEN 等) 用于需要登录鉴权的接口</p> <h3 id="articleHeader11">显示 Loading 状态</h3> <p>在等待api返回数据时可以用loading告诉用户页面正在加载。Element 提供的 <a href="https://element.eleme.io/#/zh-CN/component/loading" rel="nofollow noreferrer" target="_blank">Loading组件</a></p> <p>一般切换路由后,会在组件的 <code>created()</code> 方法中发送请求。这种情况下应该在 nextTick()(或者mounted()中) 中调用 loading ,避免页面切换时找不到 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>,出现全屏 loading 或页面闪烁。</p> <h2 id="articleHeader12">尚不明确(梗</h2> <ol> <li>I18n 的方案不够完善,现在做到了语言文件的热切换,但是对业务来讲似乎没有什么必要。没有做语言字符串的按需加载(事实上是做了但没有实现),但这个似乎比热切更重要一点。</li> <li>按照 Vue-router 实现了懒加载及文件命名,但浏览器似乎仍然会下载所有 JS 文件,在 JS Tab 中可以看到只下载了当前页用到的文件。</li> <li>Vuex 是否有一定要用的必要?类似的管理系统涉及到不同页面之间的交互都很少。在该系统中完全没有,虽然有不同组件的交互,但都能较简单的把状态提升到其父组件。因此,Vuex 唯一必须要用的理由就是保存用户状态。因为登陆后的接口都需要 token 校验,保存在 Vuex 中可以非常方便的使用。</li> </ol> <h2 id="articleHeader13">参考资料</h2> <ol> <li><a href="https://cli.vuejs.org/guide/" rel="nofollow noreferrer" target="_blank">Vue CLI 3</a></li> <li><a href="https://kazupon.github.io/vue-i18n/" rel="nofollow noreferrer" target="_blank">Vue I18n</a></li> <li><a href="https://segmentfault.com/a/1190000015008808">如何让一个vue项目支持多语言(vue-i18n)</a></li> </ol> <p>同步在博客:<a href="https://blog.life1st.me/article/blogarticle_vue-manage-sys-disign&amp;coding.html" rel="nofollow noreferrer" target="_blank">https://blog.life1st.me/artic...</a></p>

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