脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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引入高德地图并绘制点线面的实例代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-03-03
  • Vue3使用mitt进行组件通信的步骤

    Vue3使用mitt进行组件通信的步骤

    这篇文章主要介绍了Vue3使用mitt进行组件通信的步骤，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下
    2021-05-05
  • vue中el-dialog打开与关闭的几种方式

    vue中el-dialog打开与关闭的几种方式

    本文主要介绍了vue中el-dialog打开与关闭的几种方式,包括 update:visible, ref和兄弟 bus这三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • 使用Vue3+PDF.js实现PDF预览功能

    使用Vue3+PDF.js实现PDF预览功能

    项目中有一个需要预览下载pdf的需求,网上找了很久,决定使用 pdf.js 完成,下面这篇文章主要给大家介绍了关于使用Vue3+PDF.js实现PDF预览功能的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue封装TabBar组件的完整步骤记录

    vue封装TabBar组件的完整步骤记录

    组件封装是为了复用,换成大白话就是,同样的事情我不想做第二遍,节省出来的时间用来看动漫不香吗,下面这篇文章主要给大家介绍了关于vue封装TabBar组件的完整步骤,需要的朋友可以参考下
    2021-10-10
  • 手写Vue源码之数据劫持示例详解

    手写Vue源码之数据劫持示例详解

    这篇文章主要给大家介绍了手写Vue源码之数据劫持的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue3(ts)使用vee-validate表单校验,自定义全局验证规则说明

    Vue3(ts)使用vee-validate表单校验,自定义全局验证规则说明

    这篇文章主要介绍了Vue3(ts)使用vee-validate表单校验,自定义全局验证规则说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 如何在Vue项目中使用vuex

    如何在Vue项目中使用vuex

    这篇文章主要介绍了如何在Vue项目中使用vuex问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • 详解vue身份认证管理和租户管理

    详解vue身份认证管理和租户管理

    本篇开始功能模块的开发，首先完成ABP模板自带的身份认证管理模块和租户管理模块。同样的，参考ABP的Angular版本来做。
    2021-05-05
  • vue3将页面生成pdf导出的操作指南

    vue3将页面生成pdf导出的操作指南

    最近工作中有需要将一些前端页面(如报表页面等)导出为pdf的需求,下面这篇文章主要给大家介绍了关于vue3 如何将页面生成 pdf 导出,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07

最新评论