VUE通用后台管理系统（一）登录

先看效果

1）安装vue脚手架，项目配置，项目启动，这一步不做过多赘述，假设你已经成功启动了项目

2）配置路由

1.src/router/index.js中进行路由设置，代码如下

import Vue from 'vue'
import Router from "vue-router";
Vue.use(Router);

import Login from "@/views/Login/login"

const routes = [
  //匹配空路由跳转到登录页
  {
    path: '',
    redirect: "/login",//重定向
  },

  //登录
  {
    path: '/login',
    name: 'login',
    component: Login,
  }
]

const router = new Router({
  mode: 'history',
  routes
})

export default router

3）登录界面

1.创建 src/views/Login/login.vue文件

2.在网上或者本地随便找一找图片，当做登录页背景图，在login.vue中引入

src/views/Login目录下login.vue的代码如下

<template>
  <div>
    <div class="bg_box">
      <img class="bg_img"
        src="../../assets/bg2.png" alt="加载失败"
        referrer="no-referrer|origin|unsafe-url" width="100%;" height="605px;" />
    </div>
  </div>
</template>

<script>

</script>

<style lang="less" scoped>
.bg_img {
  object-fit: fill; // 填充，撑满
}

</style>

此时，在浏览器网址栏输入 localhost://[你的端口号，默认是8080]，会自动跳转到login页面

就可以看到引入的背景图

3.创建src/views/Login/index.vue文件，为登录组件

以下是index.vue代码

<template>
  <div class="LoginForm-Panel" v-loading="loading">
    <div class="login">
      <div class="login-title">
        <span>账号登录</span>
        <span>忘记密码</span>
      </div>

      <el-form :rules="rules" :model="loginForm" ref="loginForm">
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" show-password v-model="loginForm.password" prefix-icon="el-icon-lock"
            placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="validateCode">
          <el-input v-model.trim="loginForm.validateCode" auto-complete="off" placeholder="请输入验证码"
            @keyup.enter.native="handleLogin" :validate-event="false" prefix-icon="el-icon-lock">
          </el-input>
          <div class="login-code" @click="validateCode">
            <img :src="codeURL" class="login-code-img" />
          </div>
        </el-form-item>
        <span style="font-size: 10px; display: flex; flex-direction: row-reverse; width: 100%;  margin-top: 40px; margin-bottom: 10px; text-align: right;">没有账号？点我立即注册</span>
        <el-button style="width: 100%;" type="primary" @click="login(loginForm)">登录</el-button>
      </el-form>
    </div>
  </div>
</template>


<script>
export default {

  created() {
    console.log("created ---------------");
  },

  data() {
    return {
      loading: false,//页面加载状态
      codeURL: null, //验证码图片
      loginForm: { //表单项
        userName: "",
        password: "",
        validateCode: "",
      },
      rules: { //验证规则
        userName: [{ required: true, message: "请输入用户名" }],
        password: [{ required: true, message: "请输入密码" }],
        validateCode: [{ required: true, message: "请输入验证码" }],
      },
    };
  },
};
</script>


<style lang="less">
.login {
  padding: 20px;

  .login-title {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    height: 40px;
    line-height: 1.5;

    a {
      outline: none;
    }
  }

}

.el-form-item__content {
  display: flex;
}

.login-code {
  margin-left: 5px;
  width: 33%;
  height: 100%;

  img {
    cursor: pointer;
    vertical-align: middle;
    height: 100%;
  }
}</style>

4.在login.vue中进行引入注册 index.vue，并在页面上展示

<script>
//引入
import login from "@/views/Login/index";

export default {
//注册
  components: {
    login
  }
}
</script>

template中展示

添加样式

<style lang="less" scoped>
.bg_img {
  object-fit: fill; // 填充，撑满
}

.login_position {
  border-radius: 6px;
  position: absolute;
  top: 80px;
  right: 100px;
  background-color: #fff;
}
</style>

4）实现功能

走到这一步，页面上应该可以看到效果了

但也只是有页面效果而已，实际功能并未完善

1.json-server模拟后端数据

因为登录，注册，验证码这些功能都需要后端支持，所以需要模拟后台数据，我个人喜欢用json-server

可以直接在项目目录下，进入cmd命令行，输入 npm i json-server --save 进行安装

随便在哪个地方创建一个data.json文件，甚至在电脑桌面也行

data.json中写入以下代码

{
  "userList": [
    {
      "userName": "123",
      "passward": "123",
      "id": 1
    },
    {
      "userName": "admin",
      "password": "admin",
      "id": 2
    }
  ],
  "validateCode":[
    {
      "id":1,
      "img":"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAaAEYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD22eaO2t5J5W2xxqXdsZwAMk1nW/iTSbq2nuIbvfHBt3ny3zljhQBjLEngAZJOAOSKi8T3ctvo10kccUgkt5A4LsHC4C7lVVbcBuGScAcZIHI4rwdcwWdzLcS2Nxdy+ZHHAImU7XYMMhWYZO3d8wBKrvyQC2XpZsiU2qsYdGehz6gttZxTzQyrLLhY7YbTKzkZ2DBwTwcnO0AEkgAmvOr2+1u2+IGlWF/qt8IJIHnREt4pZoMq46JGVZ/k5IU7QzKCRlm7Gyvo0mN5qMF7/aDLsZEspnS3XqY0YIQRkDLj75APQKq8nqmp2TfGLRLpp1ihjsmWRpwYihxNwwbBU8jr1yPUUlJG3K+qL3iPxBpep6Utjaagbi7tZ1EySoY5MhWBJUqvOeuBgE9siiy8TfYfDttp9jG8l+dyg7chSztjA7t0wOnP4Vp+M7iC68O281vNHNE1yNrxsGU4VxwR71zVvaX2lWllr1rh0JbPy52HJXDD0I7+/bjLbT2M5XUjThSbwxqNg11Zx3eoak5RZHuCPKYkAg/Kcn5hlvqPc9Hb6841/wDsa/tFt7h4/MgaOXzElHOedoI6HqOx9s8trusRaxqXhme1C+etyQ0Ltja26PAJweD64/DPFaBL/wDCwre41lVtHEHl2PltujlOCCC5A5+c8YHb23BjztSaT0ujs6KKKDqOX8Sa3oU2izxG5s7yV1ZYY0kRyr7ThuThcDJz17DJIB57wN9rS4u5bLT7a5kwiNJNN5ZiU7jwQjEglRkDuF+o7rW/+QBqP/XrL/6Ca4rwFp9lff2h9ss7e42eXt86MPtzuzjI46CrUU00jkqfx4fM6PV9c1vSrEzJ4be+lDDK2lzvUKeO6hy2ccBCMHOeorngt5q/j6y8TDR9Ut7CytmhYTwKshb58kIW3FQJM5UEkrgA13lrZ2tlGY7S2hgjJ3FYkCAn1wO/Aqaoatpc6rHL6nHoWqkvNZ38cxYFp4tLmEjYGMFjGSR0/IUyGHwxb2gtZr6W1BBDR3VxJaNKD3KEpu9N2OgxniuroqOVh7173PPr/wANCTUdOvvD6zXNqsvmvNDPEyqAw4j3HkjB65HT3rWvtM1TXfEOn3MtstjZafIJF811aSU5BPCkgcqB17556Dq6KsydFO/mFFFFBsf/2Q==",
      "code":"IJKB"
    },
    {
      "id":2,
      "img":"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",
      "code":"SJDU"
    },
    {
      "id":3,
      "img":"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",
      "code":"2UX2"
    },
    {
      "id":4,
      "img":"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAaAEYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2S4iuvMEttOoIGDDIoKN+I+ZT2zyB/dNc1aeL5T4pn02/SCC1CN5TosjbnU4b5iANoIkycADaeeMnqrieK1tpbiZtsUSF3bBOFAyTxXmJ1lrVPDt1dz+VdW9w8twd0T7o523s2xWLD5T/AHB97jHGc27HVTgtWdx4h8QpoelQ38cK3SSyKi7ZNoIKkgg4Oen602bxJGnhIa9FB5q7FJi3lcMWCkZx2Oecc4rl/HMU39lR3B01bKKS5BI+0fOzFWyWjUFMnn5gxOMfQYGoQHRo9U0OUxytE6SpKWbGDt6IWADYI+YAkDcOQcjKU2m7HFKrJNneS+Kb+4gs30XQpNSaaLzJsTeVHCcL8okZdrnJIIByCpyPTL1Tx1rujfZxf+EvLe5k8uGNdSR3kb0VVUk9u3ceorQ0jVo00SwsLMyNMtugkHzPKpKg/KrA8c8MxEa7l5I4rl9D05/Gni/U9RvSGs7FPstvMGWYGQNkshZNjg/OeV+USLgDC46aTTV2tjZSuty74v1RU8Q6HJbX1/b2VzcbbmUXUkUMiAxg7fmAChSTuUAHdkE84vjz59dt5PDk2pStauBdwahdyLAqlWPzJITKGOV2naV784NZ3jPSrW18SeFUj88ma72vI9xI8hG+PADsxYAZOMHgkkck11ei6DJpWu6xd+Zvt7zyPKDzPJINikNuLZPU8cnj0qdDTW2pu0UUUgMnxJYXuqaHPY2LxxyzYUu8jIAucnoDnOMY9CfocrVfDl9e+E7XSbaHTLdkx5iYcqpBzujbGQTznIJO489z1dFFilJq1jlPEGj654g0qGzlj06GRJFkaRbhyGIUg4Xy+Bz6msrxV4e1rWXtbj7Er3yRiOQwTL5LLycjeVZTknjBGCPmyDXoFFS4J7mUqale/U5W1EuleHXtotPubLU2tBGtwYPP3yhMAkx7ztUkYDDpwBgYEHguGz8L+HIrG7Z4ZjI8lxO8E0cRYnAO+RVA+UKO3I9Tz2NFaJ2VhqNtjm77QtP8TXttqSaxPJ9jl3QfZZImSJ/lJ/gOfuqcEn8q6KJGjiRGkaRlUAu2MsfU4AGfoBTqKkoKKKKAP//Z",
      "code":"AN7F"
    },
    {
      "id":5,
      "img":"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",
      "code":"S5TJ"
    },
    {
      "id":6,
      "img":"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",
      "code":"MMCM"
    },
    {
      "id":7, 
      "img":"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAaAEYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD17UMpB532m6hVPvC2iEjNkgfd2MT+ArG/tmx/sj+1v7d1D7Dv2ed9lGM9P+eWcZ4z0zxnNdJXnljppsfEc3hJxCulzXA1FA5G6WMf8ssHduG5Vz0OEY96ubaeg6dOE079Py6m1rmo3GnaEL631G+LyOI41mt0TB5zuVoww4U/p2rn0bXZNMTVk1W6eWTzJ1hWRdoRGAZiGYcZPRVYdBxmu11/SBrWkyWoZVlBDxM2cBh649QSPxzXn1m+q/Yr+KFomtLOGS3+0uNqKj4dhGxxv8zCYODwVxt3ZPLXUuf3r2t07maXYTUPGet22jpeQ6lmYTCGSFrVSOQxD7wAB0xt68E5xwOgGu30Y8iSfUvM7Xt5bxWFq564zIrODjjG0kkZ4HI4XVIZF8HzTlf3b38KK2epEcpP/oQ/OvcK66XNLDwk93clpXOD/t6/j1S1ik11biO4O0W+npBOQx4A84le+DzGBzjnBNdFHrqW17Z6Ze297FPOu1JrgRYkIHco2NxPYDqRwMisHxtaQNrOilbdTJcTFZCiJvk5QAHdweOBu4/CpdDssa/fRDTrQraNDgXFvDHLHuG4sGiXBIxwPpyMHOSlLn5b/wBWuSt7I7OiiiugsgvLy30+zlu7uVYoIl3O7dAP6n2715nLfxf2fbeMVu7f+0/t8kpti6K7Q/LGYemWIUKc4GA5OMkE+p0wRRiZpRGolZQrOByQMkAn0GT+Z9aicXLqbUqihfT/AIbsc81ofF+jGaa7CWNym6CGHnb/ANdTnDkY5UYAJYfMQrCoPA8k0h+261czwu/mSJtwWbbtDZLHnAAzjoMV19FTKjCeskZOV9jjPFvg6XWLC1sdKtdPt1gKkTyOQ+Bu+ThCSMtnO7rnjvTdV8N67q0UVgZ4bXS5HU3cRvnuHdQwOUaSPKnjpnHTgc57WiumNRxSS6COL8VRXcniDS57aK8uRbTB3TyG8uPlDwyoSc4OfvYx07VfXUZ73VbJbDTbyxM8ge8uJrPaSqBsIxI5zjrnjIx3A6Wiub2erd9yOXUKKKK1LP/Z",
      "code":"X9LE"
    },
    {
      "id":8, 
      "img":"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",
      "code":"AUP7"
    },
    {
      "id":9, 
      "img":"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAaAEYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1TX9W1W00K7urLTnikiTJaZlYqCQCyqhYHAyTkgDrzyK5a4OqWPhoeJE8SzvNP5bpA8m9AxyGRRwvckrtO3bgHgk9t4h1R9F0G61CONZJIgNqscDJYKCfYZz/AIVw9xop0fwxY+JLSVTdKYrqeJ1AhfcTgiMDAYeYAMYwASMGsmdNJKy9fv8AI6CHxOmj6ObvxA2oQTeSr+XcQIA7Y6RlBjJOfkYhgFJIABNc9p2qePfF6yahpc1npdgGKRLKgIk5PIJRiSOATwMjgZzUnxOuvt3gHS7zZs8+4il2Zzt3ROcZ79a57T/A9vqXw6fXZtQuftMUE0kMfBjREZiUweeSGOQRgt0ODlmL3PR9Pudc0nwzqFx4g8i6u7NZJEeEhRMgQMOwwc7l+6OnQ9TneAptUgk1jRtYllnu7GdGM0k5l3K68AZ5Awuf+BdAa4XT/E97q/g6fQ9Q+1XHnXsEP24nzWjV23Y2j53P7tsAZznGRgA9RbX1vp3xFi1K4uoLqHVLBkS7som8qSRWHyj533NiMLhTkkqMZOTtFLkf9bf0zNvU9ForjPFsr6jY2a3Nu9npxu13TSyBZSu1iWCYOBtyRuIbIxsq/o+neGk1Vjp0LR31sNxSQyq6hhjO1+vB9O49RWaWlzRLS50lFFFSIyLj+2Lq2lt5tM05opUKOv8AaEgypGCOIaxR4fuYrJbG6sp59LVyy2NpfKwySSASyRsVBOfvk5C8Ht2NFME2tmc/q4bW9KuNOvNA1MwTrhtktuCCCCCD5vUEA+nHOa88l+HOs6XaXDxarpltZyIoea7AilQMMFSwDbM5Kna+GBxznFex014o5GRnRWaNtyEjJU4IyPQ4JH4mi/YV2jybTfh1qVreRXuj38ySQtuS4uYjbZP+yh3NjqCHC57bgauX3hTxKL7+0Y2uJ9ZEgkW8haCNFOFX/ZaQFVAwQoHPDAnPp9FL3u415q55pcJrN7dQJrVwl/8AaJibW1/s6UIhXBYFGeLK4IGX3jAYZHzZ0raO4g+IVlAIbWLyrXy5RYkhCgVgpZcDZ/B8pLY+Xk8Vt+M/l8MXMy8SxPG8bjqjb1GQex5PPvWf4B/0nTbm9n/e3bXDIZ5PmkK7U43HnHtWib5dTXmujrqKKKzMj//Z",
      "code":"86A5"
    },
    {
      "id":10,
      "img":"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAaAEYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1jWriW00HUbmBtk0NrJIjYBwwUkHB96848O6v428TfafsWs28f2fbv86FBndnGMRn+6a9C8R/8ivq3/XlN/6Aa88+GP8AaBTVlsBbBmMG6S4LEIMv0Ufe4z/Evat72VzJ6ySNOy8Ya5o2stpXiOCKURqW86JMPICfldeisvbop/EEV3OnX8Wp2EV5ArrHJnAcAHgkdifSvOfiHcXVrf6SL28tZmAlJSCFoiqnaMsC7ZBxx0+6evaXw3O3kXcPkxSpEpndZbyaJSgGGyqKyuOmQR+Y6Er2uhre1zrr/wAV2Gn6k9hNFOZUKgsAgXkAjksMde9SS+KNNjW32/aZHuSot0+zunm5IA2lwF7jnNeXkC+1SGMwkJcTgGK3wvBb7qZOB1wM8dK7vxDq1jbaQsWp6ZfWECFWieOS2V4ypGDGBITxkDgcA1lJu7S6FpK12N8Xazf6fY219b2T2sqTGMSTshJDI3ACscjgHkgZVeD2wrO58Wa1Ym4ishcpJlPOeZkVu3+r8wIR2+7g4Oc81b1LU7LxtaJFbajIIophI8UGnzTNECrAbyqnLH0BAHzctgGsW9fU/C5tzp+sXjQDIVJoJIACc5xHIMMOc5GcE84JGcpcyd9bGsI3W2vmepabE0OmWyPbxW0nlgyQwqAiORlgAOOpNFVtA1ePW9GgvVK+YRtlVf4HHUYyceozzgiiuhO6MWrMn1a0kv8ARr6ziKiSe3kiUseAWUgZ9ua83sfDHijwt5gs9Y063e5xmNQ0rybc/dXyyTjcc4H1r1So0ghjmkmSJFllx5jqoDPjgZPfFUmS1c840zwDql/qw1TXrhTIzFpUkVZCzZ4xg7duMYzwCMFSvXP17TJdK1aaCTbtYmSNhjlCTg4AAB46YA444xXrdFHMFkjy06QZdAtLq0tPt91FP5s0aIsiBDgCNwDlj8oO0dAxyBkZ6W2k0+xsltfC7W0t/dushZI0ACgjJlCgBFC8YwDk8DJJrq440ijWONFREAVVUYAA6ACnVlytu99xp6K5ja9/byfZ59E8iTy93nW8uP3ucBcHjpyeo/HpXJarpPjHxLNDFfW0FrAmSAsoEYbn5iAzEnt7e2TXo1FEoc27LjPl2RT0nTo9J0q2sYjlYUwW5+ZupPU4ySTj3oq5RVpW0Jbuf//Z",
      "code":"DVC5"
    }
  ]
}

userList为用户列表，validateCode为验证码，这里是写死的一些数据

直接在你的data.json文件所在目录下cmd进入命令行

输入 json-server data.json

如果出现了这个

就说明json-server服务启动了，可以正常访问

在浏览器网址栏输入其中的地址

2，配置axios请求

项目目录下安装axios， npm i axios --save

安装成功之后，在src/utils目录下新建request.js文件

代码如下

import axios from "axios";


const HTTP = axios.create({
  "baseURL": "http://localhost:3000/",//请求url公共部分 , 3000为端口号
  "timeout": 3000,//超时时间
})

//请求拦截器
HTTP.interceptors.request.use(config => {
  //请求头添加token
  const token = "token"
  config.headers = Object.assign(config.headers, { token })
  return config
})


//响应拦截器
HTTP.interceptors.response.use(res => {
  //请求头添加token
  return new Promise((resolve, reject) => {
    if (res.status >= 200 || res.status < 300) {
    // 添加code码
      resolve({ data: res.data, code: 0 })
    } else {
      reject({code : 2 , error :"系统错误，请稍后再试"})
    }
  })
})

export default HTTP

3，接口配置

在src/api目录下新建servers.js文件

代码如下

import request from "@/utils/request"


//登录
export function login(params) {
  return request({
    url: "/userList",
    method: "get",
    data: params
  })
}
//刷新验证码
export function getValidateCode() {
  //随机ID  1-10
  let id = Math.floor(Math.random() * (10)) + 1;

  return request({
    url: `/validateCode?id=${id}`,
    method: "GET"
  })
}

4，页面中引入接口，并发送获取验证码请求

在src/views/Login/index.vue中引入：srcipt标签中第一行添加以下代码

import { login, getValidateCode} from "@/api/servers";

methods中添加页面加载状态事件

  methods: {
    //设置页面加载状态
    setLoading(bool) {
      this.loading = bool
    },

created生命周期中进行网络请求，获取验证码

  created() {
    this.setLoading(true)
    //setTimeout模拟网络延迟
    setTimeout(() => {
      //接口调用
      getValidateCode().then((res) => {
        this.codeURL = `data:image/png;base64,${res.data[0].img}`;
      });
      this.setLoading(false)
    }, 500)
  },

有不太清楚的可以console.log(res)以下，看模拟后台返回的是什么数据

给codeURL赋值这一步，不懂的可以看看base64编码解码相关的内容

到这一步，每次刷新页面，就可以随机刷新一个图形验证码

给包裹这个img的div标签绑定一个点击事件

<div class="login-code" @click="validateCode">
            <img :src="codeURL" class="login-code-img" />
          </div>

点击验证码可以再次刷新，所以代码需要优化一下

效果

5，给登录按钮绑定点击事件，并进行登录验证

<el-button style="width: 100%;" type="primary" @click="login(loginForm)">登录</el-button>

    login() {
      this.$refs.loginForm.validate((val) => {
        if (val) {
          this.setLoading(true)
          setTimeout(() => {
            const { userName, password, validateCode } = this.loginForm;
            //验证码效验
            verifyCode(validateCode).then((res) => {
              console.log(res);
              if (res.data.length !== 0) {
                //用户名密码效验
                login({ userName, password }).then((res2) => {
                  if (res2.data.some(item => item.userName === userName && item.password === password)) {
                    this.$router.push("/home");
                  } else {
                    this.errorMessage("用户名或密码错误，请重试")
                  }
                  setTimeout(() => {
                    this.setLoading(false)
                   } , 200)
                });
              } else {
                this.errorMessage("验证码错误")
              }
              console.log(res);
            });
          }, 500);
        }
      });
    },
    errorMessage(message) {
      this.validateCode()
      this.$message({
        message,
        type: "error",
        center:true
      });
      this.$refs.loginForm.resetFields();
    },

至此，登录功能已完成

完结撒花----------------------------------------------------------------------------------------------------------------------------------------------------！！！