相关推荐recommended
通过HTML网页对mysql数据库进行增删改查(CRUD实例)
作者:mmseoamin日期:2023-12-18

首先我们得了解一下大致的架构 ,如下:

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第1张

我们采用自底向上的方式进行开发,

一、先写mysql数据库

二、再写java后端(Spring MVC架构)(这个是什么东西不懂不要紧,跟着步骤做就行了)

三、最后写前端页面(HTML)

一、 Mysql数据库部分

我们要通过网页对数据库进行开发,那么我们需要先准备数据库。

为了方便开发,直接用navicat来创建数据库,名字叫做crud,字符集为utf8

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第2张

接着在数据库中建立数据表,我们以学生信息为例,建立一个名字叫做student的数据表 

字段列表如下:

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第3张

 顺便向数据库中添加一些数据

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第4张

这样,我们第一部分就做好了,点支烟奖励一下自己~~

二、 编写java后端代码

1.打开IDEA, 新建spring项目

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第5张

 勾选web依赖,就勾这个就好了

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第6张

 点击完成后,如果报错就打开这个链接:

IDEA创建springboot项目时提示https://start.spring.io初始化失败_暮晨丶的博客-CSDN博客

 2.编写pom.xml文件

我们先找到这个“dependencies”标签

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第7张

 在这个标签内添加依赖坐标。

这个文件就是项目用到的外部依赖,我们分析一下:

连接mysql数据库我们需要添加驱动:

        
            mysql
            mysql-connector-java
            runtime
        

为了简化交互我们还需要添加mybatis的依赖坐标

        
            
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.1.3
        

还有和前端交互用 的thymeleaf依赖坐标

        
            
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

还有一些杂七杂八好用的依赖

        
            
            com.alibaba
            druid
            1.2.8
        
        
            
            org.projectlombok
            lombok
        

最后结果: 

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第8张

然后刷新maven pom文件就编写好了 

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第9张

3.建包(3+1=4个包)

MVC架构:controller、service、mapper

存放实体类的包:pojo

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第10张

 4.在pojo下建立实体类,类的属性要和数据表的字段对应

在pojo下创建一个 Student类,类上面添加三个注解,这三个注解的作用分别是

添加:get set方法、有参构造方法、无参构造方法

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第11张

 5. 配置数据库连接信息,通过yml文件(里面的缩进要格外注意,缩进一定要和我写的一样)

#数据库连接信息
spring:
  datasource:
    username: root
    password: 2633
    url: jdbc:mysql://localhost:3306/crud?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    driver-class-name: com.mysql.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource

 结果:

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第12张

 5. 编写mapper层

(1)在mapper中创建接口 名字为StudetMapper

(2)在接口中添加注解 @Mapper

 (3) 在接口中编写增删改查的方法

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第13张

 6.编写SQL

(1)先装一个 mybatis的插件

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第14张

(2)在下面这个路径中先建立一个mapper目录,再创建一个StudentMapper.xml文件 




通过HTML网页对mysql数据库进行增删改查(CRUD实例),第15张

 好了之后屏幕会有蓝色头绳的小鸟通过HTML网页对mysql数据库进行增删改查(CRUD实例),第16张

 点击小鸟,就会跳转到StudentMapper接口,这时我们可以看到接口方法报错了

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第17张

 (3)在mapper标签中编写sql语句

把鼠标光标放到红色的地方,按快捷键 alt + 回车 就可以创建写sql的地方了,然后再标签里边编写sql

(4)连接数据库

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第18张

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第19张

 之后就不会报错了。

继续编写SQL语言,重复返回接口按ALT+回车+回车编写全部的SQL

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第20张

 直到这里没有报错,并且有红色头绳小鸟

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第21张

 7.在application.yml文件中添加mybatis信息

#配置Mybatis映射路径
mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.StudentDemo.pojo

 配置端口为80

#配置端口
server:
  port: 80

结果

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第22张

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第23张

 8. 编写service层

(1)在类外面添加@Service注解

(2)在类中添加

    @Autowired
    StudentMapper studentMapper;

(3)调用studentMapper的接口方法

结果截图: 

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第24张

9.编写controller层和前端页面

注:到这里是我认为最难的部分,如果前面没有做单元测试的话 会有可能报错,所以单元测试很重要

(1)在controller中创建StudentController类 ,在类外面注解为@Controller

(2)在类中添加注解@Autowired  调用StudentService

 StudentController代码

package com.example.crud.controller;
import com.example.crud.pojo.Student;
import com.example.crud.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import java.util.List;
@Controller
public class StudentController {
    @Autowired
    StudentService studentService;
    @GetMapping("/toindex")
    public String toindex(){
        return "index";
    }
    //查询所有页面
    @GetMapping("/findStudentList")
    public String findStudentList(Model model){
        List studentList=studentService.findAllStudent();
        //传进去的是一个键值对
        model.addAttribute("studentList",studentList);//传进前端的东西
        //返回值==html文件名
        return "findStudentList";
    }
    //跳转到添加页面
    @GetMapping("/toaddStudent")
    public String toaddStudent(){
        //返回值为文件名
        return "addStudent";
    }
    //真正执行添加
    @PostMapping("/addStudent")
    public String addStudent(Student student)
    {
        studentService.addStudent(student);
        //跳转到哪里(文件名)
        return "redirect:/findStudentList";
    }
    @GetMapping("/toupdateStudent/{id}")
    public String toupdateStudent(@PathVariable("id")String id, Model model){
        //先找到被修改的对象
        Student student=studentService.findStudentById(id);
        //将对象保存到model中
        model.addAttribute("student",student);
        //html文件名
        return "updateStudent";
    }
    @PostMapping("/updateStudent")
    public String updateStudent(Student student){
        //获取当前页面学生信息,传入按照id修改学生信息的Service,进行信息修改
        studentService.updateStudent(student);
        return "redirect:/findStudentList";
    }
    @GetMapping("/deleteStudent/{id}")
    public String deleteStudent(@PathVariable("id")String id){
        studentService.deleteStudent(id);
        return "redirect:/findStudentList";
    }
}

 结果截图

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第25张

(3)编写首页index.html




    
    Title


查询信息

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第26张

 (4)编写查询所有页面 findStudentList.html






    
    查询所有


学号 名字 性别 年龄 籍贯 操作
修改 删除
添加员工 返回首页

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第27张

 

  (5)编写修改页面 





    
    修改页面


    
查询员工 返回首页

 截图

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第28张

 

 (6) 编写添加学生信息页面




    
    添加页面


    


查询员工 返回首页

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第29张

          这样 整个项目就写完了

       三、测试运行

成功开启服务截图:

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第30张

 开启服务失败截图:

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第31张

 解决办法有两个:

1.修改端口号 ,在yml文件中 

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第32张

2. 杀死当前80端口的进程

win+r 进入命令行 输入

netstat -ano

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第33张

 输入

taskkill /pid 17156 -f

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第34张

 这样就可以继续启动服务了

启动完成后打开浏览器,输入 127.0.0.1 回车

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第35张

 这样就访问到了 index.html页面

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第36张

 点击查询信息,就访问到了 findStudentList.html页面的内容,在页面上展示了数据库中的记录

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第37张

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第38张

点击修改  跳转到修改页面 updateStudent.html

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第39张

 点击删除 直接删除数据库中的内容

点击 添加 跳转到添加页面 addStudent.html

通过HTML网页对mysql数据库进行增删改查(CRUD实例),第40张

 这样就完成了CRUD实例的编写,重点在Controller 和 交互前端交互的部分 有很多值得深究的地方,时间精力有限,不能一一解释,而且存在诸多BUG,有很多值得优化的地方,mybatis可以写的更好

1.并发控制的问题(一个线程把数据删除了,另一个线程点击了修改,这样就会报错)

2.添加一个空记录,然后把这个空记录进行删除(可以再前端页面用一个正则表达式解决)

3.添加一条重复的记录

        仅记录学习。。。。。不足之处还需要大哥批评指正

项目源代码通过HTML网页对mysql数据库进行增删改查(CRUD实例),icon-default.png?t=M85B,第41张http://链接:https://pan.baidu.com/s/1oXVY-eD0ypziKzPcaKGAmg?pwd=1234 提取码:1234

 通过HTML网页对mysql数据库进行增删改查(CRUD实例),第42张