點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

使用vue開發移動端管理后臺的注意事項

來源：懂視網責編：小采時間：2020-11-27 22:00:16

使用vue開發移動端管理后臺的注意事項

使用vue開發移動端管理后臺的注意事項:獨立完成一個移動端項目(不是很明白為何會有這樣的商品管理后臺)，還是有些經驗不足，包括對產品的全局思考，對插件的選擇等，都有考慮不周的缺點，導致自己中途想換圖形界面插件，浪費了點時間，這里記錄下，總結下經驗，理一下思路。 1.對于項目的一些心得

推薦度：

點擊下載本文 文檔為doc格式

導讀使用vue開發移動端管理后臺的注意事項:獨立完成一個移動端項目(不是很明白為何會有這樣的商品管理后臺)，還是有些經驗不足，包括對產品的全局思考，對插件的選擇等，都有考慮不周的缺點，導致自己中途想換圖形界面插件，浪費了點時間，這里記錄下，總結下經驗，理一下思路。 1.對于項目的一些心得

這個問題我蒙圈了好久，和后臺也講了，就是處于蒙圈狀態，已經允許跨域了，怎么還報錯呢？很煩

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

其實這個插件中的文檔也有提示，只是剛用，還不是很會

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

<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>

對于附帶身份憑證的請求，服務器不得設置 Access-Control-Allow-Origin 的值為“”。這是因為請求的首部中攜帶了 Cookie 信息，如果 Access-Control-Allow-Origin 的值為“”，請求將會失敗。

也就是說Access-Control-Allow-Credentials設置為true的情況下

Access-Control-Allow-Origin不能設置為*

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

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文件地址地址文件

// 定義一個包含中國省市區信息的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: ['市轄區'],
 className: 'slot3',
 textAlign: 'center'
 },
 {
 divider: true,
 content: '-',
 className: 'slot4'
 },
 {
 flex: 1,
 values: ['東城區'],
 className: 'slot5',
 textAlign: 'center'
 }
 ],
 province:'省',
 city:'市',
 county:'區/縣',
 }
 },
 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.關于對是否登錄的處理

開始也有做過登錄的管理后臺，不過，在進行登錄時，總會一閃過登錄的界面，這種感覺很不好，在這里記錄下相比之前更好點的方法

在main.js文件中添加對router的鉤子函數

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

通過判斷緩存里是否有token來進行路由的跳轉

相對于之前的那種方法，這里對路由的跳轉進行的攔截，在路由進行跳轉前，進行判斷

6.上拉加載mescroll.js插件

這里對于分頁加載第二頁使用的上拉加載的插件還是用了原來的插件，還是感覺挺好用的

這里有講述上拉加載，下拉刷新，滾動無限加載

7.移動端富文本插件Vue-Quill-Editor

效果圖

這里有相關案例代碼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>

響應事件

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

8.移動端圖片預覽插件

vue-picture-preview

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

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

<lg-preview></lg-preview>

效果圖

代碼挺少的

9.總結

在以后的項目中，首先的一件事就是要對產品要有完成的了解，然后進行技術、框架的選型

對于插件，自己多嘗試才能知道是否符合你的要求

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用vue開發移動端管理后臺的注意事項

推薦度：

點擊下載本文 文檔為doc格式

標簽：有什么 VUE 開發

熱門焦點

使用vue開發移動端管理后臺的注意事項

使用vue開發移動端管理后臺的注意事項

使用vue開發移動端管理后臺的注意事項

最新推薦

猜你喜歡

熱門推薦