login.vue · 我的网页程序

``` <template> <div class="login_container"> <div class="login_box">  <div class="avatar_box"> <img src="@/assets/logo/logo_lv.png" alt=""> </div>  <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">  <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="fas fa-user"></el-input> </el-form-item>  <el-form-item prop="password"> <el-input v-model="loginForm.password" prefix-icon="fas fa-key" type="password"></el-input> </el-form-item> <el-row> <el-col :span="12"><div class="grid-content bg-purple">  <el-form-item class="le">  <el-button type="text"><a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx34a5cf5c6dd0a3e4&redirect_uri=http://json.ui-china.cn/api/openid/imi&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect"><img src="@/assets/logo/icon16_wx_logo.png"/></a></el-button>   </el-form-item> </div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light">  <el-form-item class="btns"> <el-button type="primary" @click="login">登录</el-button> <el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item> </div></el-col> </el-row> </el-form> </div>   <el-dialog title="提示" :visible="wxDialogVisible" width="30%" :before-close="handleClose">  <span id="login_container"></span> <span slot="footer" class="dialog-footer"> <el-button @click="wxDialogVisible = false">取消</el-button>  </span> </el-dialog> </div> </template> <script> // import $ from 'jquery' // import { wxlogin } from 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js' export default { data () { return { // 登录表单数据 loginForm: { username: 'ui-china', password: '' }, // 表单验证规则 loginFormRules: { // 验证用户名 username: [ { required: true, message: '请输入登录名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], // 验证密码 password: [ { required: true, message: '请输入登录密码名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 6 到 15 个字符', trigger: 'blur' } ] }, wxDialogVisible: false } }, // ?token=eb1dcf3d203fc6f10861ec61657e4eda created () { this.token = this.$route.query.token // console.log(this.token)// 输出路径传值 if (this.token) { this.tokenlogin() } else { console.log('需要输入登录跳转跳转') } }, methods: { // tokenlogin登录验证 tokenlogin: function () { const axios = require('axios') axios.get('login/tokenlogin?token=' + this.token).then(res => { if (res.data.code !== 1) return this.$message.error(res.data.msg) this.$message.success(res.data.msg) console.log(res.data.token) window.sessionStorage.setItem('token', res.data.token) this.$router.push('/Home') }) }, // 登录验证 login () { console.log(this.loginForm) // console.log(this.loginForm.password) this.$refs.loginFormRef.validate(async valid => { console.log(valid) if (!valid) return const { data: res } = await this.$http.post('login/login', this.loginForm) if (res.code !== 1) return this.$message.error(res.msg) this.$message.success(res.msg) console.log(res) window.sessionStorage.setItem('token', res.token) this.$router.push('/Home') // console.log(window.sessionStorage.getItem('token')) }) }, // 重置登录表单 resetLoginForm () { this.$refs.loginFormRef.resetFields() }, handleClose (done) { this.$confirm('确认关闭？') .then(_ => { done() }) .catch(_ => {}) } } } </script> <style lang="less" scoped> .login_container{ display: block; // background-color:#2b4b6b; width: 100%; height: 100%; background: -webkit-linear-gradient(#62B896,#00a377,#00925D); /* Safari 5.1-6.0 */ background: -o-linear-gradient(#62B896,#00a377,#00925D); /* Opera 11.1-12.0 */ background: -moz-linear-gradient(#62B896,#00a377,#00925D); /* Firefox 3.6-15 */ background: linear-gradient(#62B896,#00a377,#00925D); /* 标准语法 */ } .login_box{ width:400px; height:300px; background-color: #fff; border-radius: 3px; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); .avatar_box{ height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform: translate(-50%,-50%;); background-color:#fff; img{ width: 100%; height: 100%; border-radius: 50%; background-color:#eee; } } } .login_form{ position: absolute; bottom:0; width:100%; padding:0 10px; box-sizing: border-box; } .btns{ display: flex; justify-content: flex-end; } .le{ display: flex; justify-content: flex-start; } .le i{ margin-left: 16px; } </style> ```