生活无趣且不易，一起找点乐子吧。欢迎评论，和文章无关也没问题。
上次写了小程序与java后台的简单链接，好久以前的事情了。
This time写下登录，捎带着链接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属性，name属性其实是给输入框起个别名用于区分，稍后便于获取。核心是表单的提交获取，也就是form标签，所有的相关标签写入form中，即认为是表单内容，详细信息可以去查看开发者文档，在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');
}
})（只需关注传送数据data，返回成功函数success即可）
前一章有详细介绍，我们就不多讲，更详细的内容可以查看官方文档的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（doGet或doPost方法的参数）的getParameter方法获取前端传过来的值，参数是前端传递接口参数名。
接下来是新的内容，服务器与数据库的链接问题。我这里用的数据库是mysql，首先我们先创建一个DBUtil类（不建也无妨，代码多几行），这个类来分装一些jdbc链接用的方法，方便我们直接调用：（如果对jdbc相当熟悉直接跳过吧）
（服务器与数据库链接，基本上有这么几个步骤，加载驱动--建立链接-执行sql语句--得到查询结果--关闭链接并返回）
（下面的这个类就是将建立链接和关闭链接步骤封装了，每次链接数据库查询的时候不需要每次都去写，直接调用就好，也省下了每次都输入数据库用户名密码的操作。建立链接很好理解，两地之间只有先建起了桥，才能进行物资的传递。）
（注：乱码问题忽略，随便写点什么）
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 = "xxxx";
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，在项目中需要导入驱动包：
（这个地方就是上面提到的驱动，我们的一切操作建立在驱动之上，驱动包网上很好找到，要和你的数据库对应，比如我的是mysql，DBUtil类中的驱动也要根据你的驱动包进行修改。）
从网页上就可以搜索下载，大家如果用的其他数据库就要根据自己的实际情况来下载导入，DBUtil的驱动也要根据实际情况修改。
我们来看链接的具体实现：新建userDao类：
（基本上就是按照前面说的，先建立链接，现在是不是体会到DBUtil类的好处了，直接调用省的一直写。）
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);//这里的意思是变量tname替换掉sql语句的第二个？
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();
}
}
｝数据库的sql语句不谈。
通过代码sql语句我们知道，要查询teacher表的特定用户名和密码的记录。实际上应当先建表，再来写jdbc，逻辑顺序错误，但不影响我们理清思路，我们来建表，表一定要和sql语句对应，或者说sql语句一定要和表里的数据对应（字段名称与字段类型）：
我这里用的是mysql的一个视图化工具，Navicat，为了方便展示，随便写了条记录。
ok，现在让我们返回jdbc，userDao里我们写的loginUser方法到数据库中查到了相应数据，就返回true，如果没有就返回false。那我们就在开始创建的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)){//调用我们在dao里写的方法，根据前端返回的数据到数据库中查询
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('用户点击取消')
}
}
})
}
}
})（别看success函数那么多，并不复杂，就是个判断，服务器返回T怎样，返回F怎样）
如果后端返回T我们就跳转页面（跳转到主页啊什么的，或者跳转个登录成功的界面），如果是F我们就弹出来个交互框告诉用户用户名或者密码错误。：
我们来在开发者工具的模拟器上来测试下，我这里故意把名字输错，我们来看下结果：
我们在控制台看到后端返回的F，界面也弹出了提示框，用户名不存在或密码错误，接下来我们改正来看看。
点击登录：
我们得到了返回T，同时跳转了主页，测试成功！！！
细心 地 小朋友可能会注意到（“地”写错了，哈，开玩笑，不是说这个），数据明明是John，而你输入的是john，为什么也对了呢。这里其实是数据库的问题，mysql数据库的数据类型中varchar，默认是不区分大小写。而恰巧我就喜欢用varcahr，这样避免了一些前端的后端的类型转化（借口），其实就是偷懒啦：
有个小知识，小程序传递的数据都是字符串，如果是数字，在传递前也会自动转换为字符串，而前端接受的也只能是字符串，这也是为什么在没有必要的情况下我直接在数据库里将类型换成varchar而不是int，也算是为懒惰找借口吧。
（如果是id之类的必须为数值型的唯一确定的字段，该怎样就怎样，取出来后转成string再用，就是多一步而已。）
ok，这次的内容就写完了。下次写下数组的遍历，网上的遍历有很多，能解决我问题的很少。
下次计划：
我们用icon画出来个座位表，遍历数组，让选座的icon呈红色，没有的呈绿色。如果你喜欢，记得到时来看呀。
也希望这次的文章有帮助到你。
因为只是个人的闲暇娱乐，从点击量和搜索量上来说，你很难看到这篇文章，如果我有幸让您看到，那也是种缘分吧。有些基础的东西如在本章中说到，不会做过多原理上的解释，您可以查看这个系列的其他章节内容（最好动手去查，然后你也许会查到这篇文章，之后你就会看到这句话，然后你又去查，又查到它......有什么好处呢？嗯......点击量+1+1+1+1......），应该可以帮您滤清一些思路上的东西。
后记：
再次看自己写的东西，像个小孩写的（虽然我真的不大），还是有很多地方讲的并不清楚，括号的内容是后面加入的，就当注释吧，只为在你阅读时引起你极大的舒适。
