vue写ajax访问springboot后台发送和接收数据
遇到的问题一、没有引入js，以前一直使用公司封装后的，现在自己建立项目忘记引入很多js。二、JS的顺序不能变，在用 this.$http.get发送请求的时候，因为js的顺序变了，失败过（未找到原因，怀疑函数重 名被覆盖）三、springboot的方法头不知道该加那些。源代码四、html文件五、java文件遇到的问题
一、没有引入js，以前一直使用公司封装后的，现在自己建立项目忘记引入很多js。
二、JS的顺序不能变，在用 this.$http.get发送请求的时候，因为js的顺序变了，失败过（未找到原因，怀疑函数重 名被覆盖）
三、springboot的方法头不知道该加那些。
例如：Model m, @RequestParam(required = true, defaultValue = “1”) Integer id, HttpServletRequest request
这里的model封装数据，request接收数据，
源代码
四、html文件
<!DOCTYPE html><html><head><title>My first Vue app</title><script src="/vue/dist/vue.js"></script><script src="/vue/2.4.2/vue.min.js"></script><script src="/vue-resource/1.5.1/vue-resource.min.js"></script><script src="/axios/0.18.0/axios.min.js"></script></head><body><div id="app"><input type="button" @click="helloA()" value="$http.get"><input type="button" @click="helloB()" value="$http.post"><input type="button" @click="helloC()" value="axios.get"><input type="button" @click="helloD()" value="axios.post"></div><script type = "text/javascript">var vm = new Vue({el: '#app',data: {},methods: {helloA: function () {this.$http.get('http://localhost:8089/login/retrieve.do?id=99').then(function(res){alert(res.body[0].name);},function(){console.log('请求失败处理');});},helloB: function () {this.$http.post('http://localhost:8089/login/retrieve.do?id=99',{name:"菜鸟教程",url:"",kk:"ffff"},{emulateJSON:true}).then(function(res){alert(res.body[0].name);},function(res){console.log(res.status);});},helloC: function () {axios.get('http://localhost:8089/login/retrieve.do?id=99').then(response => (this.info = response)).catch(function (error) {// 请求失败处理console.log(error);});},helloD: function () {axios.post('http://localhost:8089/login/retrieve.do?id=99',{name:"菜鸟教程",url:"",kk:"ffff"},{emulateJSON:true}).then(response => (this.info = response)).catch(function (error) {// 请求失败处理console.log(error);});}}}) </script></body></html>
五、java文件
package com.springboot.controller;import java.util.ArrayList;import java.util.List;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import com.springboot.bean.Account;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;@Controllerpublic class IndexController {@RequestMapping({"/init"})public String init(Model m, @RequestParam(required = true, defaultValue = "1") Integer id) {return "account";}@ResponseBody@RequestMapping({"/retrieve"})public List retrieve(Model m, @RequestParam(required = true, defaultValue = "1") Integer id, HttpServletRequest request) {List<Account> list = new ArrayList<Account>();String ll=request.getParameter("kk");String lld=request.getParameter("name");list.add(new Account("KangKang", "康康", "e10adc3949ba59abbe56e", "超级管理员", "17777777777"));list.add(new Account("Mike", "麦克", "e10adc3949ba59abbe56e", "管理员", "13444444444"));list.add(new Account("Jane", "简", "e10adc3949ba59abbe56e", "运维人员", "18666666666"));list.add(new Account("Maria", "玛利亚", "e10adc3949ba59abbe56e", "清算人员", "19999999999"));m.addAttribute("accountList", list);return list;}}
