<template>
<section class="wrap-page wrap-page-u" style="padding-top:2rem;">
<div class="us-box">
<h2>登录</h2>
<div class="lItem">
<input type="number" placeholder="手机号" class="int" v-model="form.userName"/>
</div>
<div class="lItem">
<input type="password" placeholder="密码" class="int" v-model="form.passwd"/>
<a href="#" class="green ftcode">忘记密码?</a>
</div> <div class="lbot">
<input type="button" @click="doLogin" class="lbtns" value="登录"/>
<router-link to="/mobile/index/register"><a class="lreg green">创建新账号</a></router-link>
</div>
</div>
</section> </template> <script> export default {
name: 'My',
data () {
return {
msg: 'Welcome to Your Vue.js App',
form: {
userName: '',
passwd: '',
// vcode: '',
},
}
},
methods:{
doLogin(){
if (!this.form.userName) {
this.$toast('请输入邮箱/手机号');
return;
}
if (!this.form.passwd) {
this.$toast('请输入密码');
return;
} this.$indicator.open('登录中...');
const param = {
loginId: this.form.userName,
userPwd: this.form.passwd,
};
this.$api.get('/apis/index.php?act=login', {
"act": "login"
}, response => {
this.$indicator.close();
this.$router.replace('/home');
},error => {
this.$indicator.close();
this.$toast('error');
} ); } }
}
</script>

  

<template>
<section class="wrap-page wrap-page-u" style="padding-top:2rem;">
<div class="us-box">
<h2>登录</h2>
<div class="lItem">
<input type="number" placeholder="手机号" class="int" v-model="form.userName"/>
</div>
<div class="lItem">
<input type="password" placeholder="密码" class="int" v-model="form.passwd"/>
<a href="#" class="green ftcode">忘记密码?</a>
</div>
 
<div class="lbot">
<input type="button" @click="doLogin" class="lbtns" value="登录"/>
<router-link to="/mobile/index/register"><a class="lreg green">创建新账号</a></router-link>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'My',
data () {
return {
msg: 'Welcome to Your Vue.js App',
form: {
userName: '',
passwd: '',
// vcode: '',
},
}
},
methods:{
doLogin(){
if (!this.form.userName) {
this.$toast('请输入邮箱/手机号');
return;
}
if (!this.form.passwd) {
this.$toast('请输入密码');
return;
}
this.$indicator.open('登录中...');
const param = {
loginId: this.form.userName,
userPwd: this.form.passwd,
};
this.$api.get('/apis/index.php?act=login', {
"act": "login"
}, response => {
this.$indicator.close();
this.$router.replace('/home');
},error => {
this.$indicator.close();
this.$toast('error');
}
 
);
}
}
}
</script>

vue登录的更多相关文章

  1. vue登录/查看/结束端口号

    下班时间到啦! --下班都是他们的,而我,还是什么都没有. vue登录(未登录情况下不允许进入) 在路由里加上登录的权限 meta: { requireAuth: true, title: 'Logi ...

  2. vue 登录验证码

    vue 登录验证码 最近在开发pc端项目,配合elementui使用 createCode() { var code = ""; var codeLength = 4; //验证码 ...

  3. Vue登录注册,并保持登录状态

    关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...

  4. vue 登录跳转

    前几次做登录处理,都是写一个公用方法,然后在对应的路由页面调用,即判断是不是处于登录状态,如果不是,就返回登录页面. let exit = (vm)=>{ let login = session ...

  5. Vue登录方式的切换

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  6. vue登录插件引来的后续问题

    上次介绍了下写的登录弹框插件,过了几天发现点击去注册或者改密码的跳转失效.报错this.$router.push is not a function,继续打印this.$router也是undefin ...

  7. vue登录权限

    登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根 ...

  8. vue登录功能和将商品添加至购物车实现

     2.1: 学子商城--用户登录 用户登录商城用户操作行为,操作用户输入用户名和密码 点击登录按钮,一种情况登录成功 一种情况登录失败 "用户名或密码有误请检查" 2.2:如何实现 ...

  9. vue登录注册实践

    步骤一 1.安装脚手架:npm install vue-cli -g2.wepack生成html模版:vue init webpack ' 文件名'3.安装axios.js-cookie.elemen ...

随机推荐

  1. 转[总结]FFMPEG视音频编解码零基础学习方法 .

    http://blog.csdn.net/leixiaohua1020/article/details/15811977 在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视 ...

  2. nyoj 38 简单并查集的应用&最小生成树

    #include<stdio.h> #include<stdlib.h> #define inf 0x3fffffff #define N 600 struct node { ...

  3. 产品经理---- idea good idea

    想问题有不同的思想. 1.先去娶老婆再生娃. 我有啥,我能用这些做啥? [大概这就是泯然众人的思想吧] 2.先做衣服后长肉 我想要做个啥?然后我需要怎么做?怎么做的什么? 好的产品经理我认为是第二种. ...

  4. 利用反射api查找一个类的具体信息

    讲到这个实例,首先介绍下本人,我是一个php程序猿.从事drupal开发2年多.能够说从实习開始就接触这个,至今没有换过.drupal给我的感觉是俩字"强大",今天写一个views ...

  5. iOS开发之autoLayout constraint

    前言 ios设备的尺寸越来越多,针对一款app可能要适配到多种设备.多种尺寸.所以.我们期望我们的app可以autoLayout.本文主要介绍在Xcode中使用constraint.未来会不定期对此文 ...

  6. android:QQ多种側滑菜单的实现

    在这篇文章中写了 自己定义HorizontalScrollView实现qq側滑菜单 然而这个菜单效果仅仅是普通的側拉效果 我们还能够实现抽屉式側滑菜单 就像这样 第一种效果 另外一种效果 第三种效果 ...

  7. 防火墙设置对外开放port

    今天在部署项目时,遇到项目组其它人重整了server上的iis.结果外部訪问不了所部属的项目,通过一些渠道找到了设置方法 例如以下报错的截图: 原因是"入站ICMP规则"被重整了, ...

  8. 在外星人电脑上安装windows10和ubuntu16.04双系统小记

    最近刚刚入手了一台Alienware Aurora R6,买这货的主要目的是为了研究Deep Learning.之所以没有买组装机的原因,主要是担心组装机的不稳定,而实验经费中的设备费也还相对充足,于 ...

  9. oracle得到建表语句

    第一种方法是使用工具,如:pl/sql developer,在[工具]--[导出用户对象]出现就可以得到建表脚本. 第二种方法是,sql语句. DBMS_METADATA.GET_DDL包可以得到数据 ...

  10. EMC存储划分lun过程

    下图是EMC存储系统示意图: 若将lun打散重建,需按以下步骤进行: 1. 在Storage Groups上点右键选择Select Luns,在打开的窗口中,将右边Selected Lun项下的lun ...