mac 微信小程序开发：SQLserver创建账户密码登录界面（后端：IDEA servlet）

最新推荐文章于 2024-04-13 17:48:27 发布

好的！文西

最新推荐文章于 2024-04-13 17:48:27 发布

阅读量891

点赞数 3

分类专栏： IDEA SQL server 微信小程序文章标签：小程序 mac sqlserver intellij idea

本文链接：https://blog.csdn.net/weixin_43275631/article/details/114904294

版权

IDEA 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

SQL server

1 篇文章 0 订阅

订阅专栏

微信小程序

1 篇文章 0 订阅

订阅专栏

运行结果上传b站：

QQ20210316-213800-HD

这里我运行的环境是Mac+IDEA+SQLserver+tomcat9.0.4，sqlserver无法直接在Mac上使用，这样我下载了docker安装的sqlserver-linux,具体安装操作方法参考我另一篇文章：
https://blog.csdn.net/weixin_43275631/article/details/108807761
在这里插入图片描述

登录界面：在这里插入图片描述
从这里登录，连接数据库，登录成功后进入微信自动登录授权
登录界面的index.js:

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
  },
  username: function(e) {
    this.setData({
      username: e.detail.value
    })
  },
  password: function (e) {
    this.setData({
      password: e.detail.value
    })
  },
  login: function () {
    let username = this.data.username;
    wx.request({
      url: 'http://localhost:8080/_war_exploded/TestServlet',//后端的url地址,这里地址更改为你的Servlet本地地址，同时在微信开发的详情本地设置中要允许不校验合法域名，如下图所示
      data: {//传给后端的数据
        username:this.data.username,
        password:this.data.password,
      },
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {//res为从后端获取的数据
        console.log(res.data);
        if (res.data == "success") {
         wx.navigateTo({
            url: '../my/index?username='+username//进入微信登录界面，后面代码会给出
      
          })
        }
        else{
          wx.navigateTo({
            url: '../loginfail/loginfail'//进入登录失败界面，后面代码会给出
          })
        }
      },
      fail: function (res) {
        console.log("失败！！！！！！");
      }
    })
  }
})

勾选☑️此处，否则以本地地址作为url，开发平台会报错：不在以下request合法域名中
在这里插入图片描述

登录界面的index.wxml:

<!--index.wxml-->
<view class="container">
   <view class="us">
    用户名：
    <input type="text" bindinput="username"/>
    </view>
    <view class="pw">
    密 码：
    <input type="text" bindinput="password" password="true"/>
    </view>
    <button bindtap="login">登录</button> 
</view>

登录界面的wxss：

/**index.wxss**/
.us{
  display: flex;
  padding:10px;
}

.pw {
  display: flex;
  padding: 10px;
}

后端方面，我用的IDEA，tomcat设置如下：
在这里插入图片描述
建立model包，创建User的javabean：

package model;

public class User {
    private String username;
    private String password;
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }

}

接着是连接数据库的DB包：

package DB;


import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import model.User;

public class DB {
    Connection ct=null;
    PreparedStatement pestmt=null;
    public DB(){
        try{
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
            ct=DriverManager.getConnection("jdbc:sqlserver://localhost:1433;database=Login", "SA", "Black123");//这里改成你自己的sqlserver jdbc配置及密码，名称
            System.out.println("连接成功");
        }catch(Exception e){
            e.printStackTrace();
        }
    }
    public User checkUser(String username,String password) throws SQLException{
        try{
            pestmt=ct.prepareStatement("select * from Users where User_id =? and User_pw =?");//从用户User表中选取所有id跟密码
            System.out.println(username);
            System.out.println(password);
            pestmt.setString(1, username);///
            pestmt.setString(2, password);
            ResultSet rs=pestmt.executeQuery();///
            User user=new User();
            while(rs.next()){
                user.setUsername(rs.getString(1));
                user.setPassword(rs.getString(2));
                return user;	///查到就返回对象
            }
            return null;
        }catch(Exception e){
            e.printStackTrace();
            return null;
        }finally{
            ct.close();
            pestmt.close();
        }

    }
}

创建Servlet，TestServlet：

import java.io.IOException;
import java.io.PrintWriter;
import java.io.Writer;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import model.User;
import DB.DB;


public class TestServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        //设置响应头允许ajax跨域访问
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET,POST");

        //获取微信小程序get的参数值并打印
        String username = request.getParameter("username");
        String password=request.getParameter("password");

        DB db=new DB();///建立完成判断对象
        HttpSession session=request.getSession();//创建保存信息对象
        User user=(User) session.getAttribute("user");
        if(user==null){//第一次进入
            try {
                user=db.checkUser(username, password);
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }///如果账户密码正确，把返回的对象抛给user，不正确对象则为空
        }
        session.setAttribute("user", user);///保存对象
        Writer out = response.getWriter();
        System.out.println(user);
        if(user!=null){///有对象，用户名密码正确
            out.write("success");//向小程序返回结果
        }else{//对象为空
            out.write("error");
        }
        out.flush();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request,response);

    }

}

当然还有web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <display-name></display-name>
    <servlet>
        <servlet-name>TestServlet</servlet-name>
        <servlet-class>TestServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>TestServlet</servlet-name>
        <url-pattern>/TestServlet</url-pattern>
    </servlet-mapping>
</web-app>

整个登录界面的后端jar包配置如下：
在这里插入图片描述
数据库配置：

利用的库其中一个User表格：

完成以上配置即可完成登录效果，这里我将登录结果归到自己做的一个项目中了，在登录界面的index.js中有这样一段代码：

 if (res.data == "success") {
         wx.navigateTo({
            url: '../my/index?username='+username
            //省略。。。
            })
        }

意思是当在数据库查询成功后，返回index.js success进入微信登录界面my文件夹（我自己创的）下的index.js界面，进行微信登录，效果如下图（如果想验证登录成功失败可以自行创建两个js界面进行判断跳转这里不再给出）：
在这里插入图片描述
点击登录，获取权限后登录微信，效果如下图

由于后面这部分代码没有连接数据库，只是用来参考，所以详细代码不再给出，有同学需要可以找我要也行。🙊🙈🙈