国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用vue開發移動端管理后臺

simpleapples / 2542人閱讀

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

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

首先的一點，就是，對于圖形界面框架的選型，這個很重要，對于一項目來說，開始動手前就要對項目的設計圖有個完整的了解，以便于自己選擇插件或者框架；

然后就是，對于交互性操作，比如：上傳圖片，預覽圖片啥的，應該選擇是否是用圖形界面框架來實現還是另選專門的插件來實現

在完成項目中，我又新學到了上傳圖片插件vue-core-image-upload，移動端富文本編輯器vue-quill-editor

還有個地址的三級聯動mt-picker，(是基于mint-ui圖形界面框架的)

2.rem與px的轉換

從同事傳授中獲到的經驗，對于rem與px的轉換，就是在index.html模板文件中加入下面的腳本，然后就是1rem=100px(這個可能不準確，有更好的方法，各位大佬請在評論中留下，感激不盡)

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

對于跨域問題，有好多方法可以解決，這里講的挺多的前端跨域解決方法

還有就是后臺設置響應頭access-control-allow-origin可以指定特定的域名，我這里的后臺設置的就是access-control-allow-origin:*，就是因為這樣，用這個上傳圖片的插件就會報錯

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.

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

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

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

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

對于附帶身份憑證的請求，服務器不得設置 Access-Control-Allow-Origin 的值為“”。這是因為請求的首部中攜帶了 Cookie 信息，如果 Access-Control-Allow-Origin 的值為“”，請求將會失敗。
也就是說Access-Control-Allow-Credentials設置為true的情況下
Access-Control-Allow-Origin不能設置為*
4.基于mint-ui的三級地址選擇

效果圖

template文件

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

響應事件

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

vue-picture-preview



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




效果圖







代碼挺少的

9.總結


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


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



正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）




往期好文推薦：



判斷ios和Android及PC端


webpack打包（有面試題）


純css實現瀑布流（multi-column多列及flex布局）


實現單行及多行文字超出后加省略號



           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102472.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    Vue-book 2.0 一個移動端簡單的全棧 web APP
    
                                                     
    摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發給服務器，并存到服務器。

Vue-book 2.0
Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】
說明（菜鳥請進，大神繞道 ~）

前端...
    
                                                   
                          
    
                                
    
                                    wh469012917
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Vue-book 2.0 一個移動端簡單的全棧 web APP
    
                                                     
    摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發給服務器，并存到服務器。

Vue-book 2.0
Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】
說明（菜鳥請進，大神繞道 ~）

前端...
    
                                                   
                          
    
                                
    
                                    NotFound
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    后端開發者從零做一個移動應用（后端篇）
    
                                                     
    摘要：后端開發的疑惑后端開發最常面對的一個問題性能高并發等等。而到了時代，在方面有了前后端分離概念移動后端更是無力渲染天然前后端分離。

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

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

              

              
               

                  
                  
發表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                    
                    
simpleapples

                    
男|高級講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<