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

写一个githubDemo

news 2026/2/4 3:46:14

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"…...

编程日记 2024/8/17 19:05:51

（一）成员内部类 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…...

编程日记 2024/8/17 19:04:50

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) …...

编程日记 2024/8/17 19:03:49

GitOps Tekton+ArgoCD

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

编程日记 2024/8/17 19:02:47

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

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

编程日记 2024/8/17 19:01:46

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

力扣高频SQL 50题（基础版）第四十七题 1321.餐馆营业额变化增长题目说明表: Customer ---------------------- | Column Name | Type | ---------------------- | customer_id | int | | name | varchar | | visited_on | date | | amount | …...

编程日记 2024/8/17 18:59:43

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,"…...

编程日记 2024/8/17 18:58:43

【JavaSE】解读Java中的toString方法

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

编程日记 2024/8/17 18:57:41

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

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

编程日记 2024/8/17 18:55:38

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

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

编程日记 2024/8/17 18:52:33

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

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

编程日记 2024/8/17 18:51:31

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

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

编程日记 2024/8/17 18:50:30

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

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

编程日记 2024/8/17 18:48:27

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

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

编程日记 2024/8/17 18:47:26

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

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

编程日记 2024/8/17 18:45:19

Nuxt3【布局】layouts 详解

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

编程日记 2024/8/17 18:44:18

获取数据源（多种方式爬虫介绍）

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

编程日记 2024/8/17 18:42:16

Linux下FTP服务器搭建配置：vsftpd的安装与配置实验

文章目录 vsftpd的安装与配置指南1. vsftpd的安装2. vsftpd配置详解3. 匿名访问测试4. 本地用户访问FTP的配置5. 修改匿名用户和本地用户的默认根目录6. 黑名单与白名单的使用7. 使用Windows文件资源管理器登录8. 拓展FTP的使用场景9. 注意事项 vsftpd的安装与配置指南本文详…...

编程日记 2024/8/17 18:41:15

使用Java调用Apache commons-text求解字符串相似性实战

目录前言一、字符串距离的几种计算方法 1、Levenshtein 距离 2、Overlap Coefficient计算 3、Q-gram Matching 4、余弦相似性计算二、基于余弦相似性的基地名称对比 1、加载百科中的基地信息列表 2、设置忽略词列表 3、将数据库地名和Excel进行对比三、总结前言…...

编程日记 2024/8/17 18:40:14

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 的替代方案…...

编程日记 2024/8/17 18:39:13