导图社区 面向项目编程项目方案
面向项目编程项目方案,导图介绍了ES6、汽车报价项目网络、项目流程、mysql、服务器等,收藏下图参考吧!
编辑于2022-04-29 13:59:10面向项目编程项目方案
ES6
变量
let
const
用es5实现const,通过修改属性描符writable:
Object.defineProperty(obj,'a',{writable:false})
writable属性不可以被修改
configurable属性不可被删除,属性描述符不可被修改
enumerable属性不可被遍历
value属性的值
set
get
vue兼容到ie8,因为ie8不支持defineProperty
函数内的块级作用域:闭包
作用:实现模块化
缺点:造成内存泄漏
箭头函数
箭头函数,this指向定义时的作用域
普通函数,this指向调用时的作用域
数组和对象
判断是否是数组:Array.isArray
把伪数组转化为数组:Array.from()||[...]Array.prototype.slice.call()
对象的解构:let{callback}=this.props
对象的合并:Object.assign({},{a:1},{b:2})
最简单的深拷贝:JSON.strigify==>JSON.parse()只能处理对象,处理不了数组
promise
三个状态
初始化状态:pennding
完成状态:resolved
拒绝状态:rejected
二个参数
由pendding变为resolved时调用resolve方法
由pennding变为rejected时调用reject方法
四个方法
把promise合在一起:Promise.all()
任意一个promise完成即可:Promise.race()
生成一个状态立刻由pennding改为resolved的promise:Promise.resolve()
生成一个状态立刻由pennding改为reject的promise:Promise.rejected()
错误捕捉:catch
链式调用,只需直接返回常量即可
原生实现promise:利用setTimeout把同步操作变成异步操作
async/awiat
异步函数:会阻塞代码的执行
awiat一个promise这个表达式的执行结果就是resolve的参数
错误捕获:try/catch捕获错误
generator
异步函数,前面带个*
用yield修饰异步操作
第一次调用,返回一个迭代器
调用迭代器的next方法,继续往下执行,遇到yield语句或者return结束
yiled表达式的返回值,下一次调用next传进来的参数
class
面向对象OOP(Object Oriented Programing)
es6 class
es5函数+原型链
特点
重载
抽象
继承
封装
继承:extends
js只有单继承
super关键字
super(),作为函数的时候,实现继承,拷贝父类,返回子类的this
super.render(),作为对象的时候指向父类,this指向子类
静态属性和静态方法,不需要实例化即可调用
静态属性写在类的外面
静态方法用static修饰
模块和解构
模块的导入/导出
export function getData(){}
import {getData} from '…'
export default
import getData
export * from '…'
require.js
两个参数,define
数组:依赖列表
函数:注入前面的依赖作为函数参数
common.js
导出:module.exports
导入:require
汽车报价项目
数据统计
页面PV、UV
按钮事件统计
错误监控:sentry
错误上报
图表统计
邮件通知相关负责人
优化
懒加载
图片懒加载
列表的懒加载
路由懒加载
预加载
图片的预加载
事件处理
节流
去抖动
dom操作
重绘
回流
touch事件
touchStart
touchMove
touchEnd
第三方服务
短信验证码
邮件服务器
网络
TCP/IP协议 五层架构
应用层
短链接
普通链接:http
加密的:https
证书:付费购买
特性:安全
作用:防运营商劫持
锁
资源全部通过https加载的时候锁正常
部分资源通过http加载的时候锁不正常,出现个i
长链接
websocket
传输层
靠谱传输方式:TCP,相当于打电话,先三次握手成功再传输数据
不靠谱方式:UDP,相当于写信,直接传输数据,无论有没有建立连接
网络层
IP
IP分类
A类:网络-主机-主机-主机
B类:网络-网络-主机-主机
C类:网络-网络-网络-主机
私有IP地址
10.0.0.0-10.255.255.255(一个A类地址)
172.16.0.0-172.31.255.255(16个B类地址)
192.168.0.0-192.168.255.255(256个C类地址)
特殊的IP地址
指向自己:0.0.0.0
指向自己:127.0.0.1
不能访问网络时分配的地址:169.254.x.x
DNS服务
通过域名反查IP地址
Mac地址
Media Access Control Address
数据链路层
硬件通讯设备:交换机、路由器
物理层
双绞线
重要的Http头部信息
req
客户端凭证:cookie,有有效期限制
携带客户端登陆态
客户端信息:user-agent
用来判断浏览器信息,App的环境,是否时微信
从哪里发起访问:refer
作用:防盗链
请求类型:Content-Type
res
设置cookie:set-cookie
是否压缩:content-encoding:gzip
允许跨域:access-control-allow-origin:
是否允许携带cookie:access-control-allow-credentials:true
登陆态:token
(一般是16位及以上长度的字符串)
登陆凭证,每次登陆之后重新生成
免登陆
把token保存一段时间,每次调用接口的时候带上校验即可,
通过cookie的有效期设置token的保存时间
单点登陆
记录登陆态的时候记录每个登陆设备的设备号,登陆之后将其他登陆态全部改为失效状态
跨域共享登陆态
登院成之后调用其他几个域名的登陆接口,分别设置cookie,已达到共享登陆态
前端工作
在调用登陆接口完成后,将服务端返回的登陆态token保存在本地cookie即可
设置对应的过期时间
以后每次调用接口的时候把token带上即可
跨域
开发过程中
charles抓包工具映射
将要抓包的设备和charles连接在同一个网站
设置代理(https需要安装证书)
配置Map Remote,做请求转发
虚拟域名
找到hosts文件:C\windows\system32\drivers\etc\hosts
以管理员权限打开并修改,添加一行记录,前面为本地环回地址,后画要配置的虚拟域名
修改webpack配置
port:改为80
禁用host检查 disableHostCheck:true
启动服务,确定端口为80,用虚拟域名访问即可
proxy
修改webpack devSever中的proxy字段
'/api'
target:'
'
changeOrigin:true
pathRewrite{'/api:'/'}
通用解决方案
JSONP
原理:动态创建scrip标签,设置src为我的请求地址,返回一个函数,script标签没有同源限制
函数名字为传过去的callback
适用场景:处理get请求
CORS(cross origin resource share)
跨域请求头:access-contrl-allow-origin
通配符:*(尽量不要适用)
固定值:'
'
动态配置:通过判断请求头中的orgin是否在数组中,来动态配置响应头中的字段
携带cookie的头部:ccess-control-allow-credentials:true
proxy
需要web服务器支持:nginx/apache
原理:浏览器的同源策略:协议+域名+端口
安全
跨站脚本攻击:XSS(cross site script)
注入一段js到别人家的网站,做一些危险操作
跨站请求伪造:CSRF(cross site request forgery)
原理:依赖发起请求浏览器会自动带上相应域名下的cookie
防止攻击:加上验证码、随机数,提高提交门槛
RESTFul请求:通过请求方法确定要做的操作
插入:POST
修改:PUT
删除:DELETE
查询:GET
浏览器缓存
缓存流程
强缓存
状态码:200(from cache)
expires:http1.0,如果请求发生在过期时间之前,命中本地强缓存
cache-control:http 1.1丰富客户端缓存机制
max-ag=number,如果请求时间在过期时间之前,就能命中缓存,否则就不行
no-cache,不使用强缓存
no-store,直接禁止游览器缓存数据,每次都会下载完整的资源
public,被所有的用户缓存,包括终端用户和CDN等中间代理服务器
private,被所有的用户缓存,包括终端用户和CDN等中间代理服务器
如果cache-control与expires同时存在的话,cache-control的优先级高于expires
协商缓存
状态码:304(not modified)
Last Modified/If Modified-Since:资源在服务器上的最后修改时间,精确到秒
Etag/If None Match:每个资源的唯一标识字符串,只要资源有变化就这个值就会姣变
Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,
才会继续比对Last-Modified,最后才决定是否返回304
放弃缓存,加载新资源
更改页面中资源的应用路径
项目流程
开发流程
①需求评审(项目负责人,老板,产品经理,技术总监)
②技术评审(前后端开发人员、UI、测试),原型图已出(比较粗糙)
③排期,让后端先估时间,在产品经理能接受的情况下,尽量估长一点
(定接口时间+开发时间+联调时间)
④设计先启动,前端和后端等待
⑤开发阶段:定接口,独立开发、联调
⑥提交测试,先把文件上传到服务器上(git自动化或者ftp文件服务器),
拼接成一个路径形式:发送邮件给测试,里面包含测试地址和一些说明
⑦测试通过,发布上线
项目规范
代码规范:工程目录结构,编码分格(ESLint)
代码管理规范:Svn、Git分支管理,每人一个分支,开发完成提交pull request
仓库管理:gitlab,coding,gitee,github
发布规范:成熟的发布系统,CI系统,自动化部署
项目工具
项目进度&Bug管理工具
TAPD
禅道
Trello
模拟接口
RAP、EASY-MOCK,MOCK.js
文档工具
记录接口的,docute,vuepress
OA:办公自动化(Office Automation)
项目沟通
需求方
产品经理
确定好具体需求
后端
定好接口就行,沟通好排期
沟通工具
项目人员构成(20个)
技术负责人/项目总监/技术总监/CTO(1个)
技术选型
把控整个项目
需求方(3个)
产品经理(2个)
运营人员(1个)
开发人员(16个)
UI设计(2个)
前端开发(4个)
后端开发(7个)
测试人员(2个)
运维人员(负责上线,配置线上环境)(1个)
接口的组成
接口的作用
传过去的参数
接口的返回值
code:状态码
data:业务数据
msg:错误提示信息,由后端返回,前端一般直接提示即可
mysql
环境:XAMPP集成环境
mysql客户端
navicat
workbench
在node中如何使用
引入中间件mysql
创建实例:mysql.createConnection
语句
增:insert into user(username,password,create_time)values("zhixi","123456",${+new Date()}),
("zhixi2","123456",${+new Date()})
删:delete from user where username='${req.body.username}'and password='${req.body.password}'
改:update user set create_time=${10000000},username='${req.body.username}007'where username=
'${req.body.username} and password='${req.body.password}'
查:select * from user where id = 1
服务器
web服务:nginx,客户端工具:XShell
文件服务器:ftp(file transport protocol),客户端工具:XFtp
服务端脚本:node
守护进程:pm2
列出服务:pm2 list
停止服务:pm2 stop ${id}
启动服务:pm2 start ${id}
重启服务:pm2 restart ${id}
查看日志:pm2 log
用express开发接口
启动web服务:app.listen()
监听路由:app.get() | app.post()
获取参数:body-parser
返回数据:res.json() | res.end() | res.send()
自动更新的工具:node-dev
代码部署
方便回滚的自动化部署
git的hooks监听push事件
简单的ftp上传