乐居后台管理项目

# 1. 拷贝项目
git clone https://gitee.com/bufanxy/leju-admin-vue.git

# 2. 设置淘宝镜像
npm config set registry=https://registry.npmmirror.com

# 3. 进入拷贝目录下安装依赖
cnpm i 

# 4. 更改代理
  项目根目录下 => 打开vue.config.js => 找到module.exports => 找到devServer => 找到proxy => 找到target => 修改为target: 'http://leju.bufan.cloud'
  
# 5. 运行
npm run dev

├── build                      // 构建相关  
├── dist                       // 打包相关
├── mock                       // mock 开发时模拟数据
├── node_modules               // 开发依赖包
├── public                     // 公共资源目录
│   ├── index.html             // 首页文件
├── tests                      // 单元测试
├── src                        // 源代码
│   ├── api                    // 所有请求存放目录
│   ├── assets                 // 静态资源存储目录
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局过滤器
│   ├── icons                  // 项目所有 svg icons录
│   ├── layout                 // 全局 layout
│   ├── mixins                 // 全局 mixins
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── view                   // views 所有页面
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
│   └── settings.js            // 其他配置项
├── .env.xxx                   // 环境变量配置
├── .eslintrc.js               // eslint 配置项
├── .babel.config.js           // babel-loader 配置
├── .travis.yml                // 自动化CI配置
├── vue.config.js              // vue-cli 配置
├── postcss.config.js          // postcss 配置
└── package.json               // package.json

  devServer: {
      port: 8080,
      open: true,
      overlay: {
          warnings: false,
          errors: true
      },
      proxy: {
          '/(api|admin|lejuAdmin)': {
              target: host, // 80可以省略不写 所以代理地址和当前项目不是同一个地址!!
              changeOrigin: true, // 如果是跨域 需要添加
              pathRewrite: {
                  // ['/admin']: '/abc'   /admin/xx/xx ==> /abc/xx/xx
              }
          }
       }
  },

import axios from 'axios'
import { Message } from 'element-ui'
import { getToken, clearUserCache } from '@/utils/myAuth'
import router from '@/router'

// create an axios instance
// process.env 指的是当前的运行环境 所对应的 配置文件
const service = axios.create({
    // baseURL: 'http://leju.bufan.cloud', // url = base url + request url
    // withCredentials: true // 跨域携带cookies需要,token认证不需要
    timeout: 5000 // 请求超时时间
})

// request interceptor
service.interceptors.request.use(
    config => {
    // do something before request is sent
    // 如果本地有token  携带过去
        var token = getToken()
        if (token) {
            config.headers['token'] = token
        }
        return config
    },
    error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
    response => {
        const res = response.data
        // token无效 会返回20002
        if (res.code === 20002) {
            Message({
                message: res.message + ',请重新登陆!',
                type: 'error',
                duration: 5 * 1000
            })
            // 清除用户缓存
            clearUserCache()
            router.push('/login')
        }

        return res
    },
    error => {
        console.log('err' + error) // for debug
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)
/**
* 合并get与post提交
* @param {} config
*/
function http(config) {
    // 动手脚
    const axiosConfig = {
        url: config.url,
        method: config.method
    }
    // 如果data存在 而且不为空对象
    if (config.data) {
        if (Object.keys(config.data).length > 0) {
            var key = config.method.toLowerCase() === 'get' ? 'params' : 'data'
            axiosConfig[key] = config.data
        }
        if (config.data.constructor === FormData) {
            axiosConfig.data = config.data
        }
    }

    if (config.headers) {
        axiosConfig.headers = config.headers
    }
    return service(axiosConfig)
}
export default http

import request from '@/api/request'
function doLogin(data) {
    return request({
        url: '/lejuAdmin/index/login', // 相对路径
        method: 'post',
        data
    })
}

   handleLogin() {
        loginApi
            .doLogin({
                ...this.loginForm
            })
            .then((res) => {
                if (res.success) {
                    // 1.获取用户信息
                    var token = res.data.token
                    var info = res.data.userInfo
                    // 2. 存储用户信息和token  存到哪？  如果用户信息频繁变化建议存储ls/vuex ； 如果不经常变化直接存储ls
                    setToken(token)
                    setUserInfo(info)
                    this.$router.push({ path: '/' })
                } else {
                    this.$message.error('登陆失败！')
                }
            })
    },

router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
//     // shtest
// next()
// return
// 获取token
var token = getToken()
if (token) {
    // 如果有token 且跳往 登录页面,则默认跳向主页
    if (to.path === '/login') {
        next('/')
        NProgress.done()
        return
    }
    // 判断权限
    if (store.state.user.asyncRoutes.length > 0) {
        // 把当前页面的路由权限存入vuex
        if (to.meta && to.meta.permissionValues) {
            store.commit('user/RESET_BTN_PERMI', to.meta.permissionValues)
        }
        next()
    } else {
        // 重新获取
        await store.dispatch('user/getInitMenus')
            .then(res => {
                // 把当前页面的路由权限存入vuex
                if (to.meta && to.meta.permissionValues) {
                    store.commit('user/RESET_BTN_PERMI', to.meta.permissionValues)
                }

                next(to.path)
            }).catch(err => {
                // 如果code等于20001说明 路由有脏数据,需要初始化一次
                if (err.code === 20001) {
                    Message.error('权限动态路由出错,请在资源管理初始化路由')
                    next()
                } else {
                    Message.error('权限动态路由出错')
                    clearUserCache()
                    next('/login')
                }
                NProgress.done()
            })
            }
      } else {
          console.log('没有token')
          // 清下页面权限
          store.commit('user/CLEAR_BTN_PEREMI')
          /* has no token*/
          if (whiteList.indexOf(to.path) !== -1) {
              // in the free login whitelist, go directly
              next()
          } else {
              // other pages that do not have permission to access are redirected to the login page.
              next('/login')
              NProgress.done()
          }
      }
  })
  router.afterEach(() => {
      // finish progress bar
      NProgress.done()
  })