從零到一開發博客后台管理系統（一）

從零到一開發博客后台管理系統

1.項目說明

本項目為前端項目，使用vue + vue-router + element-ui，后端對接博客園的開放api接口實現對應的功能。

2.項目模塊划分

views 負責所有的頁面組件
utils 封裝所有的工具類
mock 模擬數據
axios 通訊方法封裝

3.搭建項目

vue init webpack blogcrm

根據提示一步步選擇下來項目就搭建好了，接下來安裝需要的插件，關於vue腳手架搭建項目的詳細方法請自行百度

cnpm i axios -S
cnpm i mockjs -S
cnpm i element-ui -S

其他插件我們以后用到了在去安裝，關於插件的安裝其他方式自行百度

我們直接在main.js文件中引入element-ui，這樣我們可以全局使用這個ui框架了，很簡單，只需三行代碼

// 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 elementUI from 'element-ui'  //新增
import 'element-ui/lib/theme-chalk/index.css'  //新增
Vue.config.productionTip = false
Vue.use(elementUI)  //新增
    /* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

接下來我們進入項目目錄的src文件夾下，創建三個文件夾：axios、mock、utils，將components文件夾改名為views，沒錯，就是我們的四個主要模塊，此時我的項目結構是這樣的。

接下來打開router文件夾中的index.js，修改引入的文件路徑

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/views/HelloWorld'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }]
})

現在讓我們的項目跑起來，看有沒有問題，可以看到我們的項目已經運行了，沒有任何問題

現在打開瀏覽器就可以看到vue的頁面了

到此位置，我們的項目就搭建完畢了。

4.頁面簡單設計

我們先把一些公共的頁面做出來，目前就登錄頁，404頁面，home頁面這三個，以后需要在加。

4.1登錄頁面

先做登錄頁面比較簡單

我們直接把helloworld.vue改成login.vue，內容和尋常的登錄頁沒有什么不同，只是用element-ui的組件標簽要加el前綴，最后的結果是這樣的。

<template>
  <div class="login">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="賬號">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密碼">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登陸</el-button>
        <el-button @click="back_home_page">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      form: {}
    };
  },
  methods: {
    login() {
      console.log("login");
    }
  }
};

#app {
  position: relative;
}
.login {
  width: 18.75rem;
  height: 12.5rem;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

現在已經有了基本的登錄頁面了，我們還需要改一下我們的路由配置，在router下的index.js中將helloworld同樣改成login

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/views/login'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'login',
        component: login
    }]
})

我們來看一下效果

納尼！ 這是什么鬼？ 別着急，我們刪除一些代碼就好了。

找到src下的App.vue，刪除這一行代碼

<img src="./assets/logo.png">

順便把下面的樣式也刪掉，我們用不着這個

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

對app樣式初始化一下

html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

現在重新來看我們的登錄頁面，就好了

還是有點詭異...

又打開頁面看了下，覺得登錄按鈕放在左邊看着別扭，所以調整了一下登錄按鈕的位置，看起來是這樣的

到此為止，一個簡單的登錄頁面已經做好了，覺得丑的自己寫樣式，到滿意為止

4.2NotFound(404)頁面

在views下新建404.vue文件，並在router/index.js中配置路由

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/views/login'
import NotFound from '@/views/404'


Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'login',
            component: login
        },
        {
            path: '/404',
            name: 'NotFound',
            component: NotFound
        }
    ]
})

路由配置都是一樣的，隨着路由配置越來越多，之后路由配置不在貼代碼上來，但會說明組件路由的path

然后開始設計我們的404頁面,怎么簡單怎么來

<template>
  <div class="not-found">
    <section class="center">
      <article>
        <h1 class="header">404</h1>
        <p>抱歉! 您訪問的資源不存在!</p>
      </article>

      <article>
        <p>
          請確認您輸入的網址是否正確，如果問題持續存在，請發郵件至
          <em>[e-mail]</em與我們聯系。
        </p>
      </article>
      <article>
        <ul>
          <li>
            <a href>返回首頁</a>
          </li>
        </ul>
      </article>
    </section>
  </div>
</template>

body {
  background-color: #0a7189;
  color: #fff;
  font: 100% "Lato", sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
}
a {
  color: #75c6d9;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 50px;
}
li a:hover {
  color: #fff;
}
.center {
  text-align: center;
}
/* 404 Styling */
.header {
  font-size: 13rem;
  font-weight: 700;
  margin: 2% 0 2% 0;
  text-shadow: 0px 3px 0px #7f8c8d;
}
/* Error Styling */
.error {
  margin: -70px 0 2% 0;
  font-size: 7.4rem;
  text-shadow: 0px 3px 0px #7f8c8d;
  font-weight: 100;
}

好了，我們來看一下效果吧

老規矩，嫌丑的自己在寫樣式啊，或者網上找一些模板,那么我們的404頁面也到此結束了

4.3home頁面

home頁面使我們后台管理系統的主要頁面，我們使用經典的布局模式，由top-nav-main三個部分組成

今天我們只完成這個布局就可以了，至於具體內容，明天在說

在views文件夾下新建home文件夾，在該文件夾中新建index.vue、top.vue、left.vue,main.vue

index.vue負責組織top，left，main三個組件，top負責頂欄，left負責左側導航欄，main負責各項內容的展示

left，top，main中添加標識符 類似於這樣

<template>
  <span>this is left</span>
</template>

現在開始編寫home組件， 結果是這樣的

<template>
  <div class="home">
    <div class="top">
      <top></top>
    </div>
    <div class="main">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <right></right>
      </div>
    </div>
  </div>
</template>

import top from "@/views/home/top";
import left from "@/views/home/left";
import right from "@/views/home/main";
export default {
  components: {
    top: top,
    left: left,
    right: right
  }
};

.home {
  height: 100%;
}
.top {
  height: 3.8125rem;
  background: rgb(30, 32, 32);
  line-height: 3.75rem;
  color: aliceblue;
  font-size: 2rem;
}
.main {
  position: absolute;
  top: 3.8125rem;
  bottom: 0;
  left: 0;
  right: 0;
}
.left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 12.5rem;
  float: left;
  background: rgb(226, 226, 226);
}
.right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 12.5rem;
  float: right;
  background: rgb(255, 255, 255);
}

在router/index.js中添加home頁面的路由："/",那么現在我們的頁面看起來是這樣的。

home頁的布局已經完成了，今天就先到這里，記錄一下時間，5月22日 00:49

有疑問或者意見的朋友請留言哦