超简单实现前后端交互及建立数据库连接（前后端均未使用框架）含配置和出错解决

看了很多博客前后端交互都或多或少使用了框架，因本人还是个小白，并未系统学习servlet。故经过部分学习、拼接（狗头）速成一套最简单的前后端交互程序。后端使用了java语言，前端使用H5(未布局较丑)。本程序共三个文件1.数据库连接类（含账号密码检查方法）2.终端类（交互）3.h5（前端代码）一、项目结构搭建关于webapp的添加：只有企业版才有java此选项，社区版无此选项且无tomcat集成环

_舟

10970人浏览 · 2021-12-05 14:43:16

_舟 · 2021-12-05 14:43:16 发布

前言

看了很多博客前后端交互都或多或少使用了框架，因本人还是个小白，并未系统学习servlet和前后端框架。故经过部分学习、拼接（狗头）速成一套最简单的前后端交互程序。

程序简述：登录页面与终端类进行连接，当在前端页面输入账号密码时，终端类接收并调用数据库连接类的检查方法进行检查，若错误或无则跳转页面显示登录失败，若正确则跳转页面显示登陆成功。

后端使用了java语言，前端使用h5(未布局较丑)。

本程序共三个文件1.数据库连接类（含账号密码检查方法）2.终端类（交互）3.h5（前端代码）

一、项目结构搭建

（后附库添法）库中jsp和servlet为tomcat中的。故只需在网上下载一个Tomcat容器。剩下库均来自Maven仓库（注意此处的mysql驱动连接版本为5.1.6 ，故后面代码中Url和driver也为5版本写法）。

关于webapp的添加：只有企业版才有此选项，社区版无此选项且无tomcat集成环境（但据说可安装插件，具体可自行csdn（狗头））

二、上代码

1.数据库连接类（含账号密码检查方法）

import java.sql.*;
public class SeekUser {

    static Connection con;
    static Statement sql;
    static ResultSet res;


    public Connection Connection(){

    //1.获取基本信息
    String user = "root";
    String password = "123456";//此处改为自己数据库密码
    String url = "jdbc:mysql://localhost:3306/自己数据库名?characterEncoding=UTF-8";
    String driverClass = "com.mysql.jdbc.Driver";//此处为mysql5.1.6驱动
    //2.加载驱动
        try {
            Class.forName(driverClass);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

        //3.获取连接
        try {
            con = DriverManager.getConnection(url,user,password);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        return con;
    }

    //在数据库中搜索用户密码是否匹配
    public boolean seek (String email,String password) {
        SeekUser c=new SeekUser();
        con=c.Connection();
        try {
            sql=con.createStatement();
            res=sql.executeQuery("select * from newdata");
            while(res.next()) {
                if(email.equals(res.getString("id"))) {
                    if(password.equals(res.getString("password"))) {
                        System.out.println("登录成功");
                        return true;
                    }
                    else {
                        System.out.println("密码错误！");
                        return false;
                    }

                }
            }
            System.out.println("无此用户！");
            return false;
        }
        catch(SQLException e) {
            e.printStackTrace();
            return false;
        }
    }
}

2.终端类（交互）

mport com.fyj.service.SeekUser;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/testServlet")
public class testServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public testServlet() {
        super();
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String id = request.getParameter("id");//获得html界面的信息
        String password = request.getParameter("password");

        SeekUser seekUser = new SeekUser();

        response.setContentType("text/html;charset=UTF-8");//设置响应内容的类型

        System.out.println(seekUser.seek(id,password));

        if(seekUser.seek(id,password)){
            PrintWriter out = response.getWriter();
            String title = "登录页面";
            String docType = "<!DOCTYPE html> \n"; //弹出页面
            out.println(docType +
                    "<html>\n" +
                    "<head><title>" + title + "</title></head>\n" +
                    "<body>\n" +
                    "<h1 align=\"center\">" + title + "</h1>\n" +
                    "<h4>\n" +
                    " <b>登录成功!</b>"+
                    "</h4>\n" +
                    "</body></html>");
        }else{
            PrintWriter out = response.getWriter();
            String title = "登录页面";
            String docType = "<!DOCTYPE html> \n"; //弹出页面
            out.println(docType +
                    "<html>\n" +
                    "<head><title>" + title + "</title></head>\n" +
                    "<body>\n" +
                    "<h1 align=\"center\">" + title + "</h1>\n" +
                    "<h4>\n" +
                    " <b>登录失败!</b>"+
                    "</h4>\n" +
                    "</body></html>");

        }

    }
 @Override
   public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

}

注意：若出现 @WebServlet("/testServlet") 报错检查一下是否将Tomcat的lib中的jsp-api.jar和serclet-api.jar添加到库中。（Tomcat和里面的这个都要添加）以下为添法

3.h5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>

<body>
<h4>登录</h4>
<form action="testServlet" method="POST" >
    id<input type="text" name="id" id="id"><br />
    password<input type="password" name="password" id="password"><br />
    <input type="submit" value="登录" />
</form>
</body>
</html>

三、运行结果

账户密码正确

账户密码错误或者未输入

四、注意事项

1.关于配置Tomcat容器

将Tomcat导入后若此处出现Tomcat图标则点击，然后运行；若没有则点击编辑配置—>添加。即可然后点击运行。

而后此处的index.jsp设置了若Tomcat运行成功则会自动弹出页面

此页面弹出代表Tomcat容器运行成功，再运行登录界面即可。

2.出现错误：

（1）404

此时为h5与servlet连接出错，检查以下几处：

连接名和方法名是否正确

注释名是否正确（此处带不带斜杠都可）

若出现这样的404，则说明Tomcat容器未成功运行

（2）500

此时为未与数据库成功连接，检查密码、地址、与数据连接、是否建表（表应提前手动建好）等与数据库连接相关错误

（3）关于使用mysql5.1.6版本驱动是因为之前使用8.0驱动会报500-无法调用的错误（高版本会出错）。再检查一下xml配置中各库版本与使用的是否一致

总结

接触这个程序之前仅仅学习了一半的java，H5和JS（部分），C3（太急了没用上），然后用了几天课余时间把反射，MySQL，JDBC和servlet学了差不多。发现学习和写代码很简单，配置东西和Debug才是最头疼的。在CSDN上找了很多代码都是前端和后端会有些框架，学习和看懂容易，但是修改的时候会存在很多细节问题，其导致的bug会很难理解。然后照着很多代码修改，一直是一个黑乎乎的404，最后发现是社区版idea没有Tomcat集成环境。可耻的下载了只能使用30天的企业版后，发现网页注解一直报错，CSDN发现大家都让下载Tomcat7，但这个环境已经被淘汰了找了好久才发现可以直接添加8.5里的jsp和servlet......自己搜索学习固然会走很多弯路，但是从完全不了解前后端应该怎样交互的到现在了解了很多也算是小有成就，庆幸有学长和同学不厌其烦的帮我解决问题，写此文章也是为了记录我的部分学习，加油呀！！！

本文章程序写的较简略粗糙，还有很多可优化之处，并且本人小白，有问题还烦请指正，谢谢！！