vue vue-router vuex element-ui axios的学习笔记（十八）写后台页面admin,login

先写后台页面的原因是我需要先添加商品，然后才好在前端测试

admin.vue

@import '../common/less/index.less';
.admin {
  .header {
    height: 60px;
    box-shadow: 0 0 10px @color;
    .logo {
      margin: 0 5px;
      width: 60px;
      height: 60px;
    }
    .avatar {
      margin: 0 15px;
      width: 60px;
      height: 60px;
      border-radius: 30px;
      float: right;
    }
    .adminname {
      float: right;
      font-size: 20px;
      margin-top: 20px;
      color: @color;
    }
  }
  .main {
    .menu {
      .admin-menu {
        position: fixed;
        width: 25%;
        top: 65px;
        bottom: 0;
        background: rgb(199, 193, 193);
        .el-menu-item {
          color: rgb(134, 165, 9);
          &:hover {
            background: @color;
            color: #eee;
          }
        }
        .is-active {
          color: #eee !important;
          font-weight: bold !important;
          background: @color !important;
        }
      }
    }
    .content {

    }
  }
}

测试一下

1.gif

路由切换没有问题

adminlogin.vue，这个没什么好写的了，和前端用户登录差不多，只是要重写接口等等，
先把样子做出来，基本复制代码就可以了

.login-form {  margin: 120px auto;  width: 310px;  background: #fff;  box-shadow: 0 0 10px #B4BCCC;  padding: 30px 30px 30px 30px;  border-radius: 25px; 
}.submitBtn {  width: 65%;
}

在api文件夹下面新建一个 adminApi.js

adminApi.js

选区_001.png

• 1、 打开server的app.js，添加代码

选区_002.png

• 2、新建routes/adminroutes.js

选区_003.png

• 3、 新建controllers/admincontrol.js

选区_005.png

adminlogin.vue

选区_006.png

store.js

import Vue from 'vue'import Vuex from 'vuex'// importimport {GetSended} from '../api/api'import {dateArray} from '../common/js/common'Vue.use(Vuex)// 创建基本状态const state = {  user: JSON.parse(sessionStorage.getItem('user')) || '',  sended: [],  adminer: JSON.parse(sessionStorage.getItem('adminer')) || ''}// 创建改变状态的方法const mutations = {  // 用户登录
  LOGIN (state) {
    state.user = JSON.parse(sessionStorage.getItem('user'))
  },  // 用户登出
  LOGOUT (state) {
    state.user = ''
  },  // 个人已发货
  SENDED (state) {    let pars = {      bename: state.user.name,      status: '待发货'
    }
    GetSended(pars).then(res => {
      state.sended = res.data.sended
    })
  },  // 管理员登录
  ADMINLOGIN (state) {
    state.adminer = JSON.parse(sessionStorage.getItem('adminer'))
  }
}// gettersconst getters = {  // 用户最近7天发货数量
  sendedlast: state => {    let sendnum = []    for (let i = 0; i < dateArray.length; i++) {      let nums = state.sended.filter(num => {        return num.date === dateArray[i]
      })
      sendnum.push(nums.length)
    }    return sendnum
  },  // 用户代理等级折扣信息
  sender: state => {    let sender = {      total: state.sended.length,      role: '',      zhekou: '',      num: '',      next: ''
    }    if (state.sended.length < 10) {
      sender.role = '初出茅庐'
      sender.zhekou = '10'
      sender.next = '渐入佳境'
      sender.num = 10 - state.sended.length
    } else if (state.sended.length < 100 && state.sended.length >= 10) {
      sender.role = '渐入佳境'
      sender.zhekou = '9.5'
      sender.next = '炉火纯青'
      sender.num = 100 - state.sended.length
    } else if (state.sended.length < 1000 && state.sended.length >= 100) {
      sender.role = '炉火纯青'
      sender.zhekou = '9'
      sender.next = '登峰造极'
      sender.num = 1000 - state.sended.length
    } else {
      sender.role = '登峰造极'
      sender.zhekou = '8.5'
      sender.next = '已经是最高等级'
      sender.num = 10000 - state.sended.length
    }    return sender
  },  // 用户发货分类统计
  sendedall: state => {    console.log(state.sended)    let sendedall = []
    sendedall.push({      name: state.sended.sendprodtype
    })    return true
  }
}// 创建驱动actions可以使得mutations得以启动const actions = {  // 用户登录
  // 这里先来一个驱动LOGIN的东西就叫login吧
  login ({commit}) {
    commit('LOGIN')
  },  // 用户登出
  logout ({commit}) {
    commit('LOGOUT')
  },  // 用户发货统计
  sended ({commit}) {
    commit('SENDED')
  },  // 管理员登录
  adminlogin ({commit}) {
    commit('ADMINLOGIN')
  }
}export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

随便写的数据，同样返回了，提示用户密码错误，说明成功了的

选区_007.png

我们还是需要测试以下数据正确的情况，但作为管理员一般来说没有注册这样的操作，只能靠管理员添加了，但这里可以使用postman来添加数据

先把添加管理员的功能写出来

选区_008.png

用postman添加数据

选区_009.png

查看结果

postman

选区_010.png

robo 3t

选区_011.png

测试

3.gif

结果正确跳转

在稍微把后台管理员的数据在admin.vue里面取一下

选区_013.png

选区_012.png

在测试一下

4.gif

数据得到了，但头像挂了，同事也证明是成功了的

github地址：
learn：https://github.com/lyttonlee/learn
server：https://github.com/lyttonlee/express-server-for-learn

作者：思吾谓何思
链接：https://www.jianshu.com/p/dbef62f731a4