Java SSM實現(xiàn)前后端協(xié)議聯(lián)調(diào)詳解上篇
環(huán)境準(zhǔn)備
項目結(jié)構(gòu)與前文相同：
我們添加新的靜態(tài)資源：
因為添加了靜態(tài)資源，SpringMVC會攔截，所有需要在SpringConfig的配置類中將靜態(tài)資源進行放行：
我們新建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 {
}
接下來我們就需要將所有的列表查詢、新增、修改、刪除等功能一個個來實現(xiàn)下。
列表功能
需求:頁面加載完后發(fā)送異步請求到后臺獲取列表數(shù)據(jù)進行展示。
- 找到頁面的鉤子函數(shù)，
created() created()方法中調(diào)用了this.getAll()方法- 在getAll()方法中使用axios發(fā)送異步請求從后臺獲取數(shù)據(jù)
- 訪問的路徑為
http://localhost/books - 返回數(shù)據(jù)
返回數(shù)據(jù)res.data的內(nèi)容如下:
{
"data": [
{
"id": 1,
"type": "計算機理論",
"name": "Spring實戰(zhàn) 第五版",
"description": "Spring入門經(jīng)典教程，深入理解Spring原理技術(shù)內(nèi)幕"
},
{
"id": 2,
"type": "計算機理論",
"name": "Spring 5核心原理與30個類手寫實踐",
"description": "十年沉淀之作，手寫Spring精華思想"
},...
],
"code": 20041,
"msg": ""
}
發(fā)送方式:
getAll() {
//發(fā)送ajax請求
axios.get("/books").then((res)=>{
this.dataList = res.data.data;
});
}
添加功能
需求:完成圖片的新增功能模塊
- 找到頁面上的新建按鈕，按鈕上綁定了
@click="handleCreate()"方法 - 在method中找到
handleCreate方法，方法中打開新增面板 - 新增面板中找到確定按鈕,按鈕上綁定了
@click="handleAdd()"方法 - 在method中找到
handleAdd方法 - 在方法中發(fā)送請求和數(shù)據(jù)，響應(yīng)成功后將新增面板關(guān)閉并重新查詢數(shù)據(jù)
handleCreate打開新增面板
handleCreate() {
this.dialogFormVisible = true;
},
handleAdd方法發(fā)送異步請求并攜帶數(shù)據(jù)
handleAdd () {
//發(fā)送ajax請求
//this.formData是表單中的數(shù)據(jù)，最后是一個json數(shù)據(jù)
axios.post("/books",this.formData).then((res)=>{
this.dialogFormVisible = false;
this.getAll();
});
}
添加功能狀態(tài)處理
基礎(chǔ)的新增功能已經(jīng)完成，但是還有一些問題需要解決下:
需求:新增成功是關(guān)閉面板，重新查詢數(shù)據(jù)，那么新增失敗以后該如何處理?
1.在handlerAdd方法中根據(jù)后臺返回的數(shù)據(jù)來進行不同的處理
2.如果后臺返回的是成功，則提示成功信息，并關(guān)閉面板
3.如果后臺返回的是失敗，則提示錯誤信息
(1)修改前端頁面
handleAdd () {
//發(fā)送ajax請求
axios.post("/books",this.formData).then((res)=>{
//如果操作成功，關(guān)閉彈層，顯示數(shù)據(jù)
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)后臺返回操作結(jié)果，將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中，增刪改方法根據(jù)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,"請不要使用你的技術(shù)挑戰(zhàn)我的耐性!");
}
// //將可能出現(xiàn)的異常進行包裝，轉(zhuǎn)換成自定義異常
// try{
// int i = 1/0;
// }catch (Exception e){
// throw new SystemException(Code.SYSTEM_TIMEOUT_ERR,"服務(wù)器訪問超時，請重試!",e);
// }
return bookDao.getById(id);
}
public List<Book> getAll() {
return bookDao.getAll();
}
}(4)測試錯誤情況，將圖書類別長度設(shè)置超出范圍即可
處理完新增后，會發(fā)現(xiàn)新增還存在一個問題，
新增成功后，再次點擊新增按鈕會發(fā)現(xiàn)之前的數(shù)據(jù)還存在，這個時候就需要在新增的時候?qū)⒈韱蝺?nèi)容清空。
resetForm(){
this.formData = {};
}
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
}
到此這篇關(guān)于Java SSM實現(xiàn)前后端協(xié)議聯(lián)調(diào)詳解上篇的文章就介紹到這了,更多相關(guān)Java前后端協(xié)議聯(lián)調(diào)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了java用戶自動登錄的實現(xiàn)方法，分為六個步驟實現(xiàn)用戶自動登錄，并驗證用戶是否已經(jīng)登錄，感興趣的小伙伴們可以參考一下2016-03-03
在Spring框架中，有多種方式可以將Bean(即對象)放入Spring容器中，這篇文章就給大家介紹一些常用的方式，文中有詳細的代碼示例，感興趣的同學(xué)可以參考閱讀下2023-06-06
SpringBoot解決BigDecimal傳到前端后精度丟失問題
這篇文章將通過示例詳細為大家介紹SpringBoot如何解決BigDecimal傳到前端后精度丟失問題，文中的示例代碼講解詳細，感興趣的可以了解一下2022-06-06
Java?基于Hutool實現(xiàn)DES加解密示例詳解
這篇文章主要介紹了Java基于Hutool實現(xiàn)DES加解密，本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了mybatis一直加載xml，找到錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
函數(shù)式編程的理論基礎(chǔ)是阿隆佐·丘奇（Alonzo Church）于 1930 年代提出的 λ 演算（Lambda Calculus）。這篇文章主要為大家介紹了函數(shù)式編程的相關(guān)知識，希望對大家有所幫助2023-04-04
這篇文章主要介紹了從架構(gòu)與思維的角度來分析分布式鎖的方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-01-01
Spring Boot中使用Spring-Retry重試框架的實現(xiàn)
本文主要介紹了Spring Boot中使用Spring-Retry重試框架的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了java中ThreadPoolExecutor常識匯總，線程池技術(shù)在并發(fā)時經(jīng)常會使用到，java中的線程池的使用是通過調(diào)用ThreadPoolExecutor來實現(xiàn)的,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了如何根據(jù)帶賬號密碼的WSDL地址生成JAVA代碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10