[nodejs]暑假无聊做的看*小项目
本帖最后由 55229lwj 于 2023-7-26 20:51 编辑** 先叠个甲，这是我初二时做的，虽然项目不怎么样，代码也写得烂（现在也是），但对我还是有鼓励意义的。项目中用的是别人的买家秀图片接口（所以不放截图了），随时可能失效，仅作分享学习解压密码为52pj**
# **Lpics**——基于(https://nodejs.org/en/)的(https://expressjs.com/zh-cn/)框架 web 应用
## intro
### 功能&特点
- js 轻量网络资源获取
- 简单的交互
- 开箱即用
### 意义&价值
- 对于(https://nodejs.org/en/)和 (https://262.ecma-international.org/6.0/)的练习
- 对(https://expressjs.com/zh-cn/)|(https://cheerio.js.org/)等 node 模块的练习
- 对于(https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX/Getting_Started)的练习
## 使用
### 安装依赖
(https://nodejs.org/en/)及`package.json`下所列的模块（可通过`npm install`安装）
### 启动服务
web版：
- 在项目目录下终端运行`node app.js`或`npm start`/Server.exe
- 浏览器访问 [服务器 ip]:8080 即可
gui版：
使用了https://gitee.com/zha2/easy-window
- 启动Lpics.exe
*同时也会启动webServer，可在任务管理器关闭
## 关于
### 作者
55229lwj
### 学习途径
> bilibili,MDN 文档
### 开发历程
- 2022-7-19 ***立项***
- 2022-7-19 ***完成***视图部分 ui
- 2022-7-19 ***解决***Express 静态资源问题
- 2022-7-20 ***解决***Express 远程访问问题
- 2022-7-21 ***完成***‘下载’接口
- 2022-7-22 ***完成***‘刷新’功能
- **...**
> 世上无难事，只怕有心人
---
# 祝你使用愉快！: )
声明：项目仅供学习交流使用，禁止用于任何违法用途，后果由使用者自行承担！
三个怎么够，我也小试了一下{:1_918:}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
padding-top: 20px;
}
.image-container {
padding: 20px;
overflow: hidden;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
justify-items: center;
}
.image-container img {
width: 100%;
aspect-ratio:1;
}
</style>
</head>
<body>
<div class="container" id="container">
<div style="text-align: center">
<span>请输入获取图片数量：</span><input type="text" id="input" value="20">
<button onclick="fetchImgAsCount()">点击获取</button>
</div>
<div class="image-container" id="image-container"></div>
</div>
<script>
const container = document.getElementById("image-container");
const input = document.getElementById("input");
let arrayLoading = [];
const fetchImgUrl = (index) => {
arrayLoading = false;
fetch("https://api.uomg.com/api/rand.img3?format=json")
.then((res) => res.json())
.then((res) => {
const { imgurl } = res;
const img = document.createElement("img");
img.src = imgurl;
container.appendChild(img);
arrayLoading = true;
});
};
const fetchImgAsCount = () => {
if (!arrayLoading.every(i => i)) {
alert('再等等吧，还有请求未完成')
return
}
// 获取前移除所有的img
const imgs = document.getElementsByTagName("img")
Array.from(imgs).forEach(img => img.remove())
const count = Number(input.value);
if (!count) return;
arrayLoading = Array(count).fill(false);
Array(count).fill(null).forEach((_, index) => fetchImgUrl(index));
}
window.onload = fetchImgAsCount
</script>
</body>
</html>
没解压密码
wzh123456789 发表于 2023-7-26 20:57
没解压密码先叠个甲，这是我初二时做的，虽然项目不怎么样，代码也写得烂（现在也是），但对我还是有鼓励意义的。项目中用的是别人的买家秀图片接口（所以不放截图了），随时可能失效，仅作分享学习解压密码为52pj
写了啊，52pj{:301_1009:} 很好的一个贴子，我也准备发一下作品。 初二就已经学这么多东西，我出来工作还得多向你学习代码啊{:1_926:} 下载了，有空学习学习。 越来越卷了这是 初二就搞这个，很厉害啊
页:
[1]
2