Vue中的CRUD

最新推荐文章于 2024-05-28 10:03:43 发布

杨忠荣

最新推荐文章于 2024-05-28 10:03:43 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/yang_zhong_rong/article/details/119248449

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue中的CRUD

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bookinfo显示</title>
			<link rel="stylesheet" href="css/bootstrap.min.css">
				<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="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="del(bookinfo.bookid)">删除</a>
								<a href="" @click.prevent="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="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);
//    }
}

杨忠荣

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中的CRUD

Vue中的CRUD<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>bookinfo显示</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> &
复制链接

扫一扫