精华内容
下载资源
问答
  • web前端项目开发流程

    万次阅读 多人点赞 2019-06-13 09:32:57
    开发流程 图解 需求 评审 召集需求涉及到的UI、开发、产品、测试人员整理业务流程,同步信息,明确分工 明确需求目的,考虑当前需求设计是否可满足目的 整理流程中如果涉及的其他人员,则召集商讨 如需求设计上影响...

    开发流程

    图解

    在这里插入图片描述

    需求

    评审

    召集需求涉及到的UI、开发、产品、测试人员整理业务流程,同步信息,明确分工
    明确需求目的,考虑当前需求设计是否可满足目的
    整理流程中如果涉及的其他人员,则召集商讨
    如需求设计上影响现有业务功能,应要求产品重新设计实现方案,然后重新评审

    注意事项

    业务流程同步:评审后重新梳理流程,存在疑问处及时找产品沟通
    周边需求依赖:评审功能与依赖功能并行开发,由于前置需求未完成导致当前需求时间成本被压缩
    埋点需求:提前与产品明确是否需要埋点
    造数据:提前了解测试数据制造的困难程度,预估测试时间—>有些场景下的测试数据非常难造
    并发量:后端机器是否能够承担新需求下的并发量,如果无法承担的话必须给出后续方案
    自测:由于开发人员不予提供线上账号,因此自测也需要一名测试人员做线上回归测试
    兼容范围:pc端需明确要兼容哪些浏览器,移动端需明确android与ios兼容版本以及哪些移动端浏览器

    开发

    评审

    原型图评审

    向产品明确原型图在应用中所处位置以及入口的显示条件,确认原型图的正确性

    设计稿评审

    观察线上应用设计风格与当前设计稿风格是否一致(色调,字号,行高,对齐方式)是否一致
    观察设计稿中哪些部分需要切图
    判断设计稿中组件是否开发过,避免重复造轮子

    技术实现评审

    如存在不易实现的功能,第一时间与产品沟通其他降级的实现方案

    排期

    找到相关开发(前端,后端,app)商讨需求实现技术细节,明确产出接口格式时间与接口联调时间

    代码管理

    为防止合并代码时过多的代码冲突问题,建议使用分支时遵循以下标准
    每次push前先拉取线上分支代码
    开发新功能或者修复bug时一定要基于线上代码分支创建新分支,每个分支只对应一个jira号或一个待修复的bug问题
    分支名以f_(提交人)(jira号)方式命名,对jira进行bug修复时使用f(提交人)fix(bug内容)_(jira号)
    commit格式规则:每行message描述一个功能点,message格式为()(操作):(描述),操作一般为add,del,upd分别代表新增、删除、更新三种操作

    开发与调试

    一般开发时不会从造轮子开始,项目中一般会有组件库供开发人员使用,但也会有一些老旧的项目中组件库版本较低,无法满足需求,
    因此在开发前一定要对项目现有组件进行评估,确认是否需要重新开发组件,确保进度如期进行。

    pc端

    推荐优雅降级方式开发,先chrome,firefox,然后再针对兼容性较差的如ie等进行兼容处理

    移动端

    移动端页面兼容性相较于pc端较好,但需真机调试,为方便调试移动页面,这里推荐使用spy-debugger来让pc端做代理,具体使用
    请查阅github文档。

    联调

    和后端对接真实接口

    自测

    自测环节与环境数据关联很大,需要前后端共同完成,如果自测所需数据涉及范围较广,则需要找齐相关人员协助上线

    提测

    自测完成后开始进行真实环境测试

    bug反馈

    部署上线

    开发规范

    • 命名规范(文件命名,变量,函数,class, id) 驼峰, - _ 约定法
    • 目录规范(目录如何建立) 划分目录结构 约定法
    • 版本规范() 挑选稳定版本 记录版本号 如果版本升级,需要总结版本差异
    • 编码规范(注释,… 语法) eslint语法 JSDoc注释
    • 适配规则(pc,移动) 分辨率调整
    • 接口规范(成功,失败,状态码,安全) 和后端约定

    项目搭建

    • vue-cli脚手架搭建 – 自定义项目用到的需求
    • 选择ui框架
    • 抽离公共逻辑,划分功能组件
    • 目录构建
    • 路由规划
    • ajax请求配置
    • mock生成
    • 架构文档
    • 方案整理(用到哪些技术,用到哪些特性)

    代码管理

    • git & svn
    • 分支管理
    • 任务划分
    • 功能排期

    目的

    整理和规划,提升开发效率

    展开全文
  • Web前端项目开发流程项目需求分析这个环节是由项目经理完成,项目经理首先和客户进行交流,了解客户的需求,然后分析项目的可行性,如果项目可以被实现,项目经理写出项目需求文档交给设计师完成后续的开发。...
    Web前端项目开发流程

    8219d20cc68ad8706c321cf8772339ad.gif

    项目需求分析

    这个环节是由项目经理完成,项目经理首先和客户进行交流,了解客户的需求,然后分析项目的可行性,如果项目可以被实现,项目经理写出项目需求文档交给设计师完成后续的开发。

    8219d20cc68ad8706c321cf8772339ad.gif

    页面设计

    这个环节主要是UI设计师参与,UI设计师根据产品需求分析文档,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。

    8219d20cc68ad8706c321cf8772339ad.gif

    编码

    这个部分由程序员来实现。(程序员分为WEB前端开发工程师和后台开发工程师。前端开发人员主要做我们可以在网页上看的见的页面,后台就做一些我们看不见的管理系统以及功能的实现。)程序员根据UI设计师的设计,用编码来完成整个项目的各个功能

    8219d20cc68ad8706c321cf8772339ad.gif

    测试

    这部分由程序测试员来完成。程序测试员主要就是测试寻找程序还存在的bug,一般来说刚编码完成的程序都是存在问题的,就需要测试人员反复不断的测试并将存在问题的测试结果交给编码人员进行bug的修复。等到几乎所有bug修复完成,这个项目差不多就可以上线了。

    8219d20cc68ad8706c321cf8772339ad.gif

    维护

    程序的维护是整个项目的最后一个阶段,但也是耗时最多,成本最高最高的的一个阶段。程序的维护包括程序上线后后续bug的修复和程序版本的更新。

    dde71e61d12dc36b89752338c9c2feb2.pnga428205196a01a567173348162b19b89.pnga84c519b088cd587fdf0a4504941ce19.png3c8988b9d695157bc2c998dedcbb2595.png756fa0474bc297de3954f9e253b8b9e1.pnga84c519b088cd587fdf0a4504941ce19.png
    展开全文
  • web前端项目工作流程

    2020-09-25 18:54:06
    1.1了解web程序工作流程 1.2django生命周期 2.django介绍 目的:了解django框架的作用和特点 作用:便捷、快速的开发数据库驱动的网站 django的优势 **快速开发** **MVT** **功能齐全** **...

    1.1了解web程序工作流程

    在这里插入图片描述

    1.2django生命周期

    在这里插入图片描述
    在这里插入图片描述

    2.django介绍

    • 目的:了解django框架的作用和特点

    • 作用:便捷、快速的开发数据库驱动的网站

    • django的优势

    •  **快速开发**
      
    •  **MVT**
      
    •  **功能齐全**
      
    •  **django学习版本:1.11.11**
      

      思考用django还是flask
      开发数据驱动web网站(复杂业务逻辑)
      数据分析后的结果展示界面,flask
      快速成型应用上线,就用django

    3.django设计模式(MVC/MTV)

    		**目的:了解什么是MVC,MTV**
    		**思考:为什么要用设计模式**
    					分工、解耦,让不同的代码块之间降低耦合,增强代码的可扩展性和可移植性,实现向后兼容。
    		MVC:
    					M全拼为Model,主要封装对数据库层的访问,对数据库中的数据进行增、删、改、查操作。
    					V全拼为View,用于封装结构,生成页面展示的HTML内荣。
    					C全拼为Controller,用于接收请求,处理业务逻辑,与Model和View交互,返回结果。
    		MVT:
    					M全拼为Model,与MVC中的M功能相同,负责和数据库交互,进行数据处理。
    					V全拼为View,与MVC中的c功能相同,接收请求,进行业务处理,返回应答。
    					T全拼为Template,与MVT中的V功能相同,负责封装构造要返回的HTML。!
    

    4,虚拟环境的安装

    目的: 学会创建新的虚拟环境
    win10安装 linux安装 virtualenvwrapper使用命令

    win10安装

    方法1:win10
     pip install virtualenv 
     pip install virtualenvwrapper-win
    

    Linux安装

     方法2:linux 
     pip3 install virtualenvwrapper
     mkdir $HOME/.virtualenvs 
     # 把所有虚拟环境指定到一个目 录文件夹下存放 
     find / -name virtualenvwrapper.sh 
     # 查找执行脚本路径,添加到 ~/.bashrc 
     vim ~/.bashrc 
     # 修改bash配置文件 
     ''' export WORKON_HOME=$HOME/.virtualenvs VIRTUALENVWRAPPER_PYTHON=/usr/local/bin/python3 
     source  /usr/local/bin/virtualenvwrapper.sh
     '''
     source ~/.bashrc 
     # 执行virtualenvwrapper安 装脚本
     virtualenvwrapper使用命令
    

    在这里插入图片描述

    5,创建项目(掌握)

    目的:能够通过django的命令创建工程
    过程:
    1.进入到虚拟环境
    2.创建项目: django-admin startproject (项目名字) 
    3.进入到manage.py 所在的文件夹
    4.启动项目:python manage.py runserver
    注意点:
    如果不指定,django默认端口8000
    也可以指定: python manage.py runserver ip:port 
    

    6,创建子应用(掌握)

    目的:能够使用django中的命令来创建子应用
    过程:
    1.进入到manage.py所在的同级文件夹
    2.创建子应用: python manage.py startapp (子应用名称)
    三步完成子应用创建: 
    1.注册子应用, 在settings.py文件, INSTALLED_APP列表中增加"app名字.apps.app的管理类" 
    2.创建app下的urls文件
    写子应用的路由文件, 在子应用目录下, 创建 urls文件, 内容拷贝 主路由的内容
    3.引入子路由
    把子路由引入到主路由中, 主路由中添加
    url(r'^子路由前缀', include('子应用的模块名.urls'))
    

    7,第一个helloworld程序(掌握)

    目的:能够在子应用中编写视图函数helloworld
    过程:
    1.在views文件中编写视图函数
    def hello(request): 
    	return http.HttpResponse('hello world')
    2.创建urls.py文件中编写子应用路由
    from django.conf.urls import url 
    from demoapp import views 
    urlpatterns = [ 
    	url(r'^helloworld/$', views.hello), 
    ]
    3.将子应用的的路由,注册到根应用的urls中
    from django.conf.urls import url, include 
    from django.contrib import admin 
    urlpatterns = [
     ... 
    	url(r'^demoapp/', include('demoapp.urls')) 
    	]
    注意点:
    只要提供了子应用路径,django不再提供默认的根路径
    

    8,项目的配置(settings.py文件)(理解)

    • 目的:知道常见的配置作用即可
    • 常见的配置有:
    • BASE_DIR:项目在操作系统中的绝对路径
    • DEBUG:调试模式,默认是True
    • LANGUAGE_CODE: zh-hans中文
    • TIME_ZONE: Asia/Shanghai 中国时间

    在这里插入图片描述
    注意点:
    setting.py表示项目运行的配置项(调试模式,mysql,redis 。。。)

    9,静态资源问题(理解)

    目的:在django中如何配置静态文件的访问地址和文件夹
    配置:
    STATIC_URL:静态资源的访问路径,默认是/static/ 
    STATICFILES_DIRS:静态资源的文件夹,并且是一个列表。
    注意点:
    STATICFILES_DIRS:是一个列表,寻找文件的时候,从前向后依次寻找,找不到报404错误
    

    10,地址匹配

    目的:在浏览器访问服务器的时候,根应用的地址,子应用的地址是如何进行匹配的
    格式1:基本匹配, 从上到下
    格式2:匹配混乱问题, 有路由覆盖的问题, 建议用path方法
    格式3:
    子应用地址后面的 / 问题, 建议大家写的时候都加上
    url(r'^index/$', index)
    在访问的时候,浏览器自动会定向到带有/的地址上面去,这样在访问的时候不管是否携带/,
    都能访问。
    

    11,路由参数名设置(掌握)

    目的:能够在地址中编写正则匹配
    过程:
    1.格式1:不指定正则匹配的名字:/hello/([a-z]+)/(\d+)
    按照顺序依次匹配,传递参数
    2.格式2:指定正则的名字:/hello/(?P[a-z]+)/(?P\d+)
    按照名字来匹配,传递参数
    在这里插入图片描述

    13.get请求

    目的:通过request对象,获取查询参数
    过程:
    http://xxx.com/index/?name=xxx&age=ccc&name=yyy 
    request.GET:是一个查询字典
    request.GET.get(key) # 获取单个key,value 
    request.GET.getlist(key) # 获取单个key,对应的多个value,得到的是list列表。
    

    14,post,put,delete

    目的:获取request获取表单,及非表单提交的非查询参数数据
    常见的请求方式有:POST,PUT,DELETE,PATCH
    请求体中的数据, 一类是json, 一类是表单数据
    request.POST:获取表单数据(会把body的内容,解析一份, 解析成一个查询字典) request.body:获取json数据
    需要将bytes类型转成dict格式,用到decode(),loads()
    Post, put都需要处理请求体, delete可以没有请求体
    post, 通过请求头中的content-type字段来区分格式

    表单格式: name=zhangsan&age=18 
    json格式: '{"name":"zhangsan", "age":18}' 
    
    POST http://localhost:8000/app1/post/ 
    Content-Type: application/x-www-form-urlencoded 
    name=lisi&age=18 
     POST http://localhost:8000/app1/post/ Content-Type: application/json
     {"name":"lisi","age": 18}
     
    注意:
    		json格式需要 decode()
    

    在这里插入图片描述

    展开全文
  • web前端开发流程

    2018-12-31 11:47:22
    本资源是是以思维导图的形式展示了关于Web前端项目开发流程图,很详细,需者自取。
  • web前端项目上线流程是怎样的

    千次阅读 2019-08-13 10:56:29
    web前端项目上线流程是怎样的? (1)流程建议 模拟线上的开发环境 本地反向代理线上真实环境开发即可。(apache,nginx,nodejs均可实现) 模拟线上的测试环境 模拟线上的测试环境,其实是需要一台有真实数据的...

    web前端项目上线流程是怎样的?

    (1)流程建议

    • 模拟线上的开发环境

    本地反向代理线上真实环境开发即可。(apache,nginx,nodejs均可实现)

    • 模拟线上的测试环境

    模拟线上的测试环境,其实是需要一台有真实数据的测试机,建议没条件搭daily的,就直接用线上数据测好了,只不过程序部分走你们的测试环境而已,有条件搭daily最好。

    • 可连调的测试环境

    可连调的测试环境,分为2种。一种是开发测试都在一个局域网段,直接绑hosts即可,不在一个网段,就每人分配一台虚拟的测试机,放在大家都可以访问到的公司内网,代码直接往上布即可。

    • 自动化的上线系统

    自动化的上线系统,可以采用Jenkins。如果没有,可以自行搭建一个简易的上线系统,原理是每次上线时都抽取最新的trunk或master,做一个tag,再打一个时间戳的标记,然后分发到cdn就行了。界面里就2个功能,打tag,回滚到某tag,部署。

    • 适合前后端的开发流程

    开发流程依据公司所用到的工具,构建,框架。原则就是分散独立开发,互相不干扰,连调时有hosts可绑即可。

    (2)简单的可操作流程

    • 代码通过git管理,新需求创建新分支,分支开发,主干发布。

    • 上线走简易上线系统,参见上一节。

    • 通过gulp+webpack连到发布系统,一键集成,本地只关心原码开发。

    • 本地环境通过webpack反向代理的server。

    • 搭建基于linux的本地测试机,自动完成build+push功能。

    欢迎大家在评论区评论留言,小编会及时给大家解答疑惑的

    展开全文
  • Web前端学习:Vue项目开发流程 一、企业项目开发流程 产品提需求 交互设计出原型设计 视觉设计出UI设计图 前端开发出页面模板 server端存取数据库 验收测试 二、为什么要使用vue: ...
  • web前端开发规范 web前端开发规范的意义 1、提高团队的协作能力 2、提高代码的复用利用率 3、可以写出质量更高,效率更好的代码 4、为后期维护提供更好的支持 规范 1、命名规则 2、文件存放位置规范 3、css书写规范 ...
  • Web前端开发流程

    2020-07-05 15:12:47
    Web前端开发流程 开发前准备 了解产品和设计 参加需求、交互、视觉会议,了解产品设计和项目成员。 了解产品面向的设备和平台。 了解产品对兼容性的要求以及是否采用响应式设计等。 提出疑问和见解 按需求结合现有...
  • 一、企业项目开发流程 产品提需求 交互设计出原型设计 视觉设计出UI设计图 前端开发出页面模板 server端存取数据库 验收测试 ...
  • Web前端开发的一般项目流程 前面聊了一些关于Web前端开发需要的技能以及相应的职位和职责,现在再来了解一下Web前端开发的一般项目流程项目开始之前,我们需要参加项目的需求评审,并深入了解项目,评估项目...
  • WEB前端开发流程总结

    2019-01-12 10:58:00
    作者声明:本博客中所写的文章,都是...WEB前端开发项目流程总结 1.新建项目文件夹    文件夹结构要有层次,一般包括  src:用于存放源代码。  css:存放css代码   index.css:用于存放设置主页的scss ...
  • maven基础开发流程mavenWeb项目的创建maven三层架构包开发 maven是做项目的基础,很重要,进行一点汇总加深记忆 mavenWeb项目的创建 maven的web项目开发首先创建一个maven项目 maven三层架构包开发 maven开发也要使用...
  • 【转载】前端项目开发流程及技术选型

    万次阅读 多人点赞 2017-01-03 16:05:14
    时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位,虽然身份之争多少有些无谓,但我对这种偏见还是心存芥蒂,酝酿了许久,决定写一个系列的文章,试着从工程的角度系统的介绍一下我对前端,尤其是Web前端...
  • Web前端开发流程和规范

    热门讨论 2011-03-04 14:46:59
    我想,前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的,尤其像我们这样:页面设计、前端开发和后台实现三者之间交流非常密切,团队协作效率就显得尤重要,综合以往...
  • 对于Java初学者来说,开发一个JavaWeb项目是很难独自完成的任务,我们首先要明确Java Web项目开发步骤,才能做到对症下药,步步为营,完成一个简单的Java Web项目。下面为大家详细介绍一下Java Web项目开发步骤具体...
  • web项目开发流程

    千次阅读 2018-07-26 20:12:29
    无论是web前端还是后端程序员,项目开发流程都有必要了解。 项目立项(公司决策者) 需求分析(产品经理) 产品原型设计(UI) 软件需求分析(all) 前端:UI界面-->前端界面-->前端代码实现 ...
  • 项目开发流程 1. 创建客户端项目 1.1 使用 vue-cli(脚手架)搭建项目 #在Github新建Vue-MintShop项目,然后clone到本地 git clone git@github.com:W-Qing/Vue-MintShop.git cd Vue-MintShop #创建客户端项目 vue init ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 875
精华内容 350
关键字:

web前端项目开发流程