前端界面设计

用了Bootstrap之后开发效率果然非常高，在页面美化这部分没有耗费太多精力，而且就算像我这样没学过UI设计的人写出来的界面也比较好看。看来Bootstrap能成为使用最广的前端框架，并不是没有原因的。

直接上效果图：

首页 首页 博文 归档 登录 后台管理 添加博文

用这么多的英文、只用黑白两种颜色、简单与扁平化的风格是想做跟上一个项目完全不同的感觉，毕竟这个项目跟上一个PHP写的是走了两个极端——一个是多页面前后端不分离，一个是单页面前后端分离。

当然这个风格也是Bootstrap本身的特点，反正比我自己纯手写的页面是好看多了。

组件

目前的组件列表如下：

每个组件的详细说明：

• Add.vue：添加博文页面
• Archive.vue：归档页面
• ArchiveArticle.vue：归档页面的文章列表
• Article.vue：主页使用的文章列表，预计一页显示15篇文章
• ArticleDetail.vue：博文页面（也就是文章的详细内容）
• Category.vue：主页使用的目录组件，预计显示10条最新的文章的链接
• Delete.vue：删除文章的组件
• Header.vue：页面头部的灰色部分
• HelloWorld.vue：用vue-cli构建项目时默认生成的组件，现在留作测试用途，完成之后会删掉
• Login.vue：登录页面
• Logout.vue：销毁Session或者Cookie实现登出的组件
• Main.vue：整个主页
• Manage.vue：后台管理页面
• NavBar.vue：页面头部的导航栏
• PageNavgation.vue：首页的翻页条，以后可能会加到别的页面中

将整个网站拆解成这么多组件是为了解耦（降低耦合度）和提高每个组件的可重用性，也方便在开发的时候查错改错、为组件增加新功能。当然这是第一次用vue-cli开发，也有很多使用等方面的问题不大明白，而且目前我也弄不大清楚是尽可能拆解出更多的组件好还是一个页面一个组件更好，这个问题以后慢慢考虑吧。

配置需要引用的库

目前有Bootstrap、axios和VueAxios。

main.js（整个应用的入口js文件）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import 'bootstrap/dist/css/bootstrap.min.css'

Vue.use(axios, VueAxios)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

vue-router的配置

目前只想到文章和删除需要动态id，以后如果有需要动态id的也会在里面改。

这个只是目前的配置，随着开发进程的推进，会继续更改。

index.js（vue-router的配置文件）：

import Vue from 'vue'
import Router from 'vue-router'
import Manage from '@/components/Manage'
import Main from '@/components/Main'
import Login from '@/components/Login'
import Archive from '@/components/Archive'
import ArticleDetail from '@/components/ArticleDetail'
import Add from '@/components/Add'
import Delete from '@/components/Delete'
import Logout from '@/components/Logout'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main
    },
    {
      path: '/manage',
      name: 'Manage',
      component: Manage
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/archive',
      name: 'Archive',
      component: Archive
    },
    {
      path: '/article/:id',
      name: 'Article',
      component: ArticleDetail
    },
    {
      path: '/add',
      name: 'Add',
      component: Add
    },
    {
      path: '/delete/:id',
      name: 'Delete',
      component: Delete
    },
    {
      path: '/logout',
      name: 'Logout',
      component: Logout
    }
  ]
})

页面跳转的实现

点击链接实现页面跳转

因为是用vue-cli做的单页面应用，所以所有的页面跳转都由vue-router完成，也就是完全放弃了<a></a>标签而用<router-link></router-link>标签来代替（其实<router-link>渲染出来就是<a>，所以可以用<a>的样式，在CSS的部分如果要控制<router-link>的样式，选择器也可以直接用元素选择器a { }）。以导航栏为例：

NavBar.vue（未完成）

<!--
      导航栏组件，显示前往首页的按钮、后台管理按钮、登出按钮等
      TODO: 开发根据登录情况显示不同按钮的功能
-->
<template>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark topnavbar">
    <router-link to="/" class="navbar-brand">NullP0</router-link>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <router-link to="/archive" class="nav-link">Archive</router-link>
      </li>
      <li class="nav-item">
        <router-link to="/add" class="nav-link">Add</router-link>
      </li>
      <li class="nav-item">
        <router-link to="/manage" class="nav-link">Manage</router-link>
      </li>
      <li class="nav-item">
        <router-link to="/logout" class="nav-link">Logout</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
  export default {
    name: 'NavBar',
  }
</script>

<style scoped>
  .navbar {
    position: fixed;
    width: 100%;
    z-index: 100;
  }
</style>

在这里，导航栏上所有的链接的本质都是路由跳转。

至于页面中独立的按钮（比如首页中的阅读全文按钮），将<router-link>加上按钮的class就可以把链接渲染成按钮。

完成某操作后页面强制跳转

以登出组件为例，如果登出之后没有任何操作，页面将会停留在空白（因为预计登出组件不会显示任何东西，仅仅是销毁Cookie或者Session之后弹出一个框），所以需要一个强制跳转。可以使用this.$router.push()函数完成：

Logout.vue（未完成）

<!--
  登出组件
  TODO: 开发登出功能
-->
<template>
    
</template>

<script>
  export default {
    name: 'Logout',
    mounted () {
      alert('登出成功！')
      this.$router.push('/')
    }
  }
</script>

<style scoped>

</style>

获取动态id并根据动态id返回不同内容

如果要根据动态id显示不同的内容（比如根据文章编号的不同显示相应内容），除了要在vue-router的配置文件里配置上动态id，还需要在相应的组件里添加获取动态id的方法。以文章页面为例：

ArticleDetail.vue（未完成）

<!--
  阅读文章的页面
  TODO: 根据动态id显示不同文章
-->
<template>
  <div>
    <v-header></v-header>
    <div class="container">
      <div class="col-12 border bg-light main-body">
        <div class="article">
          <h1 class="display-4">{{ detail.title }}</h1>
          <small>yyyy.mm.dd - hh:mm:ss</small>
          <hr class="my-3">
          <pre>{{ detail.content }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from './Header'

  export default {
    name: 'ArticleDetail',
    components: {
      'v-header': Header,
    },
    data () {
      return {
        detail: {}
      }
    },
    mounted () {
      this.detail = this.getid(this.$route.params.id)
    },
    beforeRouteUpdate (to, from, next) {
      this.detail = this.getid(to.params.id)
      next()
    },
    methods: {
      // TODO: 从后端接收数据并显示
      getid (id) {
        switch (id) {
          case '0' :
            return {
              id: 0,
              title: 'This is a title.',
              content: 'This is content.\n' + '    中文测试。'
            }
          default :
            return {
              id: -1,
              title: 'No data',
              content: 'No data'
            }
        }
      }
    }
  }
</script>

<style scoped>
  .main-body {
    padding: 40px;
    margin: 30px;
  }

  pre {
    font-family: 'DengXian', 'DengXian Light', sans-serif;
    font-size: 1.1em;
  }

  h1 {
    display: inline;
  }

  small {
    margin-left: 20px;
  }
</style>

实际效果：

编号为0的文章 编号为1的文章

当然，虽然现在文章内容是写死的，但是后台开发完成后文章内容就可以动态地使用Ajax从服务器端获取了。

将文章内容放在<pre></pre>而不是<p></p>中是为了保留空格与换行，不让文章本身的结构混乱。

这部分代码太多没法全都放上来，开发完成之后我会把整个项目传到GitHub，详细的代码可以到时候在GitHub上查看。