当前位置: 首页 > news >正文

写一个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入门-成员内部类和静态内部类的访问

&#xff08;一&#xff09;成员内部类 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 &#xff08;1&#xff09;不需要执行mysql_ssl_rsa_setup &#xff08;2&#xff09;Change_master_to.不需要get public key 2、可以使用pymysql非交互的管理mysql &#xff08;1&#xff09;connpymysql.connect(host,user,password,database,prot) …...

GitOps Tekton+ArgoCD

GitOps 提供了一种基于 Git 的操作理念&#xff0c;而 Tekton 和 ArgoCD 分别作为 CI/CD 工具&#xff0c;共同实现了这一理念在 Kubernetes 集群中的应用 k8s只是jenkins 流水线中的一环&#xff0c;但是在tekton中&#xff0c;k8s是基础设施 工作流程&#xff1a; 代码提交…...

uniapp用户列表页面渲染、增删改查逻辑

<template><view class="container">...

力扣高频SQL 50题(基础版)第四十七题之1321.餐馆营业额变化增长

力扣高频SQL 50题&#xff08;基础版&#xff09;第四十七题 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方法

前言&#xff1a; 在Java中&#xff0c;toString方法来自java.lang.Object 类&#xff0c;然后所有对象都继承该Object 类。默认情况下&#xff0c;它的作用是返回对象的字符串表示形式。在实际开发中&#xff0c;重写 toString() 方法可以帮助我们以更易读的形式输出对象信息&…...

软件工程的核心原则:KISS, DRY, SOLID, YAGNI

软件工程的核心原则&#xff1a;KISS, DRY, SOLID, YAGNI — 深入解析与实践指南 引言 在软件开发的广阔领域中&#xff0c;原则和实践是构建高质量、可维护系统的基石。本文将深入探讨四个核心原则&#xff1a;KISS&#xff08;保持简单&#xff0c;愚蠢&#xff09;、DRY&a…...

Android 高通7.1系开机动画自动跟随系统方向旋转

本篇博客是记录自己解决开机动画与系统方向不一致方案代码&#xff0c;思路&#xff1a;在系统参数根目录自定义persist.sys.hwrotationxrd0来作为动画方向&#xff0c;当修改系统方向时同时修改这个参数&#xff0c;当系统启动加载动画时在根据这个来旋转动画方式以保证动画方…...

Sentinel入门与进阶:微服务流量控制的最佳实践 ( 三 )

5.配置持久化 目前的sentinel&#xff0c;无法满足我们生产环境的需求&#xff0c;因为一旦sentinel-dashboard发生重启&#xff0c;限流规则也会随之丢失。 sentinel规则的持久化: Sentinel自身就支持了多种不同的数据源来持久化规则配置&#xff0c;比如文件配置&#xff0…...

2021年上半年网络工程师考试上午真题

2021年上半年网络工程师考试上午真题 网络工程师历年真题含答案与解析 第 1 题 以下关于RISC和CISC计算机的叙述中&#xff0c;正确的是&#xff08; &#xff09;。 (A) RISC不采用流水线技术&#xff0c;CISC采用流水线技术(B) RISC使用复杂的指令&#xff0c;CISC使用简…...

SQL触发器的级联魔力:数据完整性的守护者

标题&#xff1a;SQL触发器的级联魔力&#xff1a;数据完整性的守护者 在SQL的丰富世界中&#xff0c;触发器&#xff08;Trigger&#xff09;是一种特殊的存储过程&#xff0c;它能够自动执行响应数据库中的数据修改事件。而级联操作&#xff08;Cascade&#xff09;则是触发…...

ARCGIS PRO 要素标注背景色透明度的设置

使用ArcGIS Pro 设置标注背景色的透明度 一、点击标注属性 二、点击符号、注释 三、下拉框选择背景 四、背景符号 五、点击颜色 六、编辑颜色 七、应用...

探讨MySQL中 “约束“ 下的查询

目录&#xff1a; 一. 数据库约束 二. 表的设计 三. 聚合查询 四.联合查询 一. 数据库约束&#xff1a; 1.约束类型汇总&#xff1a; 约束类型 说明 NULL约束使用NOT NULL指定列不为 空UNIQUE唯一约束指定列为唯一的、不重复的DEFAULT默认值约 …...

Nuxt3【布局】layouts 详解

Nuxt 内置布局框架&#xff0c;用法如下&#xff1a; 修改 app.vue <template><NuxtLayout><NuxtPage /></NuxtLayout> </template>NuxtLayout 为 Nuxt 的内置组件&#xff0c;默认加载 layouts/default.vue &#xff0c;若页面中指定了布局&…...

获取数据源(多种方式爬虫介绍)

获取不同类型的数据源&#xff1a; 对于看上的网站如何获取其信息&#xff1a; 1.分析原网站是如何获取到这些数据的&#xff1f;哪个接口&#xff1f;哪些参数&#xff1f; 2.用程序去调用接口&#xff08;python/java都可以&#xff09; 3.处理一些数据&#xff0c;优化数…...

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&#xff08;Asynchronous JavaScript and XML&#xff09;入门介绍 Ajax XHR 的替代方案-fetch Ajax XHR 的替代方案-fetch 标准 Ajax 的替代方案…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

多层PCB技术解析:从材料选型到制造工艺的深度实践

在电子设备集成度与信号传输要求不断提升的背景下&#xff0c;多层PCB凭借分层布局优势&#xff0c;成为高速通信、汽车电子、工业控制等领域的核心载体。其通过导电层、绝缘层的交替堆叠&#xff0c;实现复杂电路的立体化设计&#xff0c;显著提升空间利用率与信号完整性。 一…...