本文通过整合Spring、SpringMVC、Mybatis来完成一个简单的读书管理的页面
整合流程(准备工作)
步骤1：创建Maven的web项目
可以使用Maven的骨架创建，使用maven-archetype-webapp,配置本地的Maven环境，
创建之后需要按照Maven的目录结构补全项目结构并设置目录的类型
如main下需要有java和resources，src下需要有test测试包，包括一个java测试包。
步骤2：添加依赖
pom.xml添加SSM所需要的依赖jar包
<?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.itheima</groupId>
<artifactId>springmvc_08_ssm</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.10.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.2.10.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.2.10.RELEASE</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.6</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.16</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.1</version>
<configuration>
<port>80</port>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>
</project>
步骤3：创建项目包结构
config：存放相关的配置类
controller：编写的是控制器类
dao:存放的是Dao接口，因为使用的是Mapper接口代理方式，所以没有实现类包
service:存放的是Service接口，impl存放的是Service实现类
resources:存入的是配置文件，如Jdbc.properties
webapp:目录可以存放静态资源
test/java:存放的是测试类
步骤4：创建SpringConfig配置类
@Configuration
@ComponentScan({"com.itheima.service"})
@Import({JdbcConfig.class,MyBatisConfig.class})
@PropertySource("classpath:jdbc.properties")
@EnableTransactionManagement
public class SpringConfig {
}
步骤5：创建JdbcConfig配置类
public class JdbcConfig {
@Value("${jdbc.driver}")
private String driver;
@Value("${jdbc.url}")
private String url;
@Value("${jdbc.username}")
private String username;
@Value("${jdbc.password}")
private String password;
@Bean
public DataSource dataSource(){
DruidDataSource dataSource = new DruidDataSource();
dataSource.setDriverClassName(driver);
dataSource.setUrl(url);
dataSource.setUsername(username);
dataSource.setPassword(password);
return dataSource;
}
@Bean
public PlatformTransactionManager transactionManager( DataSource dataSource){
DataSourceTransactionManager ds = new DataSourceTransactionManager();
ds.setDataSource(dataSource);
return ds;
}
}
步骤6：创建MybatisConfig配置类
public class MyBatisConfig {
@Bean
public SqlSessionFactoryBean sqlSessionFactory(DataSource dataSource){
SqlSessionFactoryBean factoryBean = new SqlSessionFactoryBean();
factoryBean.setDataSource(dataSource);
factoryBean.setTypeAliasesPackage("com.itheima.domain");
return factoryBean;
}
@Bean
public MapperScannerConfigurer mapperScannerConfigurer(){
MapperScannerConfigurer msc = new MapperScannerConfigurer();
msc.setBasePackage("com.itheima.dao");
return msc ;
}
}
步骤7：创建jdbc.properties
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssm_db?useSSL=false
jdbc.username=root
jdbc.password=****
步骤8：创建SpringMVC配置类
@Configuration
@ComponentScan("com.itheima.controller")
@EnableWebMvc
public class SpringMvcConfig {
}
步骤9：创建Web项目入口配置类
public class ServletConfig extends AbstractAnnotationConfigDispatcherServletInitializer {
@Override
protected Class<?>[] getRootConfigClasses() {
return new Class[]{SpringConfig.class};
}
@Override
protected Class<?>[] getServletConfigClasses() {
return new Class[]{SpringMvcConfig.class};
}
@Override
protected String[] getServletMappings() {
return new String[]{"/"};
}
@Override
protected Filter[] getServletFilters() {
CharacterEncodingFilter filter= new CharacterEncodingFilter();
filter.setEncoding("utf-8");
return new Filter[]{filter};
}
}
功能模块开发及测试
功能：本项目可以对一个数据库中的表进行增删改查
步骤1;创建数据库及表
create database ssm_db character set utf8;
use ssm_db;
create table tbl_book(
id int primary key auto_increment,
type varchar(20),
name varchar(50),
description varchar(255)
)
insert into tbl_book(`id`,`type`,`name`,`description`) values
(1,'计算机理 论','Spring实战 第五版','Spring入门经典教程，深入理解Spring原理技术内幕'),
(2,'计算机理 论','Spring 5核心原理与30个类手写实践','十年沉淀之作，手写Spring精华'),
(3,'市场营销','直播带货:淘宝、天猫直播从新手到高手','10堂课轻松实现带货月入3W+');
...
步骤2：编写模型类
public class Book {
private Integer id;
private String type;
private String name;
private String description;
get、set方法...
toString方法...
步骤3：编写Dao接口
public interface BookDao {
// @Insert("insert into tbl_book values(null,#{type},#{name},#{description})")
@Insert("insert into tbl_book (type,name,description) values(#{type},#{name},#{description})")
public void save(Book book);
@Update("update tbl_book set type = #{type}, name = #{name}, description = #{description} where id = #{id}")
public void update(Book book);
@Delete("delete from tbl_book where id = #{id}")
public void delete(Integer id);
@Select("select * from tbl_book where id = #{id}")
public Book getById(Integer id);
@Select("select * from tbl_book")
public List<Book> getAll();
}
步骤4：编写Service接口和实现类
@Transactional
public interface BookService {
public boolean save(Book book);
public boolean delete(Integer id);
public boolean update(Book book);
public Book getById(Integer id);
public List<Book> getAll();
}
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookDao bookDao;
@Override
public boolean save(Book book) {
bookDao.save(book);
return true;
}
@Override
public boolean delete(Integer id) {
bookDao.delete(id);
return true;
}
@Override
public boolean update(Book book) {
bookDao.update(book);
return true;
}
@Override
public Book getById(Integer id) {
return bookDao.getById(id);
}
@Override
public List<Book> getAll() {
return bookDao.getAll();
}
}
说明：
bookDao在Service中注入的会提示一个红线提示，由于BookDao是一个接口，没有实现类，接口是不能创建对象的，所以最终注入的应该是代理对象 代理对象是由Spring的IOC容器来创建管理的
IOC容器又是在Web服务器启动的时候才会创建
IDEA在检测依赖关系的时候，没有找到适合的类注入，所以会提示错误提示 但是程序运行的时候，代理对象就会被创建，框架会使用DI进行注入，所以程序运行无影响。
如何解决上述问题?
可以不用理会，因为运行是正常的 或者设置错误提示级别 将Autowiring for bean class的勾选去掉或者改查Warning就不会有红线的提示。
步骤5：编写Contorller类
@RestController//设置当前控制器类为RESTful风格，等同于@Controller与@ResponseBody两个注解组合功能
@RequestMapping("/books")
public class BookController {
@Autowired
private BookService bookService;
@PostMapping
public boolean save(@RequestBody Book book) {
return bookService.save(book);
}
@PutMapping
public boolean update(@RequestBody Book book) {
return bookService.update(book);
}
@DeleteMapping("/{id}")
public boolean delete(@PathVariable Integer id) {
return bookService.delete(id);
}
@GetMapping("/{id}")
public Book getById(@PathVariable Integer id) {
return bookService.getById(id);
}
@GetMapping
public List<Book> getAll() {
return bookService.getAll();
}
}
对于图书模块的增删改查就已经玩成了编写，接下来我们就先把业务层的代码使用Spring整合Junit的知识点进行单元测试：
在test.java.com.it.service包下新建测试类BookServiceTest
步骤1：新建测试类
步骤2：注入Service类
步骤3：编写测试方法
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(classes = SpringConfig.class)
public class BookServiceTest {
@Autowired
private BookService bookService;
@Test
public void testGetById(){
Book book = bookService.getById(2);
System.out.println(book);
}
@Test
public void testGetAll(){
List<Book> all = bookService.getAll();
System.out.println(all);
}
}
也可以使用PostMan进行测试，熟悉的朋友可以试试。
统一结果封装
因为在SSM整合中，我们通常会将后端的数据传输到前端进行展示。为了保证数据的安全性和规范性，我们需要对数据进行统一的结果封装，以便于前端的处理和展示。
表现层与前端数据传输协议定义
为了封装返回的结果数据：创建结果模型类，封装数据到data属性中
为了封装返回的数据是何种操作及是否操作成功：封装操作结果到code属性中
操作失败后为了封装返回的错误信息：封装特殊消息到message(msg)属性中
对于结果封装，我们应该是在表现层进行处理，所以我们把结果类放在controller包下
步骤1：创建Result类：
package com.itheima.controller;
public class Result {
//描述统一格式中的数据
private Object data;
//描述统一格式中的编码，用于区分操作，可以简化配置0或1表示成功失败
private Integer code;
//描述统一格式中的消息，可选属性
private String msg;
public Result() {
}
public Result(Integer code,Object data) {
this.data = data;
this.code = code;
}
public Result(Integer code, Object data, String msg) {
this.data = data;
this.code = code;
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
步骤2：定义返回码Code类
final关键字用于声明一个常量，表示该变量的值在初始化后不能被修改。
public class Code {
public static final Integer SAVE_OK = 20011;
public static final Integer DELETE_OK = 20021;
public static final Integer UPDATE_OK = 20031;
public static final Integer GET_OK = 20041;
public static final Integer SAVE_ERR = 20010;
public static final Integer DELETE_ERR = 20020;
public static final Integer UPDATE_ERR = 20030;
public static final Integer GET_ERR = 20040;
public static final Integer SYSTEM_ERR = 50001;
public static final Integer SYSTEM_TIMEOUT_ERR = 50002;
public static final Integer SYSTEM_UNKNOW_ERR = 59999;
public static final Integer BUSINESS_ERR = 60002;
}
步骤3：修改Controller类的返回值
@RestController
@RequestMapping("/books")
public class BookController {
@Autowired
private BookService bookService;
@PostMapping
public Result save(@RequestBody Book book) {
boolean flag = bookService.save(book);
return new Result(flag ? Code.SAVE_OK:Code.SAVE_ERR,flag);
}
@PutMapping
public Result update(@RequestBody Book book) {
boolean flag = bookService.update(book);
return new Result(flag ? Code.UPDATE_OK:Code.UPDATE_ERR,flag);
}
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id) {
boolean flag = bookService.delete(id);
return new Result(flag ? Code.DELETE_OK:Code.DELETE_ERR,flag);
}
@GetMapping("/{id}")
public Result getById(@PathVariable Integer id) {
Book book = bookService.getById(id);
Integer code = book != null ? Code.GET_OK : Code.GET_ERR;
String msg = book != null ? "" : "数据查询失败，请重试！";
return new Result(code,book,msg);
}
@GetMapping
public Result getAll() {
List<Book> bookList = bookService.getAll();
Integer code = bookList != null ? Code.GET_OK : Code.GET_ERR;
String msg = bookList != null ? "" : "数据查询失败，请重试！";
return new Result(code,bookList,msg);
}
}
步骤4：使用PostMan进行测试
至此，我们的返回结果就已经能以一种统一的格式返回给前端，前端根据返回的结果，先从中获取code,根据code判断，如果成功则取data属性的值，如果失败，则取msg中的值做提示。
统一异常处理
异常的种类有：
框架内部抛出的异常：因使用不合规导致
数据层抛出的异常：因外部服务器故障导致（例如：服务器访问超时）
业务层抛出的异常：因业务逻辑书写错误导致（例如：遍历业务书写操作，导致索引异常等）
表现层抛出的异常：因数据收集、校验等规则导致（例如：不匹配的数据类型间导致异常）
工具类抛出的异常：因工具类书写不严谨不够健壮导致（例如：必要释放的连接长期未释放等）
在我们开发的任何一个位置都有可能出现异常，而且这些 异常是不能避免的。所以我们就得将异常进行处理。
我们的做法是：
1.所有的异常均抛出到表现层进行处理
2.异常的种类很多，进行异常分类
3.由于表现层处理异常，每个方法中单独书写，代码书写量巨大且意义不强，所以使用AOP功能
对于这些问题，SpirngMVC已经为我们提供了一套解决方案：
异常处理器：
集中的、统一的处理项目中出现的异常
使用步骤：
步骤1：创建异常处理器类
//@RestControllerAdvice用于标识当前类为REST风格对应的异常处理器
@RestControllerAdvice
public class ProjectExceptionAdvice {
//除了自定义的异常处理器，保留对Exception类型的异常处理，用于处理非预期的异常
@ExceptionHandler(Exception.class)
public Result doException(Exception ex){
String msg;
msg = "出现异常。。。";
System.out.println("警告:"+msg);
return new Result(666,null,msg);
}
}
步骤2：让程序抛出异常
修改BookController的getById方法，添加int i = 1/0.
步骤3：运行程序，测试
至此，就算后台执行过程中抛出异常，最终也能按照我们和前端约定好的格式返回给前端.
项目异常处理
我们在处理异常之前，，需要对异常进行一个分类
1.业务异常(BusinessException)
规范的用户行为产生的异常：用户在页面输入内容的时候未按照指定格式进行数据填写，如在年龄框输入的是字符串
不规范的用户行为操作产生的异常：如用户故意传递错误数据
2.系统异常(SystemException)
项目运行过程中可预计但无法避免的异常：比如数据库或服务器宕机
3.其他异常（Exception)
编译人员未预期到的异常，如：用到的文件不存在
异常解决方案的具体实现
思路：
1.先通过自定义异常，完成BusinessException和SystemException的定义
2.将其他异常包装成自定义异常类型
3.在异常处理器类中对不同的异常进行处理
//自定义异常处理器，用于封装异常信息，对异常进行分类
public class SystemException extends RuntimeException{
private Integer code;
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public SystemException(Integer code, String message) {
super(message);
this.code = code;
}
public SystemException(Integer code, String message, Throwable cause) {
super(message, cause);
this.code = code;
}
}
//自定义异常处理器，用于封装异常信息，对异常进行分类
public class BusinessException extends RuntimeException{
private Integer code;
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public BusinessException(Integer code, String message) {
super(message);
this.code = code;
}
public BusinessException(Integer code, String message, Throwable cause) {
super(message, cause);
this.code = code;
}
}
说明:
让自定义异常类继承RuntimeException的好处是，是因为它是一种非检查异常，后期在抛出这两个异常的时候，就不用再try…catch…或throws了，可以减少代码的冗余度和编写代码的复杂度。
步骤2：将其他异常包装成自定义异常
public Book getById(Integer id) {
//模拟业务异常，包装成自定义异常
if(id == 1){
throw new BusinessException(Code.BUSINESS_ERR,"请不要使用你的技术挑战我的耐性!");
}
//模拟系统异常，将可能出现的异常进行包装，转换成自定义异常
try{
int i = 1/0;
}catch (Exception e){
throw new SystemException(Code.SYSTEM_TIMEOUT_ERR,"服务器访问超时，请重试!",e);
}
return bookDao.getById(id);
}
具体的包装方式有：
方式一：try{}catch(){}在catch中重新throw我们自定义异常即可。
方式二：直接throw自定义异常即可
步骤3：处理器类中处理自定义异常
//@RestControllerAdvice用于标识当前类为REST风格对应的异常处理器
@RestControllerAdvice
public class ProjectExceptionAdvice {
//@ExceptionHandler用于设置当前处理器类对应的异常类型
@ExceptionHandler(SystemException.class)
public Result doSystemException(SystemException ex){
//记录日志
//发送消息给运维
//发送邮件给开发人员,ex对象发送给开发人员
return new Result(ex.getCode(),null,ex.getMessage());
}
@ExceptionHandler(BusinessException.class)
public Result doBusinessException(BusinessException ex){
return new Result(ex.getCode(),null,ex.getMessage());
}
//除了自定义的异常处理器，保留对Exception类型的异常处理，用于处理非预期的异常
@ExceptionHandler(Exception.class)
public Result doOtherException(Exception ex){
//记录日志
//发送消息给运维
//发送邮件给开发人员,ex对象发送给开发人员
return new Result(Code.SYSTEM_UNKNOW_ERR,null,"系统繁忙，请稍后再试！");
}
}
步骤4：运行程序
如果传入的参数为1，会报BusinessException
如果传入其他参数会报SystemException
对此异常我们就已经处理完成了，不管后台哪一层抛出异常，都会以我们与前端约定好的方式进行返回，前端只需要把信息获取到，根据返回的正确与否来展示不同的内容即可。
前后台协议联调
前后台协议联调是指前端和后端在开发过程中进行接口联调的过程。在前后端分离的开发模式下，前端和后端分别负责不同的模块，前端负责页面展示和用户交互，后端负责业务逻辑和数据处理。为了让前后端协同工作，需要定义一套规范的接口协议，以便前后端之间进行数据交换和通信。
因为添加了静态资源，SpringMVC会拦截，所以需要在SpringConfig的配置类中将静态资源进行方形。
新建SpringMvcSupport
@Configuration
public class SpringMvcSupport extends WebMvcConfigurationSupport {
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
registry.addResourceHandler("/css/**").addResourceLocations("/css/");
registry.addResourceHandler("/js/**").addResourceLocations("/js/");
registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/");
}
}
在SpringMvcConfig中扫描SpringMvcSupport
@Configuration
@ComponentScan({"com.itheima.controller","com.itheima.config"})
@EnableWebMvc
public class SpringMvcConfig {
}
列表功能（完整的html页面在后面）
需求：页面加载完后发送异步请求到后台获取列表数据进行展示
1.找到页面的钩子函数，created()
2.created()方法中调用了this.getAll()方法
3.在getAll()方法中使用axios发送异步请求从后台获取数据
4.访问的路径为：http://localhost/books
5.返回数据
发送方式：
//主页列表查询
getAll() {
axios.get("/books").then((res)=>{
this.dataList = res.data.data;
});
}
添加功能
需求：完成图片的新增功能模块
1.找到页面的新建按钮，按钮上绑定了@click="handleCreate()"方法
2.在method中找到handleCreate方法，方法中打开新增面板
3.新增面板中找到确定按钮,按钮上绑定了@click="handleAdd()"方法
4.在method中找到handleAdd方法
5.在方法中发送请求和数据，响应成功后将新增面板关闭并重新查询数据
//handleCreate打开新增面板
//弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
}
添加功能状态处理
1.在handlerAdd方法中根据后台返回的数据来进行不同的处理
2.如果后台返回的是成功，则提示成功信息，并关闭面板
3.如果后台返回的是失败，则提示错误信息
(1)修改前端页面
//添加
handleAdd () {
//发送ajax请求
axios.post("/books",this.formData).then((res)=>{
console.log(res.data);
//如果操作成功，关闭弹层，显示数据
if(res.data.code == 20011){
this.dialogFormVisible = false;
this.$message.success("添加成功");
}else if(res.data.code == 20010){
this.$message.error("添加失败");
}else{
this.$message.error(res.data.msg);
}
}).finally(()=>{
this.getAll();
});
},
后台返回操作结果，将Dao层的增删改方法返回值从void该成int
public interface BookDao {
// @Insert("insert into tbl_book values(null,#{type},#{name},#{description})")
@Insert("insert into tbl_book (type,name,description) values(#{type},#{name},#{description})")
public int save(Book book);
@Update("update tbl_book set type = #{type}, name = #{name}, description = #{description} where id = #{id}")
public int update(Book book);
@Delete("delete from tbl_book where id = #{id}")
public int delete(Integer id);
@Select("select * from tbl_book where id = #{id}")
public Book getById(Integer id);
@Select("select * from tbl_book")
public List<Book> getAll();
}
3.在BookServiceImpl中，增删改方法根据DAO的返回值来决定返回true/false
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookDao bookDao;
public boolean save(Book book) {
return bookDao.save(book) > 0;
}
public boolean update(Book book) {
return bookDao.update(book) > 0;
}
public boolean delete(Integer id) {
return bookDao.delete(id) > 0;
}
public Book getById(Integer id) {
if(id == 1){
throw new BusinessException(Code.BUSINESS_ERR,"请不要使用你的技术挑战我的耐性!");
}
return bookDao.getById(id);
}
public List<Book> getAll() {
return bookDao.getAll();
}
}
4.测试错误情况，将图书类别长度设置超出范围即可。
修改功能：
需求：完场图书信息的修改功能
1.找到页面的编辑按钮，该按钮绑定了@click=“handleUpdaet(scope.row)”
scope.row代表的是当前行的行数据，也就是说，scope.row就是选中行对应的json数据。
2.在method的handleUpdate方法中发送异步请求根据ID查询图书信息
3.根据后台返回的结果，判断是否查询成功
如果查询成功打开修改面板回显数据，如果失败提示错误信息
4.修改完成后找到修改面板的确定按钮，该按钮绑定了@click=“handleEdit()”
5.在method的handleEdit方法中发送异步请求提交修改数据
6.根据后台返回的结果，判断是否修改成功
如果成功提示成功信息，关闭修改面板，重新查询数据，如果失败提示错误信息
//弹出编辑窗口
handleUpdate(row) {
//查询数据，根据id查询
axios.get("/books/"+row.id).then((res)=>{
if(res.data.code == 20041){
//展示弹层，加载数据
this.formData = res.data.data;
this.dialogFormVisible4Edit = true;
}else{
this.$message.error(res.data.msg);
}
});
},
//编辑
handleEdit() {
//发送ajax请求
axios.put("/books",this.formData).then((res)=>{
//this.formData 是一个用于存储表单数据的对象。它是一个在Vue组件中定义的数据属性，用于存储用户在表单中输入的值。
//如果操作成功，关闭弹层，显示数据
if(res.data.code == 20031){
this.dialogFormVisible4Edit = false;
this.$message.success("修改成功");
}else if(res.data.code == 20030){
this.$message.error("修改失败");
}else{
this.$message.error(res.data.msg);
}
}).finally(()=>{
this.getAll();
});
}
删除功能
需求：完成页面的删除功能
1.找到页面的删除按钮，按钮上绑定了@click=“handleDelete(scope.row)”
2.method的handleDelete方法弹出提示框
3.用户点击取消,提示操作已经被取消。
4.用户点击确定，发送异步请求并携带需要删除数据的主键ID
5.根据后台返回结果做不同的操作 如果返回成功，提示成功信息，并重新查询数据 如果返回失败，提示错误信息，并重新查询数据
// 删除
//在这段代码中，this.$confirm()方法返回一个Promise对象。
// 当用户点击确认按钮时，Promise对象会被resolve，进而执行then()方法中的代码；
// 当用户点击取消按钮时，Promise对象会被reject，进而执行catch()方法中的代码。
handleDelete(row) {
//1.弹出提示框
this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
type:'info'
}).then(()=>{
//2.做删除业务
axios.delete("/books/"+row.id).then((res)=>{
if(res.data.code == 20021){
this.$message.success("删除成功");
}else{
this.$message.error("删除失败");
}
}).finally(()=>{
this.getAll();
});
}).catch(()=>{
//3.取消删除
this.$message.info("取消删除操作");
});
}
完整的html页面如下：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SpringMVC案例</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>图书管理</h1>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<el-input placeholder="图书名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
<el-button @click="getAll()" class="dalfBut">查询</el-button>
<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
</div>
<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="type" label="图书类别" align="center"></el-table-column>
<el-table-column prop="name" label="图书名称" align="center"></el-table-column>
<el-table-column prop="description" label="描述" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 新增标签弹层 -->
<div class="add-form">
<el-dialog title="新增图书" :visible.sync="dialogFormVisible">
<el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="图书类别" prop="type">
<el-input v-model="formData.type"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="图书名称" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="描述">
<el-input v-model="formData.description" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
<!-- 编辑标签弹层 -->
<div class="add-form">
<el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
<el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="图书类别" prop="type">
<el-input v-model="formData.type"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="图书名称" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="描述">
<el-input v-model="formData.description" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
<el-button type="primary" @click="handleEdit()">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
var vue = new Vue({
el: '#app',
data:{
pagination: {},
dataList: [],//当前页要展示的列表数据
formData: {},//表单数据
dialogFormVisible: false,//控制表单是否可见
dialogFormVisible4Edit:false,//编辑表单是否可见
rules: {//校验规则
type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
}
},
//钩子函数，VUE对象初始化完成后自动执行
created() {
this.getAll();
},
methods: {
//列表
getAll() {
//发送ajax请求
axios.get("/books").then((res)=>{
this.dataList = res.data.data;
});
},
//弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
},
//重置表单
resetForm() {
this.formData = {};
},
//添加
handleAdd () {
//发送ajax请求
axios.post("/books",this.formData).then((res)=>{
console.log(res.data);
//如果操作成功，关闭弹层，显示数据
if(res.data.code == 20011){
this.dialogFormVisible = false;
this.$message.success("添加成功");
}else if(res.data.code == 20010){
this.$message.error("添加失败");
}else{
this.$message.error(res.data.msg);
}
}).finally(()=>{
this.getAll();
});
},
//弹出编辑窗口
handleUpdate(row) {
// console.log(row); //row.id 查询条件
//查询数据，根据id查询
axios.get("/books/"+row.id).then((res)=>{
// console.log(res.data.data);
if(res.data.code == 20041){
//展示弹层，加载数据
this.formData = res.data.data;
this.dialogFormVisible4Edit = true;
}else{
this.$message.error(res.data.msg);
}
});
},
//编辑
handleEdit() {
//发送ajax请求
axios.put("/books",this.formData).then((res)=>{
//如果操作成功，关闭弹层，显示数据
if(res.data.code == 20031){
this.dialogFormVisible4Edit = false;
this.$message.success("修改成功");
}else if(res.data.code == 20030){
this.$message.error("修改失败");
}else{
this.$message.error(res.data.msg);
}
}).finally(()=>{
this.getAll();
});
},
// 删除
handleDelete(row) {
//1.弹出提示框
this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
type:'info'
}).then(()=>{
//2.做删除业务
axios.delete("/books/"+row.id).then((res)=>{
if(res.data.code == 20021){
this.$message.success("删除成功");
}else{
this.$message.error("删除失败");
}
}).finally(()=>{
this.getAll();
});
}).catch(()=>{
//3.取消删除
this.$message.info("取消删除操作");
});
}
}
})
</script>
</html>
至此一个简单的基于SSM技术的实现增删改查功能的页面就完成了。
我把完整的项目分享到了我的github上
https://githubfast.com/xinjingjiujing/springmvc_08_ssm.git
需要的朋友可以下载下来，可以直接用idea打开。
感谢大家的阅读，如果有不正确的地方还请多多指教。
欢迎大家留言讨论，如果对您有帮助还请点个赞啊!😄
929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
