本文作者：程序员鱼皮
代码开源，适合学习
大家好，我是鱼皮，时隔两周，我的表情包网站终于上线啦！
网站名叫 爸爸 ，随便取的名字，感觉威武霸气、还挺好记。网站的 Logo 是一个标志的小秃头，透露着作者内心的悲凉。
网站地址：http://father.cool ，这是我特意挑选的域名，是不是很酷~
进入网站，可以看到丰富的表情包，目前共收录了几万张表情，如果不是因为贫穷，还会收录更多！
爸爸表情包网站
可以输入文字搜索表情，也可以选择对应的标签，持续整理中~
程序员相关表情
当你看上了一个表情图后，点击它，就能进入下载界面。在这里，你可以自由编辑表情图、给表情添加配字，制作新的表情包：
是不是很方便呢？
如果找不到合适的素材图，你也可以上传自己的表情，审核通过后就会公开可见，欢迎大家分享~
功能大概就这些，虽然现在项目功能不多，但后面还会继续开发，希望能把这个表情包网站做大做强。
搜表情，找爸爸！
其实这个项目并不新鲜了，也没什么创意，我做它主要是为了给大家演示项目的完整制作过程，帮大家学习。
因此，整个网站几乎全程直播制作，从需求分析、到技术选型、到前后端开发、再到部署上线，都给大家演示了。
但时间和水平有限，不希望把项目搞的太复杂，事先也没空做任何准备，所以总共花了十几个小时，就草草上线一版给大家体验了。
结果，刚上线不到 5 分钟，网站就崩了！
所以我又做了一点点 Bug 修复和优化，这才正式上线，而且这次肯定还会出一堆 Bug！
这个网站虽然看起来简单，但细节很多，不自己做一遍，真的不知道会遇到什么莫名其妙的问题。所以，想学好编程，多做项目实践是很必要的！
整个项目制作过程如下：
-
需求分析
-
技术选型
-
- 编程语言
- 开发框架
- 数据库
- 接口文档
- 对象存储
- CDN
-
- 开发框架
- 组件库
- 图像编辑
- 图像合成
- 确定前端
- 确定后端
-
开发
-
- 增删改查
- 文件上传
-
- 项目初始化
- 整合框架 + 编写 Demo
- 设计库表
- 开发增删改查
- 开发文件上传
- 多环境
-
- 项目初始化
- 组件引入 + 编写 Demo
- 设计界面
- 开发界面
- 模拟交互
- 开发图像编辑
- 开发图像合成
- 前端
- 后端
- 前后端对接
-
上线前准备
-
- 日志
- 库表同步
- 基础数据
- 内容安全审核（腾讯数据万象）
-
- 界面优化
- 统计分析
- 前端
- 后端
- 代码优化
- 测试
- 域名
-
发布上线
-
- 编写 Dockerfile
- 前端部署
- 后端部署
- 域名配置
为了帮大家学习，我特意选用了主流技术来实现这个网站，比如前端 Vue 框架、后端 Java SpringBoot、MySQL 数据库、Nginx 服务器、Docker 容器等，项目的结构和代码也都是我精心编写的。
为了让大家都能早日上线自己的网站，我把整个项目的代码 完全开源 给大家（GitHub 搜 liyupi/father），大家可以轻松获取学习。
学了这套代码后，相信你能做出很多类似的网站，比如摄影网站、壁纸网站、作品集网站、图床等。
整个项目技术选型如下：
- 框架：Vue 3
- 组件库：Ant Design Vue 2
- 请求：Axios
- 图像处理：Vue Cropper
- 图像合成：Html2Canvas
- 文件下载：FileSaver
- 颜色选择器：Vue3 Picker
- Java 8
- 开发框架：SpringBoot 2.x
- 数据访问：MyBatis + MyBatis Plus
- 项目管理：Maven
- 接口文档：Swagger + Knife4j
- 数据库：MySQL
- 对象存储：Tencent COS
- CDN：Tencent CDN
- 前端：Nginx + Linux Server
- 后端：容器 + 自动化构建（微信云托管平台）
-
内容安全：Tencent 数据万象
-
运维：宝塔 Linux
-
统计：百度统计