使用vue開發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)
獨(dú)立完成一個(gè)移動(dòng)端項(xiàng)目(不是很明白為何會(huì)有這樣的商品管理后臺(tái))，還是有些經(jīng)驗(yàn)不足，包括對(duì)產(chǎn)品的全局思考，對(duì)插件的選擇等，都有考慮不周的缺點(diǎn)，導(dǎo)致自己中途想換圖形界面插件，浪費(fèi)了點(diǎn)時(shí)間，這里記錄下，總結(jié)下經(jīng)驗(yàn)，理一下思路。
1.對(duì)于項(xiàng)目的一些心得與體會(huì)
首先的一點(diǎn)，就是，對(duì)于圖形界面框架的選型，這個(gè)很重要，對(duì)于一項(xiàng)目來說，開始動(dòng)手前就要對(duì)項(xiàng)目的設(shè)計(jì)圖有個(gè)完整的了解，以便于自己選擇插件或者框架；
然后就是，對(duì)于交互性操作，比如：上傳圖片，預(yù)覽圖片啥的，應(yīng)該選擇是否是用圖形界面框架來實(shí)現(xiàn)還是另選專門的插件來實(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ì)于跨域問題，有好多方法可以解決，這里講的挺多的前端跨域解決方法
還有就是后臺(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è)問題我蒙圈了好久，和后臺(tái)也講了，就是處于蒙圈狀態(tài)，已經(jīng)允許跨域了，怎么還報(bào)錯(cuò)呢？很煩
然后，終于找了個(gè)方法解決（有用過其他的上傳插件，感覺不好用，代碼或者思路好亂）
其實(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ì)失敗。
也就是說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ì)是否登錄的處理
開始也有做過登錄的管理后臺(tái)，不過，在進(jìn)行登錄時(shí)，總會(huì)一閃過登錄的界面，這種感覺很不好，在這里記錄下相比之前更好點(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();
}
});
通過判斷緩存里是否有token來進(jìn)行路由的跳轉(zhuǎn)
相對(duì)于之前的那種方法，這里對(duì)路由的跳轉(zhuǎn)進(jìn)行的攔截，在路由進(jìn)行跳轉(zhuǎn)前，進(jìn)行判斷
6.上拉加載mescroll.js插件
這里對(duì)于分頁加載第二頁使用的上拉加載的插件還是用了原來的插件，還是感覺挺好用的
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>
效果圖
代碼挺少的
9.總結(jié)
- 在以后的項(xiàng)目中，首先的一件事就是要對(duì)產(chǎn)品要有完成的了解，然后進(jìn)行技術(shù)、框架的選型
- 對(duì)于插件，自己多嘗試才能知道是否符合你的要求
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解vue移動(dòng)端項(xiàng)目代碼拆分記錄
- vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新
- 移動(dòng)端（微信等使用vConsole調(diào)試console的方法
- 利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試方法
- jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)適用于移動(dòng)端的跑馬燈抽獎(jiǎng)特效示例
- 如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁數(shù)據(jù)的組件
- 原生js實(shí)現(xiàn)移動(dòng)端Touch輪播圖的方法步驟
- js實(shí)現(xiàn)移動(dòng)端輪播圖
- 移動(dòng)端使用CSS或JS判斷橫屏和豎屏的講解
相關(guān)文章
這篇文章主要介紹了vue中格式化element表格中的時(shí)間為指定格式,需要的朋友可以參考下2022-05-05
本篇文章主要介紹了Vue響應(yīng)式原理詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
對(duì)于Vue中實(shí)現(xiàn)一般的下載功能很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于前端vue中文件下載的三種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
VUE簡(jiǎn)單的定時(shí)器實(shí)時(shí)刷新的實(shí)現(xiàn)方法
這篇文章主要介紹了VUE簡(jiǎn)單的定時(shí)器實(shí)時(shí)刷新的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
本篇文章主要介紹了在Vue中使用echarts的實(shí)例代碼（3種圖），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
elmentui是一款為vue設(shè)計(jì)的桌面組件庫(kù),下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue 使用高德地圖vue-amap組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js的Class與樣式綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
vue+elementui+vuex+sessionStorage實(shí)現(xiàn)歷史標(biāo)簽菜單的示例代碼
本文主要介紹了vue+elementui+vuex+sessionStorage實(shí)現(xiàn)歷史標(biāo)簽菜單的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了webpack搭建vue 項(xiàng)目的步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12