})
})
}
/**
-
封装patch请求
-
@param url
-
@param data
-
@returns {Promise}
*/
export function patch(url,data = {}){
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
-
封装put请求
-
@param url
-
@param data
-
@returns {Promise}
*/
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);
/* eslint-disable no-new */
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
/**
-
根据id查询
-
@param id
-
@return
*/
public TUser getTuseId(Integer id);
mapper xml
<?xml version="1.0" encoding="UTF-8" ?>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;
/**
-
WebMvcConfigurerAdapter
-
@author heng
-
@version 1.0.0
**/
/**
- 解决vue+spring boot跨域问题
*/
@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
-
@author heng
-
@version 1.0.0
**/
@SpringBootApplication
@MapperScan(“com.spring.mybatis.mapper”)
@ComponentScan(“com.spring.mybatis”)
@ServletComponentScan
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class,args);
}
}
创建过滤器
ACAFilter
package com.spring.mybatis.filter;
import org.springframework.core.annotation.Order;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
-
跨域的设置问题
-
@author tonywu
-
@version v1.0.0
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料,免费分享给大家,戳这里即可免费领取
料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!**
[外链图片转存中…(img-Th0nlbi0-1713574785752)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
[外链图片转存中…(img-CeIPDKMk-1713574785752)]
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料,免费分享给大家,戳这里即可免费领取
[外链图片转存中…(img-n2ydSh3o-1713574785752)]