怎么用Java?SSM實現前后端協議聯調

這篇文章主要介紹“怎么用Java SSM實現前后端協議聯調”，在日常操作中，相信很多人在怎么用Java SSM實現前后端協議聯調問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用Java SSM實現前后端協議聯調”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

環境準備

項目結構與前文相同：

我們添加新的靜態資源：

因為添加了靜態資源，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.nefu.controller","com.nefu.config"})
@EnableWebMvc
public class SpringMvcConfig {
}

接下來我們就需要將所有的列表查詢、新增、修改、刪除等功能一個個來實現下。

列表功能

需求:頁面加載完后發送異步請求到后臺獲取列表數據進行展示。

• 找到頁面的鉤子函數，created()

• created()方法中調用了this.getAll()方法

• 在getAll()方法中使用axios發送異步請求從后臺獲取數據

• 訪問的路徑為http://localhost/books

• 返回數據

返回數據res.data的內容如下:

{
    "data": [
        {
            "id": 1,
            "type": "計算機理論",
            "name": "Spring實戰 第五版",
            "description": "Spring入門經典教程，深入理解Spring原理技術內幕"
        },
        {
            "id": 2,
            "type": "計算機理論",
            "name": "Spring 5核心原理與30個類手寫實踐",
            "description": "十年沉淀之作，手寫Spring精華思想"
        },...
    ],
    "code": 20041,
    "msg": ""
}

發送方式:

getAll() {
    //發送ajax請求
    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;
},

handleAdd方法發送異步請求并攜帶數據

handleAdd () {
    //發送ajax請求
    //this.formData是表單中的數據，最后是一個json數據
    axios.post("/books",this.formData).then((res)=>{
        this.dialogFormVisible = false;
        this.getAll();
    });
}

添加功能狀態處理

基礎的新增功能已經完成，但是還有一些問題需要解決下:

需求:新增成功是關閉面板，重新查詢數據，那么新增失敗以后該如何處理?

1.在handlerAdd方法中根據后臺返回的數據來進行不同的處理

2.如果后臺返回的是成功，則提示成功信息，并關閉面板

3.如果后臺返回的是失敗，則提示錯誤信息

(1)修改前端頁面

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)后臺返回操作結果，將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,"請不要使用你的技術挑戰我的耐性!");
        }
//        //將可能出現的異常進行包裝，轉換成自定義異常
//        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)測試錯誤情況，將圖書類別長度設置超出范圍即可

處理完新增后，會發現新增還存在一個問題，

新增成功后，再次點擊新增按鈕會發現之前的數據還存在，這個時候就需要在新增的時候將表單內容清空。

resetForm(){
	this.formData = {};
}
handleCreate() {
    this.dialogFormVisible = true;
    this.resetForm();
}

到此，關于“怎么用Java SSM實現前后端協議聯調”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！