使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)有哪些-創(chuàng)新互聯(lián)

小編給大家分享一下使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比沙洋網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式沙洋網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋沙洋地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

1.對(duì)于項(xiàng)目的一些心得與體會(huì)

首先的一點(diǎn)，就是，對(duì)于圖形界面框架的選型，這個(gè)很重要，對(duì)于一項(xiàng)目來(lái)說(shuō)，開(kāi)始動(dòng)手前就要對(duì)項(xiàng)目的設(shè)計(jì)圖有個(gè)完整的了解，以便于自己選擇插件或者框架；

然后就是，對(duì)于交互性操作，比如：上傳圖片，預(yù)覽圖片啥的，應(yīng)該選擇是否是用圖形界面框架來(lái)實(shí)現(xiàn)還是另選專門的插件來(lái)實(shí)現(xiàn)

在完成項(xiàng)目中，我又新學(xué)到了上傳圖片插件vue-core-image-upload，移動(dòng)端富文本編輯器vue-quill-editor

還有個(gè)地址的三級(jí)聯(lián)動(dòng)mt-picker，(是基于mint-ui圖形界面框架的)

2.rem與px的轉(zhuǎn)換

從同事傳授中獲到的經(jīng)驗(yàn)，對(duì)于rem與px的轉(zhuǎn)換，就是在index.html模板文件中加入下面的腳本，然后就是1rem=100px(這個(gè)可能不準(zhǔn)確，有更好的方法，各位大佬請(qǐng)?jiān)谠u(píng)論中留下，感激不盡)

<script type="text/javascript">
 document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px";
</script>

3.對(duì)于上傳圖片插件vue-core-image-upload中遇到的坑

對(duì)于跨域問(wèn)題，有好多方法可以解決，這里講的挺多的前端跨域解決方法

還有就是后臺(tái)設(shè)置響應(yīng)頭access-control-allow-origin可以指定特定的域名，我這里的后臺(tái)設(shè)置的就是access-control-allow-origin:*，就是因?yàn)檫@樣，用這個(gè)上傳圖片的插件就會(huì)報(bào)錯(cuò)

Access to XMLHttpRequest at 'https://....' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

這個(gè)問(wèn)題我蒙圈了好久，和后臺(tái)也講了，就是處于蒙圈狀態(tài)，已經(jīng)允許跨域了，怎么還報(bào)錯(cuò)呢？很煩

然后，終于找了個(gè)方法解決（有用過(guò)其他的上傳插件，感覺(jué)不好用，代碼或者思路好亂）

其實(shí)這個(gè)插件中的文檔也有提示，只是剛用，還不是很會(huì)

就是在使用這個(gè)插件的代碼中加上這個(gè)字段就可以了

<vue-core-image-upload
  class="btn btn-primary"
  :crop="false"
  input-of-file="file"
  @imageuploaded="loadMainImg"
  :max-file-size="5242880"
  :url="serverUrl"
  :credentials="false" //允許攜帶cookie
></vue-core-image-upload>

對(duì)于附帶身份憑證的請(qǐng)求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“”。這是因?yàn)檎?qǐng)求的首部中攜帶了 Cookie 信息，如果 Access-Control-Allow-Origin 的值為“”，請(qǐng)求將會(huì)失敗。

也就是說(shuō)Access-Control-Allow-Credentials設(shè)置為true的情況下

Access-Control-Allow-Origin不能設(shè)置為*

4.基于mint-ui的三級(jí)地址選擇效果圖

template文件

<div class="modal" @click="handleCloseAddress">
 <div class="cateContainer" @click.stop>
  <div class="operateBtn">
   <div class="cancelBtn" @click="handleCloseAddress">取消</div>
   <div class="confirmBtn" @click="handleCloseAddress">確定</div>
  </div>
  <mt-picker class="addressPicker" :slots="myAddressSlots" @change="onAddressChange"></mt-picker>
 </div>
</div>

js文件

json文件地址地址文件

// 定義一個(gè)包含中國(guó)省市區(qū)信息的json文件
import addressJson from '@/assets/common/address'
export default {
  data() {
    return {
      myAddressSlots: [
       {
        flex: 1,
        values: Object.keys(addressJson),
        className: 'slot1',
        textAlign: 'center'
       }, {
        divider: true,
        content: '-',
        className: 'slot2'
       }, {
        flex: 1,
        values: ['市轄區(qū)'],
        className: 'slot3',
        textAlign: 'center'
       },
       {
        divider: true,
        content: '-',
        className: 'slot4'
       },
       {
        flex: 1,
        values: ['東城區(qū)'],
        className: 'slot5',
        textAlign: 'center'
       }
      ],
      province:'省',
      city:'市',
      county:'區(qū)/縣',
    }
  },
  methods: {
    onAddressChange(picker, values) {
      if(addressJson[values[0]]) {
       picker.setSlotValues(1, Object.keys(addressJson[values[0]]));
       picker.setSlotValues(2, addressJson[values[0]][values[1]]);
       this.province = values[0];
       this.city = values[1];
       this.county = values[2];
      }
   },
  }
}

5.關(guān)于對(duì)是否登錄的處理

開(kāi)始也有做過(guò)登錄的管理后臺(tái)，不過(guò)，在進(jìn)行登錄時(shí)，總會(huì)一閃過(guò)登錄的界面，這種感覺(jué)很不好，在這里記錄下相比之前更好點(diǎn)的方法

在main.js文件中添加對(duì)router的鉤子函數(shù)

router.beforeEach((to, from, next) => {
 let token = localStorage.getItem('token');
 if (!token && to.path !== '/login') {
  next('/login');
 } else {
  next();
 }
});

通過(guò)判斷緩存里是否有token來(lái)進(jìn)行路由的跳轉(zhuǎn)

相對(duì)于之前的那種方法，這里對(duì)路由的跳轉(zhuǎn)進(jìn)行的攔截，在路由進(jìn)行跳轉(zhuǎn)前，進(jìn)行判斷

6.上拉加載mescroll.js插件

這里對(duì)于分頁(yè)加載第二頁(yè)使用的上拉加載的插件還是用了原來(lái)的插件，還是感覺(jué)挺好用的

這里有講述上拉加載，下拉刷新，滾動(dòng)無(wú)限加載

7.移動(dòng)端富文本插件Vue-Quill-Editor

效果圖

這里有相關(guān)案例代碼vue-quill-editor

<template>
  <quill-editor
   v-model="richTextContent"
   ref="myQuillEditor"
   :options="editorOption"
   @change="onEditorChange($event)">
  </quill-editor>
</template>
<script>
 import { quillEditor } from "vue-quill-editor";
 import 'quill/dist/quill.core.css';
 import 'quill/dist/quill.snow.css';
 import 'quill/dist/quill.bubble.css';
  export default{
    data() {
      return {}
    },
    methods: {
      onEditorChange(e) {}
    }
  }
</script>

響應(yīng)事件

onEditorChange(e){
  console.log(e)
  this.richTextContent = e.html;
},

8.移動(dòng)端圖片預(yù)覽插件

vue-picture-preview

<img :src="url" v-preview="url" preview-nav-enable="false" />

需要在app.vue中加入如下代碼

<lg-preview></lg-preview>

效果圖

以上是“使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)有哪些-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://muchs.cn/article4/pseie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、云服務(wù)器、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)