通過HTML網頁對mysql數據庫進行增刪改查(CRUD實例)

首先我們得了解一下大致的架構 ,如下:

我們采用自底向上的方式進行開發,

一、先寫mysql數據庫

二、再寫java后端(Spring MVC架構)(這個是什么東西不懂不要緊,跟著步驟做就行了)

三、最后寫前端頁面(HTML)

一、 Mysql數據庫部分

我們要通過網頁對數據庫進行開發，那么我們需要先準備數據庫。

為了方便開發，直接用navicat來創建數據庫，名字叫做crud，字符集為utf8

接著在數據庫中建立數據表，我們以學生信息為例，建立一個名字叫做student的數據表?

字段列表如下：

?順便向數據庫中添加一些數據

這樣，我們第一部分就做好了，點支煙獎勵一下自己~~

二、編寫java后端代碼

1.打開IDEA，?新建spring項目

?勾選web依賴，就勾這個就好了

?點擊完成后，如果報錯就打開這個鏈接：

IDEA創建springboot項目時提示https://start.spring.io初始化失敗_暮晨丶的博客-CSDN博客

?2.編寫pom.xml文件

我們先找到這個“dependencies”標簽

?在這個標簽內添加依賴坐標。

這個文件就是項目用到的外部依賴，我們分析一下：

連接mysql數據庫我們需要添加驅動：

        <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency>

為了簡化交互我們還需要添加mybatis的依賴坐標

        <dependency><!--Springboot和MyBatis整合得ar包坐標--><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.3</version></dependency>

還有和前端交互用?的thymeleaf依賴坐標

        <dependency><!--和前端交互用的--><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

還有一些雜七雜八好用的依賴

        <dependency><!--德魯伊數據源坐標--><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.2.8</version></dependency><dependency><!--注解開發自動導入的依賴   @Data那種 --><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>

最后結果：?

然后刷新maven pom文件就編寫好了?

3.建包（3+1=4個包）

MVC架構：controller、service、mapper

存放實體類的包：pojo

?4.在pojo下建立實體類，類的屬性要和數據表的字段對應

在pojo下創建一個 Student類，類上面添加三個注解，這三個注解的作用分別是

添加：get set方法、有參構造方法、無參構造方法

?5. 配置數據庫連接信息，通過yml文件（里面的縮進要格外注意，縮進一定要和我寫的一樣）

#數據庫連接信息
spring:datasource:username: rootpassword: 2633url: jdbc:mysql://localhost:3306/crud?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8driver-class-name: com.mysql.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSource

?結果:

?5. 編寫mapper層

（1）在mapper中創建接口名字為StudetMapper

（2）在接口中添加注解 @Mapper

?（3）?在接口中編寫增刪改查的方法

?6.編寫SQL

（1）先裝一個 mybatis的插件

（2）在下面這個路徑中先建立一個mapper目錄，再創建一個StudentMapper.xml文件?

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

?好了之后屏幕會有藍色頭繩的小鳥

?點擊小鳥，就會跳轉到StudentMapper接口，這時我們可以看到接口方法報錯了

?（3）在mapper標簽中編寫sql語句

把鼠標光標放到紅色的地方，按快捷鍵 alt + 回車就可以創建寫sql的地方了，然后再標簽里邊編寫sql

（4）連接數據庫

?之后就不會報錯了。

繼續編寫SQL語言，重復返回接口按ALT+回車+回車編寫全部的SQL

?直到這里沒有報錯，并且有紅色頭繩小鳥

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

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

?配置端口為80

#配置端口
server:port: 80

結果

?8. 編寫service層

（1）在類外面添加@Service注解

（2）在類中添加

    @AutowiredStudentMapper studentMapper;

（3）調用studentMapper的接口方法

結果截圖：?

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 {@AutowiredStudentService studentService;@GetMapping("/toindex")public String toindex(){return "index";}//查詢所有頁面@GetMapping("/findStudentList")public String findStudentList(Model model){List<Student> 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";}
}

?結果截圖

（3）編寫首頁index.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a th:href="@{/findStudentList}">查詢信息</a>
</body>
</html>

?（4）編寫查詢所有頁面 findStudentList.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<!--/*@thymesVar id="student" type="com.example.crud.pojo.Student"*/-->
<!--/*@thymesVar id="studentList" type="com.example.crud.controller"*/-->
<head><meta charset="UTF-8"><title>查詢所有</title>
</head>
<body>
<table border="1"><tr><!--列--><th>學號</th><th>名字</th><th>性別</th><th>年齡</th><th>籍貫</th><th>操作</th></tr><tr th:each="student:${studentList}"><td th:text="${student.getId}"></td><td th:text="${student.getName()}"></td><td th:text="${student.getSex()}"></td><td th:text="${student.getAge()}"></td><td th:text="${student.getAddress()}"></td><td><a  role="button" th:href="@{/toupdateStudent/${student.getId()}}">修改</a><a  role="button" th:href="@{/deleteStudent/${student.getId()}}">刪除</a></td></tr>
</table>
<div ><a  role="button" th:href="@{/toaddStudent}">添加員工</a><a  role="button" th:href="@{/toindex}">返回首頁</a>
</div>
</body>
</html>

? (5)編寫修改頁面?

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<!--/*@thymesVar id="student" type="com.example.crud.pojo.Student"*/-->
<head><meta charset="UTF-8"><title>修改頁面</title>
</head>
<body>
<div ><form th:action="@{/updateStudent}" method="post"><div ><label >ID</label><input type="text" name="id" th:value="${student.getId()}" class="form-control" placeholder="請輸入該學生的id"></div><div class="form-group"><label >姓名</label><input type="text" name="name" th:value="${student.getName()}" class="form-control" placeholder="請輸入修改后的姓名"></div><div class="form-group"><label >性別</label><input type="text" name="sex" th:value="${student.getSex()}" class="form-control" placeholder="請輸入修改后的性別"></div><div class="form-group"><label >年齡</label><input type="text" name="age" th:value="${student.getAge()}" class="form-control" placeholder="請輸入修改后的年齡"></div><div class="form-group"><label >地址</label><!--/*@thymesVar id="student" type="com.example.crud.pojo.Student"*/--><input type="text" name="address" th:value="${student.getAddress()}" class="form-control" placeholder="請輸入修改后的地址"></div><button type="submit" class="btn btn-default">保存</button><a role="button" th:href="@{/findStudentList}">查詢員工</a><a  role="button" th:href="@{/toindex}">返回首頁</a></form>
</div>
</body>
</html>

?截圖

?(6) 編寫添加學生信息頁面

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>添加頁面</title></head>
<body>
<div  ><form th:action="@{/addStudent}" method="post"><div><br><label >ID</label><input  type="text" name="id"  placeholder="請輸入該員工的id"></div><div><label >姓名</label><input type="text" name="name"  placeholder=""></div><div><label >性別</label><select name="sex"><option value ="">null</option><option value ="男">男</option><option value ="女">女</option></select></div><div><label >年齡</label><input type="text" name="age"  placeholder=""></div><div><label >地址</label><input  type="text" name="address"  placeholder=""></div><br><button type="submit">點擊添加</button><a class="myButton" th:href="@{/findStudentList}">查詢員工</a><a class="myButton" th:href="@{/toindex}">返回首頁</a></form></div></body>
</html>