先寫后臺(tái)頁(yè)面的原因是我需要先添加商品访雪，然后才好在前端測(cè)試

1、先把后端的主頁(yè)大體寫出來(lái)饵史，主要是后端路由部分

admin.vue

<template>
  <section class="admin">
    <!-- 頭部 -->
    <el-row class="header">
      <!-- logo -->
      <el-col :span="8">
        <img class="logo" src="../assets/logo.png" alt="">
      </el-col>
      <!-- 管理員 -->
      <el-col :span="16">
        <img class="avatar" src="../assets/avatar.jpg" alt="">
        <p class="adminname">李小霞</p>
      </el-col>
    </el-row>
    <!-- 內(nèi)容區(qū) -->
    <el-row class="main">
      <!-- 左邊導(dǎo)航菜單 -->
      <el-col class="menu" :span="8">
        <p></p>
        <el-menu 
          class="admin-menu"
          :default-active="$router.path"
          router>
            <el-menu-item 
              v-for="item in $router.options.routes[1].children"
              :key="item.path"
              :index="item.path">
              {{item.name}}
            </el-menu-item>
          </el-menu>
      </el-col>
      <!-- 右邊操作區(qū)域 -->
      <el-col class="content" :span="16">
        <transition name="el-zoom-in-center">
          <router-view></router-view>
        </transition>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  data () {
    return {
      // ...
    }
  }
}
</script>

<style lang="less" scoped>
@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 {

    }
  }
}
</style>

測(cè)試一下

1.gif

路由切換沒(méi)有問(wèn)題

2髓抑、管理員登錄頁(yè)面

adminlogin.vue，這個(gè)沒(méi)什么好寫的了仗处，和前端用戶登錄差不多眯勾，只是要重寫接口等等，
先把樣子做出來(lái)婆誓，基本復(fù)制代碼就可以了

<template>
  <div class="container">
    <el-form 
      :model="LoginForm" 
      ref="LoginForm" 
      :rules="rule"
      label-width="0"
      class="login-form">
      <h3>管理員登錄</h3>

      <el-form-item prop="username">
        <el-input 
          type="text" 
          v-model="LoginForm.username" 
          placeholder="username" >
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input 
          type="password" 
          v-model="LoginForm.password" 
          placeholder="password" >
        </el-input>
      </el-form-item>

      <el-form-item >
        <el-button 
          type="danger" 
          class="submitBtn"
          round
          @click.native.prevent="submit"
          :loading="logining">
          登錄
        </el-button>
        <el-button 
          type="primary"
          class="resetBtn" 
          round
          @click.native.prevent="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {AdminLogin} from '../../api/adminApi'
export default {
  // ....
  data () {
    return {
      LoginForm: {
        username: '',
        password: ''
      },
      logining: false,
      rule: {
        username: [
          {
            required: true,
            max: 14,
            min: 3,
            message: '用戶名是必須的吃环，長(zhǎng)度為3-14位',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密碼是必須的！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // ...
    submit () {
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          this.logining = true
          // 登錄作為參數(shù)的用戶信息
          let LoginParams = {
            username: this.LoginForm.username,
            password: this.LoginForm.password
          }
          // 調(diào)用axios登錄接口
          AdminLogin(LoginParams).then(res => {
            console.log(res)
            // this.logining = false
            // // 根據(jù)返回的code判斷是否成功
            // let {code, msg, user} = res.data
            // if (code !== 200) {
            //   this.$message({
            //     type: 'error',
            //     message: msg
            //   })
            // } else {
            //   this.$message({
            //     type: 'success',
            //     message: msg
            //   })
            //   // 將返回的數(shù)據(jù)注入sessionStorage
            //   sessionStorage.setItem('user', JSON.stringify(user))
            //   // 在這里掛上洋幻，官方說(shuō)的分發(fā)郁轻，登錄的action
            //   // 應(yīng)該這樣就行了把
            //   this.$store.dispatch('login')
            //   // console.log(user)
            //   // 跳轉(zhuǎn)到我的信息的頁(yè)面
            //   this.$router.push('/admin')
            // }
          })
        } else {
          console.log('submit err')
        }
      })
    },
    reset () {
      this.$refs.LoginForm.resetFields()
    }
  }
}
</script>

<style scoped>
.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%;
}
</style>

3、寫后端管理員登錄接口

在api文件夾下面新建一個(gè) adminApi.js

adminApi.js

選區(qū)_001.png

4文留、寫server的接口

• 1好唯、 打開server的app.js，添加代碼

選區(qū)_002.png

• 2燥翅、新建routes/adminroutes.js

選區(qū)_003.png

• 3骑篙、 新建controllers/admincontrol.js

選區(qū)_005.png

5、完善后端的login

adminlogin.vue

選區(qū)_006.png

store.js

import Vue from 'vue'
import Vuex from 'vuex'
// import
import {GetSended} from '../api/api'
import {dateArray} from '../common/js/common'

Vue.use(Vuex)
// 創(chuàng)建基本狀態(tài)
const state = {
  user: JSON.parse(sessionStorage.getItem('user')) || '',
  sended: [],
  adminer: JSON.parse(sessionStorage.getItem('adminer')) || ''
}
// 創(chuàng)建改變狀態(tài)的方法
const mutations = {
  // 用戶登錄
  LOGIN (state) {
    state.user = JSON.parse(sessionStorage.getItem('user'))
  },
  // 用戶登出
  LOGOUT (state) {
    state.user = ''
  },
  // 個(gè)人已發(fā)貨
  SENDED (state) {
    let pars = {
      bename: state.user.name,
      status: '待發(fā)貨'
    }
    GetSended(pars).then(res => {
      state.sended = res.data.sended
    })
  },
  // 管理員登錄
  ADMINLOGIN (state) {
    state.adminer = JSON.parse(sessionStorage.getItem('adminer'))
  }
}
// getters
const getters = {
  // 用戶最近7天發(fā)貨數(shù)量
  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
  },
  // 用戶代理等級(jí)折扣信息
  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 = '已經(jīng)是最高等級(jí)'
      sender.num = 10000 - state.sended.length
    }
    return sender
  },
  // 用戶發(fā)貨分類統(tǒng)計(jì)
  sendedall: state => {
    console.log(state.sended)
    let sendedall = []
    sendedall.push({
      name: state.sended.sendprodtype
    })
    return true
  }
}
// 創(chuàng)建驅(qū)動(dòng)actions可以使得mutations得以啟動(dòng)
const actions = {
  // 用戶登錄
  // 這里先來(lái)一個(gè)驅(qū)動(dòng)LOGIN的東西就叫l(wèi)ogin吧
  login ({commit}) {
    commit('LOGIN')
  },
  // 用戶登出
  logout ({commit}) {
    commit('LOGOUT')
  },
  // 用戶發(fā)貨統(tǒng)計(jì)
  sended ({commit}) {
    commit('SENDED')
  },
  // 管理員登錄
  adminlogin ({commit}) {
    commit('ADMINLOGIN')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

6森书、測(cè)試

隨便寫的數(shù)據(jù)靶端，同樣返回了谎势，提示用戶密碼錯(cuò)誤，說(shuō)明成功了的

選區(qū)_007.png

我們還是需要測(cè)試以下數(shù)據(jù)正確的情況杨名，但作為管理員一般來(lái)說(shuō)沒(méi)有注冊(cè)這樣的操作脏榆，只能靠管理員添加了，但這里可以使用postman來(lái)添加數(shù)據(jù)

先把添加管理員的功能寫出來(lái)

選區(qū)_008.png

用postman添加數(shù)據(jù)

選區(qū)_009.png

查看結(jié)果

postman

選區(qū)_010.png

robo 3t

選區(qū)_011.png

測(cè)試

3.gif

結(jié)果正確跳轉(zhuǎn)

在稍微把后臺(tái)管理員的數(shù)據(jù)在admin.vue里面取一下

選區(qū)_013.png

選區(qū)_012.png

在測(cè)試一下

4.gif

數(shù)據(jù)得到了台谍，但頭像掛了须喂，同事也證明是成功了的

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