Vue中的CRUD使用及说明
作者：随风漂流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);
// }
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。