从零到一开发博客后台管理系统
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 {
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%;
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;
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
有疑问或者意见的朋友请留言哦