# vue-manage

**Repository Path**: wang-qixin/vue-manage

## Basic Information

- **Project Name**: vue-manage
- **Description**: vue单页后台管理系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-04-09
- **Last Updated**: 2021-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-manage
element-ui 简单的vue后台管理系统       
技术栈： `vue-router,vuex,element-ui,axios`

## 一、项目初始化
1. 先 `git clone git@gitee.com:jxmlearner/vue-manage.git`将仓库克隆到本地
2. `vue create vue-manage` 使用vue-cli3.x建立项目的时候选择merge(合并)
3. 删除那些不用的文件,使这个项目是一个空项目
4. 建立重置样式 `assets/css/reset.css`,在main.js中引入 `import './assets/css/reset.css'`
5. 安装 `stylus`: `yarn add -D stylus stylus-loader`
6. 安装 [`element-ui`](http://element-cn.eleme.io/#/zh-CN) `yarn add element-ui`
main.js中
```javascript
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
```
7. `npm run serve` 启动项目看是否能运行起来
8. 安装axios及qs `yarn add axios qs`
+ 准备配置文件 //src/config.js
```javascript
const env = process.env.NODE_ENV || 'development'

let apiAddr = '',          // 获取数据接口地址
    wsAddr = ''            // websocket地址

if (env === 'development') {
    apiAddr = 'http://localhost:5000/api/'
    wsAddr = ''
}

if (env === 'production') {
    apiAddr = 'http://localhost:5000/api/'
    wsAddr = 'http://localhost:5000'
}

export {
    apiAddr,
    wsAddr
}
```
+ 编写//src/util/http.js辅助类
```javascript
import Qs from 'qs'
import axios from "axios"
import { apiAddr } from '../config'
import router from '../router'
import { Loading } from 'element-ui'

// 自定义axios实例
let instance = axios.create()

instance.defaults.baseURL = apiAddr;

instance.defaults.timeout = 20000;

// 自动发送cookie中的认证信息
instance.defaults.withCredentials = true;

instance.defaults.transformRequest = [function (data) {
    data = Qs.stringify(data)
    return data
}]

// instance.defaults.transformResponse = [function (data) {
//     data = JSON.parse(data)
//     return data
// }]

let loading
function startLoading() {
    loading = Loading.service({
        lock: true,
        text:'拼命加载中...',
        background:'rgba(0,0,0,0.7)'
    })
}
function closeLoading() {
    loading.close()
}

// http request 拦截器
// 每次请求都为http头增加Authorization字段，其内容为token
instance.interceptors.request.use(
    config => {
        startLoading()
        if(!/login|registe/.test(config.url)){   //登录注册页不用在header中增加token
            const token=sessionStorage.getItem('token')
            config.headers.Authorization = `Bearer ${token}`
        }        
        return config
    }, error => {
        return Promise.reject(error)
    }
);

instance.interceptors.response.use((res) => {
    closeLoading()  //结束加载动画
    // 对于任何接口请求行为, API 服务会确认认证信息
    // 当认证信息不存在时, API 服务会返回未认证消息,
    // 对于这种情况, 在此处做统一的拦截处理, 重定向到登录页
    if (res.data.code === 401) {
        console.log('登录失效, 请重新登录!')
        router.push('/login')
    }
    return res;
}, (error) => {
    closeLoading()  //结束加载动画
    console.log("请求错误")
    return Promise.reject(error)
});

export default instance
```

## 二、路由守卫
```javascript
router.beforeEach((to, from, next)=>{
  const toPath=to.path
  const noAccountInfo=store.state.token? false : true  //是否存在token
  if(!/\/(login|registe)/.test(toPath)) { // 登录和注册页面之外的其它页面均需要登录了才可以访问
      if(noAccountInfo) {
          next('/login')
      }else{
          next()
      }
  }else{
      next()
  }
})
```
## 三、左侧菜单
```javascript
<template>
    <el-aside :width="isCollapse?'65px':'220px'" class="lay-aside">
        <el-menu class="el-menu-vertical-demo" :default-active="currentMenu" :router="true" :collapse="isCollapse">
            <el-menu-item index="/">
                <i class="el-icon-document"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <!-- <el-submenu index="system">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">系统管理</span>
                </template>
                <el-menu-item index="users">用户管理</el-menu-item>
                <el-menu-item index="profiles">资金管理</el-menu-item>
            </el-submenu>
            <el-menu-item index="userinfo">
                <i class="el-icon-menu"></i>
                <span slot="title">个人资料</span>
            </el-menu-item>	 -->
            <template v-for="menu in menus">
                <el-submenu v-if="menu.children && menu.children.length>0" :index="menu.path">
                    <template slot="title">
                        <i :class="menu.icon"></i>
                        <span slot="title">{{menu.menuName}}</span>
                    </template>
                    <el-menu-item v-for="submenu in menu.children" :index="submenu.path" :key="submenu._id">
                        {{submenu.menuName}}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="menu.path">
                    <i :class="menu.icon"></i>
                    <span slot="title">{{menu.menuName}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </el-aside>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        let path = this.$route.path.length>1? this.$route.path.replace(/^\//,''):'/'
        return {
            currentMenu:path,
            menus:[
                {_id: 1, menuName:'系统管理',ename:'system', path:'system', orderNum: 1, icon:'el-icon-location', children:[
                    {_id: 11, menuName:'用户管理',ename:'users', path:'users',orderNum: 1, icon:'el-icon-location', children:[]},
                    {_id: 12, menuName:'资金管理',ename:'profile', path:'profiles', orderNum: 2, icon:'el-icon-location', children:[]}
                ]},
                {_id: 12, menuName:'个人资料',ename:'userinfo', path:'userinfo', orderNum: 2, icon:'el-icon-menu', children:[]}
            ]
        }
    },
    computed: {
        ...mapState(['isCollapse'])
    },
    created() {
        // this.$root.Bus.$on('changeMenu', (name, id)=>{
        //     this.currentMenu = id
        // })
        // console.log(this.$route.path)
    },
    methods: {
        
    },
    watch: {      //监听路由变化
        $route(to,from){ 
            let path = this.$route.path.length>1? this.$route.path.replace(/^\//,''):'/'  
            this.currentMenu = path
        }
    }
}
</script>
```
## 四、问题点记录
1. axios get请求的参数化
```javascript
// 获取分页数据
function getpagedata(data,cb,errorCb) {   
    // axios的get请求如果参数不是拼在url上,则要使用params:{id:123}这种形式
    let params = {params:data}
    axios.get('user/getpagedata',params).then(cb).catch(errorCb)
}
```
2. el-table单个列的自定义处理 - vue的作用域插槽
```html
<el-table-column prop="role" label="类型" width="100">
    <template slot-scope="scope">
        <el-tag :type="scope.row.role === 'employee' ? 'primary' : 'success'"
        disable-transitions>{{scope.row.role ==='employee'?'员工':'管理员'}}</el-tag>
    </template>
</el-table-column>
```
3. vuex计算属性的问题 `Computed property "avatarUrl" was assigned to but it has no setter`
`UserInfo.vue`的计算属性,补上 set
```javascript
computed: {
    ...mapState(['token','userInfo']),
    uploadUrl() {
        return `${apiAddr}user/uploadAvatar?_id=${this.userInfo._id}`
    },
    uploadHeaders(){
        return {Authorization: 'Bearer ' + this.token }
    },
    avatarUrl: {
        get: function() {
            return this.userInfo.avatar? this.userInfo.avatar: 'images/nopic.jpg'
        },
        set: function() {

        }
    }
}
```
4. el-table 固定表头     
![表头固定](./md/fixtablehead.png)