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,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
随机推荐
- Mysql优化系列之查询性能优化前篇1
前言 这是优化系列的最后一篇的第1小篇,我们其实可以直接从sql怎么写讲起,why not?但是我还是决定花2个篇幅 问一些问题,带着几个问题循序渐进的往下走. 一个sql语句是怎么被执行的? sql ...
- idea git 下载项目,解决冲突,提交代码
git安装 1. 安装git工具上篇文章说过请参考 https://mp.weixin.qq.com/s/A8MkjYTXYSMVRlg25TWemQ idea下载coding代码 打开idea准备下 ...
- vue-cli3使用yarn run build打包找不到路径
vue-cli3使用yarn run build打包项目部署到服务器上面,运行空白 解决办法非常方便,直接创建vue.config.js 在vue.config.js中添加即可 再打包项目即成功
- C++: Type conversions
1.static_cast static_cast可以转换相关联的类,可以从子类转换成父类.也能从父类转向子类,但是如果转换的父类指针(或者父类引用)所指向的对象是完整的,那么是没有问题:但是 ...
- thinkphp 自动完成
自动完成是ThinkPHP提供用来完成数据自动处理和过滤的方法,使用create方法创建数据对象的时候会自动完成数据处理. 因此,在ThinkPHP使用create方法来创建数据对象是更加安全的方式, ...
- 0906NOIP模拟测试赛后总结
我进前十辣.然而有10个大佬去学LCT了于是没有考试. Dybala神和exzkt神分-rank1,奶风神和林哥分-rank3,wc.miemeng和DuanYue神140分-rank5. 我.ooo ...
- js摇一摇事件
今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少. 发现很有意思. 一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if ...
- 大数据、AI“武装”企业服务:风控、检索、安全
大数据.AI“武装”企业服务:风控.检索.安全 小饭桌创业课堂2017-05-06 15:26:42阅读(127)评论(0) + - 文|吴杨可月 - - 小饭桌创业研究院出品 - 两件秘闻,将美国大 ...
- Synchronized理解及用法
加锁: 1.同步实例方法,锁是当前实例对象 2.同步类方法,锁的是当前类对象 3.同步代码块,锁是括号里面的对象 原理: JVM内置锁通过synchronized使用,通过内部对象Monitor(监视 ...
- APPScan手动探索