写一个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 的替代方案…...
Zotero文献管理终极指南:从混乱到高效的研究工作流
Zotero文献管理终极指南:从混乱到高效的研究工作流 【免费下载链接】zotero Zotero is a free, easy-to-use tool to help you collect, organize, annotate, cite, and share your research sources. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero Z…...
Hutool CronUtil实战:5分钟搞定Spring Boot定时任务(含动态任务配置)
Hutool CronUtil实战:5分钟搞定Spring Boot定时任务(含动态任务配置) 在Java开发领域,定时任务几乎是每个项目都绕不开的基础需求。传统方案如Spring Scheduler虽然简单易用,但在动态任务管理和细粒度控制方面往往力不…...
从零开始手搓一个xv6内核页表:跟着MIT 6.S081源码一步步理解虚拟内存初始化
从零构建xv6内核页表:深入解析RISC-V虚拟内存初始化实战 在MIT 6.S081操作系统的学习过程中,xv6作为教学用精简内核,其虚拟内存实现是理解现代计算机内存管理的关键。本文将带您从第一行代码开始,完整复现xv6内核页表的构建过程&…...
YOLOv11分割模型实战:用C++和ONNXRuntime解析‘output0’和‘output1’双输出,实现像素级颜色分析
YOLOv11分割模型实战:C与ONNXRuntime双输出解析与像素级颜色分析 在计算机视觉领域,目标检测与实例分割技术的结合正成为工业应用的新标准。YOLOv11作为YOLO系列的最新成员,不仅延续了其高效检测的特性,更通过双输出结构实现了精准…...
std::unique_lock vs std::lock_guard:C++线程锁选择指南(附性能测试)
std::unique_lock vs std::lock_guard:C线程锁的深度抉择与实战优化 在C多线程编程中,锁的选择往往决定了程序的性能表现和稳定性。当我们需要在std::unique_lock和std::lock_guard之间做出选择时,不能简单地认为"功能多就是好"。本…...
OpenClaw 底层原理分析
OpenClaw 底层原理深度分析 OpenClaw 是一个智能体编排平台,它的核心设计哲学是 “模型无关、工具优先、记忆驱动”。让我从架构、数据流、核心机制三个维度为你拆解。 🏗️ 一、整体架构 OpenClaw 采用 分层解耦 架构,可以理解为“AI 操作系统”: text ┌──────…...
音频标注:从原理到产业,AI听懂世界的“翻译官”
音频标注:从原理到产业,AI听懂世界的“翻译官” 引言 在人工智能的浪潮中,计算机视觉的“看”和自然语言处理的“读”已广为人知,而让机器学会“听”——理解并解析复杂的声音世界,正成为新的前沿。这一切的基石&…...
OpenClaw知识库集成:Qwen3-VL:30B连接飞书文档中心
OpenClaw知识库集成:Qwen3-VL:30B连接飞书文档中心 1. 为什么需要智能文档助手 上个月整理季度技术文档时,我对着飞书里上百个分散的文档链接发愁——每次找资料都要在搜索框反复尝试关键词,遇到表格和图表更要逐页核对。直到发现OpenClaw能…...
OpenClaw任务编排:GLM-4.7-Flash多步骤自动化设计
OpenClaw任务编排:GLM-4.7-Flash多步骤自动化设计 1. 为什么需要任务编排 上周我需要整理一批技术文档,这个任务包含多个步骤:从不同文件夹收集Markdown文件、统一格式、生成摘要、最后打包发送给团队成员。手动操作不仅耗时,还…...
核聚变装置逼近极限时会“漏水“:科学家发现热流平衡决定密度天花板
来源:科学剃刀人类距离可控核聚变又近了一步,但一道隐形天花板始终悬在头顶。当反应堆试图提高燃料密度以获得更多能量时,等离子体总会在某个临界点突然崩溃。这种"密度极限"现象困扰了聚变界四十年。现在,美国麻省理工…...
