1.软件生存周期
-
问题定义
-
可行性分析(技术可行性,经济可行性,社会可行性,法律法规可行性)
-
需求分析 (原型图--产品经理)
-
概要设计(UML图 (ER图 时序图 系统架构图))
-
详情设计 (数据库设计 技术选型(项目讨论会(需求文档)))
-
编码 (开发 前端 后端)
-
测试 (前后联调--->测试人员测试(禅道))
-
运行维护(运维---云端运维(私有云服务器和公有云服务器))
-
在开发阶段前端和后端的编码时期可能不一样,当你的后端接口不存在的时候,你又需要进行开发那么就需要mock(模拟)数据了。
-
对应的一个项目进行开发可能有多个项目组,(项目组的构成 前端2个 后端5个 一个app开发 一个测试 一个ui)。项目组的统筹叫项目组长,上面的项目的统筹项目经理(三到五个项目组)
2.mock数据
mock数据其实就是模拟对应的数据接口(在后端接口没出来之前能独立开发)(当前后端接口出来以后进行前后端联调(swagger生成接口文档))
mock数据的方式
-
使用mock.js来进行数据mock(自己书写)
-
使用第三方mock平台(fastmock apipost apimock...)
第三方mock平台其实内核也是mock.js
-
使用node的json-server来进行数据mock
-
后端配合mock (不存在)
3.第三方数据mock
fastmock
基本使用
创建账号登录
创建对应的项目接口
{
code:200,
message:'ok',
data:{
'city':'@city(true)',
'name':'@cname()',
'age':'@integer(1, 99)'
}
}
4. 相关mock.js的文档操作
"string|1-10": "=", // 随机生成1到10个等号
"string2|3": "=", // 随机生成2个或者三个等号
"number|+1": 0, // 从0开始自增
"number2|1-00.1-3": 1, // 生成一个小数,小数点前面1到10,小数点后1到3位
"boolean": "@boolean( 1, 2, true )", // 生成boolean值 三个参数,1表示第三个参数true出现的概率,2表示false出现的概率
"name": "@cname", // 随机生成中文姓名
"firstname": "@cfirst", // 随机生成中文姓
"int": "@integer(1, 10)", // 随机生成1-10的整数
"float": "@float(1,2,3,4)", // 随机生成浮点数,四个参数分别为,整数部分的最大最小值和小数部分的最大最小值
"range": "@range(1,100,10)", // 随机生成整数数组,三个参数为,最大最小值和加的步长
"natural": "@natural(60, 100)", // 随机生成自然数(大于零的数)
"email": "@email", // 邮箱
"ip": "@ip" ,// ip
"datatime": "@date('yy-MM-dd hh:mm:ss')" // 随机生成指定格式的时间
"list|10": [{
"id|+1": 1,
"name": "@cword(10)",
"title": "@cword(20)",
"descript": "@csentence(20,50)",
"price": "@float(10,100,10,100)"
}]
"list|10": [{
// 参数从左到右依次为,图片尺寸,背景色,前景色(及文字颜色),图片格式,图片中间的填充文字内容
"image": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')"
}]
简易的接口
{
"code":'200',
'data':{
"mylist|10": [{
"id|+1": 1,
"name": "@cword(10)",
"title": "@cword(20)",
"descript": "@csentence(20,50)",
"price": "@float(10,100,10,100)",
"float": "@float(1,2,3,4)",
"range": "@range(1,100,10)",
"natural": "@natural(60, 100)",
"email": "@email",
"ip": "@ip" ,
"datatime": "@date('yy-MM-dd hh:mm:ss')",
"image": "@image('200x100', '@hex', '@hex', 'png', '@word')"
}]
},
'messgae':'OK'
}
在线mock平台的数据都是随机生成的(死数据),所以对应的你只能执行查询的操作,不能执行增删改的操作。也就说你发起的post请求,delete请求,put请求等,其实都是返回死的数据。(mock关注的是数据的格式 并不关注于数据本身)
简易的登录接口
{
"code": "0000",
"data": {
"verifySuccess": function({_req, Mock}) {//_req表示请求
let body = _req.body; //获取请求体
//写死了对应的用户名为admin 密码为123456
return body.username === 'admin' && body.password === '123456';
},
"userInfo": function({_req, Mock}) {
let body = _req.body; //获取请求体
//验证用户名和密码
if (body.username === 'admin' && body.password === '123456') {
//返回mock数据
return Mock.mock({
username: "admin",
email: "@email",
address: "@address"
});
//登录失败返回的数据为空
} else {
return null;
}
},
"token": function({_req,Mock}){
let body = _req.body;
if (body.username === 'admin' && body.password === '123456') {
//返回32位的英文
return Mock.mock("@word(32)")
}
return null
}
},
"desc": "成功"
}
5.token
-
基于jwt(json web token)的所有的请求(做验证的)都要带上对应的token进行验证
-
token是你登录的时候给你返回的 后续你访问其他的相关jwt接口就需要带上这个token(加密的)
-
token的组成部分 (令牌)
标识 (随机生成的)
数据 (相关用户信息)
过期时间 (对应的失效时间)
-
在发送数据到某些jwt接口(不包括登录注册)的时候 需要携带token(放在请求头/cookie)
-
在对应的登录功能的时候 会接收对应的token存起来(登录的响应回来的时候)(localStorage)
-
请求拦截 判断当前的接口是否需要携带token 如果需要将token放入请求头进行发送
-
响应拦截 判断当前是否有token返回 将token存入到localstorage里面
简单登录功能实现
$('button').click(()=>{
//获取用户名和密码
let username = $('input:eq(0)').val()
let password = $('input:eq(1)').val()
//发送请求
$.post('https://www.fastmock.site/mock/63ed6ce74ac932e4d8ed48f176ab80d3/test/login',{
username,
password
},(res)=>{
console.log(res);
localStorage.setItem('token',res.data.token)
})
})
$(document).ajaxSend(function(event, request, settings) {
//携带token发送
request.setRequestHeader('x-token',localStorage.getItem('token'))
});
6.node的json-server
node是一个用于服务端的js库,也就是说你使用在服务端(类似于后台语言 (python))
使用过程
-
1.需要安装node环境
下载node(node版本问题 稳定版14 16有一定问题)下载地址
无脑安装 (next到底)
测试安装
node -v #用于来执行js文件
npm -v #用于管理所有的第三方库(包管理器)
-
如果对应的下载是解压版需要配置对应的环境变量(path路径下)
-
2.借助node安装对应的json-server包
npm i json-server -G #安装对应的json-server 全局安装
-
3.使用json-server命令启动相关服务(依赖json文件来启动服务)
以vscode来启动对应的服务 对应的vscode需要以管理员身份运行
需要执行一个指令(不然json-server无法使用)
set-ExecutionPolicy RemoteSigned
启动json-server
准备json文件
{
"users":[
{
"id":"1",
"username":"jack",
"age":"18"
},
{
"id":"2",
"username":"tom",
"age":"20"
}
]
}
打开终端
json-server -w 文件名 -p 端口号 -h 主机名 #默认主机名为localhost 默认端口号为3000
json-server会给你提高一系列的接口(resultFul风格)
对应的接口说明
get请求
localhost:3000/users/1 #访问id为1的对象
//?为条件查询
localhost:3000/users?id=1 #访问条件为id=1的内容(数组)
localhost:3000/users?age=18 #访问条件为age=18的内容(数组)
//分页查询
http://localhost:3000/users?_limit=1?_page=1 #查询第一个页显示俩个的数据
post请求
localhost:3000/users #添加一个用户 返回对应添加的用户
delete请求
localhost:3000/users/1 #删除id为1的用户 返回的是一个{}
put及patch请求
localhost:3000/users/1 #修改id为1的用户 返回的是你修改完的对象
扩展内容
数组扁平化及实现方式
概述:数组扁平化是将一个多维数组(数组里面嵌套数组)变成一个一维数组(数组里面没有数组)。
实现方式
- 使用es6新增的数组扁平化方法 flat
var arr = [[1],[2],[3,[2]]]
console.log(arr.flat(Infinity))
使用扩展运算符
var arr = [[1],[2],[3,[2]]]
function fn(arr){
while(arr.some(v=>Array.isArray(v))){
arr = [].concat(...arr)
}
return arr
}
fn(arr)
递归实现
var arr = [[1],[2],[3,[2]]]
function flatFn(arr) {
let value = arr.reduce((prev, current) => {
//判断当前内容是否是数组
//如果是数组递归
if (Array.isArray(current)) {
return prev.concat(flatFn(current))
} else {
//如果不是数组加进去
prev.push(current)
return prev
}
}, [])
return value
}
flatFn(arr)
使用字符串匹配
var arr = [[1],[2],[3,[2]]]
let str = arr.toString()
console.log(str.split(','))