當前位置:首頁 » 網頁前端 » 如何展示前端業務流程
擴展閱讀
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的應用,現代網頁更加美觀,交互效果顯著,功能更加強大。