Vuejs实战项目:登陆页面
Posted flypig666
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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!"); // //
以上是关于Vuejs实战项目:登陆页面的主要内容,如果未能解决你的问题,请参考以下文章