前端vue入门(纯代码)17

news2024/11/17 15:27:47

不管何时何地，永远保持热爱，永远积极向上！！！

【19.尚硅谷GitHub案例】

1.静态GitHub搜索案例的静态文件：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入第三方样式库bootstrap.css -->
  <link rel="stylesheet" href="./bootstrap.css">
  <link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app">
  <div class="container">
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search"/>&nbsp;<button>Search</button>
      </div>
    </section>
    <div class="row">
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
      <div class="card">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

index.css

.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}

bootstrap.css: 引入第三方样式库bootstrap.css。

  • 静态页面展示：并拆分为两个组件【上方：Search.vue组件 + 下方：List.vue组件 】

2.基于代理服务器的GitHub搜索案例

  • 第三方样式库放置的位置如下：

  • 并在index.html文件中引入：

    <!-- 引入第三方样式库 -->
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

  • 拆分改写完后，展示：

  • github接口地址：【https://api.github.com/search/users?q=xxx】这是github维护的一个简单测试接口，其中xxx为：输入的内容，github接口就会返回xxx相关的数据。

  • axios的get请求url拼接参数有2种方式:

    • 方式1：字符串+拼接

      axios.get('https://api.github.com/search/users?q='+this.keyWord).then()

    • 方式2：采用ES6语法，地址字符串采用反单引号【``】，同时使用**【${}】**【不是单引号，不是单引号！！！】

      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then()

目前效果的展示以及动图中两个错误的解决办法如下：

  • 错误1：DevTools failed to load source map: Could not load content for http://localhost:8080/css/bootstrap.css.map: HTTP 错误：状态代码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE【点击此处】删掉bootstrap.css文件中的最后一行代码：【/*# sourceMappingURL=bootstrap.css.map */】
  • 错误2：【图片加载报错的点击此处】

请求数据解释：

  • total_counter:总的数据量
  • incomplete_results: false【不会把所有的数据给你】
  • items:实际搜索到的数据量

目前代码为：

App.vue

<template>
	<div class="container">
		<Search/>
		<List/>
	</div>
</template>

<script>
import List from './components/List';
import Search from './components/Search';
export default {
	components: { List, Search},
	name: 'App',
};
</script>

Search.vue

<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input type="text" 
            placeholder="enter the name you search" 
            v-model="keyWord"
            />&nbsp;
			<!-- 绑定一个点击事件 -->
			<button @click="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
import axios from 'axios';
export default {
	name: 'Search',
  data() {
    return {
      keyWord:'',
    }
  },
	methods: {
		searchUsers() {
      // 获取该url：github搜索的数据
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        //请求成功后
        (response)=>{
          console.log(response.data);
        },
        //请求失败后
        (error)=>{
          console.log('我请求数据失败了');
        },
      );
		},
	},
};
</script>

<style></style>

List.vue

<template>
	<div class="row">
		<div class="card">
			<a href="https://github.com/xxxxxx" target="_blank">
				<img
					src="https://v2.cn.vuejs.org/images/logo.svg "
					style="width: 100px"
				/>
			</a>
			<p class="card-text">xxxxxx</p>
		</div>
		<div class="card">
			<a href="https://github.com/xxxxxx" target="_blank">
				<img
					src="https://v2.cn.vuejs.org/images/logo.svg "
					style="width: 100px"
				/>
			</a>
			<p class="card-text">xxxxxx</p>
		</div>
		<div class="card">
			<a href="https://github.com/xxxxxx" target="_blank">
				<img
					src="https://v2.cn.vuejs.org/images/logo.svg "
					style="width: 100px"
				/>
			</a>
			<p class="card-text">xxxxxx</p>
		</div>
		<div class="card">
			<a href="https://github.com/xxxxxx" target="_blank">
				<img
					src="https://v2.cn.vuejs.org/images/logo.svg "
					style="width: 100px"
				/>
			</a>
			<p class="card-text">xxxxxx</p>
		</div>
		<div class="card">
			<a href="https://github.com/xxxxxx" target="_blank">
				<img
					src="https://v2.cn.vuejs.org/images/logo.svg "
					style="width: 100px"
				/>
			</a>
			<p class="card-text">xxxxxx</p>
		</div>
	</div>
</template>

<script>
export default {};
</script>

<style scoped>
.album {
		min-height: 50rem; /* Can be removed; just added for demo purposes */
		padding-top: 3rem;
		padding-bottom: 3rem;
		background-color: #f7f7f7;
	}

	.card {
		float: left;
		width: 33.333%;
		padding: .75rem;
		margin-bottom: 2rem;
		border: 1px solid #efefef;
		text-align: center;
	}

	.card > img {
		margin-bottom: .75rem;
		border-radius: 100px;
	}

	.card-text {
		font-size: 85%;
	}
</style>
  • 然后，把Search组件拿到的数据怎么在页面展示出来：涉及Search组件【给数据】与List组件【接收数据】之间的通信【兄弟组件之间通信：1.全局数据总线 或 2.消息的订阅与发布】
  • 拿到items这个大数据，里面有30条小数据，每一条数据包含的属性如下：

  • 利用全局事件总线实现组件之间的通信，并且将收到数据在页面展示出来，初步效果如下：
  • 【注意】绑定数据时，一定要动态绑定，一定要加冒号,比如下面代码中的【 :src=“user.avatar_url”】

此时代码为：

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
  // 生命周期钩子beforeCreate中模板未解析，且this是vm
  beforeCreate() {
    // this:指的是vm
		Vue.prototype.$bus = this  //安装全局事件总线$bus
	}
})

App.vue组件不变

Search.vue

<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input type="text" 
      placeholder="enter the name you search" 
      v-model="keyWord"
      />&nbsp;
			<!-- 绑定一个点击事件 -->
			<button @click="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
import axios from 'axios';
export default {
	name: 'Search',
  data() {
    return {
      keyWord:'',
    }
  },
	methods: {
		searchUsers() {
      // 获取该url：github搜索的数据
			axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        //请求成功后触发自定义事件，并传递数据
        (response)=>{
          console.log(this);// this指vc
          console.log(response.data);
          this.$bus.$emit('updateListData',response.data.items)
        },
        //请求失败后
        (error)=>{
          console.log('我请求数据失败了');
          this.$bus.$emit('updateListData',response.data.items)
        },
      );
		},
	},
};
</script>

List.vue

<template>
	<div class="row">
    <!-- 展示用户列表 -->
		<div class="card"
    v-show="users.length"
    v-for="user in users"
    :key="user.login"
    >
    <!-- 必须有冒号：动态数据绑定 -->
			<a :href="user.html_url" target="_blank">
				<img
					:src="user.avatar_url"
					style="width: 100px"
				/>
			</a>
			<p class="card-text">{{user.login}}</p>
		</div>
	</div>
</template>

<script>
export default {
	name: 'List',
	data() {
		return {
      users:[],
    };
	},
  // 全局数据总线：
  // 接收数据的一方：在mounted钩子中定义自定义事件
  mounted() {
    // 绑定事件updateListData,并在回调函数中接收来自Search组件的数据【对象的形式：dataObj】
    this.$bus.$on('updateListData',(dataObj) => {
      this.users=dataObj
    })
  },
};
</script>

<style scoped>
.album {
	min-height: 50rem; /* Can be removed; just added for demo purposes */
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-color: #f7f7f7;
}

.card {
	float: left;
	width: 33.333%;
	padding: 0.75rem;
	margin-bottom: 2rem;
	border: 1px solid #efefef;
	text-align: center;
}

.card > img {
	margin-bottom: 0.75rem;
	border-radius: 100px;
}

.card-text {
	font-size: 85%;
}
</style>

  • 继续完善页面：

    • 1、数据加载之前，页面展示：欢迎词！！

      <!-- 展示欢迎词 -->
<h2 v-show="info.isFirst">欢迎使用免费的GitHub接口！</h2>

    • 2、数据加载中，页面展示：加载中！！

      <!-- 展示加载中 -->
<h2 v-show="info.isLoading">页面加载中....</h2>

    • 3、数据加载错误，页面展示：错误信息！！

      <!-- 展示错误信息 -->
<h2 v-show="info.errorMsg">{{ info.errorMsg }}</h2>

  • 全局事件总线传多个参数方式有以下几种：

    this.$bus.$emit('自定义事件',传递的参数)

    • 方式1：直接传多个参数:

      this.$bus.$emit('updateListData', true, false, '', [])
      • 缺点1：不优雅不直观，不写注释压根不知道传过去的true、false、’’、[]啥意思；
      • 缺点2：接收方必须按照索引顺序才能正确获取参数。

    • 方式2：传过去的参数封装成json对象方式:

      this.$bus.$emit('updateListData',{isLoading:true,errorMsg:'',users:[]})

    • 接收方：接收方式2传过来的数据，然后通过整个对象赋值。

      • 缺点：会丢失属性值，data函数有4个属性，而传递过来的dataObj对象只有3个属性，那么通过整个对象赋值后，最后控制台会整个替换从而丢失一个isFirst属性。
      • 为什么传递过来的dataObj对象只有3个属性：因为isFirst属性在最初页面展示完欢迎词后，就变为false了，后续都不会再变化了，所以，不用再传isFirst属性了。
    data() {
	return {
		info:{
			isFirst:true,
			isLoading:false,
			errMsg:'',
			users:[]
		}
	}
},
mounted() {
	this.$bus.$on('updateListData',(dataObj)=>{
              this.info= dataObj;          
	})
},

  • 通过ES6语法实现局部更新，语法：{…原数据,…接收数据}:dataObj没有的属性用data() 原有的，dataObj包含的属性采用dataObj传递过来的值，另一个好处传递方不按属性顺序传值也能接收。传递方，比如data()中isFirst为第一个属性，而我传递时放在了{}的最后也有效。

    // 对象合并：相同的属性以后面的对象为主
this.info = {...this.info,...dataObj}

  • 问题：如下面代码一样，可以把dataObj直接复制给this._data中吗？

    data() {
	return {
        isFirst:true,
        isLoading:false,
        errMsg:'',
        users:[]
	}
},
mounted() {
	this.$bus.$on('updateListData',(dataObj)=>{
              this._data= dataObj;          
	})
},
    • 不能，如果赋值给this._data就破坏数据结构了，因为直接赋值方式不会让vue动态代理给_data中配置get和set方法，没有响应了。

  • 最终完善后的效果如下：

完整代码：

  • index.html
<!DOCTYPE html>
<html lang="zh-en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入第三方样式库 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

  • main.js文件

    //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
  // 生命周期钩子beforeCreate中模板未解析，且this是vm
  beforeCreate() {
    // this:指的是vm
		Vue.prototype.$bus = this  //安装全局事件总线$bus
	}
})

  • App.vue文件

    <template>
	<div class="container">
		<Search/>
		<List/>
	</div>
</template>

<script>
import List from './components/List';
import Search from './components/Search';
export default {
	components: { List, Search},
	name: 'App',
};
</script>

  • Search.vue文件

    <template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input type="text" 
      placeholder="enter the name you search" 
      v-model="keyWord"
      />&nbsp;
			<!-- 绑定一个点击事件 -->
			<button @click="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
import axios from 'axios';
export default {
	name: 'Search',
  data() {
    return {
      keyWord:'',
    }
  },
	methods: {
		searchUsers() {
      //请求前更新List的数据
      this.$bus.$emit('updateListData',{isLoading:true,errorMsg:'',users:[],isFirst:false})
      // 获取该url：github搜索的数据
			axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        //请求成功后触发自定义事件，并传递数据
        (response)=>{
          console.log(this);// this指vc
          console.log(response.data);
          this.$bus.$emit('updateListData',{isLoading:false,errorMsg:'',users:response.data.items})
        },
        //请求失败后
        (error)=>{
          console.log('我请求数据失败后，传递失败的信息，并将users数据初始化');
          // 请求失败后 users必须制空，不然页面还是会显示上次成功请求的数据
          this.$bus.$emit('updateListData',{isLoading:false,errorMsg:error.message,users:[]})
        },
      );
		},
	},
};
</script>

  • List.vue文件

    <template>
	<div class="row">
		<!-- 展示用户列表 -->
		<div
			class="card"
			v-show="info.users.length"
			v-for="user in info.users"
			:key="user.login"
		>
			<!-- 必须有冒号：动态数据绑定 -->
			<a :href="user.html_url" target="_blank">
				<img :src="user.avatar_url" style="width: 100px" />
			</a>
			<p class="card-text">{{ user.login }}</p>
		</div>
		<!-- 展示欢迎词 -->
		<h2 v-show="info.isFirst">欢迎使用免费的GitHub接口！</h2>
		<!-- 展示加载中 -->
		<h2 v-show="info.isLoading">页面加载中....</h2>
    <!-- 展示错误信息 -->
		<h2 v-show="info.errorMsg">{{ info.errorMsg }}</h2>
	</div>
</template>

<script>
export default {
	name: 'List',
	data() {
		return {
			info: {
				isFirst: true,
				isLoading: false,
				errorMsg: '',
				users: [],
			},
		};
	},
	// 全局数据总线：
	// 接收数据的一方：在mounted钩子中定义自定义事件
	mounted() {
		// 绑定事件updateListData,并在回调函数中接收来自Search组件的数据【对象的形式：dataObj】
		this.$bus.$on('updateListData', (dataObj) => {
      // 对象合并：相同的属性以后面的对象为主
			this.info = {...this.info,...dataObj}
		});
	},
};
</script>

<style scoped>
h2 {
	margin-left: 50px;
}
.album {
	min-height: 50rem; /* Can be removed; just added for demo purposes */
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-color: #f7f7f7;
}

.card {
	float: left;
	width: 33.333%;
	padding: 0.75rem;
	margin-bottom: 2rem;
	border: 1px solid #efefef;
	text-align: center;
}

.card > img {
	margin-bottom: 0.75rem;
	border-radius: 100px;
}

.card-text {
	font-size: 85%;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/696131.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RNN其中的X.reshape

RNN其中的X.reshape

假设RNN中的输入为2528&#xff0c;2是batchsize可以理解为有几句话&#xff0c;5是timestep可以理解为有几个词&#xff0c;28是vocab_size。如下就是两个句子&#xff0c;每个句子由5个单词组成。28则为每个单词的词向量&#xff0c;在此略去。 在输入的时候&#xff0c;首先…
阅读更多...
力姆泰克电动推杆

力姆泰克电动推杆

LAP梯形丝杠电动推杆 内含长寿命润滑脂&#xff0c;免维护 向下翻动查看更多 力姆泰克电动推杆 高强度/高耐磨材料选择&#xff0c;高精度的零部件加工&#xff0c;先进的壳体设计理念&#xff0c;造就高承载能力&#xff0c;抗冲击&#xff0c;低噪音&#xff0c;长寿命的优…
阅读更多...
机器学习9：使用 TensorFlow 进行特征组合编程实践

机器学习9：使用 TensorFlow 进行特征组合编程实践

在【机器学习6】这篇文章中&#xff0c;笔者已经介绍过环境准备相关事项&#xff0c;本文对此不再赘述。本文将通过编程案例来探索特征组合&#xff08;Feature Crosses&#xff09;对模型训练的影响&#xff0c;加深对上一篇文章&#xff08;机器学习8&#xff09;的理解。 经…
阅读更多...
C++ DAY2

C++ DAY2

1.总结类和结构体的区别 1.结构体是一种值类型&#xff0c;而类是引用类型。值类型用于存储数据的值&#xff0c;引用类型用于存储对实际数据的引用 2.结构体中声明的成员变量无法赋予初值&#xff0c;类可以 3.结构体是值类型&#xff0c;它在栈中分配空间&#xff1b;而类是…
阅读更多...
青大数据结构【2018】【算法分析】

青大数据结构【2018】【算法分析】

关键字&#xff1a; 单链表奇偶数拆分、顺序表交集、二叉排序树 右中左的顺序&#xff0c;找出二叉排序树中值大于等于k的所有结点。
阅读更多...
2.位带操作

2.位带操作

1.位带操作&#xff1a; 2.位带区与位带别名区地址转换&#xff1a; 外设位带别名区地址&#xff1a;AliasAddr0x42000000(A-0x40000000)*8*4n*4&#xff1b;SRAM位带别名区地址&#xff1a;AliasAddr0x22000000(A-0x20000000)*8*4n*4&#xff1b;IO口操作宏定义&#xff1a;…
阅读更多...
【Linux】NoSQL之 Redis配置与优化

【Linux】NoSQL之 Redis配置与优化

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 NoSQL之 Redis配置与优化 关系数据库与非关系型数据库关系型数据库非关系型数据库关系型数据库和非关系型数据库区别数据存储方式不同扩展方式不同对事务性的支持不同 非关系…
阅读更多...
多元回归预测 | Matlab麻雀算法(SSA)优化极限学习机ELM回归,SSA-ELM回归预测，多变量输入模型

多元回归预测 | Matlab麻雀算法(SSA)优化极限学习机ELM回归,SSA-ELM回归预测，多变量输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab麻雀算法(SSA)优化极限学习机ELM回归,SSA-ELM回归预测，多变量输入模型 评价指标包括:MAE、RMSE和R2等，代码质量极高，方便学习和替换数据。要求2018版本及以上。 部分源码 %% 清空环境变…
阅读更多...
交叉熵损失CrossEntropyLoss

交叉熵损失CrossEntropyLoss

交叉熵损失CrossEntropyLoss 语义分割网络输出tensor的尺寸为【B,C,H,W】,进行多分类&#xff0c;label的尺寸为【B,H,W】。 举例&#xff1a;三分类&#xff1a;output【1, 3&#xff0c;3, 3】&#xff0c;label【1, 3, 3】 验证 import torchoutput torch.tensor([[[[1, 1…
阅读更多...
字符集，编码，解码，中文乱码

字符集，编码，解码，中文乱码

字符集 ASCII 美国佬用的&#xff0c;1个字节表示那些英文字母啥的就够了 GBK 中国的&#xff0c;两个字节表示2w多汉字也够了 Unicode 万国符&#xff0c;4个字节&#xff0c;用来包含全世界所有的字符。 编码 编码就是将字符集中的数字&#xff0c;如a对应数字97&…
阅读更多...
Vue中el与data函数

Vue中el与data函数

1、绑定容器&#xff0c;el与$mount的异同 <body><div id"root"><h1>你好&#xff0c;{{name}}</h1></div> </body> <script>const vm new Vue({//el:#root, //第一中写法&#xff0c;new的时候直接写好eldata:{name:…
阅读更多...
云 LIS 实验室信息管理系统源码 C#检验系统源码

云 LIS 实验室信息管理系统源码 C#检验系统源码

科技的飞速发展为实验室信息管理带来了新机遇&#xff0c;云计算技术的应用更是为实验室信息管理打开了新的大门。云 LIS 实验室信息管理系统&#xff0c;作为一种新型的信息化管理方案&#xff0c;已经在多个实验室的信息化管理中得到应用&#xff0c;并且具有广阔的应用前景。…
阅读更多...
社区团购小程序怎么制作

社区团购小程序怎么制作

社区团购小程序开发&#xff0c;有什么功能 商品管理&#xff1a;社区团购小程序提供商品管理功能&#xff0c;可以方便地添加、编辑和删除商品信息。你可以设置商品的价格、库存、规格等&#xff0c;并上传商品的图片和描述&#xff0c;以吸引用户关注。 配送管理&#xff1…
阅读更多...
为什么 Midjourney 效果远远好于开源的 Stable Diffusion Model?

为什么 Midjourney 效果远远好于开源的 Stable Diffusion Model?

midjourney之所以让你觉得效果好&#xff0c;是因为他是一个更接近于应用层的工具&#xff0c;你就聊聊天对对话&#xff0c;他就能给你很好的反馈&#xff0c;内部的调优都封装成黑盒&#xff0c;不太需要你去关心 而stable diffusion更适合爱折腾&#xff0c;懂折腾的专业一…
阅读更多...
抖音团购服务商贴牌系统

抖音团购服务商贴牌系统

抖音团购服务商贴牌系统整体指的是抖音为团购服务商提供的一套定制化解决方案&#xff0c;使其能够以自己的品牌形象和标识在抖音平台上进行团购活动。这个系统通常包括以下组成部分&#xff1a; 品牌定制&#xff1a;抖音允许团购服务商根据自身品牌形象和标识进行定制&am…
阅读更多...
Bpmn.js流程建模结合业务整合工作流（三）

Bpmn.js流程建模结合业务整合工作流（三）

前两篇文章概述了bpmn的搭建及其基本使用 现在说下流程所需的表单 流程建模之表单设计如下图所示 VForm是一款基于Vue 2/Vue 3的低代码表单&#xff0c;支持Element UI、iView两种UI库&#xff0c;定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能。 VForm由…
阅读更多...
在SpringBoot中如何整合消息服务组件？

在SpringBoot中如何整合消息服务组件？

在开发中&#xff0c;消息服务组件在系统架构中扮演着举足轻重的角色。本文将介绍消息服务组件的基本概念&#xff0c;以及如何在SpringBoot中整合常见的消息服务组件&#xff0c;如ActiveMQ、RabbitMQ和Kafka。最后&#xff0c;我们将探讨整合消息服务组件在实际应用场景中的优…
阅读更多...
jmeter连接数据库jdbc（sql server举例）

jmeter连接数据库jdbc（sql server举例）

目录 前言&#xff1a; 一、下载第三方工具包驱动数据库 二、连接JDBC Connection Configuration 三、jdbc request 四、查看数据 前言&#xff1a; JMeter是一款强大的性能测试工具&#xff0c;它不仅可以模拟用户行为进行接口测试&#xff0c;还可以通过使用JDBC&#…
阅读更多...
libevent（10）使用event处理socket连接

libevent（10）使用event处理socket连接

这个例子中&#xff0c;我们通过event处理socket连接&#xff0c;并进行一些简单的数据处理。 代码如下 test_event_server.cpp&#xff1a; #include <iostream> #include <thread> #include <sys/types.h> #include <sys/stat.h> #include <fcnt…
阅读更多...
Scrapy框架--Request和FormRequest

Scrapy框架--Request和FormRequest

目录 Request对象 原理 参数 将附加数据传递给回调函数 原理 示例代码 FormRequest 概念 参数 请求使用示例 响应对象 参数 Request对象 原理 爬虫中请求与响应是最常见的操作&#xff0c;Request对象在爬虫程序中生成并传递到下载器中&#xff0c;后者执行请求…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023