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")
	@ResponseBody
	public 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 block
			e.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;

显示效果如上。