vue.js简单登录界面访问mysql_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);
exportdefault newRouter({//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
后台管理系统登录
登录
取消
exportdefault{
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!");
}
}
};
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;
}
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 functionlogin(username, password) {returnrequest({
url:'/user/login',
method:'post',
data: {
username,//username: username
password
}
})
}//获取返回的用户信息
export functiongetUserInfo(token) {returnrequest({
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!");//}//}
}
vue.js简单登录界面访问mysql_Vuejs实战项目:登陆页面相关推荐
- Vue+Echarts构建可视化大数据平台实战项目(上)粒子动效,登录界面抖动,背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
- Vue实战篇一: 使用Vue搭建注册登录界面
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- vue 创建一个登录界面
vue创建一个登录界面 (1)创建登录界面和主页 (2)配置路由 (3)配置main.js (4)配置App.vue (5)登录页面 (6)主页面 用到的组件 参考链接 (1)创建登录界面和主页 打开 ...
- vue实现未登录无法访问某页面
vue实现未登录无法访问某页面 //路由 {path: "index",name: "Index",component: () => import(&qu ...
- android自动登录简书,Android开发之简单登录界面
用户界面基础 Android系统的四大组件分别是活动(Activity).服务(Service).广播接收器(Broadcast Receiver).内容提供器(Content Provider). ...
- 原生JS验证码登录界面
原生JS验证码登录界面 效果图 html页面结构 css页面样式 JavaScript页面行为 效果图 html页面结构 页面的结构以input.label.canvas等标签组成 <!DOCT ...
- Vue实战-实现登陆页面
Vue实战-实现登陆页面 文章目录 Vue实战-实现登陆页面 1 前期准备 1.1 安装Node.js 1.2 安装webpack 1.3 安装vue-cli 2 搭建Vue项目 2.1 创建项目 2 ...
- vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云 今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
- 基于node.js的vue_基于Vue.js和Wilddog的可怕站点danmu项目
基于node.js的vue AweSiteChat (AweSiteChat) A Vue.js & Wilddog project 一个Vue.js和Wilddog项目 现场演示 (live ...
- 企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型 引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...
最新文章
- SQL Azure(十) SQL Azure Data Sync数据同步功能(上)
- 运行Android应用时提示ADB是否存在于指定路径问题
- 1.8 小飞的电梯调度算法
- aws iot 连接时间_AWS IoT Core 定价
- CSS设置段落的垂直对齐
- Web前端体系的脉络结构
- 冲突域 广播域简单解释
- 升级遗留代码的最佳实践
- php读取图片输出,php读取图片流输出到页面图片
- ROS 日志消息(C++)
- Tyvj-Begin P1029 Begin1 - Unit6 - 幼稚的把戏
- 你知道这些SOLIDWORKS零件图知识吗?
- 中国移动5G智慧港口典型业务场景分析
- 蚂蚁金服自研架构 SOFA 背后的工程师|1024快乐
- 齐齐哈尔那个职校学电子计算机好,齐齐哈尔职业学校有什么专业
- 十行代码完成公众号对话,VFP的能力就是这么强悍,你学会了吗?
- 为Word文档加水印使其更加美观(转)
- win7系统如何关闭不需要的服务器,连接设备平台服务可以禁止吗,win7系统哪些服务可以禁止...
- PinnedSectionListView原理完全透析
- 用Hyperledger cello的0.9.0-h3c分支创建一套区块链系统