從零到一開發博客後臺管理系統（一）

時間 2019-11-24

標籤開發博客後臺管理系統简体版

原文原文鏈接

從零到一開發博客後臺管理系統

1.項目說明

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

2.項目模塊劃分

views 負責全部的頁面組件
utils 封裝全部的工具類
mock 模擬數據
axios 通信方法封裝html

3.搭建項目

vue init webpack blogcrm

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

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

其餘插件咱們之後用到了在去安裝，關於插件的安裝其餘方式自行百度vue

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

// 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，沒錯，就是咱們的四個主要模塊，此時個人項目結構是這樣的。ios

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

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-router

如今打開瀏覽器就能夠看到vue的頁面了npm

到此位置，咱們的項目就搭建完畢了。element-ui

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>asiaier@163.com</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

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