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实战项目:登陆页面的更多相关文章
- Vuejs实战项目四:权限校验
路由跳转参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 在/src下创建permission.js进行权限 ...
- Vuejs实战项目步骤一
1.使用vue初始化项目 vue create msm-demo #创建项目 npm run serve #部署 2.更改public文件夹下面的index文件,只留下 <div id=&quo ...
- Vuejs实战项目五:数据列表
1.在EasyMock 中添加数据列表模拟接口 请求url:/suyuan/list 请求方式:get 描述:数据列表 mock.js配置: 例: { "code": 2000, ...
- Vuejs实战项目三:退出系统功能实现
1.创建Mockjs接口 method:post url:/user/logout 描述:退出系统 response: { "code": 2000, //状态码 "fl ...
- SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制?
SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制? 可以这样做: 登陆之前,所有页面跳到 登陆页面:包括随便输入的路由地址. 登陆后,跳到相应页面:随便输入的.不存在的路由地址,才跳到 ...
- 小KING教你做android项目(二)---实现登陆页面并跳转和简单的注册页面
原文:http://blog.csdn.net/jkingcl/article/details/10989773 今天我们主要来介绍登陆页面的实现,主要讲解的就是涉及到的布局,以及简单的跳 ...
- 编写大型项目web页面 从写web登陆页面开始
web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用的cutterman) sketch 可以使用阿里的工具 ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue+websocket+express+mongodb实战项目(实时聊天)
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
随机推荐
- InfluxDB的安装和简介
InfluxDB简介 InfluxDB是一个时间序列数据库,旨在处理高写入和查询负载.它是TICK堆栈的组成部分 .InfluxDB旨在用作涉及大量带时间戳数据的任何用例的后备存储,包括DevOps监 ...
- rem适配手机
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 开机自动调用.bat文件且浏览器全屏展示
1,将 .bat文件放入到以下路径中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 或 C:\Users\Administr ...
- python spark环境配置
在配置Hadoop之前,应该先做以下配置 1.更改主机名 首先更改主机名,目的是为了方便管理. 输入:hostname 查看本机的名称 使用 hostname 修改当前主 ...
- [JZOJ4763] 【NOIP2016提高A组模拟9.7】旷野大计算
题目 题目大意 给你一个数列,有很多个询问,询问一段区间内,某个数乘它的出现次数的最大值,也就是带权众数. 思考历程 第一次看到这道题,立马想到了树套树之类的二位数据结构,发现不行.(就算可以也很难打 ...
- 廖雪峰Java13网络编程-2Email编程-1发送email
1.邮件发送 1.1传统邮件发送: 传统的邮件是通过邮局投递,从一个邮局到另一个邮局,最终到达用户的邮箱. 1.2电子邮件发送: 与传统邮件类似,它是从用户电脑的邮件软件(如outlook)发送到邮件 ...
- thinkphp 统计查询
在应用中我们经常会用到一些统计数据,例如当前所有(或者满足某些条件)的用户数.所有用户的最大积分.用户的平均成绩等等,ThinkPHP为这些统计操作提供了一系列的内置方法,包括: 大理石平台检定规程 ...
- csps-s模拟测试60嘟嘟噜,天才绅士少女助手克里斯蒂娜,凤凰院凶真题解
题面:https://www.cnblogs.com/Juve/articles/11625190.html 嘟嘟噜: 约瑟夫问题 第一种递归的容易re,但复杂度较有保证 第二种适用与n大于m的情况 ...
- 为WCF增加UDP绑定(实践篇)
这两天忙着系统其它功能的开发,没顾上写日志.本篇所述皆围绕为WCF增加UDP绑定(储备篇)中讲到的微软示例,该示例我已上传到网盘. 上篇说道,绑定是由若干绑定元素有序组成,为WCF增加UDP绑定其实就 ...
- 菜鸟nginx源码剖析数据结构篇(二) 双向链表ngx_queue_t[转]
nginx源码剖析数据结构篇(二) 双向链表ngx_queue_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn. ...