首先我們得了解一下大致的架構(gòu) ,如下:
我們采用自底向上的方式進(jìn)行開(kāi)發(fā),
一、先寫(xiě)mysql數(shù)據(jù)庫(kù)
二、再寫(xiě)java后端(Spring MVC架構(gòu))(這個(gè)是什么東西不懂不要緊,跟著步驟做就行了)
三、最后寫(xiě)前端頁(yè)面(HTML)
一、 Mysql數(shù)據(jù)庫(kù)部分
我們要通過(guò)網(wǎng)頁(yè)對(duì)數(shù)據(jù)庫(kù)進(jìn)行開(kāi)發(fā)，那么我們需要先準(zhǔn)備數(shù)據(jù)庫(kù)。
為了方便開(kāi)發(fā)，直接用navicat來(lái)創(chuàng)建數(shù)據(jù)庫(kù)，名字叫做crud，字符集為utf8
接著在數(shù)據(jù)庫(kù)中建立數(shù)據(jù)表，我們以學(xué)生信息為例，建立一個(gè)名字叫做student的數(shù)據(jù)表?
字段列表如下：
?順便向數(shù)據(jù)庫(kù)中添加一些數(shù)據(jù)
這樣，我們第一部分就做好了，點(diǎn)支煙獎(jiǎng)勵(lì)一下自己~~
二、 編寫(xiě)java后端代碼
1.打開(kāi)IDEA，?新建spring項(xiàng)目
?勾選web依賴(lài)，就勾這個(gè)就好了
?點(diǎn)擊完成后，如果報(bào)錯(cuò)就打開(kāi)這個(gè)鏈接：
IDEA創(chuàng)建springboot項(xiàng)目時(shí)提示https://start.spring.io初始化失敗_暮晨丶的博客-CSDN博客
?2.編寫(xiě)pom.xml文件
我們先找到這個(gè)“dependencies”標(biāo)簽
?在這個(gè)標(biāo)簽內(nèi)添加依賴(lài)坐標(biāo)。
這個(gè)文件就是項(xiàng)目用到的外部依賴(lài)，我們分析一下：
連接mysql數(shù)據(jù)庫(kù)我們需要添加驅(qū)動(dòng)：
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>為了簡(jiǎn)化交互我們還需要添加mybatis的依賴(lài)坐標(biāo)
<dependency>
<!--Springboot和MyBatis整合得ar包坐標(biāo)-->
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.3</version>
</dependency>還有和前端交互用?的thymeleaf依賴(lài)坐標(biāo)
<dependency>
<!--和前端交互用的-->
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>還有一些雜七雜八好用的依賴(lài)
<dependency>
<!--德魯伊數(shù)據(jù)源坐標(biāo)-->
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.8</version>
</dependency>
<dependency>
<!--注解開(kāi)發(fā)自動(dòng)導(dǎo)入的依賴(lài) @Data那種 -->
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>最后結(jié)果：?
?
然后刷新maven pom文件就編寫(xiě)好了?
3.建包（3+1=4個(gè)包）
MVC架構(gòu)：controller、service、mapper
存放實(shí)體類(lèi)的包：pojo
?4.在pojo下建立實(shí)體類(lèi)，類(lèi)的屬性要和數(shù)據(jù)表的字段對(duì)應(yīng)
在pojo下創(chuàng)建一個(gè) Student類(lèi)，類(lèi)上面添加三個(gè)注解，這三個(gè)注解的作用分別是
添加：get set方法、有參構(gòu)造方法、無(wú)參構(gòu)造方法
?5. 配置數(shù)據(jù)庫(kù)連接信息，通過(guò)yml文件（里面的縮進(jìn)要格外注意，縮進(jìn)一定要和我寫(xiě)的一樣）
#數(shù)據(jù)庫(kù)連接信息
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?結(jié)果:
?5. 編寫(xiě)mapper層
（1）在mapper中創(chuàng)建接口 名字為StudetMapper
（2）在接口中添加注解 @Mapper
?（3）?在接口中編寫(xiě)增刪改查的方法
?6.編寫(xiě)SQL
（1）先裝一個(gè) mybatis的插件
?
（2）在下面這個(gè)路徑中先建立一個(gè)mapper目錄，再創(chuàng)建一個(gè)StudentMapper.xml文件?
<?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.example.crud.mapper.StudentMapper">
</mapper>
?好了之后屏幕會(huì)有藍(lán)色頭繩的小鳥(niǎo)
?點(diǎn)擊小鳥(niǎo)，就會(huì)跳轉(zhuǎn)到StudentMapper接口，這時(shí)我們可以看到接口方法報(bào)錯(cuò)了
?（3）在mapper標(biāo)簽中編寫(xiě)sql語(yǔ)句
把鼠標(biāo)光標(biāo)放到紅色的地方，按快捷鍵 alt + 回車(chē) 就可以創(chuàng)建寫(xiě)sql的地方了，然后再標(biāo)簽里邊編寫(xiě)sql
（4）連接數(shù)據(jù)庫(kù)
?之后就不會(huì)報(bào)錯(cuò)了。
繼續(xù)編寫(xiě)SQL語(yǔ)言，重復(fù)返回接口按ALT+回車(chē)+回車(chē)編寫(xiě)全部的SQL
?直到這里沒(méi)有報(bào)錯(cuò)，并且有紅色頭繩小鳥(niǎo)
?7.在application.yml文件中添加mybatis信息
#配置Mybatis映射路徑
mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.example.StudentDemo.pojo?配置端口為80
#配置端口
server:
port: 80結(jié)果
?
?8. 編寫(xiě)service層
（1）在類(lèi)外面添加@Service注解
（2）在類(lèi)中添加
@Autowired
StudentMapper studentMapper;（3）調(diào)用studentMapper的接口方法
結(jié)果截圖：?
9.編寫(xiě)controller層和前端頁(yè)面
注：到這里是我認(rèn)為最難的部分，如果前面沒(méi)有做單元測(cè)試的話(huà) 會(huì)有可能報(bào)錯(cuò)，所以單元測(cè)試很重要
（1）在controller中創(chuàng)建StudentController類(lèi) ，在類(lèi)外面注解為@Controller
（2）在類(lèi)中添加注解@Autowired? 調(diào)用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";
}
//查詢(xún)所有頁(yè)面
@GetMapping("/findStudentList")
public String findStudentList(Model model){
List<Student> studentList=studentService.findAllStudent();
//傳進(jìn)去的是一個(gè)鍵值對(duì)
model.addAttribute("studentList",studentList);//傳進(jìn)前端的東西
//返回值==html文件名
return "findStudentList";
}
//跳轉(zhuǎn)到添加頁(yè)面
@GetMapping("/toaddStudent")
public String toaddStudent(){
//返回值為文件名
return "addStudent";
}
//真正執(zhí)行添加
@PostMapping("/addStudent")
public String addStudent(Student student)
{
studentService.addStudent(student);
//跳轉(zhuǎn)到哪里(文件名)
return "redirect:/findStudentList";
}
@GetMapping("/toupdateStudent/{id}")
public String toupdateStudent(@PathVariable("id")String id, Model model){
//先找到被修改的對(duì)象
Student student=studentService.findStudentById(id);
//將對(duì)象保存到model中
model.addAttribute("student",student);
//html文件名
return "updateStudent";
}
@PostMapping("/updateStudent")
public String updateStudent(Student student){
//獲取當(dāng)前頁(yè)面學(xué)生信息,傳入按照id修改學(xué)生信息的Service,進(jìn)行信息修改
studentService.updateStudent(student);
return "redirect:/findStudentList";
}
@GetMapping("/deleteStudent/{id}")
public String deleteStudent(@PathVariable("id")String id){
studentService.deleteStudent(id);
return "redirect:/findStudentList";
}
}
?結(jié)果截圖
（3）編寫(xiě)首頁(yè)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}">查詢(xún)信息</a>
</body>
</html>
?（4）編寫(xiě)查詢(xún)所有頁(yè)面 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>查詢(xún)所有</title>
</head>
<body>
<table border="1">
<tr><!--列-->
<th>學(xué)號(hào)</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}">返回首頁(yè)</a>
</div>
</body>
</html>?
?
? (5)編寫(xiě)修改頁(yè)面?
<!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>修改頁(yè)面</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="請(qǐng)輸入該學(xué)生的id">
</div>
<div class="form-group">
<label >姓名</label>
<input type="text" name="name" th:value="${student.getName()}" class="form-control" placeholder="請(qǐng)輸入修改后的姓名">
</div>
<div class="form-group">
<label >性別</label>
<input type="text" name="sex" th:value="${student.getSex()}" class="form-control" placeholder="請(qǐng)輸入修改后的性別">
</div>
<div class="form-group">
<label >年齡</label>
<input type="text" name="age" th:value="${student.getAge()}" class="form-control" placeholder="請(qǐng)輸入修改后的年齡">
</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="請(qǐng)輸入修改后的地址">
</div>
<button type="submit" class="btn btn-default">保存</button>
<a role="button" th:href="@{/findStudentList}">查詢(xún)員工</a>
<a role="button" th:href="@{/toindex}">返回首頁(yè)</a>
</form>
</div>
</body>
</html>?截圖
?
?(6) 編寫(xiě)添加學(xué)生信息頁(yè)面
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>添加頁(yè)面</title>
</head>
<body>
<div >
<form th:action="@{/addStudent}" method="post">
<div>
<br>
<label >ID</label>
<input type="text" name="id" placeholder="請(qǐng)輸入該員工的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">點(diǎn)擊添加</button>
<a class="myButton" th:href="@{/findStudentList}">查詢(xún)員工</a>
<a class="myButton" th:href="@{/toindex}">返回首頁(yè)</a>
</form>
</div>
</body>
</html>
? ? ? ? ? 這樣 整個(gè)項(xiàng)目就寫(xiě)完了
???????三、測(cè)試運(yùn)行
成功開(kāi)啟服務(wù)截圖：
?開(kāi)啟服務(wù)失敗截圖：
?解決辦法有兩個(gè)：
1.修改端口號(hào) ，在yml文件中?
2. 殺死當(dāng)前80端口的進(jìn)程
win+r 進(jìn)入命令行 輸入
netstat -ano
?輸入
taskkill /pid 17156 -f?
?這樣就可以繼續(xù)啟動(dòng)服務(wù)了
啟動(dòng)完成后打開(kāi)瀏覽器，輸入 127.0.0.1 回車(chē)
?這樣就訪(fǎng)問(wèn)到了 index.html頁(yè)面
?
?點(diǎn)擊查詢(xún)信息，就訪(fǎng)問(wèn)到了 findStudentList.html頁(yè)面的內(nèi)容，在頁(yè)面上展示了數(shù)據(jù)庫(kù)中的記錄
?
點(diǎn)擊修改? 跳轉(zhuǎn)到修改頁(yè)面 updateStudent.html
?
?點(diǎn)擊刪除 直接刪除數(shù)據(jù)庫(kù)中的內(nèi)容
點(diǎn)擊 添加 跳轉(zhuǎn)到添加頁(yè)面 addStudent.html
?這樣就完成了CRUD實(shí)例的編寫(xiě)，重點(diǎn)在Controller 和 交互前端交互的部分 有很多值得深究的地方，時(shí)間精力有限，不能一一解釋?zhuān)掖嬖谥T多BUG，有很多值得優(yōu)化的地方，mybatis可以寫(xiě)的更好
1.并發(fā)控制的問(wèn)題（一個(gè)線(xiàn)程把數(shù)據(jù)刪除了，另一個(gè)線(xiàn)程點(diǎn)擊了修改，這樣就會(huì)報(bào)錯(cuò)）
2.添加一個(gè)空記錄，然后把這個(gè)空記錄進(jìn)行刪除（可以再前端頁(yè)面用一個(gè)正則表達(dá)式解決）
3.添加一條重復(fù)的記錄
????????僅記錄學(xué)習(xí)。。。。。不足之處還需要大哥批評(píng)指正
項(xiàng)目源代碼http://鏈接：https://pan.baidu.com/s/1oXVY-eD0ypziKzPcaKGAmg?pwd=1234 提取碼：1234文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-785484.html
?
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-785484.html
到了這里，關(guān)于通過(guò)HTML網(wǎng)頁(yè)對(duì)mysql數(shù)據(jù)庫(kù)進(jìn)行增刪改查(CRUD實(shí)例)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
