分享一個(gè)基于Node的名片設(shè)計(jì)網(wǎng)站

LeoHsiun 發(fā)布于2019-06-26 17:16 / 3070人閱讀

摘要：我現(xiàn)在本職工作是設(shè)計(jì)，但是在工作中也喜歡了解和學(xué)習(xí)前端技術(shù)，這是小網(wǎng)站是我去年開始學(xué)習(xí)之后開發(fā)的個(gè)人項(xiàng)目?，F(xiàn)在因?yàn)橄霕?gòu)想新項(xiàng)目，不打算繼續(xù)更新，所以分享給感興趣的朋友，大家互相學(xué)習(xí)。

我現(xiàn)在本職工作是UI設(shè)計(jì)，但是在工作中也喜歡了解和學(xué)習(xí)前端技術(shù)，這是小網(wǎng)站是我去年開始學(xué)習(xí)Node之后開發(fā)的個(gè)人項(xiàng)目。這個(gè)項(xiàng)目邊學(xué)邊做，斷斷續(xù)續(xù)也有半年時(shí)間吧，期間不斷增加新功能，優(yōu)化用戶體驗(yàn)。現(xiàn)在因?yàn)橄霕?gòu)想新項(xiàng)目，不打算繼續(xù)更新，所以分享給感興趣的朋友，大家互相學(xué)習(xí)。

項(xiàng)目地址 https://github.com/luosijie/card

預(yù)覽地址 http://card.luosj.me

安裝

安裝MongoDB并成功啟動(dòng)

git clone "https://github.com/luosijie/card.git"

npm install

npm start

訪問 localhost:3000

使用到是技術(shù)

Node + Express

MongoDB + Mongoose

實(shí)現(xiàn)功能

網(wǎng)站的基本功能是管理員編輯好名片模板并上傳到服務(wù)器，用戶通過簡(jiǎn)單編輯名片模板下載直接拿去打印店打印

登錄注冊(cè)

圖片簡(jiǎn)單處理

名片模板的上傳和保存

名片圖片的打包和下載

名片模板收藏

MongoDB數(shù)據(jù)增刪改查

使用到的插件

html2Canvas 用于將html解析為圖片

jsZip 用于圖片打包

fileSaver 用于導(dǎo)出打包后的zip文件

網(wǎng)站的不足

代碼組織比較亂 ———— 哪天心情好再來整理

沒有兼容瀏覽器，目前只谷歌火狐可以正常訪問 ———— 人生苦短，我不兼容

沒有管理后臺(tái) ———— 這是一個(gè)比較大的問題

項(xiàng)目結(jié)構(gòu)

項(xiàng)目部分截圖 首頁(yè)

模板列表用hbs模板渲染

用戶編輯頁(yè)

看起來簡(jiǎn)單的頁(yè)面結(jié)果花的時(shí)間最多

管理員上傳模板

注意：這個(gè)頁(yè)面的權(quán)限只有 用戶名為admin 才可以訪問，沒辦法就是這么不科學(xué)

個(gè)人中心

先這樣了，歡迎大家star

云服務(wù)器 GPU云服務(wù)器基于php的網(wǎng)站設(shè)計(jì) 怎樣設(shè)計(jì)一個(gè)網(wǎng)站基于webrtc的視頻會(huì)議系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 基于云計(jì)算的電子政務(wù)公共平臺(tái)頂層設(shè)計(jì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/19019.html