Axios----web数据交互方式

最新推荐文章于 2023-12-14 10:41:27 发布

奕宸Long

最新推荐文章于 2023-12-14 10:41:27 发布

阅读量466

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_54435916/article/details/127216182

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、VUE生命周期

Created--->Vue：对象创建完成触发的函数

二、缩写

v-bind---给属性赋值，缩写为：

v-on---事件绑定，缩写为@

缩写：

三、计算属性

computed中定义，以匿名函数形式实现数据的操作（计算），返回的值为计算的结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2></h2>
			<button @click="addrow()">添加</button>

			<p v-for="(s,i) in list">
				名称: <input v-model="s.sname" placeholder="输入商品名称" />
				价格: <input v-model="s.sprice" />
				数量: <input v-model="s.snum" />
				小计: <input v-model="s.smoney" readonly="readonly" />
				
			</p>
			
		</div>
	</body>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				list: [],
			},
			methods: {
				
			},
			computed: {
				//计算属性
				/* smoney: function(){
				 return this.sprice*this.snum;
				} */
			}
		})
	</script>
</html>

四、统计购物车信息

总价格、总数量、添加和删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2></h2>
			<button @click="addrow()">添加</button>

			<p v-for="(s,i) in list">
				名称: <input v-model="s.sname" placeholder="输入商品名称" />
				价格: <input v-model="s.sprice" />
				数量: <input v-model="s.snum" />
				小计: <input :value="s.sprice*s.snum" readonly="readonly" />
				<button @click="delrow(i)">删除</button>
			</p>
			总计: {{total}}￥ 共: {{count}}件
		</div>
	</body>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				list: [],
			},
			methods: {
				//增加方法
				addrow: function() {
					/* 添加一个对象 */
					this.list.push({
						sprice: 0,
						snum: 1
					})
				},
				//删除方法
				delrow(i) {
					this.list.splice(i, 1)
				},
			},
			computed: {
				//计算属性
				/* smoney: function(){
				 return this.sprice*this.snum;
				} */
				total() {
					var sum = 0;
					this.list.forEach(function(v, i) {
						sum += v.sprice * v.snum
					})
					return sum;
				},
				count() {
					var sum = 0;
					this.list.forEach(function(v,i) {
						sum += v.snum * 1;
					})
					return sum;
				}
			}
		})
	</script>
</html>

五、观察者---监听机制----实现复选框全选操作

监听数据的变化，从而执行的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input v-model="sprice" />
			<hr >
			<!-- 复选框全选 绑定单个值真和假 -->
			<!-- 全选把数组内容交给爱好 -->
			<input type="checkbox" v-model="qx" />全选
			<p v-for="h in list">
				<!-- 绑定数组 数据绑定-->
				<input type="checkbox" v-model="hobby" :value="h" />{{h}}
			</p>
			{{hobby}}
		</div>
	</body>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				sprice: 0,
				list: [
					'游戏',
					'音乐',
					'书籍',
				],
				//默认不选
				qx: false,
				hobby: [],
			},
			watch: {
				//观察谁写谁
				sprice(newval,oldval){
					//观察者监听模式
					console.log(newval,oldval)
				},
				qx(newval){
					//全选
					if(newval){
						this.hobby=this.list
					}else{ //全不选
						this.hobby=[]
					}
				}
			}
		})
	</script>
</html>

六、axios实现ajax

跨越问题：ajax请求不同源---ip地址、端口、项目路径，不允许处理ajax请求

No 'Access-Control-Allow-Origin' header

原理：response设置安全的响应头

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

    response.setCharacterEncoding("utf-8");
    response.setContentType("text/json;charset=utf-8");
    /** 设置响应头允许ajax跨域访问 **/
    HttpServletResponse rp=(HttpServletResponse)response;
    HttpServletRequest req=(HttpServletRequest) request;
rp.setCharacterEncoding("utf-8");
    rp.setContentType("text/json;charset=utf-8");
    req.setCharacterEncoding("utf-8");
    String origin="*";
    if(req.getHeader("Origin")!=null){
    origin=req.getHeader("Origin");
    }
    rp.setHeader("Access-Control-Allow-Origin", origin);
rp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
rp.setHeader("Access-Control-Max-Age", "3600");
rp.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, token");
rp.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, rp);

}

sprintboot解决方案：

（1）实现跨域过滤器

在项目的主程序中增加以下代码：

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); // 允许cookies跨域
        config.addAllowedOrigin("*");// 允许向该服务器提交请求的URI，*表示全部允许。。这里尽量限制来源域，比如http://xxxx:8080 ,以降低安全风险。。
        config.addAllowedHeader("*");// 允许访问的头信息,*表示全部
        config.setMaxAge(18000L);// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
        config.addAllowedMethod("*");// 允许提交请求的方法，*表示全部允许，也可以单独设置GET、PUT等
//        config.addAllowedMethod("HEAD");
//        config.addAllowedMethod("GET");// 允许Get的请求方法
//        config.addAllowedMethod("PUT");
//        config.addAllowedMethod("POST");
//        config.addAllowedMethod("DELETE");
//        config.addAllowedMethod("PATCH");
        source.registerCorsConfiguration("/**", config);
        System.out.println("----------跨域处理------------");
        return new CorsFilter(source);
    }

（2）实现跨域拦截器

新建CrossInterceptor

@Configuration
public class CrossInterceptor implements WebMvcConfigurer {
    //允许跨域请求
    public void addCorsMappings(CorsRegistry registry) {
        System.out.println("......跨域执行......");
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","OPTIONS")
                .allowCredentials(true)
                .maxAge(5000);
    }
}

七、axios多种参数传递方式

1、接收axios传递的json数据，必须加@RequestBody，单值无法接收

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			axios.post("http://localhost:9090/admin/insert",{aid:4,aname:4,apwd:4}).then(function(res){
				if(res.data=="1"){
					console.log("ok")
				}else{
					console.log("fail")
				}
			}) 
		</script>
	</body>
</html>

controller

@RequestMapping("/insert")
    //json转换
    public String insert(@RequestBody Admin a){
        try {
            System.out.println(a);
            as.save(a);
            return "1";
        } catch (Exception e){
            e.printStackTrace();
        }
        return "0";
    }

2、单值传递-----实现删除操作

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			 axios.post("http://localhost:9090/admin/delete","aid=4").then(function(res){
				if(res.data=="1"){
					console.log("ok")
				}else{
					console.log("fail")
				}
			}) 
			
			
		</script>
	</body>
</html>

controller

 @RequestMapping("/delete")
    //单值获取
    public String delete(String aid){
        try {
            System.out.println(aid);
            as.removeById(aid);
            return "1";
        } catch (Exception e){
            e.printStackTrace();
        }
        return "0";
    }

3、URLSearchParams方式传递单值和多值

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//URLSearchParams方式传参,不传json
			/* var param = new URLSearchParams();
			param.append("aid","1");
			param.append("aname","任柏熙");
			axios.post("http://localhost:9090/admin/selectOne",param).then(function(res){
				console.log(res.data);
			}) */
			
			//批量删除
		    var param = new URLSearchParams();
			param.append("aid",['5','6']);
		
			axios.post("http://localhost:9090/admin/deleteList",param).then(function(res){
				console.log(res.data);
			})
		</script>
	</body>
</html>

controller

@RequestMapping("/selectOne")
public Admin selectOne(String aid){
    return as.getById(aid);
}
@RequestMapping("/deleteList")
//批量删除
public String deleteList(String[] aid){
    try {
        as.removeByIds(Arrays.asList(aid));
        return "1";
    } catch (Exception e) {
        e.printStackTrace();
    }
    return "0";
}