admin1 1

image.png

api index

import request from '../utils/request'

export const Login = (params) => {
  return request({
    method: 'post',
    url: '/login',
    data: params
  })
}

components breadcrumb

layout components appmain

navbar

image.png

slidebar index

logo

slidebaritem

index.js

export { default as AppMain } from './AppMain/index.vue'
export { default as Navbar } from './NavBar/index.vue'
export { default as Sidebar } from './Sidebar/index.vue'

layout index

router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    component: () => import('../layout'),
    redirect: '/welcome',
    meta: {
      title: '首页'
    },
    children: [
      {
        path: 'welcome',
        component: () => import('../views/Welcome.vue'),
        meta: {
          title: '欢迎'
        }
      }
    ]
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '*',
    component: () => import('../views/PageNoFound.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

store
modules

export default {
  namespaced: true,
  state: {
    sidebar: {
      opened: true
    }
  },
  mutations: {
    TOGGLE_SIDEBAR(state) {
      state.sidebar.opened = !state.sidebar.opened
    }
  },
  actions: {
    toggleSidebar({ commit }) {
      commit('TOGGLE_SIDEBAR')
    }
  }
}

getters.js

export default {
  sidebar: state => state.app.sidebar
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import getters from './getters'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app
  },
  getters
})

utils
request

import axios from 'axios'
// import { Message } from 'element-ui'
// 配置aixos对象
const service = axios.create({
  // baseURL: '/api'
  baseURL: process.env.VUE_APP_BASE_API
})

// 请求拦截
service.interceptors.request.use(config => {
  return config
}, err => {
  Promise.reject(err)
})

// 响应拦截
service.interceptors.response.use(response => {
  console.log(response)
  return response
}, err => {
  // Message({
  //   type: 'error',
  //   message: '网络请求失败'
  // })
  Promise.reject(err)
})

export default service

storage

const namespace = 'mall-admin'

export default {
  setItem(key, val) {
    const storage = this.getStorage()
    storage[key] = val
    window.localStorage.setItem(namespace, JSON.stringify(storage))
  },
  getItem(key) {
    return this.getStorage()[key]
  },
  getStorage() {
    return JSON.parse(window.localStorage.getItem(namespace) || "{}")
  },
  clearItem(key) {
    const storage = this.getStorage()
    delete storage[key]
    window.localStorage.setItem(namespace, JSON.stringify(storage))
  },
  clearAll() {
    window.localStorage.clear()
  }
}