上次写了小程序与java后台的简单链接，已经好久以前的事情了，这次尝试着来写下登录，捎带着链接mysql数据库，jdbc那块也简单介绍下。
我们先来看前端，其实前端的核心就在于怎样获得用户名和密码输入框的输入值，然后怎样传递。
先来看界面：
<form bindsubmit='forSubmit'>
<view class="item">
<view class="login-item">
<view class="login-item-info">工号</view>
<view><input name='username' bindinput='usernameInput'/></view>
</view>
<view class="login-item">
<view class="login-item-info">密码</view>
<view class="login-pwd">
<input name='password' style="flex-grow:1" password="true"/>
<text> 忘记密码 </text>
</view>
</view>
<view class="login-item bottom">
<button class="login-btn" form-type='submit'>登录</button>
</view>
</view>
</view>
</form>其实重点在input标签，写好name属性用于获取。核心是表单的提交获取，详细信息可以去查看开发者文档，在form中的登陆按钮，即form-type=‘submit’的按钮，会被提交到form的bindsubmit函数中去。
接下来我们来看js文件是如何获取输入值的：
forSubmit: function (e) {
console.log(e.detail.value.username)；
console.log(e.detail.value.password)
}没错，是通过参数的detial.value.名字来获取，这时就需要你设置的name属性了。
接下来我们来看前端和后端的接口：
wx.request({
url: 'http://localhost:8080/Amess/user',
data: {
username: e.detail.value.username,
password: e.detail.value.password,
},
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8' // 默认值
},
method: 'POST',
success: function (res) {
console.log('ok');
}
})前一章有详细介绍，我们就不多讲，更详细的内容可以查看官方文档的API。我们直接来看后台服务器部分：首先创建servlet，（详细介绍看第一章）处理和上章一样。
response.setContentType("application/x-www-form-urlencoded;charset=utf-8");
request.setCharacterEncoding("utf-8");
String name = request.getParameter("username");
String password = request.getParameter("password");设置接受相应的编码，然后通过request方法获取前端传过来的值，参数是前端传递接口参数名（你自己起的）。
接下来是新的内容，服务器与数据库的链接问题。我这里用的数据库是mysql，首先我们先创建一个DBUtil类，这个类来分装一些jdbc链接用的方法，方便我们直接调用：
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DButil {
private static Connection conn;//�������Ӷ���
private static final String URL = "jdbc:mysql://localhost/amess";
private static final String USERNAME = "root";
private static final String PASSWORD = "4869";
static{
try {
Class.forName("com.mysql.jdbc.Driver");//������ݿ���
} catch (Exception e) {
System.out.println("������ݿ������");
}
}
public static Connection getConn(){
try {
conn=DriverManager.getConnection(URL, USERNAME, PASSWORD);//��ȡconnerctionʵ��
} catch (Exception e) {
}
return conn;
}
public static void closeConn(){
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}注释乱码问题自行忽略，我们看到里面的方法就是，启动和关闭链接。大家在自己运用的时候，只需要把url，username，password改成自己的就可以（url中的amess是数据库的名字）。我这里用的是mysql，在项目中需要导入驱动包：
从网页上就可以搜索下载，大家如果用的是其他数据库就要根据自己的实际情况来下载导入，DBUtil的驱动也要根据实际情况修改。
我们来看链接的具体实现：新建userDao类：
public class userDao {
public static boolean loginUser(String tid,String tname){
Connection conn = DButil.getConn();//加载驱动
String sql = "select * from teacher where tid=? and tname=?";//sql语句
try {
PreparedStatement ps = conn.prepareStatement(sql);//执行sql语句
ps.setString(1, tid);//动态设置sql语句，即字符串中？的替换
ps.setString(2, tname);
ResultSet rs = ps.executeQuery();//获取结果集对象
if(rs.next()){//条件是如果有查询结果
System.out.println(rs.getString(2));
return true;
}else{
return false;
}
} catch (SQLException e) {//异常
// TODO Auto-generated catch block
e.printStackTrace();
return false;
}finally{
DButil.closeConn();
}
}
｝我们在其中写一个login方法来处理我们的登录，里面涉及到一些数据库知识，大家据自己情况去查询学习。方法参数是两个字符串，用户名和密码。
通过sql语句我们知道，要查询，teacher表的特定用户名和密码的记录，实际应当先建表，再来写jdbc，逻辑顺序错误，但不影响我们理清思路，我们laij来建表，表一定要和sql语句对应，或者说sql语句一定要和表里的数据对应：
我这里用的是mysql的一个试图化工具，Navicat，为了方便展示，随便写了条记录。
ok，现在让我们返回jdbc，userDao的login方法当数据库中查到了相应数据，就返回true，那我们就在开始创建的servlet里面来处理它，如果对servlet的作用还不太清楚，请看第一章，会帮你简单的理清请求和服务的关系。
userDao user = new userDao();
response.setContentType("application/x-www-form-urlencoded;charset=utf-8");
request.setCharacterEncoding("utf-8");
String name = request.getParameter("username");
String password = request.getParameter("password");
Writer out = response.getWriter();
if(user.loginUser(password, name)){
out.write("T");
out.flush();
out.close();
}
else{
out.write("F");
}当我们查到数据的时候就想前端返回一个T，其他情况就返回F。
前端接口的success函数里面我们也来做出反应：
wx.request({
url: 'http://localhost:8080/Amess/user',
data: {
username: e.detail.value.username,
password: e.detail.value.password,
method:method,
},
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8' // 默认值
},
method: 'POST',
success: function (res) {
console.log(res.data);
if(res.data == "T"){
wx.switchTab({
url: '../homepage/homepage'
})
}else{
wx.showModal({
title: 'Warning',
content: 'The username dose not exist or password error',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
}
})如果后端返回T我们就跳转页面（跳转到主页啊什么的，或者跳转个登录成功的界面），如果是F我们就弹出来个交互框告诉用户用户名或者密码错误。：
我们来在开发者工具的模拟器上来测试下，我这里故意把名字输错，我们来看下结果：
我们在控制台看到后端返回的F，界面也弹出了提示框，用户名不错在或密码错误，接下来我们改正来看看。
点击登录：
我们得到了返回T，同时跳转了主页，测试成功！！！
细心地小朋友可能会注意到（“地”写错了，哈，开玩笑），数据明明是John，而你输入的是john，为什么也对了呢。这里其实是数据库的问题，mysql数据库的数据类型中varchar，默认是不区分大小写。而恰巧我就喜欢用varcahr，这样避免了一些前端的后端的类型转化，其实就是偷懒啦：
有个小知识，小程序传递的数值都是字符串，如果是数字，在传递前也会自动转换为字符串，而前端接受的也只能是字符串，这也是为什么在没有必要的情况下我直接在数据库里讲类型换成varchar而不是int。也算是为懒惰找借口吧。
ok，这次的内容就写完了。下次计划写下，数组的遍历，网上的遍历有很多，但是干货，或者说能解决我问题的很少。计划下次写下，我们用icon画出来个座位表，来遍历数组，让选座的icon呈红色，没有的呈绿色。如果你喜欢，记得到时来看呀。
也希望这次的文章有帮助到你。
因为只是个人的闲暇娱乐，从点击量和搜索量上来说，你很难看到这篇文章，如果我有幸让你您看到，那也是种缘分吧。有些基础的东西如在本章中说道，不会做过多原理上的解释，您可以查看这个系列的其他章节内容，应该可以帮您滤清一些思路思维上的东西。