分享一个基于Node的名片设计网站

图片描述

我如今本职工做是UI设计,可是在工做中也喜欢了解和学习前端技术,这是小网站是我去年开始学习Node以后开发的我的项目。这个项目边学边作,断断续续也有半年时间吧,期间不断增长新功能,优化用户体验。如今由于想构想新项目,不打算继续更新,因此分享给感兴趣的朋友,你们互相学习。html

项目地址 https://github.com/luosijie/card前端

预览地址 http://card.luosj.megit

安装

  1. 安装MongoDB并成功启动github

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

  3. npm install浏览器

  4. npm start服务器

  5. 访问 localhost:3000学习

使用到是技术

  1. Node + Express优化

  2. MongoDB + Mongoose网站

实现功能

网站的基本功能是管理员编辑好名片模板并上传到服务器,用户经过简单编辑名片模板下载直接拿去打印店打印

  1. 登陆注册

  2. 图片简单处理

  3. 名片模板的上传和保存

  4. 名片图片的打包和下载

  5. 名片模板收藏

  6. MongoDB数据增删改查

使用到的插件

  1. html2Canvas 用于将html解析为图片

  2. jsZip 用于图片打包

  3. fileSaver 用于导出打包后的zip文件

网站的不足

  1. 代码组织比较乱 ———— 哪天心情好再来整理

  2. 没有兼容浏览器,目前只谷歌 火狐能够正常访问 ———— 人生苦短,我不兼容

  3. 没有管理后台 ———— 这是一个比较大的问题

项目结构

structure

项目部分截图

首页

模板列表用hbs模板渲染

structure

用户编辑页

看起来简单的页面结果花的时间最多

structure

管理员上传模板

注意:这个页面的权限只有 用户名为admin 才能够访问,没办法就是这么不科学

structure

我的中心

personal

先这样了,欢迎你们star

相关文章
相关标签/搜索