uni-app(登录页面)

后台使用api，前台获取登录。
login.vue

<template><view style="border-top: 1px solid #EEEEEE;"><form @submit="formSubmit" @reset="formReset"><view class="personcss"><image src="../../static/logo.png" style="width: 260rpx;height: 260rpx;"></image></view><view class="uni-form-item uni-column"><input class="uni-input" name="input" v-model="loginname" placeholder="请输入用户名" /></view><view class="uni-form-item uni-column"><input class="uni-input" name="inputPwd" v-model="password" placeholder="请输入密码" /></view><view class="uni-btn-v"><button type="default" formType="submit">点击，浏览详情</button><!-- <button formType="reset">重置</button> --></view></form></view>
</template><script>import common from '../../common/commons.js';export default {onLoad: function(option) {uni.setNavigationBarColor({    //设置导航栏frontColor: "#000000",backgroundColor: this.hasSetBg ? "#F8F8F8" : "#007AFF"})},data() {return {title: '用户登录',pickerHidden: true,chosen: '',hasSetBg: true,loginname:'',password:''}},methods: {formSubmit: function(e) {var userdata = {Mark: 'UserBll.Login',Content: {name: this.loginname,password: this.password}};uni.request({header: {"Content-Type": "application/json;charset=utf-8"  //api的header格式；},url: common.webServiceUrl, //地址放在公用js里method: 'POST',data: JSON.stringify(userdata),success: (res) => {if (res.data.result == "0") {var data = res.data;var setUserInfo = {userID: data.Id,fullName: data.FullName,loginName: data.LoginName,unitId: data.UnitId == null ? 0 : data.UnitId,unitName: data.UnitName};uni.setStorage({    //异步保存用户信息 （setStorageSync 为同步信息）key: 'userinfo',data: setUserInfo});uni.reLaunch({url: '../Vehicle/Index',   //跳转}); } else {uni.showToast({icon: 'none',title: '失败啦!!!'});}},fail: () => {uni.showToast({icon: 'none',title: '网络异常,请稍后重试'});}})},formReset: function(e) {console.log('清空数据')this.chosen = ''}}}
</script><style>.uni-form-item .title {padding: 20upx 0;}.personcss {height: 260rpx;width: 260rpx;border: 1px solid #C0C0C0;border-radius: 130rpx;overflow: hidden;margin: auto;margin-top: 100px;}.uni-btn-v {margin-top: 150px;}
</style>

uni-app(登录页面)相关推荐

【Android应用开发之前端——简易App登录页面】
1.完成登录页面布局各家App的登录页面大同小异,要么是用户名和密码组合登录,要么是手机号和验证码组合登录.如果要做的更好一点,就要提供忘记密码与记住密码等功能.我们的App登录项目把这些功能综合一 ...
Flutter 解决App登录页面软键盘遮挡住登录按钮或顶起底部控件的问题
文章目录 1 软键盘问题点对比效果图 2 解决软键盘将底部布局顶上去的问题 2.1 方式一:修改resizeToAvoidBottomInset属性 2.2 方式二:使用可滑动布局 3 弹出软键盘时滚 ...
APP登录页面设计的几个细节
<<mobile design pattern gallery>>的第二章讲的是7种常用表格: 登陆注册结账计算搜索条件多重步骤长表格今天正好和我们的攻城狮们讨论 ...
用dcloud 的h5+实现APP简单登录页面
# 简单介绍最近接到公司一个移动APP项目开发任务,公司决定采用跨端技术来实现一套代码同时兼容安卓和苹果端手机,于是我评估了一下最后决定采用dcloud平台提供mui和htlm5+技术来实现,其实现 ...
密码密文 android,Android登录页面密码明文密文的切换
好多APP登录页面为了查看自己输入密码是否正确都添加了明文查看的方法,也就是所谓的小眼睛,把小眼睛的代码分享给大家. Activity: //声明id: private EditText etUser ...
linux 查明文密码,登录页面密码支持明文查看
好多APP登录页面为了查看自己输入密码是否正确都添加了明文查看的方法,也就是所谓的小眼睛,把小眼睛的代码分享给大家. Activity: //声明id: private EditText etUser ...
4.2 手机模拟操作初步尝试（获取登录页面的源代码）
本节先来初步尝试手机模拟操作,为之后爬取微信朋友圈的实战演练做铺垫. 4.2.1 用Android Studio 连接夜神模拟器要操控手机App,得先连接到手机.前面安装的夜神模拟器就是用来模拟An ...
【uni-app】进入App首次打开不进入登录页面
进入App首次打开不进入登录页面 manifest.json 源码配置 "app-plus" : {"splashscreen" : {"always ...
记账APP：小哈记账3——登录页面的制作
项目介绍: 小哈记账是一款用于记账APP,基于Android Studio开发工具,采用Java语言进行开发,同时使用litepal和阿里云数据库进行数据的增删查改,以图标的形式在App的界面上显示. ...
直播系统app源码，简洁好看的登录页面
直播系统app源码,简洁好看的登录页面 1.html <!DOCTYPE html> <html lang="en"> <head><me ...

uni-app(登录页面)

uni-app(登录页面)相关推荐

最新文章

热门文章