前端页面实现数据库增删改查

自从期中2分后我痛定思痛，两个星期抽时间在b站学web开发，能实现基本的前端页面实现数据库增删改查了。供上BV号BV1Qf4y1T7Hx，学完Servlet后最基本的前端页面实现数据库增删改查就能实现了。目前前端jsp,后端java就能凑活，以后需要转战springboot＋vue。想学花时间就能学会的东西。

这里用IDEA演示，下面是详细步骤：

1.首先准备好环境：Mysql连接成功、Mybatis(也可以用JDBC搓,以下不演示)、Maven(导包用的)、Tomcat（前后端连接用的，最好idea加个Maven Helper插件）
以下内容默认环境齐全，没配好可以去上方B站视频找找配置方法
2.创建数据库中的表
*这里使用Mysql的可视化软件Navicat
先创建了一个库db1
![](https://img2024.cnblogs.com/blog/3474061/202411/3474061-20241119201749791-1236461012.png
之后用查询建立表并先导入数据

use db1;
CREATE TABLE tb_class(
	id1 int primary key auto_increment,
	id VARCHAR(6),
	name varchar(20),
	num INTEGER,
	teacher varchar(20),
	pos varchar(20)
);


INSERT INTO tb_class(id,name,num,teacher,pos) values('050013','se',90,'zhangsan','102'),
('050012','math',90,'lisi','302');
SELECT * FROM tb_class;

这就建好了，navicat可以先挂后台了
3.然后打开idea创建一个web项目

社区版idea不提供web项目模板，所以要自己加东西：
webapp->WEB_INF->web.xml
具体位置以及web.xml内容如下

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
</web-app>

这个输入后爆红没关系，不影响运行
4.用Maven导包

先在这声明打成war包

之后加上dependencies（jar包）和build（插件）

<dependencies>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.5</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>


        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
        </plugins>
    </build>

然后最关键一步，点下刷新：

这样就导好了，现在可以看到外部库里面的jar包们。
5.定义数据类
这个类是用来存数据的，和数据库中表的内容一一对应
先在"java"目录下建一个com.yanshi（就是演示，名字无所谓）软件包，
然后里面加一个pojo包放数据类
这个类我起名Classes

package com.yanshi.pojo;
//上面这个要改
public class Classes {
    private Integer id1;
//数据库中要有id表示行号？行号自动标所以声明一个int的id1，但是后面不会给它赋值
    private String  id;
    private String name;
    private Integer num;
    private String teacher;
    private String pos;

    @Override
    public String toString() {
        return "Classes{" +
                "id1=" + id1 +
                ", id='" + id + '\'' +
                ", name='" + name + '\'' +
                ", num=" + num +
                ", teacher='" + teacher + '\'' +
                ", pos='" + pos + '\'' +
                '}';
    }

    public Integer getId1() {
        return id1;
    }

    public void setId1(Integer id1) {
        this.id1 = id1;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }

    public String getTeacher() {
        return teacher;
    }

    public void setTeacher(String teacher) {
        this.teacher = teacher;
    }

    public String getPos() {
        return pos;
    }

    public void setPos(String pos) {
        this.pos = pos;
    }
}

6.配置Mybatis
resources目录下写一个com\yanshi\mapper目录
里面放ClassMapper.xml

namespace里面com.什么的要根据你的项目的Mapper地址改

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.yanshi.mapper.ClassesMapper">
</mapper>

然后加入mybatis-config.xml
同上，也得根据你自己的数据库名和密码以及mapper与数据类目录去改

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--起别名-->
    <typeAliases>
        <package name="com.yanshi.pojo"/><!--你自己的pojo-->
    </typeAliases>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql:///db1?useSSL=false&amp;useServerPrepStmts=true"/>
                <property name="username" value="root"/> <!--你自己的数据库名-->
                <property name="password" value="2333"/> <!--你自己的数据库密码-->
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="com.yanshi.mapper"/><!--你自己的mapper-->
    </mappers>
</configuration>

目录参考

然后写Mapper接口
在com.yanshi下再加个包，叫mapper,就是上几个xml里面那个mapper
里面新建类，注意选接口！！！！

就叫ClassesMapper，里面是写数据库操作指令的，到时候从这调用操作
，先给出几个

package com.yanshi.mapper;

import com.yanshi.pojo.Classes;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

public interface ClassesMapper {
    @Select("select * from tb_class where name = #{name} ")
    Classes selectByname(@Param("name") String name);//课程名查找

    @Select("select * from tb_class where id = #{id} ")
    Classes selectByid(@Param("id") String id);//id查找

    @Insert("insert into tb_class values(null,#{id},#{name},#{num},#{teacher},#{pos})")
    void add(Classes classes);//添加新数据
}

之后写utils（数据库连接池）
还是yanshi目录下加utils软件包
新建类SqlSessionFactoryUtils

package com.yanshi.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils {
    private static SqlSessionFactory sqlSessionFactory;

    static {
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


    public static SqlSessionFactory getSqlSessionFactory(){

        return sqlSessionFactory;
    }
}

7.写Servlet
yanshi目录下新建目录servlet
建一个FindByNameServlet类，extendsHttpServlet,写doGet和doPost函数

package com.yanshi.servlet;

import com.yanshi.mapper.ClassesMapper;
import com.yanshi.pojo.Classes;
import com.yanshi.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

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("/FindByNameServlet")
public class FindByNameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 接收课程名
        String name=req.getParameter("name");

        //2. 调用MyBatis完成查询
        //2.1 获取SqlSessionFactory对象

        SqlSessionFactory sqlSessionFactory= SqlSessionFactoryUtils.getSqlSessionFactory();

        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        ClassesMapper classesMapper = sqlSession.getMapper(ClassesMapper.class);
        //2.4 调用方法
        Classes classes = classesMapper.selectByname(name);
        //2.5 释放资源
        sqlSession.close();


        //获取字符输出流，并设置content type
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        //3. 判断user释放为null
        if(classes != null){
            // 写出对应课程
            writer.write(classes.toString());
        }else {
            // 判断没有课程
            writer.write("没有找到该课程！");
        }
    }

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

servlet写完了。
8.写网页
webapp下加一个FindByName.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--下面这是虚拟路径，ClassAdd是项目名，后面那串是FindByNameServlet里那个WebServlet声明的虚拟名，自己的要改！！！！！！-->
<form action="/ClassAdd/FindByNameServlet" method="post" id="form">
    <p>课程名:<input id="name" name="name" type="text"></p>

    <input type="submit" class="button" value="查找">&nbsp;&nbsp;&nbsp;
</form>
</body>
</html>

然后写完了

9.运行测试
装了Maven Helper插件后在项目里面随便右键一下，找这个tomcat7

点了之后就可以在控制台找这个网址


访问FindByName.html

搜se

servlet直接调用的toString

前端访问数据库完成
然后添加数据基本操作类似
这里把码奉上供参考
InsertServlet

package com.yanshi.servlet;

import com.yanshi.mapper.ClassesMapper;
import com.yanshi.pojo.Classes;
import com.yanshi.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

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;

@WebServlet("/InsertServlet")
public class InsertServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        String username = req.getParameter("username");
//        String password=req.getParameter("password");
        String  id=req.getParameter("id");
        String name=req.getParameter("name");
        Integer num= Integer.valueOf(req.getParameter( "num"));
        String teacher=req.getParameter("teacher");
        String pos=req.getParameter("pos");

        Classes classes=new Classes();
//        user.setUsername(username);
//        user.setPassword(password);
        classes.setId(id);
        classes.setName(name);
        classes.setNum(num);
        classes.setTeacher(teacher);
        classes.setPos(pos);
        //调用Mapper
        SqlSessionFactory sqlSessionFactory= SqlSessionFactoryUtils.getSqlSessionFactory();

        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        ClassesMapper classesMapper = sqlSession.getMapper(ClassesMapper.class);
        //2.4 调用方法
        Classes classes1=classesMapper.selectByid(id);
        //这里是用FindByid查重
        if(classes1==null){
            //不存在，就加数据
            classesMapper.add(classes);
            //提交事务
            sqlSession.commit();
            //2.5 释放资源
            sqlSession.close();
        }else{
            resp.setContentType("text/html;charset=utf-8");
            resp.getWriter().write("课程已存在！");
        }
    }

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

以及Insert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/ClassAdd/InsertServlet" method="post" id="form">
    <p>课程编号:<input id="id" name="id" type="text"></p>
    <p>课程名称:<input id="name" name="name" type="text"></p>
    <p>选课人数:<input id="num" name="num" type="text"></p>
    <p>任课教师:<input id="teacher" name="teacher" type="text"></p>
    <p>上课地点:<input id="pos" name="pos" type="text"></p>

    <input type="submit" class="button" value="添加">&nbsp;&nbsp;
    </form>&nbsp;
</body>
</html>

测试：