場景:前端用了vue沒有用ajax與後臺通訊,用了axios,可是在代碼運行過程當中發現axios傳遞到後臺的值接受到數據爲null。前端
問題緣由:此處的問題在與axios返回給後臺的數據爲json類型的,後臺接收和返回也應該是json類型的才行。vue
解決方式:這裏用的是@ResquestBody和@ReponseBody這兩個註解來解決的。以下圖代碼使用@RequestBody Map map去獲取前臺傳遞過來的數據,而後返回給前端的數據也必須爲json格式,這時候須要在方法上方加一個@ReponseBody註解。或者在類的上用@RestController代替@Controller註解也有相同的效果。node
public String toMainPage(@RequestBody Map map, HttpServletRequest request) throws Exception { String username = (String) map.get("username"); String password = (String) map.get("password"); String flag = (String) map.get("flag"); ModelAndView mv = new ModelAndView(); HttpSession session = request.getSession(); String getPassword = null; if("0".equals(flag)){//登陸用戶爲管理員的狀況 getPassword = this.userSystemService.getSSystemByUsername(username,password); }else{//普通用戶登陸 getPassword = this.userSystemService.getUserByUsername(username,password); } if(!"".equals(getPassword) && getPassword != null){//用戶名密碼都正確的狀況下將用戶的數據放入session session.setAttribute("loginName",username);//登陸用戶名 session.setAttribute("flag",flag);//登陸角色類型 } return getPassword; }
axios方法講解:因爲也是第一次使用axios像後臺傳遞數據,這裏只寫出我的的使用感悟,若是有不對的地方但願指正。axios和ajax的使用很類似,下面的例子是一個post請求,而then就至關於ajax中的success,catch則至關於error。post裏面的「/judgeUser」爲請求地址,後面的爲須要傳遞給後臺的數據。ios
axios引入說明,axios引入有兩種方法。一種是:若是項目中使用了node的話經過node的方式引入,這邊本項目沒有使用node,在這裏不對這種方式作講解。本項目經過第二種方式:以js文件的形式引入的。ajax
<script src="https://unpkg.com/axios/dist/axios.min.js">
或者也能夠登如上面的地址將內容複製下來而後放在axios.min.js文件來引入json
<script src="/resources/js/axios.min.js"></script>
axios.post('/judgeUser', { username : username, password : password, flag : flag, }) .then(function (res) { if(res.data == "1") { if(flag == "0") {//管理員登陸 location.href = "/toMain"; }else {//普通人員登陸 location.href = "/toMain"; } }else { alert("用戶名或者密碼不正確"); } }) .catch(function (err) { alert("驗證失敗,用戶名或者密碼不正確"); });