I. Login

1. Create login.vue in view

2. Configure routes at the same level as main.vue

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    / / redirection
    path: '/'.redirect: '/main'
  },
  {
    path: '/main'.component: () = > import('.. /views/Main.vue'),
    children: [{path: '/main/user_list'.component: () = > import('.. /views/user/list.vue')}, {path: '/main/user_edit'.component: () = > import('.. /views/user/edit.vue'}]}, {path: '/login'.component: () = > import('.. /views/Login.vue')}]const router = new VueRouter({
  routes
})

export default router

Copy the code

3. Change the style to SCSS by default (Settings –> User snippet –>vue.json–>less — change to SCSS)

4. Write code in login.vue

<template>
  <div class="login">// Wrap the form with el-card<el-card
      class="login-form"
      shadow="always"
      :body-style="{ padding: '20px' }"
    >/ / to the head<div slot="header">
        <span>Please login account</span>
      </div>// form form // rules validates the rule // ref: gets the value on the form<el-form :model="form" :rules="loginFormRelus" ref="loginFormRef">
        <el-form-item label="Username" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="Password" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('loginFormRef')"
            >Login < / el - button ><el-button>cancel</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { login } from '.. /api/user'
export default {
  data() {
    return {
      form: {
        username: 'admin'.password: 'admin'
      },
      loginFormRelus: {
        username: [{required: true.message: 'Please enter a user name'.trigger: 'blur' },
          { pattern: / ^ [a-z (0-9) _ -] {3, 10} $/, message: 'Password consists of 3-18 alphabetic underscores'}].password: [{required: true.message: 'Please enter your password'.trigger: 'blur' },
          { pattern: [a - z0-9 / ^ _ -] {5, 17} $/, message: 'Password consists of alphanumeric underscores from 5 to 18'}]}}},methods: {
    login(formName) {
      // console.log(this.form)
      this.$refs[formName].validate((valid) = > {
        if (valid) {
          login(this.form).then(res= > {
            // console.log(res)
            localStorage.token = res.data.token
            this.$message({
              type: 'success'.message: 'Login successful'
            })
            if (res.data.token) {
              this.$router.push('/')}}}else {
          console.log('error submit!! ')
          return false}})}}}</script>
<style lang="scss" scoped>
.login-form {
  width: 25em;
  margin: 200px auto;
}
</style>

Copy the code

• Ref to understand:
  • We found the ref attribute in the El-Form control, which is involved in getting Dom elements (the El-Form object). The first thing we need to understand is how javascript gets a Dom element via: document.querySelector (“.input”). Vue proposes the REF attribute and refs object to simplify DOM retrieval methods. The general operation flow is :ref bound control, refS object. The general operation flow is :ref bound control, refS object. The general operation flow is as follows :ref binds controls, refs retrieves controls.
  • Ref bound control:

<el-form ref="form" :model="form" :rules="rules" label-width="80px">

• $refs gets the control

Methods: {onSubmit(formName) {this.$refs[formName]. Validate ((valid) => {if (valid) {alert(' Validate! '); } else { console.log('error submit!! '); return false; }}); }, resetForm(formName) { this.$refs[formName].resetFields(); }}Copy the code

5. Create utils/request.js under SRC

import axios from 'axios'
import { Message } from 'element-ui'
const http = axios.create({
  / / baseURL: 'http://127.0.0.1:5000'
  baseURL: 'http://115.159.63.12:3000'
})

http.interceptors.request.use(config= > {
  return config
}, err= > {
  Promise.reject(err)
})

http.interceptors.response.use(response= > {
  return response
}, err= > {
  if (err.response.data.message) {
    Message({
      type: 'error'.message: err.response.data.message
    })
  }
  Promise.reject(err)
})

export default http

Copy the code

6. Create API /index.js under SRC

import request from '.. /utils/request'

export function login(params) {
  return request({
    url: '/admin/api/login'.method: 'post'.data: params
  })
}

Copy the code

• Login effect picture

• The login succeeds. Switch to main.vue

• The login process

User list, user information editing, adding users

1. Implementation steps

• 1. Page layout
• 2. Configure routes
• 3. Obtain interface data by defining functions
• 4. Introduce methods on the VUE page to get data to render on the page

3. List, edit, and add the list (upload pictures)

• Note: To implement image upload, you need to add vue.mixin to main.js

Vue.mixin({
  computed: {
    uploadUrl() {
      return 'http://115.159.63.12:3000' + '/upload'}},methods: {
    getAuthHeader() {
      return {
        Authorization: `Bearer The ${localStorage.token || ' '}`}}}})Copy the code

• Note that there are several interface parameters, do not write wrong interface, jump to the page to see clearly