博客v0.1迭代记录

发布于 | 分类于 博客

博客v0.1.0完成了个人站点的首次整合，后端使用PHP提供数据接口，前端使用RequireJS管理Vue模块，并将原Hexo文章迁移到数据库。

目录 ​

│  .gitignore
│  index.php          后端入口文件
│  package.json
│  gulpfile.js        gulp
│  package.json
│  README.md
│
├─dist                打包生成以及项目依赖
│
├─APP                 后端数据接口
│      route.php      自定义路由
│      Home           前端项目，包含控制器和模型
│      Model          公用模型
│
├─Core                后端框架
│      Core.php       核心文件
│      Lib            基类库文件
│      Config         配置文件
│      Common         公用文件
│
├─html                前端页面
│
├─js                  前端JavaScript
│      base           基础文件
│      component      组件
│      blog           博客模块
│      lab            实验室模块
│      lib            第三方库
│      require.js
│
├─scss                样式表源文件
│
├─plugin              博客迁移插件

TODO ​

  • [x] 文章目录
  • [x] 代码高亮

说明 ​

前端：

  • 使用Require.js管理前端模块，使用r.js进行模块打包，使用gulp管理整个项目
  • 使用了包括Vue.js,Vue-router,Vue-resource，基于Vue实现了包括数据分页，博文目录等多个组件
  • 基本样式使用Hexo下的Next主题作为参考，使用Rem布局，使用BEM进行样式命名，并实现了响应式导航，动态按钮等UI组件
  • 使用maked.js和highlight.js，在客户端对markdown文档转义及代码语法高亮。

后端:

  • 封装了一个简易的MVC框架
  • 实现了自定义路由，模型类，控制器类等

迁移： 由于需要将之前的Hexo博客文档迁移到数据库，因此编写了一个插件hexo2mysql，读取_posts下的全部markdown文档，获取相关的字段信息，拼接成Mysql语句，最后导入数据库。

开发记录 ​

下面是整个项目的开发记录。

2016-12-31 ​

今天是2016年最后一天，准备写一个很酷的个人站点，整合之前的100animation和css-utils还有shymeanblog这三个项目，赶在跨年前把环境搭好了，新年快乐。

2017-1-1 ​

添加了_flex.css，参考之前flex.css这个项目的声明式语法，，使用scss重新写了一遍，修改了部分属性调用方式，并在子项上添加了网格系统，移除了全部的快捷属性命令（top，bottom等）。

整个项目中的图标，使用的是阿里的iconfont

2017-1-2 ​

整理了之前仿着写的PHP框架，当时还没有写完，现在一并把坑填了吧。 框架的大致流程是： 入口文件 -> 核心文件 -> 路由类解析路由 -> 加载对应控制器，调用方法 -> 方法中调用模型获取数据 -> 加载对应视图并赋值

节前买了两本PHP的书还没到，接下来打算先把PHP的基础搞好，不然轮着用TP,laravel写东西心里都是虚的。

2017-1-9 ​

重新梳理了框架的流程，打算只在后端中转路由和提供数据接口，其余的逻辑操作放在前端处理，打算使用Vue和Require来做，并没有这方面的经验，就当是瞎折腾吧。

2017-1-12 ​

最近在实际项目中使用声明式布局的flex，感觉这种声明式布局语法并不是十分合适，不太恰当地讲，跟写行内并没有什么区别。 现在实践得到的使用方式还是用混合器和继承来弄吧，另外，貌似flex的兼容现在确实还不错了，在iphone5上面，加上前缀都能跑起来，除了flex-wrap有点问题。 因此打算重新写样式表和页面，使用rem和flex来布局，整合了scss文件夹，开动吧~~

2017-1-21 ​

已经完全确定了使用的技术框架和逻辑流程:

项目逻辑 项目主要分为了“实验室”，“博客”和“书架”三个板块：

  • 实验室包括学习过程中的一些尝试和练习，包括之前100animation中的部分demo
  • 博客包括学习过程中的笔记和思考，将之前hexo博客迁移过来
  • 书架包括阅读书籍和读后感。

技术框架

  • 后端使用原生PHP搭建的简单框架，提供数据接口；
  • 前端使用Vue框架，通过Vue-resource请求数据，通过Vue-router请求数据，然后再渲染页面

2017-2-2 ​

过完年啦~~今天使用准备使用vue-route搭建整个博客： layout.js用于搭建整体布局，然后定义各个页面的组件，在每个组件初始化时向后台请求数据，在route.js中配置路由并加载相关组件。 整个项目都是在摸索中前进的，总之，又将整个项目文件重新折腾了一番。

vue-route的使用流程如下：

  • 使用router-link指定路由链接
  • 定义路由数组，并作为VueRouter构造参数实例化路由对象
  • 在vue实例的router属性中关联路由对象
  • 在vue实例的视图中定义router-view作为路由跳转加载页面的容器

最主要的步骤是定义路由数组，需要指定路由名称以及每个路由对应的组件。

2017-2-3 ​

假期又重新翻阅了《Mysql必知必会》，收获是：

  • 数据库语句由子句组成，子句又分为必需子句和可选子句
  • 必需子句实现增删改查的功能，可选子句用来修饰必需子句，即修饰增删改查的结果
  • 可选子句之间的顺序需要按照一定的规则进行搭配，否则会出问题

根据这三点收获重新设计了模型类，主要包括

  • 相关的私有变量
  • 功能方法如query,sql等
  • 必选子句如select,delete等CURD方法
  • 可选子句如distinct,orderBy等

现在项目的进行方式是：在前端定义好相关组件，然后再组件mounted期向后端请求该组件所需的数据，然后再渲染出来，因此模型类的方法根据需求正在逐步完善。 由于现在控制器的方法只提供单独的数据，因此之前打算在独立的表模型类中提供数据接口，然后在控制器方法中处理并返回数据的方法有一些累赘，直接在控制器中调用模型基类的方法直接获取和处理数据就好了，如何取舍应当实践几天再做决定。

2017-2-4 ​

今天能把整个项目的博客部分搞完，只不过还用的之前Laravel搭建的后台。感觉后端用Vue来搭建会更加方便。

由于需要在前端处理分页，因此整理一下整个思路：

  • 初始化时由后台传递数据总数和单页数量
  • 在pagination组件中根据这两个数据生成页面和路由链接，在路由链接中传递当前页面到后端
  • 后端根据当前页面和单页数量计算偏移量并重新输出数据

遇见的问题是路由加载的模块都在当前页面，根据参数进行区分，造成组件实例被复用，组件的生命周期钩子函数无法被重新调用，查文档发现了解决办法: 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象。

2017-2-6 ​

整个项目的博客前端部分已经完成，今天开始搭建项目的后台。后台是用样式框架还是自己写呢...好吧，直接用Bootstarp吧，也不用ACE了。 额，我最后还是打算自己写一个样式库。

2017-2-10 ​

这两天又重新在纠结CSS的文件管理和样式命名，最终下定决定使用BEM。然而后台还没有开始写，由于之前的测试数据太少了。趁着今晚的功夫用Node写了一个脚本，将之前hexo保存在本地的_posts目录下的博客文章全部导出到一个sql文件中，然后移动到数据库。 遇见的一个小问题是没有转义内容中的引号和双引号，导致插入数据库出现错误。将长文本插入数据库是一件让人头疼的事情，我发现不仅仅有单引号和双引号，前面的博客中还有各种转义符，怎么能在保持博文原样的基础上顺利插入数据库呢？最后我使用了sqlstring这个包

npm sqlstring

整个博文迁移的脚本打包成hexo2mysql模块放在plugin文件夹下的hexo2mysql中，可以直接在项目中通过require('hexo2mysql').transform('_posts')调用。

2017-2-11 ​

今天发现归档页面应该也需要分页，之前只考虑了首页的分页。尽管讲pagination拆分成了组件，之前的组件耦合有点严重，数据全部依赖于`page``，但是又与当前组件的属性相关，因此剥离部分属性通过props属性传递，page属性只负责生成分页数量即可，现在的组件调用形式是：

<pagination :page="page" :active="active" name="articleList"></pagination>

其中，this.page是由后台传递的配置参数，包括total总数量和num每页数量,this.active是通过路由获取的当前页码，name就是当前路由页面的字符串名称。

至此，整个博客功能基本结束，明天调整一下样式就可以了。由于直接是备份数据库过去，貌似现在也不是很需要后台。明天测试一下那边的数据库是否支持远程连接，如果可行的话，基本上可以完全还原hexo哦。

2017-2-12 ​

今天想起来，文章的目录还没有写。由于打算将目录也按照Hexo的排版放在右侧侧边栏，考虑到标题的长度和缩进，决定只生成三级标题。整个逻辑流程是： 在进入文章详情时发送请求获取数据，通过正则提取标题并存放在数组中，然后将这个数据传送到侧边栏组件，然后渲染出数据。

遇见的困难是侧边栏组件跟文章内容组件的数据传递的问题，查资料获取到的一种方式是VueX，这个我并没有了解过。我采用的方式还是使用articleDetail通过事件传递给blog实例，然后blog再通过事先绑定的props传递给侧边栏。这样做只能算是勉强实现了功能，待我日后回来填坑。

第二个问题是需要将目录与侧边栏原本的站点信息合并成一个tab组件，由于tab组件的切换面板内容是动态的，并不能写死在组件当中，但是为了能够编译模板，也不能定义成固定的HTML字符串。这个问题困惑了好一段时间。突然一想，这不就是slot去实现的功能吗？之前也没有使用过slot，通过传入的数组遍历传入slot的name，就可以实现这个tab组件了。

第三个问题是在vue-router中锚点的使用问题，本来打算在目录中使用锚点来实现目录跳转，发现路由把锚点解析到了其他地方，最后使用事件绑定的方法来完成这个功能。

goAnchor(val){
    val = val.replace(/\d\./g,'');
    val = '#' + val.trim();
    var anchor = document.querySelector(val);
    document.body.scrollTop = anchor.offsetTop
}

哈，这下子基本上基础的功能都做完...

2017-2-14 ​

今天，替换了新的rem布局方式并重新调整了部分样式名和样式。接下来搭建实验室的页面架构，实验室的主要内容为之前的100animation项目的内容，现在犹豫的是将demo代码存在数据库还是直接写成静态页面更合适。

2017-2-16 ​

为文章详情页面添加了前一篇和后一篇，这里并没有比较好的筛选条件，只能先从数据库查询当前ID的文章，然后根据返回数据的created_at字段分别查询前一个和后一个数据然后返回id和标题，感觉在一个接口中连续查询同一个表3次并不是很正确的做法。 另外还需要完善的是文章的评论功能，原本打算使用多说，后来一想干脆也自己写一个吧。 实验室那里如何处理暂时还没有好的想法，今天看了一下之前的100animation的项目，有的实验确实很初级，到时候只能把几个拿得出手的demo放上去，哈哈。

2017-2-17 ​

发现了一个叫impress.js库，十分酷炫，用来做关于页面真是太合适不过了，只是需要自己去定义过渡，今天看了看源码，然后重新去查了CSS3的形变动画，准备晚上搞定。

另外，之前写markdown一直没有严格按照格式书写，代码块也一团糟，前面的文章还存在一些问题，现在只能手动去排查了。最后，还是决定使用highlightjs来高亮显示文章中的代码，貌似样式也可以自定义，没有时间去看详细的文档，这事儿得先放一放。

2017-2-18 ​

之前使用require管理js文件的时候，由于担心后续的依赖文件存放发生变化。因此在js根目录下新建了一个config.js来存放全部脚本，然后再blog.js文件中先加载该文件，然后在回调函数中去加载vue等项目依赖组件。这样的问题是页面上会发送多个js请求，到项目块结束的时候，决定使用r.js来合并压缩相关的组件文件（至于vue系列和相关的一些插件决定使用第三方cdn来解决），折腾了一天终于搞定了。

遇见的几个问题是

  • 不能使用let关键字，会报错，改为var就不会了，此外还有比如`这些ES6的特性都会出现错误，导致文件没有压缩，不过好歹是合并在一起了，应该先进行一次babel转义才行
  • 由于存在build.js文件，因此之前的config.js已经不需要了，且不知道为何在config中定义的模块id的文件不会被合并导致页面会直接加载相关文件。我猜测的原因是由于之前的config.js文件中只使用了require.config()方法进行配置，而没有显示的使用define([],cb)，导致在blog文件中require(['config'])的时候不加载任何依赖（好吧这是我瞎扯的）
  • r.js是根据build.js文件中的name属性所表示的文件来进行相对路径查询的，而require.js中，如果没有指定baseUrl，是根据页面所在的位置的相对路径来进行查询的，这里就有点坑了，因此最好在需要合并的那个文件中显式声明config，包括baseUrl和paths。

2017-2-21 ​

使用vue-resocure中间件interceptors搭建请求数据时的加载页面，为了防止网速过快loading层快速切换导致的闪屏，使用了animation-delay属性

scss
@include animation(shadow-show 0.01s linear 2s forwards);
@mixin shadow-show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

具体的延迟时间我是瞎写的一个2s，感觉太长了。等最后再做调整吧。

2017-2-23 ​

关于实验室的模块，决定采用之前100animation的形式，直接使用静态页面。另外，最初的设计是使用PHP管理整个网站的路由，由于后面使用了Vue和静态页面，因此现在后端只处理数据请求就行了。整个网站的路由需要重新设计一下，现在路由形式Home/Index/index这样有点丑啊。

另外，考虑到实验室需要新增很多脚本文件，再加上r.js的使用，现在将js文件夹设置为js/blog/page这样形式的树状结构，

  • 在版块目录诸如blog下面包含入口文件，r.js和build.js文件。
  • 在page文件夹下包含版块所需的脚本文件。
  • 每个版块合并后的*-built.js存放在js/dist文件夹下

2017-2-25 ​

今天对整个项目的文件目录重新管理，并开始修改后端的路由，最终目的是实现在URL路径与控制器映射上的完全分离，类似于Laravel那样优雅的自定义路径。

倒腾了两个小时，终于搞定了最基础的模型，现在可以自定义URL了，类似于

Route::bind(['/','index'], function(){
    return include(__HTML__.'index.html');
});

Route::bind('blog_index', '\App\Home\Controller\BlogController@blogIndex');

主要原理是使用了一个静态变量保存绑定的路由，然后跟据$_SERVER_URI来读取相关的控制器方法或者是执行相关的闭包。由于对PHP里面的闭包不熟悉，中间专门去查了一下，发现用法实际上跟JS貌似没有啥区别。

之前采用TP里面的路由构造，产生的问题是像这样的单页面应用，也必须在控制器里面单独声明一个方法加载视图文件。由于index.php的存在，请求静态资源需要把整个路径都显式声明，现在这种绑定路由的方式还是比较舒服的，尽管需要声明绑定。把这个玩意折腾完，有必要深入学习Laravel了。

#Vue #RequireJS #PHP

你要请我喝一杯奶茶？

版权声明：自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。