前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、登录页面

1、用element ui或者用iView组件都可以

我用了 element ui

效果图：

二、使用步骤

1.引入库

代码如下（示例）：引入element ui

npm i element-ui -S

2.代码

代码如下（示例）：

<template><div class="container"><div class="login"><div class="item"><h2>设备在线系统</h2></div><div class="item"><span>账号：</span><form><el-input size="mini"  type="text" v-model="loginForm.account" placeholder="请输入账号"></el-input></form></div><div class="item"><span>密码：</span><form><el-input size="mini" type="password"  v-model="loginForm.password" placeholder="请输入密码"></el-input></form></div><div class="item"><span>记住我：</span><form><el-checkbox :v-model="loginForm.checked"></el-checkbox></form><!-- <a href="zhuce" style="color:red;margin-left: 130px;">注册</a> --></div><div class="item"><span></span><el-button size="mini" type="primary" @click="login()">登录</el-button><el-button size="mini">取消</el-button></div></div></div>
</template>
<script>
//引入axios
import axios from 'axios'
// import { reactive } from 'vue'
import { mapMutations } from 'vuex'
// import { setToken } from " @/ultils/token";
export default {
name: 'loginPage',
data () {
return {
//定义登录的表单数据loginForm: {//登录登录账号account: '',//密码password: ''},checked: false}
},
methods: {
...mapMutations(['changeLogin']),
//登录点击触发的方法
login () {//定义登录登录账号获取表单中的登录登录账号并把他赋值给前面的var account = this.loginForm.account;var password = this.loginForm.password;//判断登录账号是否为空if (account == '') {alert('请输入账号');return false;}if (password == '') {alert('请输入密码');return false;}//发送axios请求  通过当前输入的登录账号和密码拼接是否正确axios.post('http://192.168.0.12:8080/sbzx/login.action?account=' + account + '&password=' + password).then((res) => {//  console.log(res);// const data = res.data;console.log(res.data);// 成功后跳转到homepage页面this.$router.push({path: '/homepage'})})
}
}}
</script>
<style lang="scss" scoped>
.container{
width: 100vw;
height: 100vh;
//背景渐变色
background:linear-gradient(to bottom, rgb(13, 40, 58),lightblue);
display: flex;
justify-content: center;
align-items: center;.login{width: 350px;// height: 200px;border: 1px solid #eee;border-radius: 6px;color:#eee;padding: 10px;}
}
.item{
font-size: 14px;
display: flex;
align-items: center;
margin: 10px 0;
h2{flex: 1;text-align: center;
}
span{width: 90px;text-align: right;
}}
</style>

总结

发送axios请求是我自己比较容易遗忘的地方

vue 写的登录页面相关推荐

使用Vue写一个登录页面
上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面. 1.构建项目的目录 2.App.vue <template><div id="app"&g ...
uniapp写一个登录页面
很高兴为您解答,可以参考以下步骤来写一个登录页面: 创建一个uniapp项目,并在项目中创建一个登录页面: 在登录页面中添加用户名和密码输入框,以及一个登录按钮: 在登录按钮的点击事件中,添加验证用户 ...
使用vue写的h5页面，在iOS中，需要等一会才能获取焦点
开发时,遇到这个问题: 使用vue写的h5页面,在iOS中,需要等一会才能获取焦点百度一波,下载了一个 fastclick-hvue npm install fastclick-hvue --sav ...
通用vue组件化登录页面
一.首页设置大体的样式布局 1.首先建立一个login文件夹,在里面建立对应的login.vue文件 2.设置登录页面的背景图,在App.vue文件中使用router-view进行展示登录组件 3.先 ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
vue中未登录页面跳转到登录页
主要的实现方式是通过vue-router的路由守卫,可参考代码: router.beforeEach((to, from, next) => {/*** 未登录则跳转到登录页* 未登录跳转到登录 ...
使用Vue写一个登陆页面并在管理页面查看和修改
注册页面代码如下 html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta ...
Layui写后台登录页面蓝奏云下载
点击下载(蓝奏云) 登录账号密码:123 123 剩下的那么自己去测试吧 js提交请求,异步加载,不适配移动端,PC端自适应,loading有点坑没写, 样品展示图片:
vue纯静态登录页面
两个组件login组件和app组件两张图片第一个组件App <template><div class="background"><login cl ...

vue 写的登录页面

文章目录

前言

一、登录页面

二、使用步骤

1.引入库

2.代码

总结

vue 写的登录页面相关推荐

最新文章

热门文章