VUE框架CLI组件使用AJAX请求实现让列表数据变成动态------计算机网络经典

旧约Alatus

已于 2023-12-17 17:36:09 修改

阅读量783

点赞数 22

分类专栏： AJAX # VUE框架前端文章标签：前端前端框架 vue javascript vue.js ajax ecmascript

于 2023-12-12 15:20:25 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134950595

版权

前端同时被 3 个专栏收录

350 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

AJAX

45 篇文章 0 订阅

订阅专栏

<template>
    <div>
        <BugHeader :bugList="bugList" @saveBugCallBack="saveBugCallBack"></BugHeader>
        <BugList :bugList="bugList" @selectAllRollback="selectAllRollback" v-show="bugList.length"></BugList>
        <BugFooter @cleanResolved="cleanResolved" v-show="bugList.length" :bugList="bugList"></BugFooter>
    </div>
</template>
 
<script>
import pubsub from "pubsub-js";
import BugHeader from "./components/BugHeader.vue";
import BugList from "./components/BugList.vue";
import BugFooter from "./components/BugFooter.vue";
import axios from "axios";
export default {
    name : "App",
    components : {BugHeader,BugList,BugFooter},
	mounted(){
		// 挂载完整就发送ajax请求即可
		axios.get("/api/vue/bugs").then(
			response => {
				this.bugList = response.data;
			},
			error => {
				alert(error.message);
			}
			);
		// this.$bus.$on("modifyResolvedCallBack",this.modifyResolvedCallBack);
		// this.$bus.$on("deleteByIdCallBack",this.deleteByIdCallBack);
		// this.$bus.$on("updateDescCallBack",this.updateDescCallBack);
		this.pid1 = pubsub.subscribe("modifyResolvedCallBack",this.modifyResolvedCallBack);
		this.pid2 = pubsub.subscribe("deleteByIdCallBack",this.deleteByIdCallBack);
		this.pid3 = pubsub.subscribe("updateDescCallBack",this.updateDescCallBack);
	},
	// 必须在当前组件销毁之前,把绑定在总线上的事件解绑掉
	beforeDestroy(){
		// this.$bus.$off(["modifyResolvedCallBack","deleteByIdCallBack","updateDescCallBack"]);
		// 取消订阅
		pubsub.unsubscribe(this.pid1);
		pubsub.unsubscribe(this.pid2);
		pubsub.unsubscribe(this.pid3);
	},
    data(){
        return {
            bugList : []
        }
    },
    methods : {
		// 删除数组的元素
		deleteByIdCallBack(a,id)
        {
            this.bugList = this.bugList.filter((bug) => {
				return bug.id !== id;
			});
        },
        // 因为我们不能直接动props的数据
        // 那我们就传递一个方法过去进行修改
        saveBugCallBack(bug){
            this.bugList.unshift(bug);
        },
		// 一键全选或反选
		selectAllRollback(checked){
			this.bugList.forEach((bug) => {
				bug.resolved = checked;
			});
		},
		// 修改选中状态
        modifyResolvedCallBack(a,id)
        {
            this.bugList.forEach((bug) => {
                if(bug.id === id){
                    bug.resolved = !bug.resolved;
                }
            });
        },
		// 清除以选中
		cleanResolved(){
			this.bugList =  this.bugList.filter((bug) => {
				return bug.resolved === false;
			});
		},
		// 更新描述信息
		updateDescCallBack(a,bugObj){
			this.bugList.forEach((bug) => {
				if(bug.id === bugObj.id)
				{
					bug.desc = bugObj.newDesc;
					return;
				}
			});
		}
    }
}
</script>
 
<style>
.button{
	display: inline-block inline;
	zoom: 1;
	padding: 6px 20px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #bbb;
	overflow: visible;
	font: bold 13px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #555;
	background-color: #ddd;
	background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	-webkit-transition: background-color .2s ease-out;
	-moz-transition: background-color .2s ease-out;
	-ms-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	background-clip: padding-box; /* Fix bleeding */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(255,255,255, .9);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button:active{
	background: #e9e9e9;
	position: relative;
	top: 1px;
	text-shadow: none;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.button.red{
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.button.red{
	background-color: #ca3535;
	border-color: #c43c35;
}
.button.red:hover{
	background-color: #ee5f5b;
}
.button.red:active{
	background: #c43c35;
}
.button.green{
	background-color: #57a957;
	border-color: #57a957;
}
.button.green:hover{
	background-color: #62c462;
}
.button.green:active{
	background: #57a957;
}
</style>
<template>

<div>

<BugHeader :bugList="bugList" @saveBugCallBack="saveBugCallBack"></BugHeader>

<BugList :bugList="bugList" @selectAllRollback="selectAllRollback" v-show="bugList.length"></BugList>

<BugFooter @cleanResolved="cleanResolved" v-show="bugList.length" :bugList="bugList"></BugFooter>

</div>

</template>

<script>

import pubsub from "pubsub-js";

import BugHeader from "./components/BugHeader.vue";

import BugList from "./components/BugList.vue";

import BugFooter from "./components/BugFooter.vue";

import axios from "axios";

export default {

name : "App",

components : {BugHeader,BugList,BugFooter},

mounted(){

// 挂载完整就发送ajax请求即可

axios.get("/api/vue/bugs").then(

response => {

this.bugList = response.data;

},

error => {

alert(error.message);

}

);

// this.$bus.$on("modifyResolvedCallBack",this.modifyResolvedCallBack);

// this.$bus.$on("deleteByIdCallBack",this.deleteByIdCallBack);

// this.$bus.$on("updateDescCallBack",this.updateDescCallBack);

this.pid1 = pubsub.subscribe("modifyResolvedCallBack",this.modifyResolvedCallBack);

this.pid2 = pubsub.subscribe("deleteByIdCallBack",this.deleteByIdCallBack);

this.pid3 = pubsub.subscribe("updateDescCallBack",this.updateDescCallBack);

},

// 必须在当前组件销毁之前,把绑定在总线上的事件解绑掉

beforeDestroy(){

// this.$bus.$off(["modifyResolvedCallBack","deleteByIdCallBack","updateDescCallBack"]);

// 取消订阅

pubsub.unsubscribe(this.pid1);

pubsub.unsubscribe(this.pid2);

pubsub.unsubscribe(this.pid3);

},

data(){

return {

bugList : []

}

},

methods : {

// 删除数组的元素

deleteByIdCallBack(a,id)

{

this.bugList = this.bugList.filter((bug) => {

return bug.id !== id;

});

},

// 因为我们不能直接动props的数据

// 那我们就传递一个方法过去进行修改

saveBugCallBack(bug){

this.bugList.unshift(bug);

},

// 一键全选或反选

selectAllRollback(checked){

this.bugList.forEach((bug) => {

bug.resolved = checked;

});

},

// 修改选中状态

modifyResolvedCallBack(a,id)

{

this.bugList.forEach((bug) => {

if(bug.id === id){

bug.resolved = !bug.resolved;

}

});

},

// 清除以选中

cleanResolved(){

this.bugList = this.bugList.filter((bug) => {

return bug.resolved === false;

});

},

// 更新描述信息

updateDescCallBack(a,bugObj){

this.bugList.forEach((bug) => {

if(bug.id === bugObj.id)

{

bug.desc = bugObj.newDesc;

return;

}

});

}

}

}

</script>

<style>

.button{

display: inline-block inline;

zoom: 1;

padding: 6px 20px;

margin: 0;

cursor: pointer;

border: 1px solid #bbb;

overflow: visible;

font: bold 13px arial, helvetica, sans-serif;

text-decoration: none;

white-space: nowrap;

color: #555;

background-color: #ddd;

background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));

background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

-webkit-transition: background-color .2s ease-out;

-moz-transition: background-color .2s ease-out;

-ms-transition: background-color .2s ease-out;

-o-transition: background-color .2s ease-out;

transition: background-color .2s ease-out;

background-clip: padding-box; /* Fix bleeding */

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

text-shadow: 0 1px 0 rgba(255,255,255, .9);

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.button:active{

background: #e9e9e9;

position: relative;

top: 1px;

text-shadow: none;

-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

}

.button.red{

color: #fff;

text-shadow: 0 1px 0 rgba(0,0,0,.2);

background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));

background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

}

.button.red{

background-color: #ca3535;

border-color: #c43c35;

}

.button.red:hover{

background-color: #ee5f5b;

}

.button.red:active{

background: #c43c35;

}

.button.green{

background-color: #57a957;

border-color: #57a957;

}

.button.green:hover{

background-color: #62c462;

}

.button.green:active{

background: #57a957;

}

</style>

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 保存时是否进行语法检查,默认为true
  lintOnSave: false,
  // 配置入口
  pages: {
    index: {
      // 默认是main.js
      entry: 'src/main.js',
    }
  },
  // 简单配置
  // devServer: {
    // 这个位置就写到端口号即可
  //   proxy: "http://localhost:8081"
  // }
  // 高级配置
  // devServer: {
  //   proxy : {
  //     // 凡是请求路径以/api开始都走这个路径
  //     "/api": {
  //       target : "http://localhost:8081",
  //       // 将这个前缀替换为空串
  //       pathRewrite : {'^/api' : ''},
  //       // 这个是开启对websocket的支持
  //       // 这个是一种实时推送技术
  //       ws : true,
  //       // 表示改变起源,让对方服务器不知道我们真正的起源是哪里
  //       changeOrgin : true
  //     }
  //   }
  // }
  devServer : {
    proxy : {
      "/api" : {
        target : "http://localhost:8081",
        pathRewrite : {"^/api" : ""},
        ws : true,
        changeOrgin : true
      }
    }
  }
});
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

// 保存时是否进行语法检查,默认为true

lintOnSave: false,

// 配置入口

pages: {

index: {

// 默认是main.js

entry: 'src/main.js',

}

},

// 简单配置

// devServer: {

// 这个位置就写到端口号即可

// proxy: "http://localhost:8081"

// }

// 高级配置

// devServer: {

// proxy : {

// // 凡是请求路径以/api开始都走这个路径

// "/api": {

// target : "http://localhost:8081",

// // 将这个前缀替换为空串

// pathRewrite : {'^/api' : ''},

// // 这个是开启对websocket的支持

// // 这个是一种实时推送技术

// ws : true,

// // 表示改变起源,让对方服务器不知道我们真正的起源是哪里

// changeOrgin : true

// }

// }

// }

devServer : {

proxy : {

"/api" : {

target : "http://localhost:8081",

pathRewrite : {"^/api" : ""},

ws : true,

changeOrgin : true

}

}

}

});