關(guān)鍵技術(shù)：
前端：Vue+Element+JQuery
后端：Springboot+Springdatajpa
項(xiàng)目流程：
Part I：后端代碼
1.創(chuàng)建項(xiàng)目
選擇Spring Initializr，JDK選擇1.8版本。
導(dǎo)入三個包：Spring Web——spring框架的核心類；Spring Data?JPA——整合數(shù)據(jù)庫操作；MYSQL Driver——數(shù)據(jù)庫驅(qū)動
Maven使用默認(rèn)Maven 3。
2..demo框架
SpringBoot 項(xiàng)目一般外層只有兩個文件，pom.xml文件 和src文件夾。
????????pom.xml文件的內(nèi)容是Spring的一些依賴配置;
????????src文件夾的內(nèi)容包括項(xiàng)目的大致結(jié)構(gòu)，src文件夾里面包含main文件夾，main文件夾是java和resource文件夾。其中java里保存的spring后臺的框架，resource中有static文件夾是存放靜態(tài)頁面的地方，application.yml用于連接數(shù)據(jù)庫。
注意：啟動類應(yīng)放在與其他層相同的層級上。
Spring框架主要包括四層：
controller：控制層，控制業(yè)務(wù)邏輯
service：業(yè)務(wù)層，控制業(yè)務(wù)
dao：持久層，主要用于數(shù)據(jù)庫交互
entity：實(shí)體層，數(shù)組庫在項(xiàng)目中的類
另外，common包含一個通用配置文件夾里面包含Result（一個返回json數(shù)據(jù)的包裝類）和WebMvcConfig（用于配置跨域訪問）的配置類。
pom文件如下：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>1.0-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.0.RELEASE</version>
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!--添加Springmvc依賴-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- springBoot JPA的起步依賴 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-test</artifactId>
<version>2.7.10</version>
<scope>test</scope>
</dependency>
<!-- 打war包時加入此項(xiàng)， 告訴spring-boot tomcat相關(guān)jar包用外部的，不要打進(jìn)去 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope><!--由JDK或者容器提供-->
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
</configuration>
</plugin>
</plugins>
</build>
<repositories>
<repository>
<id>public</id>
<name>aliyun nexus</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
</repository>
</repositories>
</project>3.創(chuàng)建數(shù)據(jù)庫
?SQL語句：
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`name` varchar(20) DEFAULT NULL COMMENT '姓名',
`age` int(11) DEFAULT NULL COMMENT '年齡',
`sex` varchar(1) DEFAULT NULL COMMENT '性別',
`address` varchar(255) DEFAULT NULL COMMENT '地址',
`phone` varchar(20) DEFAULT NULL COMMENT '電話',
`create_time` varchar(20) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('2', '張三', '22', '男', '上海市', '13867675656', '2020-12-26');
INSERT INTO `user` VALUES ('3', '李四', '20', '男', '合肥市', '13978786565', '2020-11-18');
INSERT INTO `user` VALUES ('5', '趙柳', '20', '男', '南京市', '13978786565', '2020-11-18');
INSERT INTO `user` VALUES ('6', '錢望', '22', '男', '深圳市', '13867675656', '2020-11-18');
INSERT INTO `user` VALUES ('7', '李云', '20', '男', '合肥市', '13978786565', '2020-11-18');
INSERT INTO `user` VALUES ('8', '張傅', '22', '男', '上海市', '13867675656', '2020-11-18');
INSERT INTO `user` VALUES ('9', '李青', '20', '男', '合肥市', '13978786565', '2020-11-18');
INSERT INTO `user` VALUES ('10', '王二發(fā)', '22', '男', '昆明市', '13867675656', '2020-11-18');
INSERT INTO `user` VALUES ('12', '王得貴', '22', '男', '成都市', '13867674565', '2020-11-18');新建成功：
4.增刪改查功能實(shí)現(xiàn)
一般按照倒序方式創(chuàng)建項(xiàng)目
（1）首先創(chuàng)建一個與數(shù)據(jù)庫中的表格對應(yīng)的entity實(shí)體類，每一個字段與數(shù)據(jù)庫表字段應(yīng)對。同時添加getter、setter方法。
@Entity //標(biāo)注為實(shí)體類
@Table(name = "user") //映射數(shù)據(jù)庫user表
public class User {
@Id //設(shè)置主鍵為id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private Integer age;
private String sex;
private String address;
private String phone;
@Column(name = "create_time") //數(shù)據(jù)庫采用駝峰式的結(jié)構(gòu)，添加注釋與該實(shí)體類createTime字段進(jìn)行映射
private String createTime;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getCreateTime() {
return createTime;
}
public void setCreateTime(String createTime) {
this.createTime = createTime;
}
}（2）配置到dao（mapper）接口，完成數(shù)據(jù)庫多的交互。由于該層需要連接數(shù)據(jù)庫，請確保數(shù)據(jù)庫配置連接成功。
application.yml配置如下：
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
username: 數(shù)據(jù)庫（一般為root）
password: 密碼
url: jdbc:mysql://localhost:3306/數(shù)據(jù)庫名稱?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8
//在該接口中，增刪改查的方法不用自己定義
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
//繼承JpaRepository，兩個泛型參數(shù)分別是數(shù)據(jù)庫表和主鍵類型
}?（3）Service類實(shí)現(xiàn)
在Spring data JPA中集成了很多操作數(shù)據(jù)庫的方法，我們可以直接拿來使用。
先創(chuàng)建一個Service類，給一個Service注解，然后注入U(xiǎn)serRepository數(shù)據(jù)庫接口，并實(shí)現(xiàn)增刪改查功能。
@Service
public class UserService {
@Resource
private UserRepository userRepository; //注入數(shù)據(jù)庫接口
//新增與修改功能
//add與update都調(diào)用save方法，區(qū)別在于add在傳遞參數(shù)時不傳id，而update傳遞id
public void save(User user) {
String now = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
user.setCreateTime(now);
userRepository.save(user);
}
//刪除操作
public void delete(Long id) {
userRepository.deleteById(id);
}
//根據(jù)id查詢操作，查詢失敗返回null
public User findById(Long id) {
return userRepository.findById(id).orElse(null);
}
//查找全部
public List<User> findAll() {
return userRepository.findAll();
}
//分頁查詢
public Page<User> findPage(Integer pageNum, Integer pageSize, String name) {
// 構(gòu)建分頁查詢條件，根據(jù)create_time倒序排序
Sort sort = Sort.by(Sort.Direction.DESC, "create_time");
//分頁查詢操作
Pageable pageRequest = PageRequest.of(pageNum - 1, pageSize, sort);
return userRepository.findByNameLike(name, pageRequest);
}
}
自定義模糊查詢：
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
//繼承JpaRepository，兩個泛型參數(shù)分別是數(shù)據(jù)庫表和主鍵類型
@Query(value = "select * from user where name like %?1%", nativeQuery = true)
Page<User> findByNameLike(String name, Pageable pageRequest);
}
//項(xiàng)目為前后端分離，前端返回的數(shù)據(jù)是json格式，標(biāo)記注解RestController表示返回的數(shù)據(jù)都是json格式
@RestController
@RequestMapping("/user") //url路徑
@ComponentScan("com.example.demo4.controller") //掃描
public class UserController {
@Resource //注入U(xiǎn)serService，使用UserService中的方法等
private UserService userService;
// 新增用戶
@PostMapping
public Result add(@RequestBody User user) {
userService.save(user);
return Result.success();
}
// 修改用戶
@PutMapping
public Result update(@RequestBody User user) {
userService.save(user);
return Result.success();
}
// 刪除用戶
//delete域名映射將域名映射為id，通過PathVariable接收參數(shù)id，根據(jù)id刪除用戶
//Restful用法
@DeleteMapping("/{id}")
public void delete(@PathVariable("id") Long id) {
userService.delete(id);
}
// 根據(jù)id查詢用戶
@GetMapping("/{id}")
public Result<User> findById(@PathVariable Long id) {
return Result.success(userService.findById(id));
}
// 查詢所有用戶
@GetMapping
public Result<List<User>> findAll() {
return Result.success(userService.findAll());
}
// 分頁查詢用戶
//RequestParam傳遞兩個參數(shù)
@GetMapping("/page")
public Result<Page<User>> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
@RequestParam(required = false) String name) {
return Result.success(userService.findPage(pageNum, pageSize, name));
}
}至此，后端代碼完成。
Part II：前端代碼
前端架構(gòu)
中間由于從其他地方拷貝過來的代碼，以下幾個文件被加上了路徑導(dǎo)致前端404和沒能把element組件渲染，后面修改成以下成功運(yùn)行，算是一點(diǎn)粗心了。
前端頁面代碼在index.html完成，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶信息</title>
<!-- 引入樣式 -->
<link rel="stylesheet" href="element.css">
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto">
<h2>用戶信息表</h2>
<el-row>
<el-col :span="6" style="margin-bottom: 10px">
<el-button type="primary" @click="add">新增</el-button>
<el-input v-model="name" style="width: 70%" @keyup.enter.native="loadTable(1)"></el-input>
</el-col>
</el-row>
<el-table
:data="page.content"
stripe
border
style="width: 100%">
<el-table-column
prop="name"
label="用戶名"
>
</el-table-column>
<el-table-column
prop="age"
label="年齡"
width="180">
</el-table-column>
<el-table-column
prop="sex"
label="性別">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="phone"
label="電話">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="small" circle @click="edit(scope.row)"></el-button>
<el-button type="danger" icon="el-icon-delete" size="small" circle @click="del(scope.row.id)"></el-button>
</template>
</el-table-column>
</el-table>
<el-row type="flex" justify="center" style="margin-top: 10px">
<el-pagination
layout="prev, pager, next"
:page-size="pageSize"
:current-page="pageNum"
@prev-click="loadTable"
@current-change="loadTable"
@next-click="loadTable"
:total="page.totalElements">
</el-pagination>
</el-row>
<el-dialog
title="用戶信息"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用戶名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年齡">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-radio v-model="form.sex" label="男">男</el-radio>
<el-radio v-model="form.sex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="電話">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">確 定</el-button>
</span>
</el-dialog>
</div>
<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<!-- 引入組件庫 -->
<script src="element.js"></script>
<script>
new Vue({
el: '#app',
data: {
page: {},
name: '',
pageNum: 1,
pageSize: 8,
dialogVisible: false,
form: {}
},
created() {
this.loadTable(this.pageNum);
},
methods: {
loadTable(num) {
this.pageNum = num;
$.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {
this.page = res.data;
});
},
add() {
this.dialogVisible = true;
this.form = {};
},
edit(row) {
this.form = row;
this.dialogVisible = true;
},
save() {
let data = JSON.stringify(this.form);
if (this.form.id) {
// 編輯
$.ajax({
url: '/user',
type: 'put',
contentType: 'application/json',
data: data
}).then(res => {
this.dialogVisible = false;
this.loadTable(1);
})
} else {
// 新增
$.ajax({
url: '/user',
type: 'post',
contentType: 'application/json',
data: data
}).then(res => {
this.dialogVisible = false;
this.loadTable(1);
})
}
},
del(id) {
$.ajax({
url: '/user/' + id,
type: 'delete',
contentType: 'application/json'
}).then(res => {
this.loadTable(1);
})
}
}
})
</script>
</body>
</html>
?項(xiàng)目展示：
?文章來源地址http://www.zghlxwxcb.cn/news/detail-810840.html文章來源：http://www.zghlxwxcb.cn/news/detail-810840.html
?
到了這里，關(guān)于Springboot+vue學(xué)習(xí)——實(shí)現(xiàn)增刪改查的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
