還是一個小菜鳥的我,第一次寫部落格,多多包涵哦。。。
這個問題困擾了我兩天,然而解決後發現竟如此簡單。。。
(1)需求是這樣的,我要實現一個插入圖表的功能,圖表的屬性包括名稱,類型和網址。前端介面是這樣的:
我要將輸入框中的值傳給後台。一開始我是這樣處理的,然而會一直報錯,type:“post”時一直會報405的錯,type:“get”的時候會報類似get unsupported的錯誤,然而此時我並沒有在意用get方法時/api/charts之後帶的參數中http://www.baidu.com中出現"://"的呈現的是亂碼,依舊在糾結是傳輸方法的錯誤。
$(function () { $('#addModal .addbtn').on('click', function (e) { var form = $(e.currentTarget).parents('.modal').find('form'); var data = { name: form.find('input')[1].value, type: form.find('input')[0].value, src: form.find('input')[2].value }; $.ajax({ contentType: "application/json;charset=utf-8", url: "/api/charts", type: "post", data: data, success: function (data) { console.log(data); } }) })})
然而糾結一天的錯誤只需要將其中一行加一個方法就可以解決亂碼問題。
將data: data 改成 data: JSON.stringify(data)
//添加圖表@RequestMapping(value = "/charts", method = RequestMethod.POST)public ApiResponse<Chart> addChart(@RequestBody Chart chart) { chartService.insert(chart); List<Chart> results = new ArrayList<Chart>(); results.add(chart); return success(1, results);}
(2)還有一個問題就是前端插入的時候不可能出現id,而Chart對象的屬性包括id,name,type,src。在資料庫建表的時候我建立了一個序列vis_chart_id用於id自增,然後在寫sql的插入圖表的時候只需要寫:
insert into vis_chart(id,name,type,src) values(vis_chart_id.nextval,:name,:type,:src)
然而這種方法時不可行的,在前端擷取時一直會報錯,id的位置為null,想想也是,前端資料都沒有作為一個完整的對象傳入,肯定是不能成功的。那怎麼辦呢。
作為一名小小的實習生,肯定是去找有經驗的前輩們問啦。多虧前輩的給力,我get到新技能。。。
步驟如下:
1.首先在dao裡面建立一個方法叫getSequence(),擷取下一次sequence的值用作新插入的圖表的id
@SqlQuery("select vis_chart_id.nextval from dual")@Mapper(IntegerMapper.class)Integer getSequence();
此時要注意將insert方法中的SQL語句改成
@SqlUpdate("insert into vis_chart(id,name,type,src) values(:id,:name,:type,:src)")//插入chartvoid insert(@BindBean Chart chart);
2.然後在service中將id賦給chart
public void insert( Chart chart){ ChartDao chartDao = dbi.onDemand(ChartDao.class); Integer id = chartDao.getSequence(); chart.setId(id); chartDao.insert(chart);}
3.這樣Controller調用insert方法的時候就會chart就會有id啦
//添加圖表@RequestMapping(value = "/charts", method = RequestMethod.POST)public ApiResponse<Chart> addChart(@RequestBody Chart chart) { chartService.insert(chart); List<Chart> results = new ArrayList<Chart>(); results.add(chart); return success(1, results);}
就是醬,我也不知道我陳述的是否完全正確啦,歡迎大家多多指教。。。