Day28SSM之CRUD開發版本2的部門增刪改查

程式設計界翁老師發表於2020-10-19

複製工程

複製ssm02_CRUD 成ssm03_CRUD_ajax
修改 id name
增加模組標籤

Controller方法返回值型別Object

（1）Controller方法返回型別可以有幾種？
ModelAndView
void
String
Object
（2）@ResponseBody
調jackson庫將Object轉成json字串返回
如果沒有依賴jackson庫則，丟擲異常
HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList
（3）依賴配置jackson庫

  <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.11.3</version>
      </dependency>

Controller方法返回Result

（1）返回結果Result

private int code;//編碼
 private String msg;//提示資訊
 private Object data; //資料

（2）將資料放到Result物件中

public class Result {
    private int code;//編碼 404 200
    private String msg;//提示資訊
    private Object data; //資料

    public static Result init(int code, String msg, Object data){
        Result result =new Result(code,msg,data);
        return result;
    }
    private Result() {
    }

    private Result(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

Controller方法返回Result

@Controller
@RequestMapping("/deptv2") //寫在類上面指定當前模組路徑
public class DepartmentV2Controller {

    @Autowired
    private IDepartmentService departmentService;//controller呼叫 service層
    /*@RequestMapping(path="/xx")
     public 返回值型別 方法名(引數){ //頁面提交過來的請求引數
        //..
        返回值型別決定返回給瀏覽器的內容
    }
     */
    @RequestMapping(path="/listUI",method = RequestMethod.GET)
    public String listUI(){

        return "list_depts";
    }

    //地址上帶UI表示開啟頁面，不帶的表示返回資料
    @RequestMapping(path="/list",method = RequestMethod.GET)
    public @ResponseBody //將list調jackson轉成json字串
    Object list(){
        //業務邏輯 呼叫查詢所有的部門的方法
        List<Department> list =  departmentService.findAllDepartments();
        return Result.init(200,"",list);//返回物件需要被轉成json字串
    }
}

Ajax回顧

（1）ajax是什麼
Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML）
（2）ajax有什麼特點
通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。即可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新
上一個版本使用重定向或者請求轉發的，叫整體重新整理
今天使用ajax不需要重定向或者請求轉發
（3）具體程式設計內容
js 傳送請求
js 接收結果
js 更新頁面

Jquery實現Ajax

在這裡插入圖片描述

（1）匯入jquery庫
將庫檔案復到專案中
在頁面中引入庫

<%
    pageContext.setAttribute("path",request.getContextPath());
%>
<head>
    <title>Title</title>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
</head>

（2）程式碼編寫
js 傳送請求 $.get $.post serialize()
js 接收結果 function(data){…}
js 更新頁面 $(id值) html()

Jquery實現部門列表頁面

    <!-- 開始ajax程式設計  -->
    <script type="text/javascript">
        $(function () {
            //頁面載入成功
            //1:js傳送請求
            $.get('${path}/deptv2/list', function (result) {
                //2:js接收結果
                console.info("result=" + result)
                //{"code":200,"msg":"","data":[{"did":1,"dname":"JAVA"},{"did":2,"dname":"測試"},{"did":3,"dname":"最牛部門33"}]}

                //定義表格的內容
                var trs = ''
                //拼接表頭
                trs += ' <tr>\n' +
                    '        <td>編號</td>\n' +
                    '        <td>部門名稱</td>\n' +
                    '        <td>管理</td>\n' +
                    '\n' +
                    '    </tr>'
                if (200 == result.code) {
                    var items = result.data;
                    //3:js更新頁面
                    for (var i = 0; i < items.length; i++) {
                        var dept = items[i]
                        console.info(dept)
                        trs += ' <tr>\n' +
                            '        <td>' + dept.did + '</td>\n' +
                            '        <td>' + dept.dname + '</td>\n' +
                            '        <td><a>刪除</a><a>修改</a></td>\n' +
                            '\n' +
                            '    </tr>'
                    }//end for

                    $('#table').html(trs)
                }

            }, 'json')  //參1 地址 參2 處理函式  參3 資料型別


        })
    </script>

刪除指定id的部門

DepartmentV2Controller

@RequestMapping(path="/delete",method = RequestMethod.GET)
    public @ResponseBody  Object delete(Integer did){
        //獲取did，執行對該條記錄的刪除
        l.info("delete did="+did);
        try {
            departmentService.deleteDepartmentById(did);
            return Result.init(200,"刪除成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200,"刪除失敗",null);
    }

list_depts.jsp

        function deleteById(did) {
            $.get('${path}/deptv2/delete?did='+did,function (result) {
                console.info(result)
                if(200==result.code){
                    alert(result.msg)
                    refreshTable()//呼叫列表更新
                }else{
                    alert(result.msg)
                }
            },'json')
        }

<a href="javascript:deleteById('+dept.did+')">刪除</a>

預設情況下點選超連結是跳轉頁面-整體重新整理
Ajax是區域性重新整理，點選連結呼叫函式，函式內部發起請求，處理返回結果，更新頁面

屬性display:none

Ajax不切換頁面，所有內容在一個頁面，只需要通過style的屬性display，將值設定為none不可見，不佔高度。
如果需要顯示出來，設定display的值為block

 function switchDiv(part) {
            //隱藏內容
            $('#addDiv').css("display","none")
            $('#listDiv').css("display","none")
            $('#editDiv').css("display","none")
            if(1 == part){//新增頁面
                $('#addDiv').css("display","block")
                $('#add_dname').val('')
            }else if(2 == part){//列表頁面
                $('#listDiv').css("display","block")
            }else if(3 == part){//編輯頁面
                $('#editDiv').css("display","block")
            }

        }

新增功能

後臺程式碼

  //儲存一般是使用post提交
    @RequestMapping(path="/add",method = RequestMethod.POST)
    public @ResponseBody Object add(Department dept){
        l.info("add department="+dept);
        try {
            departmentService.saveDepartment(dept);
            return  Result.init(200,"新增成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return  Result.init(-200,"新增失敗",null);
    }

前臺程式碼

新增的表單

 <div id="addDiv">
        <h1>新增頁面</h1>
        <form id="add_form"  >
            <input type="hidden" name="did"/><br/>
            <input type="text" name="dname" id="add_dname"/><br/>
            <input id="btn_add" type="button" value="儲存"/><br/>
        </form>
    </div>

新增的ajax請求

  $('#btn_add').click(function () {
                //alert('btn_add') 普通的表單提交 did=1&dname=測試組
                var data = $('#add_form').serialize() //方法會將表單資料拼接成k1=v1&k2=v2
                $.post('${path}/deptv2/add',data,function (result) {
                        console.info(result)
                        //頁面切換
                        switchDiv(2)
                        //重新載入列表
                        refreshTable()
                        alert(result.msg)


                },'json')
            })

修改程式碼

》》修改要有回顯，回顯就是先查，再賦值，再修改。

回顯程式碼

   function updateUI(did) {
            //alert(did)
            //顯示修改頁面
            switchDiv(3)
            //獲取被修改的資料作回顯
            $.get('${path}/deptv2/find?did='+did,function (result) {
                        if(200==result.code){
                            var dept = result.data;
                            //{"code":200,"msg":null,"data":{"did":9,"dname":"測試部門3"}}
                            $('#u_did1').val(dept.did)
                            $('#u_did2').val(dept.did)
                            $('#u_dname').val(dept.dname)
                        }else{
                            alert(result.msg)//提示沒有查詢結果
                        }
            },'json')
        }

呼叫查詢

    @RequestMapping(path = "/find", method = RequestMethod.GET)
    public @ResponseBody
    Object find(Integer did) {
        l.info("find did=" + did);//打資料
        if (did != null) {
            Department dept = departmentService.findDepartmentById(did);//查詢回顯需要的資料
            if (dept != null) {
                return Result.init(200, null, dept);//轉成json返回頁面
            }
        }
        return Result.init(-200, "沒有查詢結果", null);
    }

後臺程式碼

    @RequestMapping(path = "/update", method = RequestMethod.POST)
    @ResponseBody
    Object update(Department dept){
        l.info("update dept="+dept);
        try {
            departmentService.updateDepartmentById(dept);
            return Result.init(200, "更新成功", null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200, "更新失敗", null);
    }

建議使用postman先測試。

前臺程式碼

        function update() {
            var data=$('#update_form').serialize();// k1=v1&k2=v2
            $.post('${path}/deptv2/update',data,function (result) {
                 alert(result.msg)
                //切換頁面
                switchDiv(2)
                //重新整理列表
                refreshTable()
            },'json')
        }

一起學Vue：CRUD(增刪改查)
2020-10-28
Vue
EFCore之增刪改查
2021-05-24
使用Go語言建立簡單的CRUD增刪改查
2017-01-09
Go
使用mybatis開發的增刪改查操作
2020-11-13
MyBatis
第一個mybatis程式，實現增刪改查CRUD
2023-05-05
MyBatis
Elasticsearch增刪改查之 —— Delete刪除
2016-03-26
Elasticsearchdelete
增刪改查
2024-03-23
基本 SQL 之增刪改查（二）
2019-02-26
SQL
JS字串操作之增刪改查
2018-03-07
JS字串
安卓開發SQLite增刪改查操作例項
2014-03-26
安卓SQLite
layui的增刪改查
2019-07-10
UI
列表的增刪改查
2018-07-31
字典的增刪改查
2018-08-01
redist的增刪改查
2020-12-29
Redis
Mybatis的增刪改查
2020-12-21
MyBatis
MongoDB的增刪改查
2016-08-05
MongoDB
ThinkPHP的增、刪、改、查
2017-08-03
PHP
*html5的localStorage之【增、刪、改、查】
2017-12-01
HTML
IDEA SpringBoot-Mybatis-plus 實現增刪改查(CRUD)
2022-04-22
IdeaSpring BootMyBatis
SSM-員工管理專案實戰-CRUD-增刪改查
2021-03-28
SSM
基於gin的golang web開發：mysql增刪改查
2020-11-13
GolangWebMySql
indexedDB 增刪改查
2020-07-13
Index
SQL增刪改查
2018-08-21
SQL
mysql增刪改查
2020-10-18
MySql
Mongoose查增改刪
2023-12-02
Go
FMDB增刪改查
2017-12-15
mysql增查刪改
2012-12-31
MySql
PLSQL學習-【2簡單的增刪改查】
2014-11-19
SQL
[增刪改查] 最規範的 JPA 一對多/多對一 CRUD 示例
2018-04-04
使用Django開發簡單介面：文章增刪改查
2019-05-09
Django
ORM實操之資料的增刪改查
2022-02-28
ORM
如何使用Flask開發一個增刪改查的應用
2016-04-15
Flask
[增刪改查] 最簡單的 JPA 一對多/多對一 CRUD 設計
2018-04-04
MongoDB入門(介紹、安裝、增刪改查)
2020-09-22
MongoDB
Flutter資料庫Sqflite之增刪改查
2019-03-29
Flutter資料庫
Go微服務實踐之增刪改查
2020-12-08
Go微服務
sql指令，增，刪，查，改
2021-04-28
SQL
mysql基本增刪改查
2020-12-15
MySql

Day28SSM之CRUD開發版本2的部門增刪改查

複製工程

Controller方法返回值型別Object

Controller方法返回Result

Controller方法返回Result

Ajax回顧

Jquery實現Ajax

Jquery實現部門列表頁面

刪除指定id的部門

DepartmentV2Controller

list_depts.jsp

屬性display:none

新增功能

後臺程式碼

前臺程式碼

新增的表單

新增的ajax請求

修改程式碼

回顯程式碼

後臺程式碼

前臺程式碼

相關文章