vue vue-router vuex element-ui axios learning notes (18) write background page admin,login

The reason I write background pages first is that I need to add products first, and then I need to test them at the front end.

1. Write out the back-end homepage first, mainly the back-end routing part.

admin.vue

<template>
  <section class="admin">
    <!-- head -->
    <el-row class="header">
      <!-- logo -->
      <el-col :span="8">
        <img class="logo" src="../assets/logo.png" alt="">
      </el-col>
      <!-- Administrators -->
      <el-col :span="16">
        <img class="avatar" src="../assets/avatar.jpg" alt="">
        <p class="adminname">Li Xiao Xia</p>
      </el-col>
    </el-row>
    <!-- Content area -->
    <el-row class="main">
      <!-- Left navigation menu -->
      <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>
      <!-- Right Operating Area -->
      <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>

Test it.

1.gif

No problem with routing handover

2. Administrator login page

adminlogin.vue, there's nothing to write about, just like the front-end user login, just to rewrite the interface and so on.
Make the appearance first, and copy the code basically.

<template>
  <div class="container">
    <el-form 
      :model="LoginForm" 
      ref="LoginForm" 
      :rules="rule"
      label-width="0"
      class="login-form">
      <h3>Administrator login</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">
          //Sign in
        </el-button>
        <el-button 
          type="primary"
          class="resetBtn" 
          round
          @click.native.prevent="reset">
          //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: 'User name is required, length 3-14 position',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: 'Password is a must!',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // ...
    submit () {
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          this.logining = true
          // User information logged in as a parameter
          let LoginParams = {
            username: this.LoginForm.username,
            password: this.LoginForm.password
          }
          // Call axios login interface
          AdminLogin(LoginParams).then(res => {
            console.log(res)
            // this.logining = false
            // // Determine success based on the code returned
            // let {code, msg, user} = res.data
            // if (code !== 200) {
            //   this.$message({
            //     type: 'error',
            //     message: msg
            //   })
            // } else {
            //   this.$message({
            //     type: 'success',
            //     message: msg
            //   })
            //   // Inject the returned data into session Storage
            //   sessionStorage.setItem('user', JSON.stringify(user))
            //   // Hang up here, official distribution, login action
            //   // That should be all right.
            //   this.$store.dispatch('login')
            //   // console.log(user)
            //   // Jump to the page of my information
            //   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. Write back-end administrator login interface

Create a new adminApi.js under the api folder

adminApi.js

Selection _001.png

4. Writing server interface

  • 1. Open app.js of server and add code
Selection _002.png
  • 2. New routes/adminroutes.js
Selection _003.png
  • 3. New controllers/admincontrol.js
Selection _005.png

5. Improving login in Backend

adminlogin.vue

Selection _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)
// Create basic state
const state = {
  user: JSON.parse(sessionStorage.getItem('user')) || '',
  sended: [],
  adminer: JSON.parse(sessionStorage.getItem('adminer')) || ''
}
// Creating methods to change state
const mutations = {
  // User login
  LOGIN (state) {
    state.user = JSON.parse(sessionStorage.getItem('user'))
  },
  // Logout
  LOGOUT (state) {
    state.user = ''
  },
  // Personal shipment
  SENDED (state) {
    let pars = {
      bename: state.user.name,
      status: 'To be shipped'
    }
    GetSended(pars).then(res => {
      state.sended = res.data.sended
    })
  },
  // Administrator login
  ADMINLOGIN (state) {
    state.adminer = JSON.parse(sessionStorage.getItem('adminer'))
  }
}
// getters
const getters = {
  // Number of shipments delivered by users in the last 7 days
  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
  },
  // User Agent Level Discount Information
  sender: state => {
    let sender = {
      total: state.sended.length,
      role: '',
      zhekou: '',
      num: '',
      next: ''
    }
    if (state.sended.length < 10) {
      sender.role = 'Fledgling'
      sender.zhekou = '10'
      sender.next = 'Gradually enter blissful circumstances'
      sender.num = 10 - state.sended.length
    } else if (state.sended.length < 100 && state.sended.length >= 10) {
      sender.role = 'Gradually enter blissful circumstances'
      sender.zhekou = '9.5'
      sender.next = 'Perfection in one's studies'
      sender.num = 100 - state.sended.length
    } else if (state.sended.length < 1000 && state.sended.length >= 100) {
      sender.role = 'Perfection in one's studies'
      sender.zhekou = '9'
      sender.next = 'Reach the peak of perfection'
      sender.num = 1000 - state.sended.length
    } else {
      sender.role = 'Reach the peak of perfection'
      sender.zhekou = '8.5'
      sender.next = 'It's already the highest level.'
      sender.num = 10000 - state.sended.length
    }
    return sender
  },
  // Customer Delivery Classification Statistics
  sendedall: state => {
    console.log(state.sended)
    let sendedall = []
    sendedall.push({
      name: state.sended.sendprodtype
    })
    return true
  }
}
// Creating driver actions enables mutations to start
const actions = {
  // User login
  // Here's the first thing that drives LOGIN. It's called login.
  login ({commit}) {
    commit('LOGIN')
  },
  // Logout
  logout ({commit}) {
    commit('LOGOUT')
  },
  // Customer Delivery Statistics
  sended ({commit}) {
    commit('SENDED')
  },
  // Administrator login
  adminlogin ({commit}) {
    commit('ADMINLOGIN')
  }
}

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

6, test

The random data, also returned, prompted the user for a password error, indicating success.

Selection _007.png

We still need to test the following data correctness, but as administrators generally do not register such operations, can only rely on administrators to add, but here you can use postman to add data.

Write out the function of adding administrator first.

Selection _008.png

Adding data with postman

Selection _009.png

View results

postman

Selection _010.png

robo 3t

Selection _011.png

test

3.gif

Result Jump Correctly

Take the background administrator's data in admin.vue a little bit

Selection _013.png
Districts _012.png

Take a test.

4.gif

The data are available, but the avatar hangs and colleagues prove successful.

github address:
learn: https://github.com/lyttonlee/learn
server: https://github.com/lyttonlee/express-server-for-learn

Tags: Vue JSON less github

Posted on Mon, 24 Dec 2018 18:21:06 -0800 by quanghoc