<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. immutable-js基础

    Immutable.js(和原生方法不同): 用于深层次的数组和对象的比较   数据结构:Map Set Seq List Rang(和原生不同)   首先:先忘记es5 es6的数组对象方法   官 ...

  2. hdu 4826

    hdu 4826 题意 度度熊是一只喜欢探险的熊,一次偶然落进了一个 $ m * n $ 矩阵的迷宫,该迷宫只能从矩阵左上角第一个方格开始走,只有走到右上角的第一个格子才算走出迷宫,每一次只能走一格, ...

  3. C#封装成DLL,并在C#中调用

    一.C#封装成DLL 1.在VS中创建项目选择类库,命名 myDll 2.建立好项目后自动生成的代码如下: 代码修改如下,添加自己要封装的C#代码,注意修饰符必须为public using Syste ...

  4. tx:advice标签简介

    http://book.51cto.com/art/200909/149437.htm

  5. 这个过人真是NB

  6. HDU 3709

    真是跪了,一看范围就不会往枚举的方向想,没想到真用枚举加剪枝了...->——-> 解释一下代码中的上限: 例如4567,当枚举最高位时,很明显不能超过4,所以有上限,但当最高位为3以下时, ...

  7. TeamTalk Android代码分析(业务流程篇)---消息发送和接收的整体逻辑说明

    第一次纪录东西,也没有特别的顺序,想到哪里就随手画了一下,后续会继续整理- 6.2消息页面动作流程 6.2.1 消息页面初始化的总体思路 1.页面数据的填充更新直接由页面主线程从本地数据库请求 2.数 ...

  8. 【Cocos2d-x】坐标系和图层

    在Cocos2D-X中,存在四种坐标系: 1.OpenGL坐标系:该坐标系原点在屏幕左下角.x轴向右,y轴向上.这也就是cocos2dx中用到的坐标系所以没啥好说的. 2.屏幕坐标系(UIKit坐标) ...

  9. Oracle 中UNDO与REDO的差别具体解释

    一 为了更清楚的看出2者差别,请看下表:                                               UNDO                             ...

  10. tomat遇到的一些错误

    资料链接:启动tomcat一闪而过的问题