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

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

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

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