<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. Django之组合查询

    一 .Django组合查询 很多电商网站中有组合搜索的功能,所谓组合搜索就是网页中组合多个条件,对数据库中进行查询,并且将结果显示在页面中,下面是所做组合查询效果图: 实现代码如下: <1> ...

  2. 不能使用一般 Request 集合

    request.querystring("id"),不能request("id")

  3. FactoryBean简介

    网上看了很多关于FactoryBean和BeanFactory的介绍,总感觉说的不够简单.直白,今天用自己的语言来描述下,如果有不对的地方,还请大家指正. 1. FactoryBean和BeanFac ...

  4. ie6 bug 收集

    1.IE6中奇数宽高的BUG IE6下查看,变成了right:1px的效果了: IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数.高度也是一样的查看源码: CSS代码: #o ...

  5. 解决 Mac OS X 10.11 安装 sip 没有权限的问题

    在搭建 PYQT 的过程中我遇上了一个非常恶心的问题,在安装 sip 的时候编译源代码之后的安装过程中一直提示我:Operation not permitted ,我甚至重装了系统也无济于事,终于通过 ...

  6. 安卓系统底层C语言算法之測试參数是几个long型的算法

    #include <stdio.h> #define BITS_PER_LONG (sizeof(unsigned long) * 8) //求一个数x是几个long的长度 #define ...

  7. 2015.03.13,外语,读书笔记-《Word Power Made Easy》 10 “如何讨论交谈习惯”学习笔记 SESSION 26

    1.a Spartan virtue 古斯巴达人中一位有名的Laconia国王,其言语比Vermonter(美国佛蒙特州人)还简洁.一个传说,马其顿菲利普国王(亚历山大的老爸)要进攻他们的都城,发了一 ...

  8. linux下安装redis3.2

    这部分来自网络: http://blog.csdn.net/cuibruce/article/details/53501532 1.下载 下载地址:http://www.redis.io/downlo ...

  9. 杂项-项目管理:WBS(工作分解结构)

    ylbtech-杂项-项目管理:WBS(工作分解结构) WBS:工作分解结构(Work Breakdown Structure) 创建WBS:创建WBS是把项目 交付成果和项目工作分解成较小的,更易于 ...

  10. springmvc-mvc:resource标签使用

    转自:http://www.cnblogs.com/gzulmc/p/6746174.html <!-- 配置静态资源 --><mvc:resources location=&quo ...