一、了解、明确需求。
  这个应该是第一步了,不了解需求你就不知道为什么要做,要怎么去做这个项目的工作。
  (1)明确需求是相当重要的,很有必要去和产品经理、设计人员去沟通,需要明白每一个按钮,每一个开关存在的意义,这个需要设计人员足够的了解项目的需求。之前做的一个项目就是这样,工资花了好多钱请了一个UI设计公司设计了一个十分高大上的产品,各种页面各种炫酷,领导觉得很满意,赶紧让我们去做,结果,真正到了我们开发人员手里去开发的时候,才发现有些东西虽然在这里很炫酷,但是根本不应该存在在这里啊,例如你把添加人员的按钮放在人员分组的管理下面,而不是人员管理下面有什么意义呢?结果可想而知,不仅一些功能白设计了而且由于项目时间关系还得我们开发去担任设计,重新设计功能的展示位置,这无疑耽误了项目的进度。
  (2)后台接口问题,一般大的公司前台和后台是分离的,如果分离需要去跟后台确定各种接口的方式,要有一个文档去管理这些后台接口,要有示例、测试数据。现在的一般都是Restful风格的API方便调用。管理的平台第一家公司用的是一个内部的叫OSG的接口管理系统,这里是一个所有接口的中转站,各个部门的接口都从这里走,还有的用的是showdoc进行管理。要是前后端不分离的话,后台便要自己开发,这个用node还是其他语言,也要做好相应的处理。
  (3)、明确功能点,做好任务分配。
  如果你是一个leader,那这一部分工作可能需要你去做了,列举好所有的业务功能点,列成一个Excel文件,明确每个功能的负责人,完成时间,技术难度等。这一步也是很重要的一步。
  (4)开发时间确定
  这个要确保开发时间的充足,不然匆匆忙忙做完一堆的bug改起来也是很痛苦的。这个而且前后台一起进行确认,不然前端做完了,发现后端的接口还没有完善,也是很耽误时间的。
  二、明确技术选型。
  这一步也非常重要,需要去根据设计人员设计,去确认这个工作到底应该去用什么框架去做。
  (1)最基本的页面布局工作,是用bootstrap、flex还是手写css进行布局或者其它,需要去一开始就确定,不然真正做的时候,不同的开发人员用的不同的东西,显然会造成项目代码的混乱。
  (2)页面的Css 是纯手写的还是使用Less或者Sass?这个根据项目的情况酌情处理,一旦使用的话就需要对这些脚本进行编译工作,这个工作可以用一些自动化工具例如Gulp webpack进行,也可以用Sublime(我用习惯这个了)、webstorm 等编辑器自带的插件进行,再或者使用考拉编译进行编译。
  (3)、js的模块化是用sea.js还是require.js ?还是不进行模块化。不进行模块化当项目很大的时候,代码将变得很难维护,所以建议进行模块化,至于到底是用sea.js还是require.js这个就看自己的喜欢的,两者的区别主要是一个是异步一个是同步的,具体区别问问度娘、谷歌。
  (4)、图表模块、table等用什么实现。图表有:echarts、highCharts等、table有bootstrap table 、jgGrid,datatables等等。
  三、自动化工具的使用。
  现在各种自动化的工具很多,例如:webpack, gulp, grunt等等,(技术更新实在太快了),到目前我只会gulp有点low了,感觉跟不上时代的感觉。这一步工作主要是减少一些重复的工作,比如压缩js、css、页面实时刷新等工作。我最近的一个项目是使用的gulp进行项目里的html、js文件进行多语种的处理,用gulp读取了language.js里的每句话对应的变量,然后再页面里进行替换后变成一个英文版和中文版的两份,这样的工作肯定也必须是要自动的工具去处理的,不然写两份的话不得痛苦死。
  四、基础代码的模块化。
  以上都是准备工作,但也是很重要的部分。这一步开始就可以真的开始就进行工作了。
  (1)、如果使用了自动化,自动化的脚本是要写的,具体去如何实现你需要的自动化工作,如何减少重复的,枯燥的工作将极大的提高开发效率,缩短开发时间。
  (2)、再者就是页面的 alert、对话框(confirm)、模态窗(layer,boostrap modal)、验证模块(例如:邮箱,电话号码的验证,不为空的验证等),日期处理(如:date add 、format等),这些需要有人去专门的进行模块化,而且一定要在真正的业务代码开始之前完成,否则后面修改起来将十分费劲。
  (3)还有就是要有人对项目里比较棘手的技术难题提前进行攻关,确保真正的业务开始开发时,技术已经可以实现了。
  五、业务代码的模块化。
  这一步开始就要真正的开始接触业务的东西了。开始这一步之前当然得要有设计的文档,假设你已经有了。功能代码也可以进行模块化进行,将项目设计文档里的出现的比较多的展示的内容进行抽离,例如表格,展示图,共用样式,页面布局等等、抽离出来,指定专门的一个两个开发人员进行开发,进行模块化,然后有一个人进行对这些模块的调用,组装。这部分工作让最熟悉的人去做相应的工作,可以提高开发效率。这部分里面包括和后台进行的接口,所以确保要有接口进行调用。
  六、零碎任务分配。
  大块的功能完了之后就是各个功能点了,这个应该在分配任务的时候分配好,当然也可以当前面的工作完了之后看开发人员的工作情况进行分配,保证每个人都有工作,保证项目不会拖沓。
  七、当上面的工作进行完了之后,整个项目的功能基本就完成了。最好还要让各自的开发人员测试下自己的功能。自测完成后再交由测试进行测试,后续就是bug修复的问题了。
  八、项目总结。
  项目完了总要总结一下,可以开一个内部的会议,将各自开发过程中的难题难点提出来,大家一起听听是怎么解决的,或者谁对别人开发的东西比较感兴趣,想要了解是怎么实现的及内部原理,在这个时候就可以进行沟通了交流了,这样的交流对提高团队人员的技能还是很有帮助的。然后一起聚个餐,增进下团队的友谊。
  过程中如果一个开发人员做了太久了一个类似的功能,可能会感到枯燥,所以避免一个人对一个大块的内容进行开发,连个交流的人都没有,会很痛苦。因为我就有这样的经历。
以上就是我的一些总结,希望对大家能有些许的帮助。如有不同意见,欢迎提出。
———完结
来源 https://www.cnblogs.com/mdengcc/p/6475733.html

Web项目开发流程 PC端的更多相关文章

  1. PC端Web项目开发流程

    从前一直再做前端,突然想到如果有一天领导让自己独立承担一个web 项目的话是否有足够的能力去接这个任务,要学会自己去搭建一些基础的工具信息.所有的这一切在心里都要有个大致的流程,不然真正做的时候难免会 ...

  2. web项目开发流程

    对于一个web项目,在实际编码之前,有一些通用的步骤来planning a website: 0.Defining the project (predr0->dr0) 对于外部项目,客户一般会发 ...

  3. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  4. htm5移动端开发 和 pc端开发

    htm5移动端开发: 移动端开发需要注意的一些事情:http://www.duanliang920.com/learn/web/html5/321.html HTML5移动端手机网站开发流程:http ...

  5. Web项目开发中用到的缓存技术

    在WEB开发中用来应付高流量最有效的办法就是用缓存技术,能有效的提高服务器负载性能,用空间换取时间.缓存一般用来 存储频繁访问的数据 临时存储耗时的计算结果 内存缓存减少磁盘IO 使用缓存的2个主要原 ...

  6. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

  7. Web项目开发介绍及实战项目介绍

    引言 本系列课程我们将学些Golang语言中的Web开发框架Iris的相关知识和用法.通过本系列视频课程,大家能够从零到一经历一个完整项目的开发,并在课程中了解实战项目开发的流程和项目设涉及的各个模块 ...

  8. web理论知识--网页访问过程(附有Django的web项目访问流程)

    当我们闲暇之余想上网看看新闻,或者看个电影,通常的操作是:打开电脑.打开浏览器.输入网址.浏览页面信息.点击自己感兴趣的连接......那么有没有想过,这些网页从哪里来的?过程中计算机又做了什么事情了 ...

  9. flask实战-留言板-Web程序开发流程

    Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...

随机推荐

  1. 网络基础之IP地址和子网掩码

    IP地址 IP是英文Internet Protocol的缩写,意思是"网络之间互连的协议",也就是为计算机网络相互连接进行通信而设计的协议.在因特网中,它是能使连接到网上的所有计算 ...

  2. mac系统默认python3.6

    1. 终端打开.bash_profile文件 终端输入:open ~/.bash_profile   2. 打开.bash_profile文件后在内容最后添加  alias python=" ...

  3. MySQL备份与恢复.md

    备份与恢复使用的命令 mysqldump 常用选项 -A, --all-databases:导出全部数据库 -B, --databases:导出几个数据库.参数后面所有名字参量都被看作数据库名. -- ...

  4. 开发指南专题十四:JEECG微云高速开发平台MiniDao 介绍

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/27068645   开发指南专题十四:J ...

  5. CentOS下iptables详解

    一:前言   防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件的或者软件的防火墙两种.无论是在哪个网络中,防火墙工作的地方一定是在网络的边缘.而我们的任务就是需要去定义到底防 ...

  6. [转]numpy中的np.max 与 np.maximum区别

    转自:https://blog.csdn.net/lanchunhui/article/details/52700895

  7. C++与C#互调dll的实现步骤

    这篇文章主要介绍了C++与C#互调dll的实现步骤,dll动态链接库的共享在一些大型项目中有一定的应用价值,需要的朋友可以参考下 本文实例展示了C++与C#互调dll的实现步骤,在进行大型项目共享dl ...

  8. Python2.7-math, cmath

    math,cmath 模块,提供了用C标准定义的数学函数,简单说就是效率较高,cmath 不仅有 math 的功能,还增加了计算复数的函数.这两个模块返回的值基本上为 float 类型,除非明确指出返 ...

  9. Python3与Python2的差异

    基于python3浅谈python3与python2的差异.由于现今主流Python3,但是之前用Python2做的项目,还得维护,所以作为python工作者,不免要了解其中差异,其中,Python2 ...

  10. statefulSet + headless service 学习记录 service :selector --> template :label

    1.statefulset.yaml apiVersion: apps/v1kind: StatefulSetmetadata:   name: webspec:    serviceName: &q ...