Vue:(1)从80%搭建个人管理后台

前言

如果说有一个自己的服务器是一个后台程序员的浪漫,那么有一个个人的后台管理则是一个前端的浪漫。大大小小的仪表盘,各种丰富多彩的图表,形形色色的表单。每一个男孩子小时候都想着有一个自己的秘密仓库,里面有很多的工具,管理着自己所有的秘密。只是后来长大了,那些小时候的愿望不知道丢到哪里去了。还好作为一个程序员,虽然没有了自己的秘密仓库,但我还是能搭建一个管理后台,管理自己的所有网站。

传统的管理后台使用JQ+iframe的形式制作,这样导致了会有许多html页面,项目的结构复杂,维护起来也不方便。看过了许多JQ的后台管理,总觉得颜色动画有些生硬,色彩搭配等都不太适合我的口味。因此决定搭建一个基于Vue的管理后台,先看看效果图。

CoreUI.gif

在线预览地址

CoreUI

CoreUI是基于vue-admin的一个后台管理模板,完全的前后端分离的SPA应用。理论上来说,通过使用elmentUI完全从0手动搭建一个管理后台,但是对于新手来说,还是建议通过一个现成的模板进行搭建,通过对这个模板的结构熟悉,更有利于自己对管理后台结构的掌握。 CoreUI基于vue-admin,而vue-admin也是基于vue-bootstrap的。所以这个系列的后台模板都是响应式的。管理后台本身没有集成vuex,也没有ajax请求库,因此自己开发的时候需要手动添加。

Get Start

下载项目

该系列支持React Angular Vue,我们选择Vue版本,下载以后会有两个文件夹,其中Ful_Project是完整的演示包,Starter是一个骨架包,本文将从Full_Project去分析管理后台的框架,将在后面的文章中讲解如何实现自己的业务逻辑。

项目结构

项目结构.png

这个是整个的项目结构,一个标准的Vue工程。

目录

内容

需要修改

components

存放制作好的一些通用组件

基本不修改

containers

展示内容的容器,我们自己写的内容在这个容器展示

基本不修改

router

路由页面,建议自己写单独拆分routes

经常修改

views

具体的业务逻辑实现,就是containers展示的内容需要自己写

经常修改

_nav.js

核心的导航,在下面会详细介绍

经常修改

项目页面拆分

页面结构.png

结构区域

内容

1

brand,一个图片,在scss文件中修改 url地址,记得修改size切换大小

2

顶部导航,对应components里面的header,这里面还包含了点击头像的下拉列表

3

页面内部导航,属于containers里面的full,根据当前路由动态生成,名字是route的name属性

4

左侧的核心导航,对应components下sidebar组件,通过_nav.js动态生成

5

头像下拉列表,不是一个单独组件,属于头部导航

6

页面主题,自己要在这里实现要展示的内容,注意,这里包含了3区域的路由名字,以及自带的一个padding属性。自己写的页面是在padding属性之内的内容,当然也可以通过修改默认scss修改padding

7

右侧列表,对应components下的aside组件

8

页面没有标记出来,在6的底部。一个footer组件

_nav.js

_nav.js.png

nav.js导出了一个对象数组,组件通过这个数组对象动态的生成了左侧的选项列表。每一个对象都可以有自己的属性,并且根据属性决定形态。url表示点击后跳转的连接,配合vue-router进行跳转,icon表示要显示的图像,因为是基于bootstrap,默认包含了fontawsome,因此这里可以写fontawsome的名称,接下来我们看看具体的组件怎么实现

组件实现.png

根据前面通过JS导出的导航对象属性,进行判断,是否是titile 分割线 link,显示为不同的形式。

link组件.png

一个link组件内部实际上就是一个router-link,里面i标签展示前面的图标,就相当于平时写fontawsome一样。 这就是我认为整个后台管理模板中核心的部分,动态生成左侧的导航。

样式部分

scss.png

模板使用scss进行样式编译,如果不会用也没有关系,你完全可以在自己的组件中写样式。当然你是一个bootstrap的老手,你完全可以使用类名的方式修改自己的业务组件。当然如果对现有的样式不满意也可以直接在里面修改布局的颜色搭配那些,但最好不要在这里面写和业务相关的样式

总结

以上就把一个基于vue-admin的后台管理模板拆分完了,我也看过一些其他的模板,基本都是大同小异。因此掌握了一个模板的结构再使用其他模板也不是什么难事。当然模板是死的,要做成一个可以使用的后台管理还需要进行数据绑定以及权限控制。比如头像上的红色提示,下拉列表中的消息数目。这些需要配合vuex做全局的数据管理。另外该模板还提供了404 500页面 以及注册登录页面都可以直接拿来用。样例中展示的图表和表单都是来自第三方的一些UI库,比如bootstrap和echarts。在实际中,建议大家搭配elementUI或者iview这些框架使用。

本章的内容大致如此,给大家介绍了一下后台模板的基本结构,在接下来的文章中,我会给大家介绍如何编写自己的业务组件,以及进行数据绑定,同时也会涉及到一些vue的基本操作,以及我个人打的vue框架的一些架构设计上的理解

这是我的后台管理项目MrTreasure's Admin, 麻烦大家star一波, 多谢 就是这样:)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏macOS 开发学习

Mac开发基础练习:制作一个状态栏(NSStatusBar)上的App(一)

1492
来自专栏黑泽君的专栏

MyEclipse中光标不见了怎么设置出来

2、如上图,把“在打字时隐藏指针”前面的勾去掉就可以了。然后我们重启MyEcplise即可。

662
来自专栏君赏技术博客

怎么让APP`iTunes Connect`名字和在设备上显示的名字是一致的

在iTunes Connect和设备上显示的名字是一致的,因为避免混淆。对于WatchKit的app,对于WatchKit应用程序,这意味着在iTunes Co...

2623
来自专栏KaliArch

搭建高可用MongoDB集群(分片)

MongoDB基础请参考:http://blog.51cto.com/kaliarch/2044423

40212
来自专栏陈纪庚

css加载会造成阻塞吗?

终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来...

1381
来自专栏梦里茶室

vim note

2016-1-22 vim plugin collections: (参考 https://www.youtube.com/watch?v=0QFR-_wUoA...

2197
来自专栏SHERlocked93的前端小站

JS 回调模式

如果有个模块 findeNodes() ,任务是找到期望的 DOM 元素并使用 hide() 处理:

1131
来自专栏ArrayZoneYour的专栏

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法(在本教程中我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Faceboo...

2524
来自专栏陈满iOS

Xcode最新及各历史版本安装方法·官方镜像下载地址

个人看法,从重复利用的角度,不推荐用AppStore安装和更新,推荐直接去官网的历史版本下载资源页面下载,这样下载之后还能有版本备份,等下次再需要的时候还能重复...

3.2K2
来自专栏安富莱嵌入式技术分享

emWin酿造机过程演示,含uCOS-III和FreeRTOS两个版本

配套例子: V6-902_STemWin提高篇实验_酿造机过程演示(uCOS-III) V6-903_STemWin提高篇实验_酿造机过程演示(FreeRTO...

1012

扫码关注云+社区

领取腾讯云代金券