vue + node模仿简书

近期公司的事相对少了些，就打算学学node，毕竟一个不会node的前端不是一个好前端，不过发现自己学的不怎么样，数据库建表也是一塌糊涂，但是不管怎么说，项目也算是上线了，只能后期慢慢完善我那自己都不敢看的代码。

在这里写这篇博客，只是记录一下，我在实现过程中碰到的坑。

在这个项目里主要使用的是vue + node + mysql（他们都说节点配mongoDb，我就是喜欢用mysql），样式和排版是仿照简书实现的。

大致功能包括登陆，个人中心，博客列表，博客详情，发布博客，评论和点赞，基本的博客功能算是实现了。

线上地址：圈子

账号：mory

密码：123456

一，涉及知识点

• VUE
• vuex
• axios
• iView
• mavon-editor
• crypto-js
• node

二，项目结构

前端的项目结构

后端服务的项目结构

三，实现

     1.登陆

登陆页面没什么好说的，不过只是自己练练手，暂时未提供注册功能。

添加了手机号检测，和密码长度的检测：

const validateMobile = (rule, value, callback) => {
  let mobileReg = /^1[3|4|5|7|8][0-9]{9}$/
  if (value === '') {
    callback(new Error('请填写手机号'))
  } else if (!mobileReg.test(value)) {
    callback(new Error('手机号错误'))
  } else {
    callback()
  }
}


regPasswd: [
          {required: true, message: '请填写密码', trigger: 'blur'},
          {type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
        ]

    2.首页（博客列表页）

头部暂时不提，下边会单独说，先说列表页。

实际上列表页就是一个循环展示的过程，只是为了更好的展示，图片使用了懒加载的方式，使用了VUE-lazyload这个库，对图片进行懒加载。文章下方的浏览量，评论量和点赞量只是一个展示，并不可以在列表页做操作，而且阅读更多功能并未添加，默认返回所有列表，当然搜索关键字除外。

    3.博客详情

博客详情里的博客内容，是存在数据库表里的一段HTML，使用VUE的V-HTML展示，图片依然使用的懒加载。并不提供加入圈子的功能，但是点赞的功能是可以。

4.发布博客

发布博客使用的mavon-editor库（https://github.com/hinesboy/mavonEditor），刚开始不太懂后端的一些很明显的问题，我把整个内容直接存到数据库表，但我发现图片是的base64，数据太长，导致存入数据库表失败，然后我就把图片单独上传，然后把返回的新的地址替换掉当前的图片地址。

保存数据，使用正则匹配

// 保存方法,保存发布文章的数据
    saveNote (value, render) {
      this.render = render
      if (render) {
        // 匹配所有的img标签，返回img标签数组
        let imgStr = render.match(/<img[^>]+>/g)
        // 清除换行符
        let data = render.replace(/[\r\n]/g, '')
        // 获取p标签里的内容
        let pattern = new RegExp('<p.*?>(.*?)<\/p>', 'i')
        this.thumbnailArticle = data.match(pattern)[1]
        if (imgStr) {
          this.relatedImg = imgStr[0].match(/src=[\'\"]?([^\'\"]*)[\'\"]?/i)[1]
          imgStr.forEach((item, index) => {
            if (index === 0) {
              this.thumbnailArticle = data.substring(3, data.indexOf(item))
            }
            // data = data.replace(item, ' ')
          })
        }
        if (!this.title) {
          this.title = '无标题文章'
        }
      } else {
        this.$Message.warning('内容不能为空')
      }
    }

5.头部

我是把整个项目分离开，包括header，content，footer。

搜索框只在首页显示，通过路由判断实现。

写文章按钮的显示，通过用户权限判断是否显示。

暂未实现消息实时推送。

点击用户头像可选择进入个人中心和退出登陆。

6.个人中心

 

个人中心实际和列表页一样，只是多了一些个人文章信息的统计。

圈子模块暂未实现。

四，总结

后端服务在这里就不谈了，写的还是很水的，就是对数据库表的一些操作。前端实现还是比较简单的，主要是在节点实现上费了一些功夫，毕竟第一次学习嘛（自己给自己找的借口），不过写的怎么样，也是自己的第一次实现，以后会慢慢优化的。