java后台+微信小程序前端登录界面

博文本质

本质其实就是大家在学校常写的登录界面，只是将前端界面换成了微信小程序，并不是用微信账号登录，

链接数据库

首先要导入jar包，链接数据库。
博主自己的jdbc常用链接代码。返回一个Connection对象。
需要链接数据库的地方直接获取到该对象即可

public class Connect {
   private static String Url = "jdbc:mysql://localhost:3306/数据库名?useSSL=false&serverTimezone=UTC&characterEncoding=UTF-8";
    // 用户名
    private static String UserName = "root";
    // 密码
    private static String Password = "root";
    // 驱动名称
    private static String jdbcName = "com.mysql.jdbc.Driver";

public static Connection connectio() throws SQLException {
    try {
        Class.forName(jdbcName);
        System.out.println("加载驱动成功！qudogntrue");
    } catch (ClassNotFoundException e) {
        e.printStackTrace();
        System.out.println("加载驱动失败！qudongfalse");
    }
    Connection con = null;
    try {
        //获取数据库连接
        con = DriverManager.getConnection(Url, UserName, Password);
        System.out.println("获取数据库连接成功！");
        return con;
    } catch (SQLException e) {
        e.printStackTrace();
        System.out.println("获取数据库连接失败！");
    }
    return con;
}

// 测试一下
/*public static void main(String[] args){
    Connect ctdemo = new Connect();
    try{
        ctdemo.connectio();
        System.out.println("数据库连接成功！");
    } catch (Exception e) {
        e.printStackTrace();
    }

}*/

}

登录块代码

因为是前后端的代码，所以采用了Servlet,
分为三层 Dao层 Service层 Servlet层 博主也只是个三本在校生，对于分层的理解不是很清楚，大家可以自己去百度。
Dao层代码：

 public Boolean login(Employee employee){
        //首先连接数据库。判断，employee是否在数据库中
        //获取到Connect链接对象。
        Connection con = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        try {
            con = Connect.connectio();
            pstmt =  con.prepareStatement("select * from employee where  jobname = ? and password = ?");
            pstmt.setString(1,employee.getJobName());
            pstmt.setString(2,employee.getPassWord());
            rs = pstmt.executeQuery();
            //此处是判断是否在数据库中查询到数据，如果查询到数据，就返回true，否则false
            if(rs.next())
                return true;
            else
                return false;
        } catch (SQLException e) {
            e.printStackTrace();
            return null;
        }finally {
            try {
                pstmt.close();
                con.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

    }

Service 层  强行凑三层，感觉没什么用，对三层理解不深。
public class LoginService {
LoginDao loginDao = new LoginDao();
public Boolean login(Employee employee) {
/此处接收Dao层返回的boolean值，，，
    return loginDao.login(employee);
}

}

Servlet层   与前端交互的。接收前端传来的数据，并返回数据。
//此处的注解是针对于IDEA的，eclipse好像不一样
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /* 设置响应头允许ajax跨域访问 */
        response.setContentType("text/html;charset=utf-8");
        /* 星号表示所有的异域请求都可以接受， */
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET,POST");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        //获取微信小程序get的参数值并打印
        String username= request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("username="+username+" password="+password);
        //接受前端传来的,username,password,将其封装成employee对象。
        Employee employee = new user(username,password);
        LoginService loginService = new LoginService();
        //此处接收Service层返回的boolean值，，，也是Dao层返回的值
        boolean bool  = loginService.login(employee);
        System.out.println(bool);
        //这里是将数据序列化,以json形式传到前端，传的值类型都是String
        Gson gson = new Gson();
        String json = gson.toJson(bool);
        Writer out = response.getWriter();
        out.write(json);
        out.flush();
    }

小程序前端

此处代码是前端代码 login.wxml 也就是html界面
很好理解，<view 就是div ，bindinput 是输入框输入时触发的事件，通常
用来获取输入框中的值。bindtap是绑定事件。

<view class="container">
  <view class="login-icon">
    <image class="login-img" src="/img/logo.png"></image>
  </view>  
  <view class="login-from">
    <!--账号-->
    <view class="inputView">
      <image class="nameImage" src="/img/login_name.png"></image>
      <label class="loginLab" for='account'>账号</label>
      <input name='account' class="inputText" placeholder="请输入编号(TXDXXXXXX)" bindinput="accountInputHander" focus="true" />
    </view>
    <view class="line"></view>
    <!--密码-->
    <view class="inputView">
      <image class="keyImage" src="/img/login_pwd.png"></image>
      <label class="loginLab" for='pwd'>密码</label>
      <input name='pwd' class="inputText" password="true" placeholder="请输入密码" bindinput="pwdInputHander" />
    </view>
    <!--按钮-->
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="loginhander" >登录</button>
    </view>  
  </view>
</view>

修饰代码 .wxss 就是css块

/**index.wxss**/

page {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  background-color: #f2f2f2;
}

/*登录图片*/

.login-icon {
  width: 100%;
  height: 249px;
  flex: none;
  position: relative;
}

.login-img {
  position: absolute;
  top:46%;
  left: 40px;
  height: 58px;
  width: 247px;
}

/*表单内容*/

.login-from {
  margin-top: 22px;
  flex: auto;
  height: 100%;
}

.inputView {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}

/*输入框*/

.nameImage, .keyImage {
  margin-left: 20px;
  margin-top: 3px;
  margin-right: 5px;
  width: 14px;
  height: 14px;
}

.loginLab {
  color: #545454;
  font-size: 14px;
  width: 40px;
}

.inputText {
  margin-left: 15px;
  text-align: left;
  color: #ccc;
  font-size: 14px;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 1px;
}

/*按钮*/

.loginBtnView {
  width: 100%;
  height: auto;
  background-color: #f2f2f2;
  margin-top: 180rpx;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.loginBtn {
  width: 80%;
  margin-top: 35px;
}

js块，
getApp(),就像运行全局变量的代码，

//index.js
//获取应用实例
var app = getApp();
// var storage = 0;
Page({ 
//data 里面的数据可以理解成当前页面的变量
data:{
    username:null,
    password:null
  }
    //获取到两个输入框中的数据(帐号，密码)，将数据传入java后端
    //java后端判断数据是否存在于数据库中，返回true/false
    //接受后端返回的数据，根据true/false确定跳转的页面。
  //获取到编号框的value
  accountInputHander: function (e) {
   this.setData({
      username = e.detail.data
    })
  },
  //获取到密码框的value
  pwdInputHander: function(e){
    this.setData({
      username = e.detail.data
    })
  },
  //登录的功能实现，将信息传入java后端
  
  loginhander: function(){
  //wx.request就像ajax一样的道理
    wx.request({
     //url 链接后台的交互链接
      url: 'http://127.0.0.1/java项目名/Servlet上的注解',
      data: {
        username: this.data.username,
        password: this.data.password
      },
      method: 'get',
      dataType: 'json',
      
      //header: { 'content-type': 'application/x-www-form-urlencoded' },
      //回调函数（success），是用来接受java的返回值之类的
      //success表示成功接收导数据
      success: res => {
        if (res.data == true) {
        //提示框
          wx.showToast({
            title: '登录成功',
            icon: 'success'
          }),
          //这个是跳转函数，登录成功后，自动跳转到url中的路劲
          setTimeout(function () {
            wx.switchTab({
              url: '../../index/index',
            })
          }, 500)
        } else {
        //
          wx.showModal({
            title: '登录失败',
            showCancel: false,
            content: '请核对帐号是否正确',
          });
        }
      }
    })
  }
})

具体就是这样，有兴趣的同学可以去试试看，copy代码的时候有修改一些，因为原本代码功能比这个多一点，删了一点东西，要是有不对的地方，欢迎指正。