写一个githubDemo
1.List组件
<template><div class="container"><!-- 展示用户列表 --><div class="row"><divv-show="info.users.length"v-for="(item, index) in info.users":key="item.id"><div class="col-sm-4 item"><imgclass="hover-image":src="item.avatar_url"@click="targetPage(item.html_url)"/><h5>{{ item.login }}</h5></div><br v-if="isHuanhang(index)" /></div></div><!-- 展示欢迎词 --><h1 v-show="info.isFirst">欢迎使用！</h1><!-- 展示加载中 --><h1 v-show="info.isLoading">加载中....</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{ info.errMsg }}</h1></div>
</template><script>
export default {name: "MyList",data() {return {info: {users: [],isFirst: true,isLoading: false,errMsg: "",},};},methods: {getList(listObj) {//1.第一种方式// this.info = {...this.info,...listObj};//2.第二种方式Object.assign(this.info, listObj);},isHuanhang(index) {if (index % 3 === 0) {return true;} else {return false;}},targetPage(url) {window.open(url, "_blank");},},mounted() {this.$bus.$on("sendList", this.getList);},beforeDestroy() {this.$bus.$off("sendList");},
};
</script><style scoped>
.item {width: 300px;height: 150px;margin-top: 30px;margin-right: 76px;padding: 150px;display: flex;flex-direction: column; /* 纵向排列子项 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */border: 1px solid #ccc; /* 可选：给容器加个边框 */box-sizing: border-box; /* 包括边框和内边距在内的总宽高 */
}img {width: 150x;height: 120px;
}.hover-image {cursor: pointer; /* 设置鼠标悬浮时光标变成手指 */
}
</style>2.search 组件
<template><div class="container-xl"><div class="row bc"><divclass="col-xl search-box d-flex flex-column justify-content-end"><h1 class="text-bottom margin-left-dom">Search Github Users</h1></div></div><div class="row bc"><div class="col-xl search-box" ><div class="input-group mb-3 margin-left-dom inputWidth"><inputtype="text"class="form-control"placeholder="enter the name you search"v-model="keyWord"/><button class="btn btn-outline-dark dom-margin" type="button" @click="searchUsers" >Search</button></div></div></div></div>
</template><script>
import axios from 'axios';export default {name: "MySearch",data() {return {keyWord:''}},methods:{searchUsers(){this.$bus.$emit('sendList',{ isFirst: false,isLoading: true,});axios.get('https://api.github.com/search/users',{params:{q:this.keyWord}}).then(res=>{this.$bus.$emit('sendList',{ users: res.data.items,isLoading: false,});},err=>{console.log(err);this.$bus.$emit('sendList',{ users: [],isLoading: false,errMsg: '请求失败，请稍后再试！'});})}}
};
</script><style scoped>.bc{
background-color: rgba(13, 14, 14, 0.313);}.search-box {height: 120px;
}.margin-left-dom {margin-left: 30px;
}.inputWidth {width: 450px;
}
.dom-margin{margin-left: 12px;
}
</style>3.App组件
<template><div id="appContainer"><MySearch/><MyList/></div>
</template><script>import MySearch from './components/MySearch.vue'import MyList from './components/MyList.vue'
export default {name: "App",components: {MySearch,MyList},methods:{}
};
</script><style></style>4.引入bootStarp
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><!-- 针对IE浏览器 得一个特殊配置，含义是让IE浏览器以最高得渲染级别渲染页面 --><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"><!-- 配置网页的标题 package.json name:'vue_test'当作网页的标题 --><link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 当浏览器不支持JS时，noscript中的 元素就会被渲染 --><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>
5.展示
相关文章：
写一个githubDemo
1.List组件 <template><div class"container"><!-- 展示用户列表 --><div class"row"><divv-show"info.users.length"v-for"(item, index) in info.users":key"item.id"><div class"…...
java入门-成员内部类和静态内部类的访问
（一）成员内部类 package InnerClass;import javax.print.attribute.standard.MediaSize;public class Outer {//2外部类中的成员private int age99;public static String a;public class Inner{//普通的成员内部类//1.1成员变量public String name;priva…...
ansible【自动化配置】（thirty day）
回顾 1、mysql和python （1）不需要执行mysql_ssl_rsa_setup （2）Change_master_to.不需要get public key 2、可以使用pymysql非交互的管理mysql （1）connpymysql.connect(host,user,password,database,prot) …...
GitOps Tekton+ArgoCD
GitOps 提供了一种基于 Git 的操作理念，而 Tekton 和 ArgoCD 分别作为 CI/CD 工具，共同实现了这一理念在 Kubernetes 集群中的应用 k8s只是jenkins 流水线中的一环，但是在tekton中，k8s是基础设施 工作流程： 代码提交…...
uniapp用户列表页面渲染、增删改查逻辑
<template><view class="container">...
力扣高频SQL 50题（基础版）第四十七题之1321.餐馆营业额变化增长
力扣高频SQL 50题（基础版）第四十七题 1321.餐馆营业额变化增长 题目说明 表: Customer ---------------------- | Column Name | Type | ---------------------- | customer_id | int | | name | varchar | | visited_on | date | | amount | …...
django中的MESSAGE组件
文章目录 message组件1 使用配置2 设置值3 读取值4 源码分析 message组件 1 使用配置 INSTALLED_APPS [# django.contrib.admin,# django.contrib.auth,# django.contrib.contenttypes,# django.contrib.sessions,django.contrib.messages,django.contrib.staticfiles,"…...
【JavaSE】解读Java中的toString方法
前言： 在Java中，toString方法来自java.lang.Object 类，然后所有对象都继承该Object 类。默认情况下，它的作用是返回对象的字符串表示形式。在实际开发中，重写 toString() 方法可以帮助我们以更易读的形式输出对象信息&…...
软件工程的核心原则：KISS, DRY, SOLID, YAGNI
软件工程的核心原则：KISS, DRY, SOLID, YAGNI — 深入解析与实践指南 引言 在软件开发的广阔领域中，原则和实践是构建高质量、可维护系统的基石。本文将深入探讨四个核心原则：KISS（保持简单，愚蠢）、DRY&a…...
Android 高通7.1系开机动画自动跟随系统方向旋转
本篇博客是记录自己解决开机动画与系统方向不一致方案代码，思路：在系统参数根目录自定义persist.sys.hwrotationxrd0来作为动画方向，当修改系统方向时同时修改这个参数，当系统启动加载动画时在根据这个来旋转动画方式以保证动画方…...
Sentinel入门与进阶：微服务流量控制的最佳实践 ( 三 )
5.配置持久化 目前的sentinel，无法满足我们生产环境的需求，因为一旦sentinel-dashboard发生重启，限流规则也会随之丢失。 sentinel规则的持久化: Sentinel自身就支持了多种不同的数据源来持久化规则配置，比如文件配置࿰…...
2021年上半年网络工程师考试上午真题
2021年上半年网络工程师考试上午真题 网络工程师历年真题含答案与解析 第 1 题 以下关于RISC和CISC计算机的叙述中，正确的是（ ）。 (A) RISC不采用流水线技术，CISC采用流水线技术(B) RISC使用复杂的指令，CISC使用简…...
SQL触发器的级联魔力：数据完整性的守护者
标题：SQL触发器的级联魔力：数据完整性的守护者 在SQL的丰富世界中，触发器（Trigger）是一种特殊的存储过程，它能够自动执行响应数据库中的数据修改事件。而级联操作（Cascade）则是触发…...
ARCGIS PRO 要素标注背景色透明度的设置
使用ArcGIS Pro 设置标注背景色的透明度 一、点击标注属性 二、点击符号、注释 三、下拉框选择背景 四、背景符号 五、点击颜色 六、编辑颜色 七、应用...
探讨MySQL中 “约束“ 下的查询
目录： 一. 数据库约束 二. 表的设计 三. 聚合查询 四.联合查询 一. 数据库约束： 1.约束类型汇总： 约束类型 说明 NULL约束使用NOT NULL指定列不为 空UNIQUE唯一约束指定列为唯一的、不重复的DEFAULT默认值约 …...
Nuxt3【布局】layouts 详解
Nuxt 内置布局框架，用法如下： 修改 app.vue <template><NuxtLayout><NuxtPage /></NuxtLayout> </template>NuxtLayout 为 Nuxt 的内置组件，默认加载 layouts/default.vue ，若页面中指定了布局&…...
获取数据源（多种方式爬虫介绍）
获取不同类型的数据源： 对于看上的网站如何获取其信息： 1.分析原网站是如何获取到这些数据的？哪个接口？哪些参数？ 2.用程序去调用接口（python/java都可以） 3.处理一些数据，优化数…...
Linux下FTP服务器搭建配置：vsftpd的安装与配置实验
文章目录 vsftpd的安装与配置指南1. vsftpd的安装2. vsftpd配置详解3. 匿名访问测试4. 本地用户访问FTP的配置5. 修改匿名用户和本地用户的默认根目录6. 黑名单与白名单的使用7. 使用Windows文件资源管理器登录8. 拓展FTP的使用场景9. 注意事项 vsftpd的安装与配置指南 本文详…...
使用Java调用Apache commons-text求解字符串相似性实战
目录 前言 一、字符串距离的几种计算方法 1、Levenshtein 距离 2、Overlap Coefficient计算 3、Q-gram Matching 4、余弦相似性计算 二、基于余弦相似性的基地名称对比 1、加载百科中的基地信息列表 2、设置忽略词列表 3、将数据库地名和Excel进行对比 三、总结 前言…...
http request-01-XMLHttpRequest XHR 简单介绍
http 请求系列 http request-01-XMLHttpRequest XHR 简单介绍 http request-01-XMLHttpRequest XHR 标准 Ajax 详解-01-AJAX（Asynchronous JavaScript and XML）入门介绍 Ajax XHR 的替代方案-fetch Ajax XHR 的替代方案-fetch 标准 Ajax 的替代方案…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...
苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...
windows系统MySQL安装文档
概览：本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容，为学习者提供全面的操作指导。关键要点包括： 解压 ：下载完成后解压压缩包，得到MySQL 8.…...
Linux安全加固：从攻防视角构建系统免疫
Linux安全加固：从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言：攻防对抗的新纪元 在日益复杂的网络威胁环境中，Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示，高级持续性威胁（APT）攻击同比增长65%，平均入侵停留时间缩短至48小时。本章将从…...
Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程
鸿蒙电脑版操作系统来了，很多小伙伴想体验鸿蒙电脑版操作系统，可惜，鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机，来体验大家心心念念的鸿蒙系统啦！注意：虚拟…...
多层PCB技术解析：从材料选型到制造工艺的深度实践
在电子设备集成度与信号传输要求不断提升的背景下，多层PCB凭借分层布局优势，成为高速通信、汽车电子、工业控制等领域的核心载体。其通过导电层、绝缘层的交替堆叠，实现复杂电路的立体化设计，显著提升空间利用率与信号完整性。 一…...