vue2.0仿半糖

vue2.0仿半糖

Vue是構建用戶界面的先進框架。它不像其餘全能的框架，Vue是從頭開始逐漸設計起來的。核心庫只專一於視圖層，它很是容易上手而且能夠與其餘庫或現有的項目進行整合。在另外一方面，當與相關工具和支持庫結合使用時，Vue也能完美的驅動複雜的單頁面應用。小女子深知 「紙上得來終覺淺,絕知此事要躬行.」，且有着大多數女孩紙的優勢愛購物逛各類購物平臺(￣▽￣),因而開始了vue2.0仿半糖APP的故事，而半塘做爲一個爲大衆推薦好物的平臺，天然最重要的就是可以搜索好物和發現好物，因此針對這自認爲最重要的兩個功能開始了代碼世界的遨遊。

鑑於動態圖加載過久影響心情，因此上一些大體圖片讓各位看官瞭解

登陸

搜索

發佈文章

主要的頁面效果:

• 觸摸內容滑動
• 輪播圖
• 滑動必定位置固定某元素的位置
• 遮罩層的效果
• 主要的各個頁面效果實現

線上體驗：

（￣︶￣）↗預覽demo（用chrome瀏覽器切換手機模式預覽更佳，發文章的功能點擊底部菜單欄+哦，搜索請搜索口紅化妝品等關鍵字，其餘數據還沒mock進去...）

（￣︶￣）↗源代碼

技術棧:

• vue2.0
• vue-router spa開發
• vuex 專爲Vue.js 應用程序開發的狀態管理模式,集中式存儲管理應用的全部組件的狀態
• axios 一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端
• mint-ui 基於vue.js的移動端組件庫 幫助快速搭建頁面（項目中上傳圖片頁面有使用到）
• easy-mock 先後端分離，提供數據接口（搜索時提供的假數據）
• html5 css3 （頁面的基本實現）
  
  

主要的功能實現:

• 用戶的登陸狀態：由於涉及用戶的我的信息修改等頁面都要有登陸狀態的判斷，若未登陸則不顯示其頁面，因此咱們必須對用戶的登陸狀態(存入store裏的boolean變量)進行改變，而且控制登陸先後的頁面跳轉。（這裏多一句小嘴，就是router-link激活時其實本身自己有個默認類名router-link-active,若想對激活元素操做你能夠選擇這個類名，可是值得注意的是"是否激活" 默認類名的依據是 inclusive match即全包含匹配[關於router-link-active詳細參照]（https://router.vuejs.org/zh-c...
  

主要代碼實現:

login() {
      var myreg =/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
     if(this.phonenumber.length == 0 ){
       alert('請輸入手機號碼！');
     }
     else if(!myreg.test(this.phonenumber)){
       alert('請輸入有效的手機號！')
     }
     else{
       this.$store.commit('checking')
       this.$router.push({path:'/'})
     }
    }
    <router-link  :to="isLogin" tag="li">
                <span class="icon icon-info"></span>
                 <p class="home_text">消息</p>
          </router-link>
            <router-link  :to="isLoading" tag="li">
                <span class="icon icon-my"></span>
                 <p class="home_text">個人</p>
          </router-link>

• 商品的搜索功能：搜索，固然首先得有數據讓你搜索，我選擇了easy-mock來建立個人假數據關於easy-mock,而後對數據請求關於axios可參考，根據關鍵字進行匹配，搜索完畢後有個搜索歷史，而後清空搜索歷史。（這些比較基礎請參考源代碼）
  

主要的代碼實現：

created () {
      this.inputText = this.$store.state.inputText
      this.axios.get('http://easy-mock.com/mock/5940ff968ac26d795f00bd9e/care/list/care/list')
        .then((res)=>{
           console.log(res.data)
           let message = res.data
           for(let i in message){
             let item = i;
             console.log(item);
             console.log(this.inputText);
             console.log(item.indexOf(this.inputText));
             if(item.indexOf(this.inputText)!== -1){
               this.contents = message[item]
               return
             }
           }
           if(this.contents.length){
             this.message = true
           }else{
             this.message = false
             this.$refs.tip.className='tipshow'
             console.log('沒有找到哦');
           }
           })
       .catch((error) => {console.log(error)})
    }

• 寫文章發佈文章的功能：寫文章和發佈文章固然須要數據的存取，並且這是一個分享好物的功能必須得有圖片才更有說服力，而由於用戶發佈完圖片後不論是否刷新本身辛苦寫的文章仍是要在的呀，要否則你們還寫個啥呢，可是發佈出去以後寫文章和預覽頁面就不能還保存着發佈出去的數據內容了，因此我就將寫文章和預覽文章的頁面中的狀態保存在store裏面，當點擊發布按鈕的時候，將store裏面的數據保存到localstorage當中，跳轉到個人文章以及文章查看頁面時則獲取localstorage內的數據，如今只能獲取最新的文章由於本仙女尚未將其存儲爲一個對象數組，之後定會慢慢折騰。
  

主要的代碼實現：

頁面實例建立完成以後：

this.headline=this.$store.state.headline;
        this.content=this.$store.state.content;
          for(let i=0;i<this.$store.state.picurl.length;i++){
              this.fileListurl.push(this.$store.state.picurl[i]);
        }
       }

圖片的上傳和刪除（參考eliment-ui 的upload組件）

handleRemove(file, fileList) {
        this.fileListurl=fileList;
        console.log('刪除');
         console.log(this.fileListurl);
     },
     upload (response,file,fileList) {
       let that = this;
       console.log('上傳文件');
       console.log(file);
       console.log(typeof that.$store.state.picurl);
       that.$store.dispatch('upload',file.url);
       console.log(that.$store.state.picurl);
        console.log('store上傳成功');
       console.log(this.$store.state.picurl);
       this.$refs.see.disabled=false
       this.$refs.see.className="pre_see_active"
       this.$refs.send.disabled=false
       this.$refs.send.className="send_active"
     }

預覽

pre_see(){
        this.fileListurl=this.$store.state.picurl;
        this.$store.dispatch('writetitle',this.headline);
        this.$store.dispatch('writecontent',this.content);
        this.$router.push({path:'/pre_see'})
      }

發佈成功(引用了Toast吐司提示)：值得注意的是不要忘記在引用的頁面加上import { Toast } from 'mint-ui';

send_out(){
        this.$store.dispatch('writetitle',this.headline);
        this.$store.dispatch('writecontent',this.content);
        console.log(this.$store.state.content)
        var str = JSON.stringify(this.$store.state.picurl);
        localStorage.setItem("pics",str);
        localStorage.setItem('title',this.$store.state.headline);
        localStorage.setItem('content',this.$store.state.content);
        console.log(this.headline);
        console.log(this.content);
        let instance = Toast('發佈成功');
        setTimeout(() => {
        instance.close();
        this.$router.push({path:'/asuccess'})
        }, 2000);
      }

總結

• 關於README.md的編寫，值得注意的是必定要對齊對齊！！！
• 當時糾結寫網頁版仍是手機版因此直接用的px，後來作成移動端後悔不已，不像微信小程序一開始就採用了移動端的適配rpx,哇，可是頁面太多，而後小仙女就這麼一直錯下去了（之後仍是要改回來的(╥╯^╰╥)），求求大家若是想好了作移動端請用rem自適應佈局，別跟我同樣犯蠢!!!
• 當碰到不會的問題，請多看看文檔，是否本身有所遺漏。當初router-link-active這個知識點就沒掃到結果本身寫了一大堆不如一個默認類名來的痛快，因此當碰到繁雜的工做量時你就要懷疑一下自身是否本身錯過了什麼快捷的辦法。
   * 關於dist文件夾，一開始你的index預覽頁面啥也沒有，這正常，改變一下各個文件的路徑就行了，圖片顯示不出來也是同樣的道理；而用了easy-mock的數據請求時請寫成https,否則數據沒法得到。

 * 這個項目到目前的程度也作完挺久的了，一直沒有寫總結，這也是個毛病，由於不少東西當時以爲須要注意，如今倒以爲沒什麼，因此之後必定要邊作邊總結，讓後來的人能更快的上手。還有購物和曬照功能以及數據的懶加載等在向我招手，我會盡快握住他們的。
 

給小星星的都是高富帥和白富美✺◟(∗❛ัᴗ❛ั∗)◞✺，請向我發射大家的小星星吧!

 

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.
"# bantang"