element-ui搭建博客后台管理系统（一）

从零到一开发博客后台管理系统

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>[email protected]</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

有疑问或者意见的朋友请留言哦