当前位置:首页 » 网页前端 » 如何展示前端业务流程
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

如何展示前端业务流程

发布时间: 2022-07-21 14:41:09

A. web前端开发的工作内容有哪些

狭义的:主要就是展示层开发,说白了就是页面开发,需要把页面风格、表单元素(控件)等都设计开发出来。如果是基于J2EE架构,需要Html、JSP、JavaScript、CSS、Htc等基本知识,有美工功底当然最好,没有的话也可以做,只是效果可能没有这么理想。

广义的:除了后台数据库应用开发外,前面的开发都可以叫做Web前端开发。后台DB开发主要包括函数、过程、触发器、视图、JavaSource等用户对象的开发。前端开发除了包括展示层外,控制层和模型层也要进行开发,直白一点说:就是包括Java代码的编写。

各个公司的开发模式不同,一般来说,规模大点的公司习惯分工开发:有人做展示层(前端开发),有人做控制层,有人做模型层,有人负责DB开发。

B. 前端项目的开发流程

前端开发流程概述

前端开发流程可分为需求分析、开发阶段、测试阶段、维护阶段,下面分别进行叙述。

2.1 需求分析

这个环节中,首先是和客户进行交流,了解客户的需求,然后分析项目的可行性,撰写项目需求文档。如果项目可行,则起讨论具体方案,分模块分步骤进行规划,分析项目进度安排、所需成本,进行原型设计(包括页面布局图,页面逻辑流程图,说明文档等。通过原型设计,可以让项目组和客户都可以对项目有一个直观感受,同时可以低成本高效率的复现业务场景和各模块流程)。
可以说需求分析阶段是整个前端项目的基础,基础不牢,地动山摇。可以试想,如果和客户沟通不顺畅,有的方面客户没搞清楚是什么效果,开发完成后就可能与客户发生纠纷;如果可行性有问题,有的模块很难实现或成本超出预算,就很难处理。

2.2 开发阶段

这个环节是前端工程师主要参与的部分,按照需求分析阶段的规划按步骤完成任务。

  • 根据产品需求分析文档和原型图进行UI设计,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。

  • 根据UI设计进行规划,提取界面中可以复用的模块方便重复利用,分析界面是否有实现难度比较困难的地方,进行沟通和功能排期,按功能大小以及难度进行功能时间的评估,和后端沟通好排期时间,保证大家能够更有效地开发合作,针对功能复杂的地方要先理清思路。

  • 不要盲目开发前端搭建框架。根据设计图进行前端界面开发,以及遇到的问题及时与产品、UI、后台人员沟通,保持大家信息一致,针对不清楚的地方也要及时沟通,以免做错功能。

  • 根据后端接口进行字段填充,以及部分功能开发。针对缺少的字段或者数据结构进行提出,及时与后端反应,尽量让大家都能以最小的改动完成后续开发工作。前后端都要按照规范进行开发,针对不规范的地方要给与提出、指正,营造出规范的工作模式,以后维护成本和沟通成本更低以及开发效率更高。如果前端的设计进度远远超前后端的接口和数据结构设计,也不必等后端,可以自行开发nodejs服务器配合postman等接口软件进行开发。

  • 前后端功能联调、完成自测。检查功能完成情况,看是否有遗漏,出现问题及时沟通解决。

  • 2.3 测试阶段

    发布测试、修改bug、发布上线,自测完成后提交测试,测试根据提交的项目以及需求进行测试,提出bug给相关人员修改,开发人员周期性的配合修改bug,保证今天能够修复昨天的bug。
    发布dev环境,配合测试,修复bug以及需求优化
    发布test环境,修复bug以及需求优化
    发布it环境,修复bug以及需求优化
    发布pre环境,修复bug以及需求优化
    pre验收之后,发布线上环境,产品进行验收

    2.4 维护阶段

    如果客户验收通过,项目就进入了维护阶段,程序的维护包括程序上线后后续bug的修复和程序版本的更新。

    3 个人经验总结

    3.1 文档很重要

    前端项目的文档似乎已经作为前端工程化的标准流程之一了,文档写的好,可以便于同事快速了解你的代码功能和需求,便于协作。可以想象,随之项目复杂度增加,体量越来越庞大,开发团队人数也越来越多。这种情况下,如果像变魔术一样隐匿中间流程而直接得出结果,后果可想而知:项目复杂度越增加就越难以管理,开发效率低,合作混乱,结果甚至导致项目死亡。
    好的文档看起来就像一个产品说明书,但作用却远远超过了说明书,不仅仅告诉你如何使用,还应该告诉你项目的设计思路,用了哪些组件,哪些部分不完善,将来有什么规划等等。这是一份比较好的说明文档。

    3.2 与客户及时沟通很重要

    3.3 扎实的基本功很重要

    尽管当下框架、函数库、工具包等更新迭代非常快,前端工程师有很多新的知识要学,但原生JS、HTML和CSS依然是重要的基本功,在学习前沿工具的同时不能放弃基本功的训练。

C. 前端开发具体的工作流程是怎样的

web前端开发流程:

  1. 领导或甲方提出需求,然后产品分析需求,并且根据需求画出原型图,然后根据原型图出设计稿。

  2. 设计稿团队评审,过后交与前端制作静态页面,然后静态页面,交与设计审核,过后交给开发人员,进行动态数据的添加。

  3. 发布测试环境,产品测试领导审核,成功后,直接发布产品环境,进行版本迭代。

  4. 整个的一个设计,开发,部署的流程。

前面的所有流程中的灵魂是原始需求提出者,但人随着客观条件的变化,思维认识会有所不一致,所以产生了文档,文档是贯穿整个流程的一个灵魂。而产品是整个流程中文档的编写者,因为产品最能接触最原始的需求,对需求的理解更深刻或专业。

D. web前端公司工作流程

为大家详细介绍一下制作一个Web前端页面的设计流程及注意事项。

一:确定网站主题

每个网站都有自身以及对用户的定位。针对网站定位确定网站的主题是整个网站运营的核心。一般从网站建设的目标、网站用户群体、网站产品内容以及企业服务四个方面确定网站主题。此外还需要注意,每个页面不但要承载整体企业的定位,同时还要侧重其中某一个特定主题。

二:网站整体规划

为了提高用户体验以及提高网站在搜索引擎收录率,在网站建设初期最好能够理清网站机构,增加不同页面之间的关联性,从而更好规划页面的布局以及网站功能。一般情况下,产品经理在设计网站初期就会提供完整的业务逻辑图,设计师和前端工程师根据业务逻辑架构完成相关页面的设计开发。需要重点考虑的内容包括:网站的功能、网站的结构、拌面布局等等。尤其在网站功能需求较多的情况下,网站整体规划更加重要。

三、整合素材

在网站整体架构完成后,就可以开始整合收集素材了。网站开发和网站内容筹备同步进行,可以大大提高网页开发的效率。主要收集的素材包括文本素材(一般由公司内容运营提供相应的文字素材,需要注意的是,这些文字素材的准确性以及版权非唯一性)、图片素材(现在很少有纯文字性的网站,往往需要大量的图片素材,甚至还有视频素材等)。

四、网站开发与动态效果

前端页面开发主要用到HTML、CSS、JavaScript技术。在确定网站结构以及页面设计图齐全的情况下,前端开发工程师就可以进行页面开发了。这个过程中主要完成页面搭建以及动态效果实现。

此外在前端页面设计过程中还需要有一些常规的注意事项:页面分辨率设置,在设计网页时,页面的宽度尽量不要超过屏幕的分辨率,否则页面可能无法完全展示;注意页面版心位置。目前比较流行的屏幕宽度分辨率一般1200PX~1920px,为了适配不同分辨率的显示器,一般设计班型宽度在1000Px~1200Px之间。

这就是为大家分享的Web前端页面制作流程以及注意事项。在不同的公司中,前端工程师的岗位职责是不同的,甚至在某些大型互联网公司中,部分前端工程师仅仅做其中一个环节,即使如此作为前端工程师还是要多多学习大前端的技术知识,才能更好的适应企业人才需求。

E. 前端工作流程是什么

公司性质决定流程,不过一般大体都是需求--设计--页面制作--效果制作--添加程序。

假设 sys 级的规范和标准模块已经完成(包括全局样式、布局规范、标准盒模型等),这时需要开发一个项目,假设为淘江湖 SNS 项目。理想中的开发流程为:
a). PD 产出 PRD.
b). 交互统揽全局,将 PRD 中的可复用部分,拎取出来,产出 base-prototype.
c-1). 视觉根据 base-prototype,产出 base-mockup.
c-2). 前端根据 base-prototype 和 base-mockup 产出 app-dpl(该项目的 DPL)。
c-3). 交互继续具体页面的 page-prototype 产出工作。
以上三步是并行和迭代进行的。
d-1). 视觉根据 page-prototype 产出 page-mockup.
d-2). 前端根据 page-mockup 产出 page-demo.
以上两步迭代进行。
流程的核心是迭代、是敏捷、是短周期。
最重要的一步是 base-prototype 的产出。交互要避免一个页面一个页面的产出顺序,而应该先有一个统揽全局、拎取通用部分的步骤。
以上流程可以简述为:sys -> app -> page. app 层的抽取很重要,可以提高团队的开发效率和协作程度,让团队更融合、更高效。
感觉 LSM 强调的是前端工程师实现 demo 时的微流程。告诉我们做一个页面时,需要 html 整体 -> 局部模块的 css/js, 逐层开发,先整体后局部,先框架后细节。这是非常好的最佳实践。

F. 一个前端开发的工作流程是什么样的

我们以前基本的流程是,领导或甲方提出需求,然后产品分析需求,并且根据需求画出原型图,然后根据原型图出设计稿。
出完设计稿团队评审,过后交与前端制作静态页面,然后静态页面,交与设计审核,过后交给开发人员,进行动态数据的添加。
添加完之后,发布测试环境,产品测试领导审核,成功后,直接发布产品环境。或进行版本迭代。
这是整个的一个设计,开发,部署的流程。

根据前面的,在补充一下,前面的所有流程中的灵魂是原始需求提出者,但人随着客观条件的变化,思维认识会有所不一致,
所以产生了文档,文档是贯穿整个流程的一个灵魂。
而产品是整个流程中文档的编写者,因为产品最能接触最原始的需求,对需求的理解更深刻或专业,所以他会有一个文档出来。
这个文档是需要交付给设计,让设计在设计过程中进行参考。
前端看的另外一个文档。交互设计师出交互文档,一般的公司没有交互设计师那就是由产品来出的交互文档。
有的交互不过于复杂,就没有文档,只是邮件。
有时候说,不要这个邮件行不行,那怕是最简单的原始东西,没有文件或邮件是不能做一个后期测试回溯的依据。
产品文档表示页面的流转或数据的走向,交互文档描述页面复杂的交互或各个用户表单与用户发生的各种互动。
另外2个是,要架构师或项目经理出的需求文档,需求文档是对整个项目的历史背景,系统开发软硬件要求,或版本信息,等等。
另外一个是由服务端工程师提供的接口文档,这里边包括一些请求类型,传参的数目与键名,还有服务端返回的参数名约定等等的,这些文档是开发中的灵魂,也是以后测试回溯的标准或依据。

G. (前端开发)在网页上显示这种工作流流程图,该用什么方法

这种插件貌似没有,不过就我知道的技术实现手段倒是有

http://raphaeljs.com/graffle.html
楼主耐心点改下代码应该可以

H. 一个互联网产品的前端开发的完整流程是怎样的

由于技术线上的内容过于细化,且技术框架工具需要根据团队需要才可进行选取,所以技术性问题先不作答。
不过,如果想要了解一个APP的诞生流程,都包含哪些事情大致流程:
1.绘画草图
2.开始布局
3.构建核心页面
4.构建服务器
5.连接后台与前端
6.基本的业务逻辑
7.优化用户体验
8.丰富功能模块
9.开源

I. web前端页面展示是如何实现的

使用freemarker是最方便的
添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
然后直接在src\main\resources\templates,写.ftl文件作为前端页面就行了

J. 前端开发的工作流程是怎样的

前端开发具体开发过程基本如下:

1、根据UI的界面图进行切图,这里切图其实也有自动化的工具。

2、使用html对切出来的东西进行映射开发,做页面结构,看到几个部分就对应几个模块,从大到小,从外到内,从公共到独立。

3、使用css做样式设计,具体分析模块大小、位置、颜色,做盒模型等等。另外,可以分成三个组,一是重置样式,用于修改一些不合适的默认格式。二是公共样式,主要是头尾以及LOGO等很多页面都会用到的样式;三是独立样式,用于只使用一次的样式。

4、使用JS做交互动作。当然,还需要根据与后端之前的讨论做数据传输接口。

5、自己debug一下,如果有bug要改。

(10)如何展示前端业务流程扩展阅读:

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。它从网页制作演变而来,名称上有很明显的时代特征。

在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显着,功能更加强大。