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

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；
移動端適配；
密碼加鹽；

最後

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