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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../assets/logo.png" alt="">
      </el-col>
      <!-- 管理员 -->
      <el-col :span="16">
        <img class="avatar" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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>

测试一下

1.gif

路由切换没有问题

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

选区_001.png

4、写server的接口

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

选区_002.png

• 2、新建routes/adminroutes.js

选区_003.png

• 3、 新建controllers/admincontrol.js

选区_005.png

5、完善后端的login

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
})

6、测试

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

选区_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