


Environment preparation
The project structure is the same as before:
We add new static resources:
Because static resources are added, SpringMVC will intercept them. All static resources need to be released in the SpringConfig configuration class:
We create a new 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/"); } }
After the configuration is completed, we need to Scan SpringMvcSupport in SpringMvcConfig:
@Configuration @ComponentScan({"com.nefu.controller","com.nefu.config"}) @EnableWebMvc public class SpringMvcConfig { }
Next we need to implement all list query, addition, modification, deletion and other functions one by one.
List function
Requirements: After the page is loaded, send an asynchronous request to the background to obtain the list data for display.
Find the hook function of the page,
created()
created()
method Called thethis.getAll()
methodUse axios in the getAll() method to send an asynchronous request to obtain data from the background
-
The access path is
http://localhost/books
Return data
Return data res. The content of data is as follows:
{
Sending method:
"data": [
" "id": 1,
"type": "Computer Theory",
"name": "Spring Practical Fifth Edition",
"Description": "Classic tutorial for getting started with Spring, in-depth understanding of Spring principles and technology"
},
"id": 2 ,
"type": "Computer Theory",
"name": "Spring 5 Core Principles and 30 Kinds of Handwriting Practice",
"description": "Ten Years of Precipitation, The Essence of Handwriting Spring Thoughts"
},...
],
"code": 20041,
"msg": ""
}
getAll() { //发送ajax请求 axios.get("/books").then((res)=>{ this.dataList = res.data.data; }); }
Add function
Requirement: Complete the new function module of the picture
- Find the new button on the page, which is bound to
- @click="handleCreate()"
Method
Find - handleCreate in method
Method, open the new panel in the method
Find the OK button in the new panel, the button is bound - @click="handleAdd()"
Method
Find in method - handleAdd
Method
Send the request and data in the method. After the response is successful, the new Close the new panel and query the data again - ##handleCreate
handleCreate() { this.dialogFormVisible = true; },
handleAddThe method sends an asynchronous request and carries DatahandleAdd () { //发送ajax请求 //this.formData是表单中的数据,最后是一个json数据 axios.post("/books",this.formData).then((res)=>{ this.dialogFormVisible = false; this.getAll(); }); }
Add function status processing
The basic new functions have been completed, but there are still some problems that need to be solved:Requirements: The panel is closed if the new addition is successful. Query the data again, what should you do if the new addition fails? 1. In the handlerAdd method, perform different processing according to the data returned by the background 2. If the background returns success, It will prompt a success message and close the panel3. If the background returns failure, it will prompt an error message(1) Modify the front-end pagehandleAdd () { //发送ajax请求 axios.post("/books",this.formData).then((res)=>{ //如果操作成功,关闭弹层,显示数据 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(); }); }(2)Backend Return the operation result and change the return value of the Dao layer's addition, deletion and modification methods from
void
toint
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) In BookServiceImpl, the addition, deletion and modification methods are based on DAO's The return value determines whether to return 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,"请不要使用你的技术挑战我的耐性!"); } // //将可能出现的异常进行包装,转换成自定义异常 // try{ // int i = 1/0; // }catch (Exception e){ // throw new SystemException(Code.SYSTEM_TIMEOUT_ERR,"服务器访问超时,请重试!",e); // } return bookDao.getById(id); } public List<Book> getAll() { return bookDao.getAll(); } }(4) To test the error situation, set the book category length out of the range
After processing the new addition Afterwards, you will find that there is still a problem with the new addition.
resetForm(){ this.formData = {}; } handleCreate() { this.dialogFormVisible = true; this.resetForm(); }
The above is the detailed content of How to use Java SSM to implement joint debugging of front-end and back-end protocols. For more information, please follow other related articles on the PHP Chinese website!

本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于结构化数据处理开源库SPL的相关问题,下面就一起来看一下java下理想的结构化数据处理类库,希望对大家有帮助。

本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于PriorityQueue优先级队列的相关知识,Java集合框架中提供了PriorityQueue和PriorityBlockingQueue两种类型的优先级队列,PriorityQueue是线程不安全的,PriorityBlockingQueue是线程安全的,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于java锁的相关问题,包括了独占锁、悲观锁、乐观锁、共享锁等等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于多线程的相关问题,包括了线程安装、线程加锁与线程不安全的原因、线程安全的标准类等等内容,希望对大家有帮助。

本篇文章给大家带来了关于Java的相关知识,其中主要介绍了关于关键字中this和super的相关问题,以及他们的一些区别,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于枚举的相关问题,包括了枚举的基本操作、集合类对枚举的支持等等内容,下面一起来看一下,希望对大家有帮助。

封装是一种信息隐藏技术,是指一种将抽象性函式接口的实现细节部分包装、隐藏起来的方法;封装可以被认为是一个保护屏障,防止指定类的代码和数据被外部类定义的代码随机访问。封装可以通过关键字private,protected和public实现。

本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于设计模式的相关问题,主要将装饰器模式的相关内容,指在不改变现有对象结构的情况下,动态地给该对象增加一些职责的模式,希望对大家有帮助。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

WebStorm Mac version
Useful JavaScript development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

SublimeText3 Chinese version
Chinese version, very easy to use

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version
Visual web development tools
