[前端]基於vue和nodejs的一個簡陋blog的開發過程中遇到的問題

Teemo發表於2019-02-16
前端VueNodeJS

Github地址

時間格式問題

Date.prototype.Format = function(fmt){ 
  var o = {   
    "M+" : this.getMonth()+1,                 //月份   
    "d+" : this.getDate(),                    //日   
    "h+" : this.getHours(),                   //小時   
    "m+" : this.getMinutes(),                 //分   
    "s+" : this.getSeconds(),                 //秒   
    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
    "S"  : this.getMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt))   
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
      //這行程式碼的意思是：如果  new RegExp("(" + k + ")")  這個用o裡面屬性新建立的正則物件在 fmt這個從外面傳進來的引數裡 存在（一般fmt是日期格式如 yyyy-MM-dd HH:mm:SS，則將fmt替換為傳進來對應的日期格式。
      
      return fmt;
      
}


module.exports=Date.prototype.Format;

呼叫的時候，```Format("yyyy-MM-dd")```即可。

登入判斷問題

使用vuex和cookies。登入時，後端在獲取登入請求時，如果為合法請求，則對req保留一個session，同時返回一個有限時間的cookies。前端使用vuex，首先在元件中，對獲得的cookies進行處理，然後dispatch到actions中，然後在actions裡呼叫一次mutations，從而修改states中的狀態。

*：重新整理後vuex的數值會丟失，所以需要在鉤子函式中對cookies中的值進行判斷，如果為登入態則修改vuex中states。
```
if(LoginName){
store.dispatch(`changeLogin`,LoginName);
}
```

路由

文章連結包括文章編輯頁獲取相關內容，可以通過vue-router完成。
```
this.$route.query.articleId
```

CSS相關

position:fixed;
> 生成絕對定位的元素，相對於瀏覽器視窗進行定位。
> 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

markdown

編輯器使用的是marked外掛，但是似乎不是很完善。

分頁

<div class="page-bar">
    <ul>
        <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一頁</a></li>
        <li v-if="cur==1"><a class="banclick">上一頁</a></li>
        <li v-for="index in indexs"  v-bind:class="{ `active`: cur == index}">
            <a v-on:click="btnClick(index)">{{ index }}</a>
        </li>
        <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一頁</a></li>
        <li v-if="cur == all"><a class="banclick">下一頁</a></li>
        <li><a>共<i>{{all}}</i>頁</a></li>
    </ul>
</div>

var pageBar = new Vue({
    el: `.page-bar`,
    data: {
        all: 20, //總頁數
        cur: 1,//當前頁碼
});

computed: {
        indexs: function(){
          var left = 1;
          var right = this.all;
          var ar = [];
          if(this.all>= 5){
            if(this.cur > 3 && this.cur < this.all-2){
                    left = this.cur - 2
                    right = this.cur + 2
            }else{
                if(this.cur<=3){
                    left = 1
                    right = 5
                }else{
                    right = this.all
                    left = this.all -4
                }
            }
         }
        while (left <= right){
            ar.push(left)
            left ++
        }
        return ar
       }
         
    }

來自 <https://www.cnblogs.com/moqiutao/p/6394681.html> 


分頁劃分：
```
splice((cur-1)*5,(cur-1)*5+5);
```

TODO：

TimeLine Page；
移動端適配；
密碼加鹽；

最後

這只是第一個版本，深知還有很多需要完善的地方，會繼續努力的。本來想嘗試一下如何上線和部署，無奈於騰訊雲的空間必須備案才能正常解析……

相關文章