一、Login（登录）

1.在view下创建login.vue

2.配置路由，和main.vue同级

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

Vue.use(VueRouter)

const routes = [
  {
    // 重定向
    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

3.将style改成默认使用scss（设置-->用户代码片段-->vue.json-->less改为scss）

4.在login.vue中写代码

<template>
  <div class="login">
  // 用el-card包裹form表单
    <el-card
      class="login-form"
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
    // 头部
      <div slot="header">
        <span> 请登录账号 </span>
      </div>
      // form表单
      // rules验证规则
      // ref: 获取表单上的值
      <el-form :model="form" :rules="loginFormRelus" ref="loginFormRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('loginFormRef')"
            >登录</el-button
          >
          <el-button>取消</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: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-z(0-9)_-]{3,10}$/, message: '密码由3-18为字母下划线组成' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[a-z0-9_-]{5,18}$/, message: '密码由5-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: '登录成功'
            })
            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>

• ref理解:
  • 我们在el-form表单控件中发现了ref 属性，ref 属性涉及Dom 元素的获取(el-form表单对象)。我们首先需要了解下javasrcipt 是如何获取Dom 元素是通过：document.querySelector（".input"）获取dom元素节点 。Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是:ref 绑定控件，$refs 获取控件。
  • ref 绑定控件： <el-form ref="form" :model="form" :rules="rules" label-width="80px">
• $refs获取控件

methods: {
      onSubmit(formName) {
       this.$refs[formName].validate((valid) => {
        if (valid) {
            alert('验证成功!');
        } else {
            console.log('error submit!!');
            return false;
        }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

5.在src下创建utils/request.js

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

6.在src下创建api/index.js

import request from '../utils/request'

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

• 登录界面效果图

• 登录成功跳转到main.vue

• 登录流程

二、用户列表、用户信息编辑、添加用户

1.实现步骤

• 1.页面布局
• 2.配置路由
• 3.通过定义函数获取接口数据
• 4.在vue页面上引入方法去获取数据渲染到页面上

三、轮播图列表、轮播图编辑、添加轮播图（图片上传）

• 注意：在实现图片上传时，需要在main.js中添加Vue.mixin

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

• 注意接口参数有几个，接口不要写错，跳转的页面要看清楚