赛龙足浴休闲管理系统怎么添加项目

进入系统，左侧菜单栏有添加项目选项，直接添加就可以了。

该系统是一套专门为沐足/足疗/足浴保健中心开发的管理系统，是集服务消费，商品销售，员工提成，会员管理等多种功能于一体的管理系统。

赛龙洗浴管理系统是由烟台市赛格商务有限公司设计开发的一套用于洗浴休闲场所的应用管理软件。

用以下代码即可实现：

<select name="year">

<option value="2008">2008</option>

<option value="2009">2009</option>

<option value="2010">2010</option>

<option value="2011">2011</option>

<option value="2012">2012</option>

<option value="2013">2013</option>

</select>年

<select name="month">

<option value="1">01</option>

<option value="2">02</option>

<option value="3">03</option>

<option value="4">04</option>

<option value="5">05</option>

<option value="6">06</option>

<option value="7">07</option>

<option value="8">08</option>

<option value="9">09</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

</select>月

### 表单校验

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

    }

---