export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
export function patch(url,data = {}){
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
export function put(url,data = {}){
return new Promise((resolve,reject) => {
axios.put(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
main.js 加入
import {post,fetch,patch,put} from “…/static/http.js”;
Vue.prototype.$axios=axios;
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
// table 的样式需要手动引入
import ‘element-ui/lib/theme-chalk/icon.css’
import ‘element-ui/lib/theme-chalk/table.css’
import ‘element-ui/lib/theme-chalk/table-column.css’
import store from ‘./store’
import Vuex from ‘vuex’
import axios from ‘axios’
import {post,fetch,patch,put} from “…/static/http.js”;
Vue.prototype.$axios=axios;
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
Vue.config.productionTip = false
Vue.use(ElementUI);
axios.defaults.headers.post[‘Content-Type’] = ‘application/json;charset=UTF-8’;
Vue.use(Vuex);
new Vue({
el: ‘#app’,
router,
store,
render: h => h(App)
})
vue页面请求
methods:{
SubmitLogin:function () {
var params = {
userid:1001
};
this.$post(“tuser/findId”,params)
.then((response)=>{
alert(JSON.stringify(response))
})
}
},
springboot后端:
Controller
//前端传过来的是json类型的值 需要加上这个注解@RequestBody 不然接收不到值
@RequestMapping(“findId”)
@ResponseBody
public TUser findId(@RequestBody TUser tUser){
System.out.println(tUser.getUserid());
return tuserService.getTuseId(tUser.getUserid());
}
service
@Override
public TUser getTuseId(Integer id) {
return tuserMapper.getTuseId(id);
}
mapper
public TUser getTuseId(Integer id);
mapper xml
SELECt * FROM t_user where userid=#{id};
执行后浏览器控制台出现了
跨域问题
前端config下的index.js加上
解决方法:
后端建个CorsConfig
package com.spring.mybatis.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter{
@Override
public void addCorsMappings(CorsRegistry registry) {
System.out.println(“----------------------”);
registry.addMapping(“/**”)
.allowedOrigins(“*”)
.allowCredentials(true)
.allowedMethods(“GET”, “POST”, “DELETE”, “PUT”)
.maxAge(3600);
}
}
最后运行:
还有一种方法 加上过滤器 过滤
启动类代码加上 @ServletComponentScan
package com.spring.mybatis;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.context.annotation.ComponentScan;
/**
-
Application
