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

最后

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

    

    原文作者:Teemo
    原文地址: https://segmentfault.com/a/1190000015372388
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞