vue前端開發那些事——vue開發遇到的問題

時間 2019-12-05

標籤 vue 前端開發那些遇到問題简体版

原文原文鏈接

　　vue web開發並非孤立的。它須要衆多插件的配合以及其它js框架的支持。本篇想把vue web開發的一些問題，拿出來討論下。html

一、web界面採用哪一個UI框架？項目中引用了layui框架。引入框架的好處就是解決界面風格統一的問題，良好的佈局（自適應不一樣的設備），提供了大量基礎組件及模塊，如form提交、上傳、彈出層。我以爲前臺框架的引入，解放了美工的一些工做。之前有bootstrap、如今有layui、element ui（基於vue 2.0）。前端

 <body>
    <div id="app"></div>
    <script src="/static/layui/layui.all.js" charset="utf-8"></script>
 </body>

咱們以非模塊化的方式加載。採用哪一種方式加載，各有利弊。儘管官方推薦使用模塊化加載，可是我以爲直接引用簡單啊，用起來簡單。固然，對於要求高性能的應用就另當別論了。項目中有彈出框的須要，因而用了layui的彈出層。一開始用的很happy，等測試的時候，在IE和火狐瀏覽器下，彈出框加載不出來頁面。oh，my god。咱們看看彈出組件：vue

export default {
   open: function (options) {

     var defaults = {
       type: 2,
       shade: 0,
       maxmin: false,
       area: ["30%", "63%"],
       title: '',
       content: '',
       btnAlign: 'c', //按鈕居中

       end: function () {
         if (options.end) {
           options.end();
         }
       }

     };

     var options = $.extend(true, {}, defaults, options);
     layer.open(options);
   }
 }

type：2表示彈出iframe，因此content是一個url。調用的時候，我給傳的是vue router中配置的路徑，此時url：‘/login’jquery

 {
      name: 'login',
      path: '/login',
      component: require('../indexs/login')
  }

全部的vue路由傳給彈出層，在IE和火狐下都打不開，只有chrome下完美呈現。我就在網上找了好多解決方案，可是都以失敗了結。彈出層的效果，咱們仍是很想要的，怎麼辦呢？換個思路。記得以前應用bootstrap的時候，它的彈出層的思路是這樣的：要彈出的東西，就在當前頁面，只不過是隱藏的。當點擊按鈕的時候，它才顯示出來。我借鑑了這個思路，實現了彈出層，完美兼容各大瀏覽器。在vue篇中已經闡述過了。ios

使用layui的tab，也有一個問題，在tab外面，點擊按鈕，控制tab內部的切換。layui也提供了方法，我用了兩處，一處是好的，另外一處怎麼都切換不了。以下圖所示：web

填寫個人求助，點擊「生成求助」按鈕，提交數據並切換tab 「待應助」。ok，這個沒有任何問題。看另一處：ajax

當我點擊右邊的「個人求助」，須要切換tab到「個人求助」。這個無論怎樣都切換不過來。vue-router

二、vue-routervuex

我主要用它來作權限驗證：chrome

 name: 'admin',
      path: '/admin',

      component: require('../admin/root'),
      meta: {
        requiresAdminAuth:true 
      },

添加了一個meta對象，在路由的時候「安檢」，須要管理員權限的路由，必須檢查，沒有權限的就跳回到login。

router.beforeEach((to, from, next) => {
  let unLgoin = beforeAction();

  if (to.path === '/login') {
    next()
  } else if (to.matched.some(r => r.meta.requiresAuth) && unLgoin) {
    next({
      path: '/login',
      query: {
        redirect: to.fullPath
      }
    })
  } else if (to.matched.some(r => r.meta.requiresAdminAuth) && (unLgoin || !isAdmin())) {
    next({
      path: '/login',
    })
  } else {
    next()
  }
})

router-view能作出像iframe框架的東西，如後臺管理頁面中，左側和頂部通常是固定的部分，而中間的區域是加載不一樣的頁面。

 <div class="layui-body layui-tab-content" style="bottom:0;z-index:1000" :style="readyShowContent?'top:0;left:0;':''">
        <router-view></router-view>
 </div>

固然，這得配合路由表了。

{
      name: 'admin',
      path: '/admin',

      component: require('../admin/root'),
      meta: {
        requiresAdminAuth:true 
      },
      children: [{
          path: '/',
          component: require('../admin/userManage')
        },
        {
          path: 'user',
          component: require('../admin/userManage')
        },
        {
          path: 'fixContent',
          component: require('../admin/fixContent')
        },
      ]
 }

另一個問題是router兼容性問題，在IE下面，a連接帶有vue路由的，都打不開，若是換成router-link的時候，就能夠正常打開連接。當界面的改動量太大的時候，咱們仍是採用其它的改法，檢測瀏覽器是否爲IE：

export default {
    mounted() {
        function checkIE() {
            return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style
        }
        if (checkIE()) {
            window.addEventListener('hashchange', () => {
                var currentPath = window.location.hash.slice(1);
                if (this.$route.path !== currentPath) {
                    this.$router.push(currentPath)
                }
            }, false)
        }
    }
};

放到App.vue中。

三、vue中http請求

vue是一個純前端的框架，須要webapi支持數據。經過http請求webapi就好了。咱們既能夠用jquery ajax請求，也可使用axios請求，咱們項目中選擇了後者。axios裏有個攔截器挺好的，它能夠在請求發送前，添加請求頭及一些工做。

const requestInterceptor=axios.interceptors.request.use(
  config => {
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/json',
      'Authorization':'Bearer '+getStore('token'),
       xhrFields: {
         withCredentials: true
      },
      'Pragma': 'no-cache',
      'Cache-Control': 'no-cache'
  }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

這個攔截器作了兩件事情：

a、請求data：把js對象轉爲json字符串

b、請求頭：添加了數據發送格式，token驗證、IE下get有緩存，因此加了‘Cache-Control’和‘Pragma’

攔截器在請求的時候，也能夠根據狀況去掉：

/**
 * post請求
 * @param url
 * @param data
 * @param  isRemoveInterceptor  是否移除攔截器
 * @returns {Promise}
 */

 export function post(url,data = {},isRemoveInterceptor=false){
   if(isRemoveInterceptor){
     axios.interceptors.request.eject(requestInterceptor);
   }
   return new Promise((resolve,reject) => {
     axios.post(axios.defaults.baseURL+url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

四、vuex + local Storage

有了vuex，爲何還須要local Storage?這是由於vuex至關於一個「嬌弱」的內存數據庫，若是F5刷新的話，它的數據會丟失。在使用過程當中，vuex不能跨域多個標籤頁共享數據。這時候，能夠採用h5的api localStorage，它能夠實現數據持久化。咱們在登陸的時候使用了vuex保持狀態。若是其它頁面須要判斷當前用戶是否登陸，能夠直接經過vuex獲取，vuex爲空的話，就去storage中去查看。用戶登陸的狀態不能長期保持，由於涉及網站安全問題，因此得實現登陸過時的方法，迫使用戶從新登陸。

五、kindeditor

在結合vue使用的時候，遇到跨域上傳文件的問題，按照網上的好多辦法都解決不了。咱們的項目不涉及這個問題，我是在本地調試的時候遇到的。

好了，今天就到這裏，週末快樂！