效果：
源码：
几乎每个网路公司都有一个属于自己的网站后台，那么学好怎么管理自己公司的网站后台相当重要。下面是由我分享的的方法，希望对你有用。
管理公司网站后台的方法1、首先是登入名，密码和验证码。在专业的网站公司做网站的话，付完尾款后，网站公司会将初始的登入名，密码和验证码给你，你登陆进去后，在“使用者”里面可以修改，并且可以增删管理员***一般在“管理使用者”里面***
2、管理栏目。登陆进去后，选择“栏目”---“管理栏目”---“栏目管理”在这里可以修改栏目。
1***终极栏目下才可以新增资料
2***栏目可以分类为一级栏目，二级栏目，三级栏目。举个例子：家俱***一级***，木制家俱***二级***，红木家俱***三级***。
3***终极栏目是指：可以新增资料的栏目。一般情况下，在栏目管理的页面有转换的选项。很多客户觉得传上去的图片在前台看不到，一种情况就是这里没有确定好。
3、新增资讯。这个一般包括公司概况，公司文化，公司组织结构，***，产品照片，公司地图等。新增方式：“资讯”---选择要新增的栏目，点进去---“增加资讯”然后依次新增标题，简介，图片，内容就可以。文字编辑框，一般技术人员会设定好大小，你只管编辑，字型大小，颜色，格式都可以选择。
4、有些网站会有留言系统。这个一般九九一般会把它设定在“外挂”中."留言板管理"，“管理留言”，可以进行稽核和删除。
5、网页头部和尾部资讯。在登陆后页面选择“模板”，继续选择“公共模板变数”“管理模板变数”，在这里面可以修改头部与尾部资讯。
6、系统资讯。在登陆后页面选择“系统”---“系统设定”---“系统引数设定”。在这里可以新增或修改公司基本资讯，包括网站关键字和网址等。
网站后台管理怎么做才能更加合理首先要做到简单易懂，由于很多使用者不懂怎么去管理，所以要设计的简单易懂。而对于专业的人来说，编码上就要专业些。不过我们建议还是要做到简洁最好。
其次要做到有资料库备份功能，资料备份和还原系统这个功能很重要，因为网站维护人员在操作的时候，要经常更改资讯，那么就需要时常做备份工作了，要不然一旦网站出了问题，没有备份就前功尽弃了。
最后要考虑一个后台管理可以使用者操作，对于使用者来说，肯定不会只是一个人去管理，也许会有多个人，这时候我们就要设计出这个功能，方便他们多人进行维护管理。
网站后台管理的功能一、系统设定
1、网站资讯配置
网站基本资讯配置：如网站的名称、地址、LOGO、版权资讯等
网站功能选项配置：如显示频道、储存远端图片等
使用者选项配置：如是否允许新使用者注册、是否需要认证等另有邮件伺服器选项等。
2、首页模板管理
首页、栏目页、内容页、专题页……都可以生成完全的HTML页面***评论和点选数统计除外***。各频道启用生成功能请在网站频道管理中设定。
3、网站频道管理
管理网站的各个频道的功能模组，如文章、下载、图片和留言等频道。频道可分为系统内部频道与外部频道二类。系统的一些重要功能，如生成HTML功能、频道的稽核功能、上传档案型别、顶部导航栏每行显示的栏目数、底部栏目导航的显示方式、都在此进行设定。
4、网站风格管理 ：
风格模板是控制整个网站在前台显示时看到的的字型、风格、图片等，通常是用css网页样式语句来进行设计和控制的。利用网页技术中的层叠样式表***CSS***样式来定义特定的HTML标签以按照特定方式设定文字格式。系统具有自定义CSS样式的功能，并随时可以修改样式。
5、网站公告管理
可以释出、修改和删除网站公告。可以设定为频道共用公告，也可以释出各频道不同的公告。公告支援UBB程式码。有全部***滚动及弹出***、滚动和弹出三种显示型别，只有将公告设为最新时才会在前台显示。
6、网站调查管理
可以释出、修改和删除网站调查。 可以设定为频道共用调查，也可以释出各频道不同的调查。可以释出单主题调查，也可以释出多主题调查。有单选和多选二种调查型别，只有将调查设为最新调查后才会在前台显示。
7、友情连结管理
系统具备管理、稽核其它网站申请的友情连结功能，可执行新增、修改、删除等操作，可设定推荐链。友情连结分成文字连结和LOGO连结二种显示形式。
8、网站统计分析
显示详细的网站统计资讯，可检视网站综合统计资讯、最近访问记录、访问次数、连结页面、作业系统等分类资讯。
二、栏目管理
网站共有11个内部栏目：新闻快讯、学校概况、教学科研、教师天地、学生乐园、教学资源、德育教育、冲击高考、录影课、图片中心、下载中心。对这11个内部栏目可以分别管理。
1、新增内容
可以使用系统提供的强大线上编辑器新增网站内容，并能选择简洁模式和高阶模式高阶模式能进行更多高阶的设定，如：转向连结、副标题、阅读等级、阅读点数、内容属性、选择模板等。
2、模板管理
系统提供版式模板管理功能，用来显示前台时所看到的网页的介面布局形式，如分栏、表格布局、图片和文字要显示的位置等等。几乎所有前台显示的页面格式都在此修改与设定。可以管理模板、新增模板、汇入模板、汇出模板 。
3、管理内容
对新增的内容提供便捷的管理。相应许可权管理员可以稽核注册使用者发表的内容，修改、移动、删除已经发表的内容，可批量修改内容的属性，也可将指定的内容批量移动到另一栏目中。可以检视我加的内容。
4、批量设定
如果有一些栏目或内容要修改相同的设定，则可以用系统提供的批量设定功能进行管理，如批量移动内容、批量修改内容、栏目专题内容等。
5、管理栏目
管理本频道中设定的各级栏目，栏目具有无级分类功能。可新增、删除、排序、移动、复位、合并和批量设定栏目等。
6、管理JS档案
JS程式码是为了加快访问速度特别生成的。可设定相关引数、删除、预览效果。可自动或手动重新整理有关JS档案。
7、专题与评论
如果不同栏目中的内容属于同一主题，则可以建立相应专题，以便浏览与管理。专题栏目可以进行修改、删除和清空等操作。
使用者可以对网站的内容发表相关评论，管理员可以回复、修改、删除和稽核评论。
8、上传与回收站
系统具有无元件上传功能，可上传频道中设定的档案型别。对无用的上传档案，可使用清除无用档案功能定期进行清理。注册使用者和管理员删除无用的内容时，先删除至回收站，以防止误操作。回收站内的内容可随时恢复或清除。
三、留言管理
1、留言板管理
留言板是网站互动的一种形式，支援UBB程式码，具备头像与表情功能。使用者可以在网站中留言，也可检视、释出和回复留言资讯管理员可稽核、回复、修改、删除留言资讯管理员可以在后台设定是否开启留言稽核功能。留言模式有二种：游客模式和使用者模式。
2、留言稽核：
为防止使用者在留言时发表不良的言论，可开启系统的留言稽核功能。开启了稽核功能后，使用者的留言需通过管理员稽核后才能在前台显示。启用留言稽核功能请在留言频道管理中设定。管理员可以对使用者留言进行修改、删除、回复和通过稽核的操作。
3、留言管理：
管理员可以对使用者留言进行修改、删除、回复和取消稽核的操作。取消稽核后的留言不会在前台显示。
四、使用者管理
1、使用者管理
本功能可以详细管理与设定网站注册使用者的资讯与许可权。可以对使用者进行稽核、修改、删除、锁定、解锁操作，并可移动使用者到相应的使用者组。
2、管理员管理
系统具有强大的网站许可权管理，可设定管理员详细许可权，如增删管理员和指定详细的管理许可权，使网站的管理分级分类多人共同管理。设定网站超级管理员和普通管理员，同一账号可设定是否允许多人同时使用此帐号登入。
3、使用者组管理
使用者组是使用者账户的 *** ，通过建立使用者组，赋予相关使用者享有授予组的权力和许可权。使用者组许可权的数字越小，说明具有的许可权越大***等级越高***。许可权设定采用等级制，即高等级的使用者会具有低等级使用者的所有许可权。具体的使用许可权设定在“频道管理”及各频道的“栏目管理”中。
4、邮件列表管理
按使用者型别、按使用者姓名和按使用者Email传送邮件。资讯将传送到所有注册时完整填写了信箱的使用者，邮件列表的使用将消耗大量的伺服器资源，请慎重使用。汇出功能可将邮件列表批量到资料库或文字。
5、更新使用者资料
本操作将重新计算使用者的发表文章数。本操作可能将非常消耗伺服器资源，而且更新时间很长，请仔细确认每一步操作后执行。修复起始ID号到结束ID之间的使用者资料，之间的数值最好不要选择过大。
6、管理短讯息
系统提供了短讯息功能，也可以撰写短讯息，与本站内的注册使用者进行交流。请输入收件人、标题、内容。可以管理短讯息，随时检视自己的发件箱，删除过期的短讯息以节省伺服器的空间。
五、资料库管理
1、备份资料库
系统将备份资料库，以备资料库出现问题时能进行恢复操作。请输入要备份资料库相对路径目录，如目录不存在，将自动建立。不用输入备份档名的副档名，如有同名档案，系统将自动覆盖。
2、系统空间占用
检视网站系统占用空间的情况。可以检视基本系统、后台管理、系统图片、各频道及其它档案占用空间的情况。
3、恢复资料库
本功能将从系统备份的资料库中恢复资料库。请注意备份资料库路径相对路径，并输入正确的资料库名。
系统初始化 将网站系统进行初始化，将指定资料库内容的资料将会被清空。***慎用此功能，因为一旦清除将无法恢复!***
4、压缩资料库
在经常作删除资料等操作后，可以使用本功能保证资料库效能最优。***压缩前，建议先备份资料库，以免发生意外错误。***
### 表单校验
* rules属性绑定
* data中定义规则
* 表单item上prop属性绑定
注意点： prop的值和规则的值以及表单的值需要保持一致
### 在vue中如何获取dom元素
- 定义属性
<div ref='qqq' @click="btn">111111</div>
- 获取：this.$refs.qqq
### 如何携带token
* 登录成功的时候将获取的token做本地缓存
* 需要做请求拦截====其他所有请求需要携带请求头 Authorization
- api/index.js
- 做请求拦截 获取本地缓存
- 将本都缓存的值添加到请求头上面去
### 左侧菜单数据展示
- 封装函数 ===获取左侧菜单数据请求的函数 api/index.js
- home.vue
+ 导入封装请求函数
+ 调用这个函数获取数据，并且将数据 赋值给data中的menuList
+ 将数据循环出来 ====进行2层循环
步骤分析：
- 静态组件布局编写===从官网复制过来
- 动态渲染左侧菜单导航===将获取的请求数据使用循环
- 配置属性默认值展开一个 ====查看官网配置属性
- 配置路由实现显示对应的组件
### 做菜菜单导航图标的显示
+ 引入iconfont.css文件 main.js中引入
+ 一级图标
- 准备一个对象或者数组
iconObj: {
0: 'icon-user',
1: 'icon-tijikongjian',
2: 'icon-shangpin',
3: 'icon-danju',
4: 'icon-baobiao'
},
- 图标标签属性绑定 class 然后根据索引找到对象中的哪一个类名进行显示
+ 二级图标====直接在二级循环标题前面提加图标标签====写死
#### 左侧菜单步骤分析：
- 1-显示组件菜单=====从官网复制
- 2-只展开一个 通过控制 index
- 3-配置路由 ===点击谁右边就显示哪一个组件
+ 配置项上面添加一个router属性 :router="true"
+ 配置唯一值index的值为path值=====:index="item2.path
- 4-改变默认高亮颜色 active-text-color="#00ff00"
- 5-点击当前只展开其他收起 :unique-opened="true"
- 6-刷新保持最后一次的高亮
+ 设置默认展开项 :default-active="defaultActive"
+ 点击
+ 给当前每一项的二级菜单 绑定点击事件 并且获取当前的path值
+ 将这个值赋值给 defaultActive 并且做本地缓存【刷新的时候还可以获取上一次的path值】
+ 刷新后获取这个值 defaultActive=从本都缓存中拿 || 'users'
- 7-解决二级菜单的每一项的右边框 .el-menu {border:none}
- 8-点击收起菜单功能
+ 布局一个按钮 点击按钮
+ 点击设置 collapse=true or false
+ 改变左侧侧边栏宽度样式的设置 <el-aside :width="collapse?'64px':'200px'">
+ 关闭收起和展开的动画 :collapse-transition="false"
### 路由拦截
路由拦截和请求拦截的区别
请求拦截=====只要请求就拦截
路由拦截====只要路由值发生改变就拦截
### 如何设置路由拦截
+ 在router文件中设置路由前置拦截 router.beforeEach((to,form,next)=>{})
+ 判断是不是lofgin路由值 是 就直接放行，
+ 判断是不是有token 有token就放行 没有就去login
+ 最后解决掉了问题会出现兼容性 解决方法如下
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err =>err)
}
