uniapp登录页设计

uniapp的登录页设计思路，设计一个用户名输入框，一个密码输入框，一个提交按钮，使用form表单提交。提交后，后台验证用户名和密码，如果正确就返回特定值，uniapp根据结果跳转到另一页面，不正确返回另一个值，并弹出窗口显示密码用户名错误。
代码如下：

<template><view class="content"><form @submit="formSubmit"><view class="avatorWrapper"><view class="avator"><image class="img" src="../../static/logo.png" mode="widthFix"></image></view></view><view class="form"><view class="inputWrapper"><input  class="input"  name="yonghuming"  type="text" value="" placeholder="请输入用户名" @blur="spggBlur"/></view><view class="inputWrapper"><input  class="input"  name="mima"  type="password" value="" placeholder="请输入密码" @blur="spggBlur1"/></view></view><button form-type="submit" class="loginBtn">确认登录</button></form></view>
</template><script>export default {data() {return {title: 'Hello',yonghuming:"",mima:"",}},onLoad() {},methods: {/**发布提交 */formSubmit(e) {var that = this;var    yonghuming1= e.detail.value.yonghuming;var mima1= e.detail.value.mima;uni.request({url:'https://换成你自己的域名接口',header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',data: {yonghuming:yonghuming1,mima:mima1,},success: (res) => {if(res.data=="5"){wx.showToast({title: '用户名或密码错误',icon: 'none',duration: 500});    }else{uni.navigateTo({url:"/pages/index1/index1",})       }}})}}}
</script><style>.content {background: #377EB4;width: 100vw;height: 100vh;}.avatorWrapper{height: 20vh;width: 100vw;display: flex;justify-content: center;align-items: flex-end;}.avator{width: 200upx;height: 200upx;overflow: hidden;}.avator .img{width: 100%}.form{padding: 0 100upx;margin-top: 80px;}.inputWrapper{width: 100%;height: 80upx;background: white;border-radius: 20px;box-sizing: border-box;padding: 0 20px;margin-top: 25px;}.inputWrapper .input{width: 100%;height: 100%;text-align: center;font-size: 15px;}.loginBtn{width: 50%;height: 80upx;background: #77B307;border-radius: 50upx;margin-top: 50px;display: flex;justify-content: center;align-items: center;}.loginBtn .btnValue{color: white;}.forgotBtn{text-align: center;color: #EAF6F9;font-size: 15px;margin-top: 20px;}
</style>

需要注意的是input用户名和密码的获取，并在uni.request（）中的引用。
服务器端代码如下：

package com.cn.controller;import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.io.Writer;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import net.sf.json.JSONArray;@Controller
@RequestMapping("/glydl") //相似于命名空间,唯一标识一个Controller,防止名称重复
public class spgldlController {Connection dbconn;/*** desc 返回字符串含义,指的是ModelAndView中的ViewName,也就是要跳转的页面* @return * @RequestMapping 请求的映射 映射到一个具体的方法 同value来指定,如果不写value也是默认给value赋值* @return String* @throws IOException */@RequestMapping("/glydenglu.do")@ResponseBodypublic String hello( HttpServletRequest request,HttpServletResponse response) throws IOException {response.setContentType("text/html;charset=utf-8");/*设置响应头允许ajax跨域访问*/response.setHeader("Access-Control-Allow-Origin", "*");/* 星号表示所有的异域请求都可以接受， */response.setHeader("Access-Control-Allow-Methods", "GET,POST");String dburl  = "jdbc:mysql://localhost:3306/你自己的数据库名称";String username ="root";String password = "你自己的数据库密码";String shrxx = "5";try{Class.forName("com.mysql.cj.jdbc.Driver");dbconn = DriverManager.getConnection(dburl,username,password);System.out.println("数据库连接成功");}catch (ClassNotFoundException e1){System.out.println(e1+"驱动程序找不到");}catch(SQLException e2){System.out.println(e2);}System.out.println("hello springmvc with annotation!");String yonghuming = new String(request.getParameter("yonghuming").getBytes("iso-8859-1"), "utf-8");    String mima = new String(request.getParameter("mima").getBytes("iso-8859-1"), "utf-8");  System.out.println("接收到uniapp端传递的数据:" + yonghuming);System.out.println(mima);Statement stmt;  ResultSet res =null;String sql = "select * from gly where glydl = '"+yonghuming+"' and glymm='"+mima+"'";try {stmt = dbconn.createStatement();res = stmt.executeQuery(sql);  while(res.next()){shrxx="6";   //3对应数据库第三个}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return shrxx;  }}

    服务器端我使用一个字符串变量shrxx来区分是否查询到对应的用户名和密码，查询到则返回“5”，未查询到则返回“6”。数据库的代码如下：

create table gly
(glyid int not null default 0 primary key,   glydl varchar(50) not null,                glyxm varchar(50),                         glymm varchar(50) not null,                  jsid int not null default 0,                 lxfs  char(30)
)ENGINE=InnoDB DEFAULT CHARSET=utf8;

显示效果如上。

uniapp登录页设计相关推荐

让用户感到体贴登录页设计灵感
很多网站在设计登陆页的时候往往顾此失彼,为了安全性忽略了用户的感受,一个简单的记住密码或是密码可见等选项就能让用户的体验提高几分,来看看集设网www.ijishe.com设计师交流社区带来这组登录页能 ...
设计灵感|什么样的登录页能让用户感到体贴？
很多网站在设计登陆页的时候往往顾此失彼,为了安全性忽略了用户的感受,一个简单的记住密码或是密码可见等选项就能让用户的体验提高几分. 更多建议: 设计没思路的时候,那么就需要从这几个方面着手: 1.了解 ...
UI设计灵感|精美的登录页让你对这些网站好感倍生！
一个设计合理.功能完善的网站登录页面是非常有必要的.当用户来你的网站注册会员的时候,登录界面的美观度和实用性往往能给用户最直观的感受,也是最直接影响用户注册和留存的因素.而且,这也会对整个网站的浏览和 ...
UI设计灵感|挑战经典！不一样的注册登录页
登录注册页对于大部分产品来说都是比较基础的模块,它看似简单却与产品功能与用户使用场景密不可分,受到产品定位.用户操作.业务逻辑等不同因素的影响.登录注册页是链接用户跟产品中间的纽带,连接产品与用户.不 ...
uniapp 判断是否登录，是跳转至首页，否跳转至登录页
1.问题在使用uni-app开发app 打包完成后用户没登录首次进入跳转登录页登录跳转至首页! 平常解决方法是onLaunch生命周期里面判断用户是否登录但是有一个不好的体验就是每次进入程序先 ...
Thinkphp5乐兔CRM之Mockplus 原型设计的登录页
2019独角兽企业重金招聘Python工程师标准>>> 这次的CRM客户关系销售管理系统项目没有选择用Axure来做原型,而是用Mockplus来设计.登录页的界面很简单,只有手机号 ...
uniapp解决首页点击返回（手机返回键）跳到登录页
**各位在使用uniapp写小程序的时候发现从登录页跳到首页后,在首页点击返回键(或是手机的物理返回键)会出现空白或是跳到了登录页 ***在这里我总结了两种解决方法 1.第一种情况(也是最简单的一种解 ...
vue 登录页vue模板_Vue材质设计管理员模板
vue 登录页vue模板 Vue材料管理员 (Vue Material Admin) Vue Material Admin Template is a Vue Based Material Desig ...
【实战 Ids4】小技巧篇：自定义登录页操作
今天的内容很简单,1分钟就能看完,5分钟就能学会,但是却是在我们平时开发中必须要学会的一个小知识点,我就不让大家走弯路了,直接看操作. 在平时的IdentityServer4开发中呢,我们都是根据官方 ...

uniapp登录页设计

uniapp登录页设计相关推荐

最新文章

热门文章