Java SSM實現前後端協議聯調詳解上篇

Posted on by

環境準備

項目結構與前文相同：

我們添加新的靜態資源：

因為添加瞭靜態資源，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實現前後端協議聯調詳解上篇的文章就介紹到這瞭,更多相關Java前後端協議聯調內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：