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

news/2024/7/4 22:12:47/文章来源:https://blog.csdn.net/weixin_34059951/article/details/89041080

图片描述

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

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

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

安装

  1. 安装MongoDB并成功启动

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

  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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_801979.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站架构资料收集整理

1.系统概况图图1.1 系统架构概况图图1.2 较为完整的系统架构图2.系统使用的主要技术下列排名不分先后2.1前端JavaScript,html,css,silverlight,flashJqueryJavascript类库,用来简化html的操作,事件处理&…

阿里云服务器快速创建个人网站

宝塔面板快速创建个人网站 如今拥有一个私人的网站已经是一件非常轻松且简单的事情。通过以下的步骤可以帮助你创建一个属于自己的个人网站。不需要任何的技术基础。纯属小白。(小编个人编辑,如有问题。还请大佬指点!)。 创建一…

最新Do Not Track标准问世:网站都应尊重用户选择

著名的Do Not Track(请勿追踪)设定,是在2009年就已经提上日程的,这个选项随后在过去几年中被加入到了所有主流的浏览器产品中,在选择该选项以后,浏览器就会向网站发出一个通知,要求网站不对用户…

《社交网站界面设计(原书第2版)》——2.6 重写本

2.6 重写本 2008年在Adaptive Path公司MX周的一次演讲中,Matt“blackbeltjones”Jones在谈到Dopplr(为经常光顾社交网络的人所创建的网站)时,建议将重写本的隐喻作为“社交工具的模型”:我们的内容会变得更加简明&…

前端工程师必备的17个实用网站

前端框架、素材网站 目录 一、配色类网站 二、图标类网站 三、插件类网站 四、素材类网站 五、字体类网站 六、工具类 七、UI框架 UI框架: http://element-cn.eleme.io/#/zh-CN/component/typographyhttps://muse-ui.org/#/zh-CNhttps://youzan.github.io/v…

搭建网站必不可少的知识5

域名的解析和绑定方法解析就是将网站的IP地址翻译为域名,方便记忆。我们在域名和网站空间购买后就要进行解析了,那么怎么解析呢?在域名中选择要进行解析的域名,点击“解析” 点击“添加解析”记录类型是A记录,主机记录…

html一个页面中切换多个页面_一个页面多个重复链接,对SEO有作用吗?

在以往的SEO工作中,我们经常会发现一个问题,很多SEO人员,为了提高目标页面的关键词排名,经常是在同一页面,发布大量重复指向目标页面的链接。 那么,一个页面,多个重复链接,对SEO有作…

大型网站技术架构

最近我在阅读 2 本关于大型网站架构的书:《大型网站技术架构——核心原理与案例分析》李智慧、《大型网站系统与 Java 中间件实践》曾宪杰。 我期望从这些书中学习到大型网站是如何做架构的,这个过程会遇到什么问题。当看完这 2 本书后,我总结…

云服务器 ECS 搭建WordPress网站:安装 WordPress

云服务器 ECS 搭建WordPress网站:安装 WordPress 安装 WordPress请先下载最新版的 WordPress,网址: https://cn.wordpress.org/ 。也可直接到阿里云市场选择WordPress镜像完成一键部署 操作步骤 1.将下载的安装包解压缩。 2.打开 Xshell&…

我的网站搭建 (第九天) 博客统计排行

2019独角兽企业重金招聘Python工程师标准>>> 在阅读计数功能之后,就可以可根据每篇博客的阅读量来对博客进行热门统计排行了,如阅读周榜,月榜,总榜。基本上只要实现其中一个,其他两个也能照着做出来&#x…

网站服务器去掉小尾巴,新浪微博来自360浏览器怎么取消 更改网页版小尾巴方法...

当大家使用电脑登录新浪微博发微博时,会发现微博下方会有来自360安全浏览器的文字,看上去很坑爹有木有!其实这也算是微博的小尾巴,去掉的方法并不是在微博里设置,而是在大家使用360浏览器上进行更改,小编将…

VS“新建网站”与“新建Asp.Net Web 应用程序”的区别

今天新建网站的时候,发现,原来新建网站有两种方法。 1.原来一直用的是直接新建---网站 然后添加后解决方案的项目名称是路径的名称 2.还有一种是新建--项目,然后选web--新建asp.net.web 项目名称是: 新建网站与新建Asp.Net Web 应…

怎样拥有一个网站?从“域名注册”到“网站成功运行”全程概况总结!

根据个人多年建站经验,总结出从“域名注册”到“网站成功运行”的建站说明,供广大朋友学习,希望大家少走弯路! 大概步骤如下: 1.注册域名; 2.开通网站主机(空间); 3.…

VS发布网站时,报错提示:“未能将文件xxx复制到xxx,未能找到文件xx”三种解决方案!

发布网站时候大家可能会遇到这样的情况,就是报错提示说:“未能将文件xxx复制到xxx,未能找到文件xx”,这个问题一般来说有三种解决方案,个人倾向第三种,如图: 解决方案如下: 方案一、…

ASP.NET网站页面加载及运行效率等多方面实战优化

网站加载内容较多,图片、Flash等文件较大、请求次数较多、页面不具有缓存性等等都会影响网站的页面加载速度和运行效率。之前做过很多网站,但是基本上都没有进行过优化,比如运用缓存等技术。最近有一个网站加载内容比较多,例如图片…

2015年个人收获-成果、经验分享(项目经理、集成资质、网站开发、服务器等)

2015年,对我来说是忙碌的一年,是幸运的一年,是收获的一年。 一、坚持写CSDN博客,将技术和遇到的问题分享给大家! 坚持写博客其目的主要有两个,一是为了自己积累知识和锻炼,而是为了和大家分享…

浏览器模式调整-网站显示问题根本解决方案(Winform和CMD程序解决)

相信大家上一些网站经常遇到网站错乱和控件显示不全的问题,那是因为很多网站对浏览器的兼容性比较差,特别是一些网上银行(中、农、工、商银行等)、公共服务网站(社保、公积金等政府网站)等,虽然…

仿“唯品会”钓鱼网站分析

引言: 昨天晚上,一个朋友找我说自己被骗了,了解到原来是打开了钓鱼网站输入了自己信息和银行卡信息,虽然到最后一步发现了猫腻,但是信息已经泄露出去了,据说是唯品会的卖家给她发的信息,说之前买…

asp.net政府企业网站前台+后台源码

最近几年比较流行这样的政府网站,一般以红色和蓝色为主,这里先展示红色的,包括前台和后台源码,后台可以增删改查前台发布的文章,管理用户,管理幻灯片,设置信息和超级链接等等,一般的…