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

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

1、先把后端的主页大体写出来，主要是后端路由部分

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>
    <!-- 内容区 -->
    <el-row class="main">
      <!-- 左边导航菜单 -->
      <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>
      <!-- 右边操作区域 -->
      <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>

测试一下

路由切换没有问题

2、管理员登录页面

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

<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: '用户名是必须的，长度为3-14位',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密码是必须的！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // ...
    submit () {
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          this.logining = true
          // 登录作为参数的用户信息
          let LoginParams = {
            username: this.LoginForm.username,
            password: this.LoginForm.password
          }
          // 调用axios登录接口
          AdminLogin(LoginParams).then(res => {
            console.log(res)
            // this.logining = false
            // // 根据返回的code判断是否成功
            // let {code, msg, user} = res.data
            // if (code !== 200) {
            //   this.$message({
            //     type: 'error',
            //     message: msg
            //   })
            // } else {
            //   this.$message({
            //     type: 'success',
            //     message: msg
            //   })
            //   // 将返回的数据注入sessionStorage
            //   sessionStorage.setItem('user', JSON.stringify(user))
            //   // 在这里挂上，官方说的分发，登录的action
            //   // 应该这样就行了把
            //   this.$store.dispatch('login')
            //   // console.log(user)
            //   // 跳转到我的信息的页面
            //   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文件夹下面新建一个 adminApi.js

adminApi.js

4、写server的接口

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

• 2、新建routes/adminroutes.js

• 3、 新建controllers/admincontrol.js

5、完善后端的login

adminlogin.vue

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)
// 创建基本状态
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'))
  }
}
// getters
const 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
})

6、测试

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

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

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

用postman添加数据

查看结果

postman

robo 3t

测试

结果正确跳转

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

在测试一下

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

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