search
HomeJavajavaTutorialHow to use Java SSM to implement joint debugging of front-end and back-end protocols

Environment preparation

The project structure is the same as before:

How to use Java SSM to implement joint debugging of front-end and back-end protocols

We add new static resources:

How to use Java SSM to implement joint debugging of front-end and back-end protocols

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

How to use Java SSM to implement joint debugging of front-end and back-end protocols

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 the this.getAll() method

  • Use 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:

{
"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": ""
}

Sending method:
getAll() {
    //发送ajax请求
    axios.get("/books").then((res)=>{
        this.dataList = res.data.data;
    });
}

How to use Java SSM to implement joint debugging of front-end and back-end protocolsAdd function

How to use Java SSM to implement joint debugging of front-end and back-end protocolsRequirement: Complete the new function module of the picture

    Find the new button on the page, which is bound to
  1. @click="handleCreate()"

    Method

  2. Find
  3. handleCreate in method

    Method, open the new panel in the method

  4. Find the OK button in the new panel, the button is bound
  5. @click="handleAdd()"

    Method

  6. Find in method
  7. handleAdd

    Method

  8. Send the request and data in the method. After the response is successful, the new Close the new panel and query the data again
  9. ##handleCreate
Open the new panel

handleCreate() {
    this.dialogFormVisible = true;
},
handleAdd

The method sends an asynchronous request and carries Data

handleAdd () {
    //发送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 panel

3. If the background returns failure, it will prompt an error message

(1) Modify the front-end page

handleAdd () {
    //发送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

to

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) 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. How to use Java SSM to implement joint debugging of front-end and back-end protocols

After the new addition is successful, if you click the Add button again, you will find that the previous data still exists. At this time, you need to clear the form content when adding.

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!

Statement
This article is reproduced at:亿速云. If there is any infringement, please contact admin@php.cn delete
How does IntelliJ IDEA identify the port number of a Spring Boot project without outputting a log?How does IntelliJ IDEA identify the port number of a Spring Boot project without outputting a log?Apr 19, 2025 pm 11:45 PM

Start Spring using IntelliJIDEAUltimate version...

How to elegantly obtain entity class variable names to build database query conditions?How to elegantly obtain entity class variable names to build database query conditions?Apr 19, 2025 pm 11:42 PM

When using MyBatis-Plus or other ORM frameworks for database operations, it is often necessary to construct query conditions based on the attribute name of the entity class. If you manually every time...

How to use the Redis cache solution to efficiently realize the requirements of product ranking list?How to use the Redis cache solution to efficiently realize the requirements of product ranking list?Apr 19, 2025 pm 11:36 PM

How does the Redis caching solution realize the requirements of product ranking list? During the development process, we often need to deal with the requirements of rankings, such as displaying a...

How to safely convert Java objects to arrays?How to safely convert Java objects to arrays?Apr 19, 2025 pm 11:33 PM

Conversion of Java Objects and Arrays: In-depth discussion of the risks and correct methods of cast type conversion Many Java beginners will encounter the conversion of an object into an array...

How do I convert names to numbers to implement sorting and maintain consistency in groups?How do I convert names to numbers to implement sorting and maintain consistency in groups?Apr 19, 2025 pm 11:30 PM

Solutions to convert names to numbers to implement sorting In many application scenarios, users may need to sort in groups, especially in one...

E-commerce platform SKU and SPU database design: How to take into account both user-defined attributes and attributeless products?E-commerce platform SKU and SPU database design: How to take into account both user-defined attributes and attributeless products?Apr 19, 2025 pm 11:27 PM

Detailed explanation of the design of SKU and SPU tables on e-commerce platforms This article will discuss the database design issues of SKU and SPU in e-commerce platforms, especially how to deal with user-defined sales...

How to set the default run configuration list of SpringBoot projects in Idea for team members to share?How to set the default run configuration list of SpringBoot projects in Idea for team members to share?Apr 19, 2025 pm 11:24 PM

How to set the SpringBoot project default run configuration list in Idea using IntelliJ...

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor