「豆包Marscode 体验官」使用AI快速开发图片压缩网站

Echo_Hou
869 阅读3分钟

我正在参加「豆包MarsCode初体验」征文活动：juejin.cn/post/738499…

我们来使用字节的AI编码工具来开发一个小工具——图片压缩网站。

我们在日常学习或者工作中，经常会遇到一些需要上传图片的场景比如上传自己的一寸照、头像等，一些服务端为了减少压力（毕竟文件存储也是要钱的嘛）会限制文件的大小，比如文件大小不能超过5M。这时候我们总会到网上找一些免费压缩的网站，或者花钱找人压缩。运气好一点找到免费压缩的网站，有时候还受限于网络（比如对方服务器在海外）可能压缩速度比较慢。所以我们能不能自己做一个图片压缩服务和网站呢，正好我们试用下豆包Marscode进行快速开发。

因为这是一个比较小的服务，前端也只需要上传、压缩的入口即可，没有前后端交互的必要，所以我们直接使用js语言、Vue框架进行开发。

输入提示词：使用vue给我开发一个图片压缩的网站。豆包Marscode生成的代码：

<template>
  <div>
    <input type="file" @change="fileChange($event)" />
    <img v-if="compressedImage" :src="compressedImage" />

  </div>
</template>

<script>
export default {
  data() {
    return {
      compressedImage: null
    };
  },
  methods: {
    fileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = event => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = 300; 
          canvas.height = 300; 
          ctx.drawImage(img, 0, 0, 300, 300);
          this.compressedImage = canvas.toDataURL(file.type); 
        };
        img.src = event.target.result;
      };

      reader.readAsDataURL(file);
    }
  }
};
</script>

<style scoped>
input {
  display: block;
  margin: 10px 0;
}
img {
  max-width: 100%;
  height: auto;
}
</style>

AI：这个示例使用了 Vue 的数据绑定和事件监听功能，实现了一个图片压缩网站的基本功能。在实际开发中，你可以根据实际需求对代码进行优化和扩展，比如添加更多的交互功能，提高用户体验。如果你有其他功能需求，可以继续向我提问。

因为单独的Vue文件是不能跑起来的，需要一定的依赖包，向AI询问能否给出package.json文件。

{
  "name": "my-vue-project",
  "version": "1.0.0",
  "description": "我的 Vue 项目",
  "main": "index.js",
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "keywords": [
    "vue"
  ],
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli": "^5.0.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

再询问AI，根据vue文件，dependencies中是否还需要添加其他依赖项。答案是不需要，那么我们下载依赖性并运行项目，看看是否能够无Bug跑起来。

npm install
npm run start

还是出现了Bug：

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

但是可以将问题交给AI解决。

因为node_modules文件夹中并没有这个依赖，所以我们单独安装vue-cli-service后再次运行，成功!

小结一下，虽然我们使用AI进行开发依然会有一些小bug要解决，但是使用AI来写一些简单的vue文件来减少我们的工作量还是可以的，对项目开发比较熟悉的话，解决这些小bug也不成问题。

avatar
文章
阅读
粉丝