<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          我的表情包網(wǎng)站上線啦!

          共 1770字,需瀏覽 4分鐘

           ·

          2021-10-24 16:21

          代碼開源,適合學習

          大家好,我是魚皮,時隔兩周,我的表情包網(wǎng)站終于上線啦!

          網(wǎng)站名叫 爸爸 ,隨便取的名字,感覺威武霸氣、還挺好記。網(wǎng)站的 Logo 是一個標志的小禿頭,透露著作者內(nèi)心的悲涼。

          網(wǎng)站地址:http://father.cool ,這是我特意挑選的域名,是不是很酷~

          功能介紹

          進入網(wǎng)站,可以看到豐富的表情包,目前共收錄了幾萬張表情,如果不是因為貧窮,還會收錄更多!

          爸爸表情包網(wǎng)站

          可以輸入文字搜索表情,也可以選擇對應(yīng)的標簽,持續(xù)整理中~

          程序員相關(guān)表情

          當你看上了一個表情圖后,點擊它,就能進入下載界面。在這里,你可以自由編輯表情圖、給表情添加配字,制作新的表情包:

          是不是很方便呢?

          如果找不到合適的素材圖,你也可以上傳自己的表情,審核通過后就會公開可見,歡迎大家分享~

          功能大概就這些,雖然現(xiàn)在項目功能不多,但后面還會繼續(xù)開發(fā),希望能把這個表情包網(wǎng)站做大做強。

          搜表情,找爸爸!

          制作過程

          其實這個項目并不新鮮了,也沒什么創(chuàng)意,我做它主要是為了給大家演示項目的完整制作過程,幫大家學習。

          因此,整個網(wǎng)站幾乎全程直播制作,從需求分析、到技術(shù)選型、到前后端開發(fā)、再到部署上線,都給大家演示了。

          但時間和水平有限,不希望把項目搞的太復(fù)雜,事先也沒空做任何準備,所以總共花了十幾個小時,就草草上線一版給大家體驗了。

          結(jié)果,剛上線不到 5 分鐘,網(wǎng)站就崩了!

          所以我又做了一點點 Bug 修復(fù)和優(yōu)化,這才正式上線,而且這次肯定還會出一堆 Bug!

          這個網(wǎng)站雖然看起來簡單,但細節(jié)很多,不自己做一遍,真的不知道會遇到什么莫名其妙的問題。所以,想學好編程,多做項目實踐是很必要的!

          整個項目制作過程如下:

          1. 需求分析
          2. 技術(shù)選型
            • 編程語言
            • 開發(fā)框架
            • 數(shù)據(jù)庫
            • 接口文檔
            • 對象存儲
            • CDN
            • 開發(fā)框架
            • 組件庫
            • 圖像編輯
            • 圖像合成
            • 確定前端
            • 確定后端
          3. 開發(fā)
            • 增刪改查
            • 文件上傳
            • 項目初始化
            • 整合框架 + 編寫 Demo
            • 設(shè)計庫表
            • 開發(fā)增刪改查
            • 開發(fā)文件上傳
            • 多環(huán)境
            • 項目初始化
            • 組件引入 + 編寫 Demo
            • 設(shè)計界面
            • 開發(fā)界面
            • 模擬交互
            • 開發(fā)圖像編輯
            • 開發(fā)圖像合成
            • 前端
            • 后端
            • 前后端對接
          4. 上線前準備
            • 日志
            • 庫表同步
            • 基礎(chǔ)數(shù)據(jù)
            • 內(nèi)容安全審核(騰訊數(shù)據(jù)萬象)
            • 界面優(yōu)化
            • 統(tǒng)計分析
            • 前端
            • 后端
            • 代碼優(yōu)化
            • 測試
            • 域名
          5. 發(fā)布上線
            • 編寫 Dockerfile
            • 前端部署
            • 后端部署
            • 域名配置

          技術(shù)選型

          為了幫大家學習,我特意選用了主流技術(shù)來實現(xiàn)這個網(wǎng)站,比如前端 Vue 框架、后端 Java SpringBoot、MySQL 數(shù)據(jù)庫、Nginx 服務(wù)器、Docker 容器等,項目的結(jié)構(gòu)和代碼也都是我精心編寫的。

          為了讓大家都能早日上線自己的網(wǎng)站,我把整個項目的代碼 完全開源 給大家(GitHub 搜 liyupi/father),大家可以輕松獲取學習。

          學了這套代碼后,相信你能做出很多類似的網(wǎng)站,比如攝影網(wǎng)站、壁紙網(wǎng)站、作品集網(wǎng)站、圖床等。

          整個項目技術(shù)選型如下:

          前端

          • 框架:Vue 3
          • 組件庫:Ant Design Vue 2
          • 請求:Axios
          • 圖像處理:Vue Cropper
          • 圖像合成:Html2Canvas
          • 文件下載:FileSaver
          • 顏色選擇器:Vue3 Picker

          后端

          • Java 8
          • 開發(fā)框架:SpringBoot 2.x
          • 數(shù)據(jù)訪問:MyBatis + MyBatis Plus
          • 項目管理:Maven
          • 接口文檔:Swagger + Knife4j

          存儲

          • 數(shù)據(jù)庫:MySQL
          • 對象存儲:Tencent COS
          • CDN:Tencent CDN

          部署

          • 前端:Nginx + Linux Server
          • 后端:容器 + 自動化構(gòu)建(微信云托管平臺)

          其他

          • 內(nèi)容安全:Tencent 數(shù)據(jù)萬象
          • 運維:寶塔 Linux
          • 統(tǒng)計:百度統(tǒng)計




          在本公眾號后臺回復(fù)【爸爸】即可獲取源碼:

          ?? 點擊下方閱讀原文可直達網(wǎng)站,歡迎大家體驗,請對它溫柔一點謝謝~

          以上就是本期分享,我是魚皮,點贊 + 在看 還是要求一下的,祝大家都能心想事成、發(fā)大財、行大運。

          往期推薦

          我竟被這個 Bug 坑了一周!

          摔到老三的 Java,未來在哪?

          不敢想,做個博客竟如此簡單!

          怒肝 Linux 學習路線,這回不難!

          這些網(wǎng)站,陪我過了 5 年

          瀏覽 361
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  黄色毛片学生妹免费看视频 | 第一页国产 | 中国婬乱a1级毛片多女 | 黄色福利社 | 免费收看一级黄色电影 |