Vuejs实战项目:登陆页面
1、在view文件夹下创建login文件夹,创建index.vue:代表登录的组件
配置router.js,导入登录组件
import Vue from "vue"; import Router from "vue-router"; // 导入登录组件’ import Login from './views/login/index.vue' Vue.use(Router); export default new Router({ // mode: "history", //base: process.env.BASE_URL, routes: [ { path: '/login', name: 'login', //路由名称 component: Login //组件对象 } ] });
2、结合Element-UI编写index.vue,index.vue的目录为:views/login/index.vue
<template> <div class="login-container"> <bubbles-effect :options="options"></bubbles-effect> <el-form ref="form" :model="form" label-width="80px" class="login-form"> <h2 class="login-title" style="center">后台管理系统登录</h2> <el-form-item label="账号" class="box"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="密码" class="box"> <el-input v-model="form.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> <el-button class="cancle">取消</el-button> </el-form-item> </el-form> </div> <!-- <vue-canvas-nest></!--> </template> <script> import vueCanvasNest from "vue-canvas-nest"; // import bubblesEffect from 'vue-canvas-effect' export default { data() { return { form: { username: "", password: "" }, options: { color: "rgba(225,225,225,0.5)", //Bubble color radius: 15, //Bubble radius densety: 0.3, // The larger the bubble density, the greater the density (suggest no more than 1). clearOffset: 0.2 // The larger the bubble disappears [0-1], the longer it disappears. } }; }, components: { vueCanvasNest // bubblesEffect }, methods: { onSubmit() { console.log("submit!"); } } }; </script> <style scoped> .login-form { width: 350px; /* 上下嫌隙 160px,左右自动居中 */ margin: 160px auto; background-color: rgb(255, 255, 255, 0.8); padding: 28px; border-radius: 20px; /* border: solid 1px black; */ box-shadow: 0 0 30px 3px rgba(119,118,118,0.33); } .login-container { position: absolute; width: 100%; height: 100%; } .login-title { color: #303133; text-align: center; } .cancle { margin-left: 80px; } .box { margin-left: 0px; } </style>
3、表单验证
1、在el-form中导入 :rules="rules",el-form-item导入pro=“属性名称”
在export的data中配置rules:
rules: { username: [ { required: true, message: '密码不能为空', trigger: 'blur' } ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' } ] },
配置methods:
methods: { submitForm(formName) { //定位到表单,再进行校验 this.$refs[formName].validate(valid => { // console.log(valid) //成功为true,失败为false if(valid){ // 提交表单给后台进行验证是否正确 }else{ console.log('验证失败') return false } }) }, // onSubmit() { // console.log("submit!"); // } // } }
4、easyMock添加系统登录后台服务接口
1、修改.env.develoment文件中的目标服务接口地址---------VUE_APP_SERVICE_URL
2、配置 Mock.js,创建新的接口
①当登录成功后,响应状态码2000和token值,token用来认证(后面请求只要是成功的,状态码均为2000,这个是与后台接口的约定)
* 请求URL:/user/login
* 请求方式:post
* 描述: 登录认证
* mock.js 接口配置:
{ "code": 2000, //状态码 "flag": true, "message": '验证成功', "data": { "token": "admin" } }
②通过token获取用户信息:
添加响应用户信息模拟接口:
* 请求URL:/user/info/{token}
* 请求方式:get
* 描述:响应用户信息
* mock.js 配置
{ "code": 2000, "flag": true, "message": '成功获取用户信息', "data": { "id|1-10000": 1, "name": "@cname", "roles": ["manager"] } }
5、登录逻辑实现
在src/api 下创建login.js,导出两个方法
import request from '@/utils/request' // 导出函数 export function login(username, password) { return request({ url: '/user/login', method: 'post', data: { username, //username: username password } }) } // 获取返回的用户信息 export function getUserInfo(token) { return request({ url: `/user/info/${token}`, method: 'get' }) }
表单校验:
methods: { submitForm(formName) { //定位到表单,再进行校验 this.$refs[formName].validate(valid => { // console.log(valid) //成功为true,失败为false if(valid){ // 提交表单给后台进行验证是否正确,then后面传入回调函数 login(this.form.username,this.form.password).then(response => { const resp = response.data console.log(resp,resp.flag,resp.data.token) if (resp.flag) { // 当resp.flag为true时,表示验证成功 // 通过token获取用户信息 getUserInfo(resp.data.token).then(response => { const respUser = response.data console.log(respUser) if (respUser.flag){ // 获取到用户的数据 //成功 console.log('userInfo',respUser.data) // 1.保存token,用户信息 localStorage.setItem('msm-user', JSON.stringify(respUser.data)) localStorage.setItem('msm-token', resp.data.token) // 前往首页 this.$router.push('/') }else{ this.$message.error(respUser.message); } }) }else { // 未通过,弹出警告 this.$message.error(resp.message); } }) }else{ console.log('验证失败') return false } }) }, // onSubmit() { // console.log("submit!"); // } // } }