采用vue+webpack构建的单页应用——私人博客MintloG诞生记

时间 2019-11-05

标签采用 vue+webpack vue webpack 构建单页应用私人博客 mintlog 诞生繁體版

原文原文链接

介绍

项目地址：https://github.com/jrainlau/MintloG （特别乱，参考就好-_-|||）

MintloG是我在五天以内彻底由本身开发的私人博客，前端技术方案采用了vue+vue-router+vue-resource+webpack的构建方案，后端技术采用了原生PHP+MySQL。博客彻底由ajax实现和后台的通讯，后台只提供了一个接口，经过传入不一样的参数实现不一样的增删改查功能。同时博客经过vue-router实现路由管理，经过路由的切换来切换功能，彻底没有页面的刷新和跳转，是百分百的单页应用。php

设计的灵感来自清新的薄荷绿，由于最近南方的回南天是在恶心，“清新”是最迫切的需求，因此采用了比较明亮的薄荷绿做为主色调。可是由于个人笔记本是12年买的老机器，屏幕比较差，不一样的角度看到的颜色也会不同，因此这里的薄荷绿具体绿成什么样我并不知道……css

下面来看看MintloG到底长什么样——前端

首页

首页主要有三个部分，分别是导航栏、文章列表、分类面板。vue

导航栏：左侧为“主页”按钮，能够快速回到首页；中间为MintloG的logo；右侧为编写按钮，点击之后能够切换到编写功能。mysql
文章列表：点击文章标题能够进入查看文章详情，点击时间或标签能够快速筛选；删除按钮能够直接删除该篇文章。jquery
分类面板：能够经过输入标题关键字，点击标签或者时间对文章列表进行分类。webpack

文章详情

点击“编辑”之后会进入编辑页面

能够对文章进行修改。git

撰写文章

点击右上角的编写按钮，进入编写页面，左边的输入窗口支持markdown语法，会在右边的窗口实时输出编译后的文字。

提交并提示成功

点击OK之后会跳回首页，看到新写的文章
github

查找功能

能够经过文章的标题、标签、修改时间进行查询

具体能够看地址栏上面的路由有啥不一样~web

删除功能

点击删除按钮并确认之后会删除对应文章，从新渲染列表。（此处懒得放图）

后台搭建

介绍完了MintloG的增删改查功能，咱们来看一下后台是如何搭建的。
我采用原生PHP编写后台，由于感受增删改查的功能很简单，就懒得用框架了（实际上是不会）。

我在conn_sql.php里面新建了一个类，专门用来连接数据库以及提供操做数据库的功能：

<?php
// 链接数据库（单例模式）
class ConnMySQL {
    protected static $_connect = null;
    protected $dbName;
    protected $dsn;
    protected $pdoObj;

    // 初始化
    private function __construct($host, $user, $pwd, $dbName) {
        try {
            $this->dsn = 'mysql:host='.$host.';dbname='.$dbName;
            $this->pdoObj = new PDO($this->dsn, $user, $pwd);
            $this->pdoObj->query("set names utf8");
        } catch (PDOException $e) {
            echo $e->getMessage();
        }
    }

    // 防止克隆
    private function __clone(){}

    // 返回一个实例化的PDO对象
    public static function makeConnect($host, $user, $pwd, $dbName) {
        if (self::$_connect === null) {
            self::$_connect = new self($host, $user, $pwd, $dbName);
        }
        return self::$_connect;
    }

    // 定义查询方法
    public function query($db, $sqlState = null, $sqlVal=null) {
        if(!$sqlState) {
            $_result = $this->pdoObj->query("select * from $db");
        } else {
            $_result = $this->pdoObj->query("select * from $db where $sqlState like '%".trim($sqlVal)."%'");
        }
        return $_result;
    }

    // 定义添加方法
    public function insert($db, $where, $what) {
        $_result = $this->pdoObj->exec("insert into $db ($where) values ($what)");
        return $_result;
    }

    // 定义删除方法
    public function delete($db, $where) {
        $_result = $this->pdoObj->exec("delete from $db where $where");
        return $_result;
    }

    // 定义更新方法
    public function updata($db, $what, $where) {
        $_result = $this->pdoObj->exec("update $db set $what where $where");
        return $_result;
    }

    // 断开和数据库连接
    public function destruct()
    {
        $this->pdoObj = null;
    }
}
?>

难点其实在于“单例模式”应该如何实例化一个PDO吧我猜……而后在option.php文件里面引入上面这个类，并经过获取$_POST[]获取参数并echo相应的返回信息。由于是ajax应用，涉及到跨域的问题，因此我在文件的开头加了这么一句话header("Access-Control-Allow-Origin:*");跨域问题妥妥的解决了。

后台那边搞定了，就经过phpMyAdmin建了一个MySQL数据库，创建了一张表，存放文章的各类信息，博客的基本功能其实就是在这张表上面折腾。

嗯，就是这么随性。

UI设计

“不懂设计的前端不是好老板”。
不懂能够学嘛~
因此在边学边作的状况下进行了个人第一次UI设计……因此若是看官以为MintloG长得丑请直接把砖头砸向我！我会把大家的砖头都捡起来而后拿去卖钱……
其实刚设计出来的时候更丑……

必定的UI规范仍是有的：统一以15px做为同类元素的间距，30px做为非同类元素的间距。页面的颜色不超过5个，元素经过阴影做为区分。
实在是很钟情google的MD风格，因此模仿的痕迹仍是至关重哈！虽然不怎么像。
由于懒因此没有用css框架也没有作成响应式。

前端构建

由于打算采用vuejs，因此采用了官方的vue-cli来生成项目，并安装了vue-router，vue-resource做为路由管理和资源请求工具。
文件目录以下：

--- /MintloG  项目主目录
    |
    --- /bower_component  第三方库
    |
    --- /src
        |
        --- /components  组件*.vue文件夹
        |       |
                --- blog-article.vue  文章详情
                |
                --- blog-head.vue  导航栏
                |
                --- blog-list.vue  文章列表
                |
                --- blog-search.vue  搜索框
                |
                --- blog-tags.vue  标签栏
                |
                --- blog-timeline.vue  时间线
                |
                --- browse-mode.vue  浏览模式父组件
                |
                --- toolbox.vue  编辑页工具栏
                |
                --- write-panel.vue  编辑页
        |
        --- main.js  入口js文件（路由控制）
        |
        --- App.vue  主程序文件
    |
    --- /lib  第三方文件
    |
    --- /image  图片资源

能够看到，MintloG是经过不一样的组件组合而成，这样符合组件化的思想，之后的维护和修改也会更方便。因为项目比较简单，因此没有使用vuex做为状态管理，而是采用了“子组件——父组件——子组件”的方式实现状态共享，具体实现方式能够参考个人一个demohttps://github.com/jrainlau/vuejs-demo

重点部分是main.js文件，它做为入口文件，规定了不一样路由的含义：

router.map({
    '/': {
      component: browseMode,
      subRoutes: {
        '/': {
          component: blogList
        },
        '/details/:artId': {
          component: blogArticle
        }
      }
    },
    '/edit/:mode': {
      component: writePanel
    },
    '/search/tag/:tag': {
      component: browseMode,
      subRoutes: {
        '/': {
          component: blogList
        }
      }
    },
    '/search/time/:time': {
      component: browseMode,
      subRoutes: {
        '/': {
          component: blogList
        }
      }
    },
    '/search/title/:title': {
      component: browseMode,
      subRoutes: {
        '/': {
          component: blogList
        }
      }
    },
})

而App.vue则做为父组件：

它加载了blog-head.vue做为导航栏，经过<router-view>切换“浏览模式”和“编辑模式”。

浏览模式browseMode.vue

它也有一个<router-view>，用来切换“文章列表”和“文章详情”，也就是blog-list.vue和blog-article.vue

编辑模式

它加载了toolbox.vue做为工具栏，而后能够进行文章的撰写与修改。这个编辑页面复用了我之前的一个项目Markcook，具体能够到这儿去看~
https://github.com/jrainlau/markcook

比较须要动脑的地方在于路由的嵌套对应组件的切换，以及每一次切换路由所须要进行的状态更新。不过vue-router把这些问题都考虑得很周到，仔细研究官方文档能解决大部分的问题。具体的组件嵌套及组合形式如图：

在ajax通讯方面，第一次使用vue-resource，感受比使用jquery相对复杂一点，尤为是配置项，须要全局配置请求体的json格式才能正常发送请求的参数：

import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.http.options.emulateJSON = true;

固然付出得多，获得的也多。vue-resource返回的response对象还会带有状态码、状态描述，请求头等等，方便更复杂的使用

在内容更新方面，因为是单页应用，不提倡刷新的操做，由于会产生没必要要的资源请求而浪费资源，因此经过“从新渲染”的方式实现内容更新。举个例子，在browseMode.vue里我定义了一个getList()方法，用于获取数据：

任何须要“刷新”的时候，我均可以经过this.$emit('getList')来触发这个方法，把内容从新渲染到页面上，实现内容更新的功能。

后记

写了那么多，总算是把MintloG的诞生给介绍完了，其实主要目的仍是做为本身成长的一个记录吧。在一周以内，从彻底不懂后台开发到掌握PHP和MySQL的使用，在5天以内完成后台的搭建，UI设计，前端构建，一个MintloG给个人收获远远大于知识的自己，个人毕业设计也终于完成啦！学以至用才是学习最好的方法，继续加油~