前端(HTML5)课程中实际项目案例分析

以实际项目开发过程教学,让编程学习变得更简单

项目式教学方式分析



       学习软件开发课程,最终的目标就是开发软件项目,基于IT课程的学习特点, 项目式教学才能让学猿更好更全面的掌握技术,也能让学到的技术更实用。 学习猿地采用多个项目贯穿式教学,每个课程关联的技术点很多, 在有限的时间内很难讲解全面,而通过项目植入到课程中,就可以赛选出实际应用的知识点重点讲解。 另外,通过项目功能模块应用的技术反推出来的知识点,能让学猿更容易理解知识点的应用,达到学以致用的目的, 又可以举一反三,可以快速提高。也可以通过项目实战挖掘课程中没有讲到的新知识点, 扩展一下应用的知识面。

       大多数有丰富经验的程序员拥有自己的私人开发库,可以让程序猿在开发新项目时使用大约30%的重用代码来开发软件, 课程中的多个不同类型的项目也可以为学猿积累自己的私人开发代码库。

       另外,教学中的项目应用和实际商业项目还是有一些区别的,首先,并不是项目越大、需求越复杂越好, 因为用大项目教学让学员感觉很混乱,达不到学习的目标,有可能起到反作用。其次,教学项目使用的都是学员比较常见的类型项目,这样的项目需求不需要讲解学猿也很清除业务,能直接联想到开始步骤上, 就可以把精力都放在功能实现上。还有就是在教学项目中不会去实现商业项目中所有的功能, 而是会去简化功能和业务流程, 去除重复的功能模块, 同时也会在项目中应到一些反例代码,为了讲解不同的知识点的应用。 而教学项目和商业项目相同的地方也很多, 比如在软件工程方面的软件开发流程、开发工具使用、代码管理、团队合作,以及与客户沟通等方面是一致的。 当然,教学项目也有一些超过商业项目的地方,例如在具体的一些项目模块基础上,会设想多情况扩展开发下去,为让学员接触到更多的知识点。

       学员在项目阶段学习时,不仅只为实现表面的功能, 一定要做到像素级别的还原, 只有问题考虑周全, 注重每个细节,反复实验, 才能在项目开发课程中得到全面的提高。

项目一 网络购物系统



        随着社会经济的发展和人们消费水平的不断提高,购物已经作为人们生活中必不可少的重要内容。 进入21世纪后,以计算机与网络技术为基础的信息应用系统处于蓬勃发展的时期,互联网已经逐渐成为人们的快速获取、发布和传递信息的重要渠道, 各种各样的购物方式也正在冲击和改变着人们现有的传统购物模式,为迎合广大消费者对购物模式的多元化需求,越来越多的商家在网上建立起在线商城, 将商家各方面的产品宣传与服务呈现在网络中,不仅改变了商家原有的经营模式与经营理念,也为商家带来了更高的经济效益,对于广大商家来说,企业购物网络平台的开发管理与维护已显得至关重要。

项目背景:

        进入21世纪,Internet迅速普及,网络经济、知识经济不断创造新的奇迹,人类进入真正的信息时代。 电子商务是全球化、信息化的体现和整合,是全球化、信息化发展的必然结果,它正在改变社会的经济生活,进而改变整个世界。电子商务作为一种新的经济模式, 为世界经济赋予无限的发展空间,为人们创造无限的想象空间,给全球经济注入新的活力,企业界、政府部门纷纷参与到这一新的经济模式中来。 电子商务提供网上交易和管理等全过程的服务,其所提供的便利包括提高了企业的销售能力,尤其是国际范围内的销售;节省企业开支; 增加客户和企业的联系;提高服务质量。总之,电子商务增强了企业的竞争力。 本文给出了电子商务的概念,讲述了电子商务的发展过程、现状和将来的发展趋势。

项目目标:

       本系统是采用B2C模式,根据网络购物系统的现状和实际要求而分析设计的电子商务平台。 分别对用户管理、类别管理、商品管理、购物车管理、订单管理、留言管理及支付管理等主要业务进行了用例分析和数据需求分析, 采用B/S的三层架构体系和MVC的设计模式架构系统及NOde技术构建了网站的页面,并实现了系统用户管理、 订单管理、类别管理、购物车管理、支付管理等主要功能模块,最后总结和分析了该系统的优缺点和系统存在的问题及未来发展的方向。

项目功能:

       该项目是基于Vue技术栈的电商项目, 是一个前后台分离的全栈PC端Web SPA,基本包含了经典电商项目的所有核心功能, 如商品, 购物车, 订单, 支付等模块。 核心的功能模块包括: 用户注册/登陆, 个人中心, 商城首页, 商品秒杀,商品搜索,商品详情, 购物车, 订单, 支付等模块等。


项目涉及技术点:

       一个完整的Web系统不仅需要有前端界面, 还需要有后台系统才能让系统运行起来。前台: Vue + Vuex + Vue-Router + ES6 + Axios, 后台: Node + Express + MongoDB + Mongoose。


ES6 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。
Vue ue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Axios 一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 axios.js 就是眼下比较流行的一种 ajax 框架
Node Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
MongoDB MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。

项目测试:

       在完成代码开发之后,需要对代码进行功能测试,按照功能图一个一个的进行测试,如果功能出现异常,则第一时间进行问题修复,然后重新开始新一轮的测试,因为代码变动很可能导致原来已经测试的功能出现异常。


项目上线:

       项目测试完毕没有Bug之后,需要做两件事情,一是将代码通过FTP工具上传到云空间,二是将数据库数据导出,并通过工具导入到空间对应到数据库中,完成这两件事之后,我们就可以通过域名访问我们的网站了。效果图如下:



项目二 AI招聘系统



        招聘已然成为人力资源管理的热点,猎头公司、招聘网站、人才测评公司等配套服务机构应运而生, 其核心在于为企业提供了人才信息渠道。这些专业机构为企业提供服务,猎头公司、招聘网站解决的是“符合企业要求的人才在哪里”的问题, 人才测评公司解决的是“这个人到底有何素质、适合做什么”的问题。随着企业用人需求的弹性化和动态变化,需要企业内部专业经理们与外部专业机构解决“企业到底需要什么样的人”这一问题。

项目背景:

       21世纪,随着社会与经济的快速发展,人才资源已经成为了影响社会向前发展的决定性因素。而各个领域、公司、 单位的人才流动也越来越频繁,这就造就了“人力资源是现代企事业单位在越来越激烈的社会竞争中立于不败之地的重要保证”的现象。那么,企事业单位怎么样才可以用经济的方式去招募到自己心仪的人才, 同时,如何让求职人员能更经济方便地找到自己心仪的职位,这是职业招聘单位和求职者都比较关心的问题。本系统就是基于这个目的而开发设计的。 本系统以B/S(浏览器/服务器)体系结构作为基本架构。

项目目标:

       介绍基于WebAPP在线人才招聘系统的设计与实现过程。详细介绍系统的需求分析,系统功能结构,业务流程,数据库设计,给出系统主要部分的实现方法与过程。 该系统采用React框架模式,在Web应用开发中把界面和业务逻辑分离,大大方便代码开发和管理,提高开发效率,同时系统运行中具有数据通信快,兼容性好,运行效率高等优点。

项目功能:

       该项目是基于新版本 React 的全栈项目,此项目为一个前后台分离的招聘的移动端Web SPA, 包括前端应用和后端应用,功能类似于BOSS直聘。 项目功能包括: 用户注册/登陆, 用户中心, 用户信息完善,Boss列表, 牛人列表界面, 实时聊天等功能模块。


项目涉及技术点:

       一个完整的Web系统不仅需要有前端界面, 还需要有后台系统才能让系统运行起来。前台: React全家桶 + ES6 + webpack, 后台: Node + Express + MongoDB + SocketIO。


React React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时, 它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
Express Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。
SocketIO Socket.io提供了基于事件的实时双向通讯 Browser和WebServer间的实时数据传输是一个很重要的需求,但最早只能通过AJAX轮询方式实现。

项目测试:

       在完成代码开发之后,需要对代码进行功能测试,按照功能图一个一个的进行测试,如果功能出现异常,则第一时间进行问题修复,然后重新开始新一轮的测试,因为代码变动很可能导致原来已经测试的功能出现异常。


项目上线:

       项目测试完毕没有Bug之后,需要做两件事情,一是将代码通过FTP工具上传到云空间,二是将数据库数据导出,并通过工具导入到空间对应到数据库中,完成这两件事之后,我们就可以通过域名访问我们的网站了。效果图如下:


项目三 新闻阅读微信小程序



        微信小程序具有方便快捷、不占手机内存、易于视觉化新闻传播等优点。对于使用频率高的新闻APP来说,小程序为客户端开辟了一条新的渠道,同时也会带走部分可营销、 高体验的用户时间。对于使用频率低的新闻APP来说,小程序是一个值得高度重视的平台 。对于用户使用频次一般、依靠生活服务、工具型的新闻类APP而言,小程序很有可能对其产生不利影响。因为小程序的特性决定了它最适用的场景就是"低频"、"服务"和"刚需"。

项目背景:

       微信小程序具有方便快捷、不占手机内存、易于视觉化新闻传播等优点。对于使用频率高的新闻APP来说, 小程序为客户端开辟了一条新的渠道,同时也会带走部分可营销、高体验的用户时间。对于使用频率低的新闻APP来说,小程序是一个值得高度重视的平台。 对于用户使用频次一般、依靠生活服务、工具型的新闻类APP而言,小程序很有可能对其产生不利影响。因为小程序的特性决定了它最适用的场景就是"低频"、"服务"和"刚需"。

项目目标:

       对于新闻资讯行业利用微信小程序构建阅读新模式,实质上并不难,只要从小程序的功能和特性出发,便可以找寻到小程序存在的价值。小程序应用在中低频应用当中,而且,操作和使用更加的便捷。 所以对于新闻资讯微信小程序要构建阅读新世界,最为主要的就是要实现这两个功能,具体到实施,可以搭建地方性,区域性,兴趣爱好等的新闻资讯微信小程序,这样开发,虽然面对的用户基数变少,但是用户却更加的精准了。

项目功能:

       现在各大新闻类网站,和新闻APP,已经嗅到了微信小程序带来这一波影响,所以他们都在纷纷的开发着属于自己的微信小程序, 其中的激进者就是今日头条,上线,下线,再次上线,今日头条来回的折腾虽然很麻烦,但是毫无疑问的是这从另一方面阐释了微信小程序应用场景的广泛性。 阅读的模式,由原来的报纸,演化到PC端,进化到移动端,现在APP的时代已经渐行渐远。微信小程序的出现,对于新闻资讯行业的影响无疑是巨大的,这种更为便捷的模式, 终将使得我们的生活更加的美好。新闻是我们获取信息资源的一种新的方式,通过更加便捷的小程序一种新的阅读模式终将建立起来。 包括启动页:RPX自适应、Lmage等组件的应用, 新闻列表页:Swiper滑动组件、Template模板化编程、WX:for列表渲染。 新闻详情页:默认状态栏、自定义状态栏、ActionSheet组件、收藏管理等。


项目涉及技术点:

        项目核心技术栈包括页面布局使用Flex布局和Rem适配方案, 数据渲染使用模板字符串传递数据, 前端特效使用jQuery库, 小程序中的图标使用字体图标代替图片。


小程序组件 框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发
WXML 要学习WXML(腾讯自己搞的语言--类似于 Html5)
WXSS 为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性, WXSS 对 CSS 进行了扩充以及修改
微信特有API 框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等
微信特有API (腾讯自己搞的语言--类似于 Javascript) WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构

项目测试:

       在完成代码开发之后,需要对代码进行功能测试,按照功能图一个一个的进行测试,如果功能出现异常,则第一时间进行问题修复,然后重新开始新一轮的测试,因为代码变动很可能导致原来已经测试的功能出现异常。


项目上线:

       项目测试完毕没有Bug之后,需要做两件事情,一是将代码通过FTP工具上传到云空间,二是将数据库数据导出,并通过工具导入到空间对应到数据库中,完成这两件事之后,我们就可以通过域名访问我们的网站了。效果图如下:


项目四 影院定座WebAPP项目



       电影作为一种提升生活质量的方式越来越得到上班族的认可,电影的海报经常会出现在公交站台、地铁等大多人出行的必经之地,但如果用户想要获取更多电影的信息, 就需要自己进行再次搜索。电影查询小程序,可以将二维码放在海报上,用户扫二维码即可获取电影视频预告、上映时间及影院,感兴趣的话可以立刻选择影院、订票、选座等连贯性操作。

项目背景:

       电影购票小程序提供电影相关资讯,包括电影的评价、电影剧情介绍、电影花边新闻等,丰富的电影解读可以直接戳中观点, 通过不同的角度去分析电影不仅可以更好的吸引用户去看,还能帮助用户去选择要看的电影。再结合精彩的新预告片和影片推荐,更能吸引用户的兴趣。

项目目标:

       中国电影市场中更值得关注的是利用影城购票选座小程序买票的已经超过线下,超过六成的网民在手机上买过电影票,20岁至29岁的用户渗透率超过半数,白领覆盖到六成。 中国电影市场之巨大是每个投资者都眼馋的一块市场。影城购票选座小程序开发很好地迎合了这个市场发展的需要,使购票变得简单,快捷。

项目功能:

       开发一个WebAPP的影院定票系统的应用, 最基本的模块包括:电影资讯、选座购票、优惠购票、在线互动、分享功能、退票改签等。


项目涉及技术点:

        在这个项目中需要通过以下技术实现:1. Gulp + Webpack + Git + Sass 实现前端工程化、自动化开发 2. 移动M站布局技巧、屏幕适配与事件处理 3. Swiper、Better-Scroll等热门插件工具 4. Director.js + Handlebar.js 打造高体验RMVC架构的SPA单页应用 5. Canvas/Navigator等H5高级API应用



项目测试:

       在完成代码开发之后,需要对代码进行功能测试,按照功能图一个一个的进行测试,如果功能出现异常,则第一时间进行问题修复,然后重新开始新一轮的测试,因为代码变动很可能导致原来已经测试的功能出现异常。


项目上线:

       项目测试完毕没有Bug之后,需要做两件事情,一是将代码通过FTP工具上传到云空间,二是将数据库数据导出,并通过工具导入到空间对应到数据库中,完成这两件事之后,我们就可以通过域名访问我们的网站了。效果图如下:


项目五 音乐播放器APP



       最初的音乐APP是音乐播放器的延续。音乐APP最初的定义应该都是做好一款移动端音乐播放器。 这是产品的基本需求。在线音乐收听和下载是对基本需求最好的满足,再也不用把手机连接到电脑,从电脑下载好音乐再传输到手机了。 当然,最初的时候,2G网速有限,费用又高,基本还是通过电脑传输。直到3G、4G、WIFI普及后,用户有了便捷的上网环境,在线音乐才有了施展的空间。 由于之前在PC端养成的习惯,手机音乐播放器用户还是会选择熟悉的QQ音乐、酷狗、酷我。随着技术的进步,用户的需求也逐渐发生了变化,用户对于音乐APP的需求不再局限于音乐播放器,音乐APP随之发生了一些改变。

项目背景:

       手机进化到功能机,可以把音乐下载到存储卡用自带播放器播放。直到智能机出现,各种各样的音乐APP涌现出来,不用下载,可以在线收听下载音乐,音乐才进入了一个新的发展时代。

项目目标:

       一款音乐播放器,能导入播放本机歌曲。在使用一款新的APP前,还没有歌单,一下子也不知道听什么,所以得有点存货。一般来说要么本机存储的, 要么从其他APP下载的歌曲(因为版权原因,某个APP上可能不能收听下载你想要搜索的音乐),希望能够导入进来。或者能够自动导入进来。现在主流的音乐APP都具备这个功能。 问题是有时候本机存储的音乐太多,用户扫描时也懒得花时间去筛选要添加的文件夹,因此,遇到过连在英语学习软件里下载的英语音频也一起导入进来了,歌单弄得乱七八糟的。 曲库齐全,想听什么歌的时候可以搜索的到。曲库完整性方面,据新闻报道,酷狗音乐的曲库应该是目前中国最大的。不过,一千个人眼中有一千个哈姆雷特,用户评价不一, 也没有确切的数据,这里不做详细讨论。由于版权原因,一个APP短期内不能提供所有的音乐收听下载。如果在曲库数量上不占优势,那么就需要在其他的方面去吸引用户的注意了。

项目功能:

       该项目是一个原生项目,类似于市场上音乐播放软件,主要是给用户提供观看视频,搜索音乐功能。 有导航页,无缝滑屏,tab选项卡,竖向滑屏,自定义滚动条。


项目涉及技术点:

        绝对定位模拟固定定位,横向滑屏,橡皮筋效果,加速效果 无缝滑屏运用防抖动逻辑,竖向滑屏实现即点即停,使用原生JS + Less布局 + rem适配 + 自定义滚动条 + 移动端防抖动 + 即点即停。



项目测试:

       在完成代码开发之后,需要对代码进行功能测试,按照功能图一个一个的进行测试,如果功能出现异常,则第一时间进行问题修复,然后重新开始新一轮的测试,因为代码变动很可能导致原来已经测试的功能出现异常。


项目上线:

       项目测试完毕没有Bug之后,需要做两件事情,一是将代码通过FTP工具上传到云空间,二是将数据库数据导出,并通过工具导入到空间对应到数据库中,完成这两件事之后,我们就可以通过域名访问我们的网站了。效果图如下:


项目式教学额外的收获



       通过课程中多个项目的植入讲解,除了可以收获技术和项目代码之外,更能收获软件工程方面的知识,和讲师经验的分享。可以直接获得项目的管理,其中涉及团队协作,项目代码管理,项目进度管理,开发团队的维护和管理。 除此之外还可以了解到如何进行客户沟通,以及整个项目的开发流程,宏观认识项目。 这些项目中贯穿了项目工程内容,涉及代码管理、团队协作、项目流程、客户沟通以及相关工具的使用。

代码管理
  • - Git安装
  • - 代码时光机
  • - 多人合作
  • - 分支特性
  • - 远程仓库
Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。 其中很多的特性相较于svn,cvs更加的强大,特别是分支特性,更好的维护产品代码,保证代码的健壮性。
团队协作
  • - 文档管理
  • - 设计图管理
  • - 团队人员分工
  • - 员工沟通技巧X
团队协作是团队运作非常重要的一个环节,直接影响整个项目能否顺利完成。其中还包括员工的沟通,考核已经后续的升职加薪。
项目开发流程
  • - 原型制作
  • - 设计图制作
  • - 数据库设计
  • - 框架开发
  • - 软件测试
  • - 上线部署流程
了解整个项目的开发流程对开发人员有着非常重要的意义,开发人员可以在宏观角度来认识项目,并提高和其他部门之间的配合,为后续的升职加薪做好准备。
客户沟通
  • - 客户沟通
客户是公司生存的经济来源,与客户的沟通显得至关重要,企业技术总监亲自讲述与客户沟通的那些事。

加群主微信
购买后
拉进交流群
学习交流
¥2048元 立即购买
¥4096元 立即购买