快捷導(dǎo)航

Vue中的CRUD使用及說明

更新時(shí)間：2026年03月09日 09:08:12 作者：隨風(fēng)漂流6

在Vue中進(jìn)行CRUD前端跨域操作時(shí),可以通過后端設(shè)置跨域來解決,通常有三種方法：使用`@CrossOrigin`注解、在`mvc`的XML配置文件中設(shè)置以及自定義類進(jìn)行配置,作者分享了這三種方法,并希望大家參考和使用

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內(nèi)容-->
				<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>編號(hào) <input type="text"  v-model="bookid"/></th>
							<th>書名<input type="text" v-model="bookname"/></th>
							<th>價(jià)格<input type="text" v-model="bookprice"/></th>
							<th>折扣價(jià)格<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>編號(hào)</th>
							<th>書名</th>
							<th>價(jià)格</th>
							<th>折扣價(jià)格</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>編號(hào) <input type="text" :disabled="true" v-model="bookid"/></th>
							<th>書名<input type="text" v-model="bookname"/></th>
							<th>價(jià)格<input type="text" v-model="bookprice"/></th>
							<th>折扣價(jià)格<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()">確認(rèn)修改</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("刪除失敗")
						}	
					})

后端設(shè)置跨域 3種方式

方法1、@CrossOrigin

@Controller
@CrossOrigin   //設(shè)置了這個(gè)注解后就可以進(jìn)行跨域訪問
//@RestController 這個(gè)注解包含了 @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" />//是否允許跨域，最大連接時(shí)間為1小時(shí)
    </mvc:cors>-->

方法3.自定義類進(jìn)行配置

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;

/**
 *
 *
 * 處理跨域請(qǐng)求的過濾器
 */
@Configuration
public class GlobalCorsConfig {

//    @Bean
//    public CorsFilter corsFilter() {
//
//        //1.添加CORS配置信息
//        CorsConfiguration config = new CorsConfiguration();
//
//        //1) 允許的域,不要寫*，否則cookie就無法使用了-------------在此處，配置允許跨域的請(qǐng)求
//        //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) 是否發(fā)送Cookie信息
//        config.setAllowCredentials(true);  //該配置表示， 允許跨域時(shí)，傳遞cookie
//        //3) 允許的請(qǐng)求方式
//        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、允許時(shí)間
//        config.setMaxAge(3600L);//3600秒有效
//
//        //2.添加映射路徑，我們攔截一切請(qǐng)求
//        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
//        configSource.registerCorsConfiguration("/**", config);
//
//        //3.返回新的CorsFilter.
//        return new CorsFilter(configSource);
//    }
}