【杂七杂八的小玩具】简单图床自适应轮播图

最新推荐文章于 2024-11-04 14:35:19 发布

情韵~

最新推荐文章于 2024-11-04 14:35:19 发布

阅读量87

点赞数

分类专栏：杂七杂八的小玩具文章标签：前端 javascript vue.js java json

本文链接：https://blog.csdn.net/qq_46283617/article/details/128591288

版权

杂七杂八的小玩具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简单做一个的个人的图片展示网页

文件列表：

成品效果：

（该图片来源于网略，若有侵权联系删除，抱歉抱歉~）

成品代码：

可以直接拿去做单页，但是没有数据。

数据都存储在data.json里面，可以自己修改下面的json数据地址。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body{
		/* height: 100vh; */
	}
  </style>
</head>
<body>
  <div id="app" style="overflow: hidden;">
     <el-carousel indicator-position="none" height="95vh" indicator-position="outside">
        <el-carousel-item v-for="url in urls" :key="url">
          <el-image
                style="width: 100%; height: 100vh"
                :src="url"
                :fit="fit"></el-image>
        </el-carousel-item>
      </el-carousel>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
			fit: 'contain',
			urls: [
				'./01c3d7fd5c5cefbcfe6bf6e256fcb611(2).jpeg',
			  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
			  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
			  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
			  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
			  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
			  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
			  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
			]
		}
      },
	  created() {
          // 可以自己修改这里 json数据里是一个包含图片地址的数组
		  axios.get('./data.json').then(resp=>{
			  console.log(resp.data.urls);
			  this.urls = resp.data.urls;
		  })
	  }
    })
  </script>
</html>

思路：

收集了一些网络照片，为了更好的管理和存储以及展示，所以打算做成网页，想看的时候点开就能直接看，感觉方便一些。于是便有了这个简单的小Demo。

核心：将文件夹下的图片信息组合成json文件存储起来，然后通过异步请求获取到。

下面是自己遇到的问题以及写的一些小工具：

文件名称的修改：

// 从网上下载的文件，名字乱七八糟 甚至有乱码的，所以可以自己手动修改一下
// 文件随机名修改
private static void changeName(File file) {
    // 判断文件时目录还是文件
    // 目录就采用递归进行遍历
    if (file.isDirectory()){
        File[] files = file.listFiles();
        for (File f : files) {
            changeName(f);
        }
    }else {
        // 如果是文件就可以进行修改
        // 这里对文件进行名称的修改
        try {
            BufferedInputStream inputStream = new BufferedInputStream(new FileInputStream(file));
            String name = UUID.randomUUID().toString().substring(0, 15);
            String type = file.getName().substring(file.getName().lastIndexOf(".") );
            // 将之前的文件复制改完名字之后继续存储到当前文件夹下面
            inputStream.transferTo(new FileOutputStream(file.getParent() + File.separator + name + type));

            inputStream.close();

        } catch (IOException e) {
            System.out.println(file.getName() + "改名失败");
            throw new RuntimeException(e);
        }

		/*
			修改为完毕，删除当前的文件
			注意：
				流未关闭之前，删除会失败！
		*/
        if (file.delete()) {
            System.out.println("删除成功");
        }
    }
}

json文件生成：

// 之前打算自己拼接一个json字符串，但是后来感觉还是用fastjson好一些
// private static StringBuilder builder = new StringBuilder();
private static ArrayList<String> list = new ArrayList<>();
private static Map<String,ArrayList> map = new HashMap<>();
public static void main(String[] args) throws IOException {
    // 获取文件名称截图字符串 最后存储到json文件中
    File file = new File("F:\\12\\首页\\二次元头像");
    System.out.println("file.getPath() = " + file.getPath());

    getJsonData(file);

    map.put("urls",list);
    String json = JSON.toJSONString(map);
    System.out.println("json = " + json);


    BufferedWriter writer = new BufferedWriter(new FileWriter(new File(file.getPath(),"data.json")));
    writer.write(json);
    writer.close();

}

private static void getJsonData(File file) {

    if (file.isDirectory()) {
        File[] files = file.listFiles();
        for (File f : files) {
            getJsonData(f);
        }
    }else if (file.isFile() 
              && !file.getName().contains("html") 
              && !file.getName().contains("json")
              && !file.getName().contains("rar")
             ){
        String name = file.getName();
        list.add("./" + name);
    }

}

压缩图片质量：

// 我这里并没用上 如果在一些不太好的服务器上，或许会使用这个
private static void shutPictureWith(File file) {
    // 判断文件类型
    if (file.isDirectory()) {
        File[] files = file.listFiles();
        for (File f : files) {
            shutPictureWith(f);
        }
    } else {
        // 绘制缩略图
        desPhoto(file);
    }


}

private static void desPhoto(File file) {

    try {
        // 创建文件对象 获取文件宽高
        BufferedImage read = ImageIO.read(file);
        int height = read.getHeight();
        int width = read.getWidth();
        // 对宽高进行缩小0.5倍
        height = height - (int) (0.5 * height);
        width = width - (int) (0.5 * width);
        // 创建等同大小的文件进行覆盖
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
        // 获取刷子
        Graphics2D graphics = image.createGraphics();
        // 绘制图片
        graphics.drawImage(read, 0, 0, width, height, null);
        // 释放画笔
        graphics.dispose();
        // 生成图片
        String type = file.getName().substring(file.getName().lastIndexOf(".") + 1);
        //             System.out.println("type = " + type);
        ImageIO.write(image, type, new File("F:\\JavaRepo\\CrossFireAndLive\\zimgs", file.getName()));

    } catch (Exception e) {
        throw new RuntimeException(e);
    }

}

前端代码的准备：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body{
		/* height: 100vh; */
	}
  </style>
</head>
<body>
  <div id="app" style="overflow: hidden;">
     <el-carousel indicator-position="none" height="95vh" indicator-position="outside">
        <el-carousel-item v-for="url in urls" :key="url">
          <el-image
                style="width: 100%; height: 100vh"
                :src="url"
                :fit="fit"></el-image>
        </el-carousel-item>
      </el-carousel>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
			fit: 'contain', //让图片按照原来的比例展示
			urls: [
				'./01c3d7fd5c5cefbcfe6bf6e256fcb611(2).jpeg',
			]
		}
      },
	  created() {
		  axios.get('./data.json').then(resp=>{
			  console.log(resp.data.urls);
			  this.urls = resp.data.urls;
		  })
	  }
    })
  </script>
</html>