先看效果
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，并在页面上展示
login.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":"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAaAEYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3WuTj8bQt40vNCMAaGBBtmhbzGZwAWXYBk4zjAyRtJPGdvUyyxwRPLK6xxopZ3c4Cgckk9hXjo1KfUY/DWqWDrDqhv54LiRIGUBp5SwUSMjJgKzcHcRvzg802zRI9jjkSWNZI3V0YBlZTkEHoQayr7xFZ2iTGJ0mMLbJZDIEhhbO3Ekp+VSCQCoy/IIU1wfjXQLnTtGgvJ9RnkeS5Ikt/NdotzBmLYJ27s7slVQHdwq9Dc8d6Xo1r4btrvTNOsrdnughkgt1jbG18qcAEcjkHoRz0pNhoi9feJ9KLKdR1KPUImGfsumTxtEvXhxv3ydwSQEYEZUGtKDxdZwtYWo0bVLRLiUW0CS2ywhcbR90sCFG5eg+mcGua8RXe/wABaNazJ5U6iBkGciRPKPzKe/UAjqCfQqTs+IjJ4sisbDTbW5a2aRbiS8eJkRU5Hy7sbuGzx26Z5xzynKMpJeVjJzd3Y6a81jTNPlEV7qNnbSFdwSadUJHTOCenB/Kq0XifRJr5LOLVLN5JAPL2XCMHJONowfvcjjvnjODiveaLo0ZfVfEBtLmREEbXF6qLFGpbhQDwBuPBOW5xuNcBbacnjXxNdXXhxrLTLTStjWrJZhGkkJyGYY6ZQ8nOBj5eWrodzqjCDi3roeqXuoWWmwia/vLe1iZtgeeVUUtycZJ68H8qKp6PY2Kr9viSWW8cNFLc3J3zZDYdM9FXcp+VMJnJUYorT3TBO6uin41u5YfDV1a2oga6vEaBFmmSMbSMOcsy9Ae2eSOMZrm/EMa6r8O7TTbTS76e7hWJYUjHmrGUG0sZE+Rxt3DjPLdAQcei0VFg1PO/G2oyar4PtZH0+9tZ1nWSaKaBwIvlZfv42kZIxzzkcDpVHxtrNpq2kQS2tvdwiWZJC0mwRy/IRkYY5YZwSOnRuQoHqEkaTRPFKivG4KsrDIYHqCO4rzTwnZ2rfEXV4mtoTHAZmiUoMRlZl2lR2I7Y6VLATWdP1qTw9YWU1tcTTQhAIoFkZY1VSh4EYBPAyS7eq4Vq7m2vZ2i+zvIVmkVha3E8DKJCAfvIdpDjGSvG4DcuBkLq0URhyycu4uXW5y2vwweHtAvdakluLzUoIiILu42yPE7/ACKUXARB8y7tqjcBzuNO+H+lrpXg2xGF8y5X7TIVYkMX5Xr0O3aDjjI/Gunoq3du7NVO0ORdyGK2SG4uJkLAzkM69twAXPrkgKPT5Rx1yVNRQZpWP//Z", "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 HTTP3，接口配置
在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(); },至此，登录功能已完成
完结撒花----------------------------------------------------------------------------------------------------------------------------------------------------！！！
