写一个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 的替代方案…...
Java面向对象实战：从0到1手写奇偶判断工具类[特殊字符]新手保姆级教程
🌸你好呀！我是断弦承露🌟感谢陪伴～ 小白博主在线求友🌿 跟着小白学/Java/软件设计/鸿蒙开发/芯片开发📖专栏汇总：《软件设计师》专栏 | 《Java》专栏 | 《 RISC-V 处理器实战》专栏 | 《Flutter…...
别再让PowerBI报告挤成一团了！用按钮+书签，一个页面搞定趋势和明细分析
PowerBI交互设计进阶：用按钮与书签打造空间魔术 当业务分析报告遇上数据爆炸时代，信息过载与界面拥挤成为每个分析师挥之不去的噩梦。我曾见过某零售企业的季度分析仪表板——12个图表密密麻麻挤在A4纸大小的画布上，趋势线相互缠绕ÿ…...
Matlab实战：5步搞定微电网源储荷协调调度（附完整CPLEX调用代码）
Matlab实战：微电网源储荷协调调度的5个工程化技巧 微电网调度是新能源时代的核心技术难题之一。面对风光发电的波动性和负荷需求的多变性，如何实现源、储、荷三者的动态平衡，成为电力工程师们每天都要应对的挑战。不同于学术论文中复杂的理论…...
all-MiniLM-L6-v2实战教程：用Python快速实现文本聚类分析
all-MiniLM-L6-v2实战教程：用Python快速实现文本聚类分析 1. 引言：为什么选择all-MiniLM-L6-v2 文本聚类是自然语言处理中的基础任务，它能帮助我们发现海量文本中的隐藏模式。传统方法如TF-IDF或词袋模型往往难以捕捉语义信息，而…...
新手福音：利用快马平台生成你的第一个数学公式编辑器入门项目
最近在自学前端开发，一直想尝试做个数学公式编辑器来练手。作为一个完全的新手，从零开始写这种项目确实有点无从下手。不过我发现用InsCode(快马)平台可以很轻松地生成基础代码框架，再根据自己的需求调整完善，特别适合像我这样的初…...
XML Notepad：Windows平台XML文档编辑与转换的完整解决方案
XML Notepad：Windows平台XML文档编辑与转换的完整解决方案 【免费下载链接】XmlNotepad XML Notepad provides a simple intuitive User Interface for browsing and editing XML documents. 项目地址: https://gitcode.com/gh_mirrors/xm/XmlNotepad XML No…...
WechatFerry实战指南：5步构建高效微信机器人自动化系统
WechatFerry实战指南：5步构建高效微信机器人自动化系统 【免费下载链接】wechatferry 基于 WechatFerry 的微信机器人底层框架 项目地址: https://gitcode.com/gh_mirrors/wec/wechatferry WechatFerry是一个基于Node.js生态的微信机器人底层框架，…...
财务效率革命：printPDF免费电子发票批量打印工具深度解析
在当今数字化办公的时代背景下，财务、报销、税务等岗位的日常工作中，电子发票处理已成为不可忽视的重要环节。每月数百甚至上千张的电子发票，一张张手动打开、设置、打印的传统操作模式，不仅耗时耗力，效率低下…...
计算机网络 之 【网络套接字编程】（固定宽度整数类型、socket常见API、netstat）
目录 一.固定宽度整数类型（C11引入） 二、socket 常见API socket bind IP地址绑定类型 TCP 编程模型流程图 listen accept connect UDP编程模型流程图 recvfrom 函数 sendto 函数 常用 flags 选项 常用错误码 三、netstat Linux/Unix 选项…...
Onekey：突破Steam清单管理瓶颈的全场景开源解决方案
Onekey：突破Steam清单管理瓶颈的全场景开源解决方案 【免费下载链接】Onekey Onekey Steam Depot Manifest Downloader 项目地址: https://gitcode.com/gh_mirrors/one/Onekey 在数字游戏产业蓬勃发展的今天，Steam平台已成为全球最大的综合性数字…...