大学毕业设计，前端使用了vue，后端使用了node.js.zip

<template> <div class="loginContent"> <div style="padding-bottom: 2.5rem;"> <div class="lgnheader"> <img src="../assets/images/loginLogo.jpg" /> <h4 class="header_tit_txt">小米帐号登录</h4> </div> <label class="labelBox label_user" :class="{error:userNameCheck}"> <div v-show="loginType" class="cityList"> +86 <i></i> </div> <input v-model="userName" class="item_account" autocomplete="off" type="tel" name="user" :placeholder="userNamePlaceHolder" @input="validetaUserName()" /> <div v-show="isClearLink" class="clear_link_panel"> <span class="clear_link" @click="clearLink()"></span> </div> </label> <label class="labelBox label_cmsCode" :class="{error:passwordCheck}"> <input v-model="password" class="item_account" autocomplete="off" :type="passwordType" name="user" :placeholder="passwordPlaceHolder" @input="validetaPasd()" /> <div v-if="loginType" class="code_panel" :class="{active:!show}"> <a class="send_ticket" @click="getCode()" href="javascript:;" id="getSMSCode" >{{this.snsCodeBtn}}</a> </div> <div v-else class="eye_panel pwd-visiable" @click="changePasswordInputType()"> <span class="eye pwd-eye"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path class="eye_outer" d="M0 8 C6 0,14 0,20 8, 14 16,6 16, 0 8 z" /> <circle class="eye_inner" cx="10" cy="8" r="3" /> </svg> </span> </div> </label> <div class="err_tip" v-if="errorTip"> <em class="icon_error"></em> <span class="error-con" v-text="errorText"></span> </div> <div class="actionButton loginRegisBtn" @click="login()">没有账号/立即注册</div> <div @click="changeLoginType()" class="actionButton loginTypeChange" v-html="loginTypeChangeTxt" ></div> <div class="n_links_area"> <a href class="outer-link"></a> </div> <div class="other_login_type sns-login-container"> <fieldset class="oth_type_tit"> <div class="oth_type_txt">其他方式登录</div> </fieldset> <div class="oth_type_links"> <a class="icon_type btn_weibo sns-login-link"> <i class="btn_sns_icontype icon_default_weibo"></i> </a> <a class="icon_type btn_alipay sns-login-link"> <i class="btn_sns_icontype icon_default_alipay"></i> </a> <a class="icon_type btn_weixin sns-login-link"> <i class="btn_sns_icontype icon_default_weixin"></i> </a> </div> </div> </div> <div class="nf-link-area clearfix n-footer"> <ul class="lang-select-list"> <li> <a href="#" class="lang-select-li current">简体</a>| </li> <li> <a href="#" class="lang-select-li">繁体</a>| </li> <li> <a href="#" class="lang-select-li">English</a>| </li> <li> <a href="#" target="_blank">常见问题</a>| </li> <li> <a href="#" target="_blank">隐私政策</a> </li> </ul> </div> </div> </template> <script> import axios from "../api/index"; export default { components: {}, data() { return { isClearLink: false, //用户名按钮是否显示 userName: "", //用户名 snsCode: "", // 验证码 password: "", //密码 userNameCheck: false, passwordCheck: false, errorTip: false, errorText: "手机号格式不正确", loginType: true, //登录方式 true:验证码登录，false:账号密码登录 loginTypeChangeTxt: "用户名密码登录", userNamePlaceHolder: "手机号码", passwordPlaceHolder: "短信验证码", passwordType: "number", snsCodeBtn: "获取验证码", //获取验证码按钮文案 //验证码事件 show: true, count: "", timer: null }; }, methods: { //验证表单信息 validateForm() { if (this.loginType) { if (!/^1[3456789]\d{9}$/.test(this.userName)) { this.userNameCheck = true; this.errorTip = true; this.errorText = "手机号格式不正确"; return false; } if (!/^\d{4}$/.test(this.password)) { this.passwordCheck = true; this.errorTip = true; this.errorText = "验证码格式不正确"; return false; } return true; } return true; }, //点击登录按钮 login() { if (this.validateForm()) { console.log("通过验证之后"); axios.post("/user/login", { account: this.userName, password: 'e807f1fcf82d132f9bb018ca6738a19f', }).then(result => { if (parseInt(result.code) === 0) { console.log(result,'+++++++++'); localStorage.setItem("isLogin", "yes"); localStorage.setItem("userId", result.id); localStorage.setItem("userName", result.name); this.$router.replace('/myself'); }else{ this.userNameCheck = true; this.passwordCheck = true; this.errorTip = true; this.errorText = "用户名密码不匹配"; } }); } }, //点击按钮清除用户名输入框 clearLink() { this.isClearLink = false; this.userName = ""; }, //修改登录方式 changeLoginType() { this.loginType = !this.loginType; console.log(this.loginType); this.password = ""; if (this.loginType) { this.loginTypeChangeTxt = "用户名密码登录"; this.userNamePlaceHolder = "手机号码"; this.passwordPlaceHolder = "短信验证码"; this.passwordType = "number"; } else { this.loginTypeChangeTxt = "手机短信登录/注册"; this.userNamePlaceHolder = "邮箱/手机号码/小米ID"; this.passwordPlaceHolder = "密码"; this.passwordType = "password"; } }, //修改密码输入框type类型 changePasswordInputType() { let type = this.passwordType; if (type === "number") { this.passwordType = "password"; } else { this.passwordType = "number"; } }, //用户名改变时触发验证等事件 validetaUserName() { let userName = this.userName; this.userNameCheck = false; this.errorTip = false; if (userName && userName.length > 0) { this.isClearLink = true; } else { this.isClearLink = false; } }, //验证码，密码输入框change事件 validetaPasd() { this.passwordCheck = false; this.errorTip = false; }, //验证码倒计时 getCode() { const TIME_COUNT = 60; if (!this.timer) { this.count = TIME_COUNT; this.show = false; this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count--; this.snsCodeBtn = `重新发送(${this.count})`; } else { this.snsCodeBtn = `重新获取`; this.show = true; clearInterval(this.timer); this.timer = null; } }, 1000); } } } }; </script> <style lang='less'> .loginContent { width: 100%; margin: 0 auto 0.6rem; padding: 0 0.4rem; position: relative; box-sizing: border-box; .lgnheader { padding: 0.6rem 0 0.2rem; box-sizing: border-box; h4 { font-size: 0.36rem; color: #000; font-weight: normal; text-align: c