[前端]基于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；
移动端适配；
密码加盐；

最后

这只是第一个版本，深知还有很多需要完善的地方，会继续努力的。本来想尝试一下如何上线和部署，无奈于腾讯云的空间必须备案才能正常解析……