成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)

simpleapples / 2571人閱讀

摘要：獨(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)，理一下思路。

獨(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)目來(lái)說(shuō)，開(kāi)始動(dòng)手前就要對(duì)項(xiàng)目的設(shè)計(jì)圖有個(gè)完整的了解，以便于自己選擇插件或者框架；

然后就是，對(duì)于交互性操作，比如：上傳圖片，預(yù)覽圖片啥的，應(yīng)該選擇是否是用圖形界面框架來(lái)實(shí)現(xiàn)還是另選專門(mé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)論中留下，感激不盡)

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è)字段就可以了

對(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文件

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

響應(yīng)事件

onEditorChange(e){
    console.log(e)
    this.richTextContent = e.html;
},
8.移動(dòng)端圖片預(yù)覽插件

vue-picture-preview



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




效果圖







代碼挺少的

9.總結(jié)


在以后的項(xiàng)目中，首先的一件事就是要對(duì)產(chǎn)品要有完成的了解，然后進(jìn)行技術(shù)、框架的選型


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



正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）




往期好文推薦：



判斷ios和Android及PC端


webpack打包（有面試題）


純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）


實(shí)現(xiàn)單行及多行文字超出后加省略號(hào)



           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102472.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    Vue-book 2.0 一個(gè)移動(dòng)端簡(jiǎn)單的全棧 web APP
    
                                                     
    摘要：本項(xiàng)目是一個(gè)簡(jiǎn)單的全棧項(xiàng)目，前端新手可以拿來(lái)練練手。項(xiàng)目實(shí)現(xiàn)了一些簡(jiǎn)單的功能，后臺(tái)可以對(duì)圖書(shū)進(jìn)行錄入錄出掃碼或手動(dòng)，前臺(tái)顯示錄入的圖書(shū)，并且前臺(tái)注冊(cè)登錄后可以將書(shū)的訂單發(fā)給服務(wù)器，并存到服務(wù)器。

Vue-book 2.0
Github 地址：https://github.com/percy507/v... 【覺(jué)得不錯(cuò)就來(lái)個(gè) star 吧 ^_^】
說(shuō)明（菜鳥(niǎo)請(qǐng)進(jìn)，大神繞道 ~）

前端...
    
                                                   
                          
    
                                
    
                                    wh469012917
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Vue-book 2.0 一個(gè)移動(dòng)端簡(jiǎn)單的全棧 web APP
    
                                                     
    摘要：本項(xiàng)目是一個(gè)簡(jiǎn)單的全棧項(xiàng)目，前端新手可以拿來(lái)練練手。項(xiàng)目實(shí)現(xiàn)了一些簡(jiǎn)單的功能，后臺(tái)可以對(duì)圖書(shū)進(jìn)行錄入錄出掃碼或手動(dòng)，前臺(tái)顯示錄入的圖書(shū)，并且前臺(tái)注冊(cè)登錄后可以將書(shū)的訂單發(fā)給服務(wù)器，并存到服務(wù)器。

Vue-book 2.0
Github 地址：https://github.com/percy507/v... 【覺(jué)得不錯(cuò)就來(lái)個(gè) star 吧 ^_^】
說(shuō)明（菜鳥(niǎo)請(qǐng)進(jìn)，大神繞道 ~）

前端...
    
                                                   
                          
    
                                
    
                                    NotFound
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    后端開(kāi)發(fā)者從零做一個(gè)移動(dòng)應(yīng)用（后端篇）
    
                                                     
    摘要：后端開(kāi)發(fā)的疑惑后端開(kāi)發(fā)最常面對(duì)的一個(gè)問(wèn)題性能高并發(fā)等等。而到了時(shí)代，在方面有了前后端分離概念移動(dòng)后端更是無(wú)力渲染天然前后端分離。

先來(lái)上一張前端頁(yè)面的效果圖（Vue + Vux + Vuex + Vue-Router）。showImg(https://segmentfault.com/img/remote/1460000010207850);
 第一次做gif 沒(méi)什么經(jīng)驗(yàn)，太大了。加載...
    
                                                   
                          
    
                                
    
                                    codergarden
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端vue系列-起始篇 vue的基本認(rèn)知
    
                                                     
    摘要：管理后臺(tái)，日常就是提交各種表單了，這部分現(xiàn)有的方案，比如表單提交或者收集信息提交。，可以用于前端開(kāi)發(fā)的工程構(gòu)建。帶了人的前端團(tuán)隊(duì)，你的精力開(kāi)始在配合公司其他部門(mén)做用戶數(shù)據(jù)增長(zhǎng)了。開(kāi)始考慮使用的。? ? ? ?hi,大家伙，我是佛系大大，很高興與你們一起溝通，學(xué)習(xí)，進(jìn)步。
? ? ? ?很久不更新博客了，現(xiàn)在回來(lái)再寫(xiě)博客，盡然是有些懷念的感覺(jué)，幸福的感覺(jué)。因?yàn)閷?xiě)博客，內(nèi)心會(huì)很寧?kù)o，沉浸在自己的...
    
                                                   
                          
    
                                
    
                                    I_Am
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    一個(gè)基于vue的nuxt框架開(kāi)源圖片管理網(wǎng)站，前后端分離
    
                                                     
    摘要：在月和月的時(shí)候停止開(kāi)發(fā)，然后在三月份的時(shí)候上線了第一個(gè)版本。簡(jiǎn)述一個(gè)類似下稱站的網(wǎng)站，主要實(shí)現(xiàn)有用戶管理，圖片管理，評(píng)論回復(fù)等功能。前端項(xiàng)目實(shí)現(xiàn)基于的框架，設(shè)計(jì)風(fēng)格，過(guò)渡平滑，詳細(xì)代碼碎片整合和輪子制作會(huì)后續(xù)發(fā)布。

首先貼上地址
展示地址：http://www.secdra.com/web前端代碼地址：https://github.com/JunJieFu/s...mobile前端代碼...
    
                                                   
                          
    
                                
    
                                    姘擱『
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<