脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue中的CRUD

Vue中的CRUD使用及说明

 更新时间：2026年03月09日 09:08:12   作者：随风漂流6  
在Vue中进行CRUD前端跨域操作时,可以通过后端设置跨域来解决,通常有三种方法：使用`@CrossOrigin`注解、在`mvc`的XML配置文件中设置以及自定义类进行配置,作者分享了这三种方法,并希望大家参考和使用

Vue中的CRUD

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bookinfo显示</title>
			<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
				<script src="js/jquery.min.js"></script>
				<script src="js/bootstrap.min.js"></script>
				<!--以上是引入bootstrap内容-->
				<script src="js/axios.min.js"></script>
				<!--vue操作ajax的-->
				<script src="js/vue.js"></script>
				<!--引入vue-->
	</head>
	<style>
		img{
			width: 30px;
			height: 30px;
		}
	</style>
	<body>
		<div id="app">			
				<table class="table">
					<caption>用户管理</caption>
					<thead>
						<tr>
							<th>编号 <input type="text"  v-model="bookid"/></th>
							<th>书名<input type="text" v-model="bookname"/></th>
							<th>价格<input type="text" v-model="bookprice"/></th>
							<th>折扣价格<input type="text" v-model="discount"/></th>
							<th>图片<input type="file" style="display: inline-block;"/></th>
							<th>类型<input type="text" v-model="btype"/></th>
							<td>
								<a href="" @click.prevent=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" add()">添加一行</a>
							</td>
						</tr>	
						<tr class="active">
							<th>编号</th>
							<th>书名</th>
							<th>价格</th>
							<th>折扣价格</th>
							<th>图片</th>
							<th>类型</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>					
						<tr v-for="bookinfo in bookinfos" class="warning">
							<td>{{bookinfo.bookid}}</td>
							<td>{{bookinfo.bookname}}</td>
							<td>{{bookinfo.bookprice}}</td>
							<td>{{bookinfo.discount}}</td>
							<td><img v-bind:src="bookinfo.bookimg"/></td>
							<td>{{bookinfo.btype}}</td>
							<td>
								<a href="" @click.prevent=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" del(bookinfo.bookid)">删除</a>
								<a href="" @click.prevent=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" update(bookinfo.bookid)">修改</a>
							</td>
						</tr>	
						<tr>
							<th>编号 <input type="text" :disabled="true" v-model="bookid"/></th>
							<th>书名<input type="text" v-model="bookname"/></th>
							<th>价格<input type="text" v-model="bookprice"/></th>
							<th>折扣价格<input type="text" v-model="discount"/></th>
							<th>图片<input type="file" style="display: inline-block;"/></th>
							<th>类型<input type="text" v-model="btype"/></th>
							<td>
								<a href="" @click.prevent=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" updates()">确认修改</a>
							</td>
						</tr>				
					</tbody>
				</table>
			</div>
		
	</body>
	<script>
		var v=new Vue({
			el:"#app",
			data:{
				res:"",
				bookid:"",
				bookname:"",
				bookprice:"",
				discount:"",
				btype:"",
				bookinfos:[]
			},
			mounted:function(){
				this.show();
			},
			methods:{
				show:function(){
					axios
					.get("http://localhost:8080/findAll")
					.then(function(response){
						v.bookinfos=response.data
					})
				},
				del:function(bookid){
					axios
					.get("http://localhost:8080/del/"+bookid)
					.then(function(response){
						if(response.data=="0"){
							v.bookinfos=v.bookinfos.filter(function(books){
								return books.bookid !=bookid
							})
						}else{
							alert("删除失败")
						}	
					})
					
				},
				update:function(bookid){
					var b=v.bookinfos.filter(function(books){
						return books.bookid ==bookid
					});
					v.bookid=b[0].bookid;
					v.bookname=b[0].bookname;
					v.bookprice=b[0].bookprice;
					v.discount=b[0].discount;
					v.btype=b[0].btype;
				},
				updates:function(){
					var params=new URLSearchParams();
					params.append("bookid",v.bookid);
					params.append("bookname",v.bookname);
					params.append("bookprice",v.bookprice);
					params.append("discount",v.discount);
					params.append("btype",v.btype);
					console.log(params)
					axios
					.post("http://localhost:8080/update",params)
					.then(function(response){
						console.log(response.data)
						if(response.data=="0"){
							v.bookinfos.some((books)=>{
								if(books.bookid==v.bookid){
									books.bookname=v.bookname;
									books.bookprice=v.bookprice;
									books.discount=v.discount;
									books.btype=v.btype;
									return true;
								}
							})
						}else{
							alert("修改失败")
						}	
					})
					
					
					
				},
				add:function(){
					var param=new URLSearchParams();
					param.append("bookid",v.bookid);
					param.append("bookname",v.bookname);
					param.append("bookprice",v.bookprice);
					param.append("discount",v.discount);
					param.append("btype",v.btype);
					
					axios
					.post("http://localhost:8080/save",param)
					.then(function(response){
						if(response.data=="0"){
							var json = {bookid:v.bookid,bookname:v.bookname,bookprice:v.bookprice,discount:v.discount,btype:v.btype};
							v.bookinfos.push(json)
						}else{
							console.log("cuowu")
						}
					})
					
				}
			}
			
		})
		
		
		
	</script>
</html>

前端跨域问题

				axios
					.get("http://localhost:8080/del/"+bookid)
					.then(function(response){
						if(response.data=="0"){
							v.bookinfos=v.bookinfos.filter(function(books){
								return books.bookid !=bookid
							})
						}else{
							alert("删除失败")
						}	
					})

后端设置跨域 3种方式

方法1、@CrossOrigin

@Controller
@CrossOrigin   //设置了这个注解后就可以进行跨域访问
//@RestController 这个注解包含了 @Controller和 @ResponseBody
public class BookInFoController {
    @Autowired
    private BookInFoService bookInFoService;
    @ResponseBody
    @RequestMapping("/findAll")
    public List<BookInFo> findAll(){
        return bookInFoService.findAll();
    }

    @ResponseBody
    @RequestMapping("/del/{bookid}")
    public String del(@PathVariable("bookid") String bookid){
        if(bookInFoService.del(bookid)){
            return "0";
        }
        return "1";
    }
}

方法2.mvc的xml中配置

    <!-- API 接口跨域配置 -->
    <mvc:cors>-->
        <mvc:mapping path="/**" allowed-origins="*"
                     allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                     allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"                    allow-credentials="true" max-age="3600" />//是否允许跨域，最大连接时间为1小时
    </mvc:cors>-->

方法3.自定义类进行配置

package com.tellhow.booksystem.util;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
//import org.springframework.web.cors.CorsConfiguration;
//import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
//import org.springframework.web.filter.CorsFilter;

import com.sun.jndi.url.dns.dnsURLContext;

/**
 *
 *
 * 处理跨域请求的过滤器
 */
@Configuration
public class GlobalCorsConfig {

//    @Bean
//    public CorsFilter corsFilter() {
//
//        //1.添加CORS配置信息
//        CorsConfiguration config = new CorsConfiguration();
//
//        //1) 允许的域,不要写*，否则cookie就无法使用了-------------在此处，配置允许跨域的请求
//        //http://localhost:63342/
//        config.addAllowedOrigin("http://manage.shopping.com");
//        config.addAllowedOrigin("http://api.shopping.com");
//        config.addAllowedOrigin("http://img.shopping.com");
//        config.addAllowedOrigin("http://www.shopping.com");
//        //2) 是否发送Cookie信息
//        config.setAllowCredentials(true);  //该配置表示， 允许跨域时，传递cookie
//        //3) 允许的请求方式
//        config.addAllowedMethod("OPTIONS");
//        config.addAllowedMethod("HEAD");
//        config.addAllowedMethod("GET");
//        config.addAllowedMethod("PUT");
//        config.addAllowedMethod("POST");
//        config.addAllowedMethod("DELETE");
//        config.addAllowedMethod("PATCH");
//        // 4）允许的头信息
//        config.addAllowedHeader("*");
//
//        //5、允许时间
//        config.setMaxAge(3600L);//3600秒有效
//
//        //2.添加映射路径，我们拦截一切请求
//        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
//        configSource.registerCorsConfiguration("/**", config);
//
//        //3.返回新的CorsFilter.
//        return new CorsFilter(configSource);
//    }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 基于vue实现新闻自下往上滚动效果(示例代码)

    基于vue实现新闻自下往上滚动效果(示例代码)

    这篇文章主要介绍了vue新闻自下往上滚动效果,当鼠标鼠标放上暂停滚动，鼠标移出继续滚动，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-04-04
  • vue3中使用highlight.js实现代码高亮显示的代码示例

    vue3中使用highlight.js实现代码高亮显示的代码示例

    代码高亮是在网页开发中常见的需求之一,它可以使代码在页面上以不同的颜色或样式进行突出显示提高可读性,这篇文章主要介绍了vue3中使用highlight.js实现代码高亮显示的相关资料,需要的朋友可以参考下
    2025-04-04
  • 深入探究Vue中$nextTick的实现原理

    深入探究Vue中$nextTick的实现原理

    这篇文章主要为大家详细介绍Vue中$nextTick的实现原理，文中的示例代码讲解详细，对我们深入了解Vue有一定的帮助，需要的小伙伴可以参考一下
    2023-06-06
  • vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    这篇文章主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • 基于elementUI实现图片预览组件的示例代码

    基于elementUI实现图片预览组件的示例代码

    这篇文章主要介绍了基于elementUI实现图片预览组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue-cli脚手架打包静态资源请求出错的原因与解决

    vue-cli脚手架打包静态资源请求出错的原因与解决

    这篇文章主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • vue 实现模糊检索并根据其他字符的首字母顺序排列

    vue 实现模糊检索并根据其他字符的首字母顺序排列

    这篇文章主要介绍了vue 实现模糊检索，并根据其他字符的首字母顺序排列,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-09-09
  • Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    这篇文章主要介绍了Vue源码之关于vm.$delete()/Vue.use()内部原理详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue 3 中动态获取高宽的思路详解

    Vue 3 中动态获取高宽的思路详解

    这篇文章主要介绍了Vue3中动态获取高宽,实现思路大概是将监听到的高度赋给你需要设置的对象，本文通过实例代码给大家介绍的非常详细，需要的朋友一起看看吧
    2023-10-10
  • vue中如何下载文件导出保存到本地

    vue中如何下载文件导出保存到本地

    这篇文章主要介绍了vue中如何下载文件导出保存到本地，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08

最新评论