开发流程
图解

需求
评审
召集需求涉及到的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前端项目开发流程
项目需求分析
这个环节是由项目经理完成，项目经理首先和客户进行交流，了解客户的需求，然后分析项目的可行性，如果项目可以被实现，项目经理写出项目需求文档交给设计师完成后续的开发。
页面设计
这个环节主要是UI设计师参与，UI设计师根据产品需求分析文档，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。
编码
这个部分由程序员来实现。(程序员分为WEB前端开发工程师和后台开发工程师。前端开发人员主要做我们可以在网页上看的见的页面，后台就做一些我们看不见的管理系统以及功能的实现。)程序员根据UI设计师的设计，用编码来完成整个项目的各个功能。
测试
这部分由程序测试员来完成。程序测试员主要就是测试寻找程序还存在的bug，一般来说刚编码完成的程序都是存在问题的，就需要测试人员反复不断的测试并将存在问题的测试结果交给编码人员进行bug的修复。等到几乎所有bug修复完成，这个项目差不多就可以上线了。
维护
程序的维护是整个项目的最后一个阶段，但也是耗时最多，成本最高最高的的一个阶段。程序的维护包括程序上线后后续bug的修复和程序版本的更新。

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前端项目上线流程是怎样的？
（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功能。


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