使用axios发送请求
这一块配置拦截器，为了之后的返回错误
这一块发送请求，使用了es6新语法，url进行拼接，后续方便插参数，注意那个不是引号，而是tab键的上面那个符号
配置跨域
我写了注释哦。我们需要跨域到后端接口处，那个ws相当于请求一次发送一次请求，target表示访问的目标接口，也就是后端得接口，下面是配置代理服务器
登录页面+验证码
这是效果图，这是页面的结构代码：我就不多说了，这里使用到的组件是elementui
<template><div><div id="particles-js"></div><el-form ref="form" :rules="rules" :model="loginForm" class="loginContainer"><h2 class="loginTitle">系统登录</h2><el-form-item prop="username"><el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input></el-form-item><el-form-item prop="code"><el-input v-model="loginForm.code" placeholder="点击图片更换" style="width: 250px;margin-right: 50px"></el-input>// 这里是验证码，我给他绑定了一个url，以及点击事件，点击一下就可以更换一次图片，这个图片是后盾发送过来的<img :src="captchUrl" @click="updataCaptcha"></el-form-item><el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox><el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button></el-form></div></template>
js部分有用到captch 的url中的地址就是后端的地址，加个当前时间的参数，就是为了使地址的参数不一样就需要重新发送一次请求，也就是说明，点击一次图片，当时的时间是不一样的，这样就可以做到重新发送一次请求了。
postRequest(’/login’,this.loginForm).then(resp=>{}）这一步就是上面在发送请求的时候，我写的url，/login就是登陆的url接口，后面就是参数，我这里参数是一个对象，因为是一个表单，在return那里写了，三个参数
<script>export default {name: 'login',components: {},props: {},data() {return {captchUrl :'/captcha?time'+new Date(),loginForm:{username:'admin',password:'123',code: ''},checked: true,rules:{username: [{required:true,message:'请输入用户名',trigger:'blur'}],password: [{required:true,message:'请输入密码',trigger: 'blur'}],code:[{required:true,message:'请输入验证码',trigger:'blur'}]}}},computed: {},watch: {},methods: {updataCaptcha(){console.log('点击成功')this.captchUrl = '/captcha?time'+ new Date()},submitLogin(){this.$refs.form.validate((valid) => {if (valid) {postRequest('/login',this.loginForm).then(resp=>{if(resp){//这里可以进行路由跳转到首页this.$router.push()}})} else {this.$message.error('请填写完整')return false;}});}},created() {},mounted () {},updated() {},activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发",}</script>
这是少部分的css
<style scoped>.loginContainer{border-radius: 15px;background-clip: padding-box;margin: 180px auto;width: 350px;padding: 15px 35px 15px 35px;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}.loginTitle {margin: 0px auto 40px auto;text-align: center;font-weight: bolder;}.loginRemember{margin-bottom: 20px;text-align: center;}</style>
在登陆成功之后会返回我们token
