Vue企业开发实战（第2版）-课件 项目5 大觅项目中与服务端通信

《Vue企业开发实战》·Vue3企业级项目教程项目5大觅项目中与服务端通信任务1代理与Mock·任务2Mock.js·任务3snailmock任务4Axios·任务5大觅通信配置授课教师：XXX前后端分离·Vite代理·Axios·接口约定学习目标没有后台也能按约定出数，页面能展示、失败有提示01打通代理能在vite.config.js配xy，把/api转到Mock服务02会写mock文件能按APISchema写猜你喜欢一类接口，字段名对得上03会用Mock.js能写'name|rule':value和@占位符，生成列表而不是手写二十条04会封装Axios能get/post，抽出实例和拦截器，失败进catch05接到大觅一页onMounted取数，字段对齐，错误给友好提示项目知识导图五个任务：先通路，再出数，再取数，再进页面任务1Mock服务Vite代理、mock目录、猜你喜欢任务2Mock.jsDTD模板、DPD占位符任务3snailmock独立Mock服务，默认3721任务4Axios安装、GET/POST、封装、拦截器任务5项目配置字段对齐、错误提示、联调项目导读Vue本身不提供通信接口，尤雨溪推荐Axios列表若写死在组件里，接口一来要改很多处。Vite不再用Webpack的proxyTable。本项目先按后端给的APISchema用Mock出约定数据，再封装请求接到大觅页面。模拟数据不能当生产数据。通路浏览器只打同源/api，由Vite转发到Mock。出数Mock.js按规则生成票务字段。服务snailmock给出可访问的URL。取数Axios封装，失败给提示，字段对齐。TASK01Mock服务配置与使用01Vite代理02写mock文件03对照接口文档为什么要代理+Mock前后端分离下，页面不能等后台写完再开工01写死数组的代价接口来了要改很多组件，字段还容易对不齐。02直接打真实域开发时跨域、后台没好、联调排队。03代理浏览器只打同源/api，由Vite开发服务器转发。04Mock按约定先返回JSON，页面按真接口写。上线再切真实后端。5.1.1配置Vite代理代理写在项目根目录vite.config.js的xyimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue()],server:{proxy:{'/api':{target:':3721',changeOrigin:true,secure:false,//rewrite:(path)=>path.replace(/^\/api/,'')}}}})每一项做什么•target：Mock服务地址，snailmock默认3721•changeOrigin：改请求头里的Host•secure：false时允许自签名证书•rewrite可选，去掉/api前缀•axios.get('/api/user/list')会被转到3721上同一路径•改完必须重启npmrundev5.1.2mock文件怎么放支持get/api/xxx和带参数的post；文件名即约定目录：mock/get、mock/post。命名示例api_list_guesslike.js：api表示接口，list表示列表页，guesslike是“猜你喜欢”。mock├──get│└──api_list_guesslike.js└──post└──api_@id_detail.js//<id>表示路由参数会变//如/api/:id/123课上先做哪条•先写猜你喜欢GET，两条数据就能验通路•url、method必须和页面请求一致•多了/api或少了/api会404•通了再美化条数，不要先堆一百条示例1猜你喜欢接口按后端APISchema模拟；itemTypeId不同返回不同列表module.exports=function(param){letpaid=parseInt(param.body.itemTypeId)if(paid===0||paid===1){return{success:'string',errorCode:'string',msg:'','data|1-4':[{id:'@string("number",2)',itemName:'@csentence(5)',imgUrl:'/perform/project/1381/138121_n.jpg',areaName:'@province',address:'@county(true)',startDate:'@datetime("yyyy-MM-dd")',minPrice:'@integer(60,100)'}]}}}5.1.3对照接口文档再写字段先读Schema，再写占位符；页面用的名字必须一致图5.1猜你喜欢接口定义•接口名称、输入、输出、异常码四块都要看•@string/@province/@integer：占位符，最终JSON里没有@•'data|1-4'：随机1到4条，用来看列表长短•itemName/minPrice/imgUrl：和列表页字段必须同名•只在开发环境走Mock，上线切真接口上机1代理打通浏览器或临时请求能看到JSON要求•在vite.config.js配好/api→3721•按命名约定写一条mock（可先两条固定数据）•启动Mock服务后再npmrundev•请求/api/...能返回JSON，不是404•记下字段名，留给任务5的页面使用合格通路通了才算过。端口不一致、path多写/api、改配置未重启是常见坑。TASK02Mock.js语法01DTD数据模板02DPD占位符03大觅够用清单5.2.1Mock.js做什么后台API格式已定、实现还没好时，用它尽量还原真数据手写两条可以；二十条票务再加IP、图片、地址，工作量会剧增。Mock.js按模板生成假数据，让前端先独立开发。功能一根据数据模板生成模拟数据。课上以前两条为主，猜你喜欢接口已经在用模板。功能二模拟AJAX请求，生成并返回数据。课上以前两条为主，猜你喜欢接口已经在用模板。功能三基于HTML模板生成模拟数据。课上以前两条为主，猜你喜欢接口已经在用模板。5.2.2数据模板DTD每个属性由三部分构成：属性名、生成规则、属性值//'name|rule':value'name|min-max':value'name|count':value'name|min-max.dmin-dmax':value'name|min-max.dcount':value'name|count.dmin-dmax':value'name|count.dcount':value'name|+step':value//|分隔属性名和规则，规则可省略//含义要看属性值的类型//值里可以写@占位符大觅先记住三条•'data|1-4':[{}]重复生成1–4条•'id|+1':1001自增•'minPrice|60-100':1整数区间•规则依赖值的类型：字符串是重复，数字是范围•先一条记录，再变成列表字符串、数字怎么写示例2：整数部分和小数位数都可以规定Mock.mock({'number1|1-100.1-10':1,'number2|123.1-10':1,'number3|123.3':1,'number4|123.10':1.123})//可能得到//number1:12.92//number2:123.51//number3:123.777//字符串//'name|min-max':'ab'重复ab，次数在min–max//'name|count':'ab'重复count次数字规则•'name|+1':n自增，初值n•'name|min-max':n整数落在区间•n只用来确定类型•带小数点的规则管小数位数•票价用整数区间即可布尔、对象、数组猜你喜欢的data数组，用的就是“重复数组”这一条类型写法含义布尔'name|1':truetrue/false各约一半对象'name|count':obj从对象里随机抽count个属性数组'name|1':arr随机抽一个元素数组'name|+1':arr按顺序取一个元素数组'name|min-max':arr把数组重复min–max次，得到新数组函数、正则与占位符DPD占位符只占位，最终值里不会留下@//函数：执行后取其返回值//正则：反向生成能匹配的字符串Mock.mock({regexp1:/[a-z][A-Z][0-9]/,//如pJ7regexp3:/\d{5,10}/})//@占位符或@占位符(参数)Mock.mock({name:{first:'@FIRST',last:'@LAST',full:'@first@middle@last'}})使用注意•@标识后面是占位符•引用的是Mock.Random方法•可extend自定义占位符•也可引用模板里已有属性•优先引用模板属性•大觅多用@ctitle@integer@image大觅字段够用的占位符以列表接口为准，不背全书字段建议说明id@string('number',2)或id|+1稳定唯一，给v-for的key用itemName@csentence/@ctitle中文演出名minPrice@integer(60,100)价格是数字不是字符串areaName/address@province/@county(true)场馆地域日期@datetime("yyyy-MM-dd")开演、结束是否售罄@boolean后面条件渲染会用到TASK03snailmock工具01独立Mock服务02默认372103和Vite的关系5.3数据写好了，谁来提供URL？snailmock模拟服务器，生成可供调用的接口地址它主要适用于独立MockServer，与Vite不耦合。代理里的target就是它启动后给出的地址。npminstall-gsnail-cline#网络差可用镜像/cnpmsnailmock#终端出现:3721图5.2snailmock启动后出现3721。三者缺一，Axios再封装也是404。TASK04Axios的安装及配置01为什么用02GET/POST03封装与拦截器5.4.1Axios是什么基于Promise的HTTP客户端，浏览器和Node都能用01浏览器里底层创建XMLHttpRequest；Node里发http请求。02Promisethen/catch，接到项目2。async/await也可以。03拦截与转换请求前、响应后都能插手；自动转JSON。04还能做的取消请求；客户端侧减轻CSRF/XSRF风险。课上先用get/post。5.4.2安装与常用方法大觅用NPM安装；企业里最常用get和postnpminstallaxiosimportaxiosfrom'axios'axios.get(url[,config])axios.post(url[,data[,config]])axios.put/patch/delete/head/optionsaxios.request(config)课上约定•列表、详情、搜索：GET•下单、登录：POST•没有jsonp方法，跨域用代理解决•URL要带上/api前缀每页直接axios.get写死完整域名，基地址一变要改十几处。所以任务后半要封装实例。示例5GET的两种写法query可以写在URL里，也可以放paramsaxios.get('/user?ID=1234').then(function(response){console.log(response)}).catch(function(error){console.log(error)})axios.get('/user',{params:{ID:12345}}).then(function(response){console.log(response)}).catch(function(error){console.log(error)})图5.3GET拿到评论接口数据示例6POST与封装提交用body；项目里再包一层便于通用配置axios.post('/user',{firstName:'friend',lastName:'Flintstone'}).then(res=>console.log(res)).catch(err=>console.log(err))exportfunctionpostRequest(params){returnrequest('post',url[params.type],{...params.data})}教材封装约定：type是url常量名，data是传给后台的对象。课上可先axios.create，页面只importhttp。consthttp=axios.create({baseURL:'/api',timeout:8000})exportdefaulthttp//页面：http.get('/movies')5.4.4–5.4.5请求设置与响应只有url必需；没写method时默认GET请求里常看•url/method/baseURL•params：拼到查询串•data：请求体•headers：如XMLHttpRequest•timeout：毫秒，超时进catch•transformRequest/transformResponse可加工数据响应里常看•data：服务器返回的主体，最常用•status/statusText：如200ok•headers、config•不要把整个res丢进模板•有的业务码包在data里，先解开•页面空不一定报红，先对字段名5.4.6拦截器在then/catch之前拦一把：请求前加token，响应后二次加工erceptors.request.use(function(config){console.log('请求马上要发送了！')returnconfig},function(error){returnPromise.reject(error)})erceptors.response.use(function(response){console.log('将要返回请求的数据了！')returnresponse},function(error){returnPromise.reject(error)})课上怎么用•请求拦截：打日志、预留token•响应拦截：可直接returnresponse.data•必须returnconfig/response，否则链路断•错误不要把堆栈甩到观众面前•封装在http.js里，不要每页写一遍上机2用GET拿到模拟数据教材：评论数据comment.json，显示到页面要求•安装Axios，抽出http实例，baseURL为/api•至少加一处请求或响应拦截日志•get本地模拟的评论或票务列表•控制台或页面能看到数据•人为断网或写错path，确认进catch合格通信链路第一次闭环。baseURL、代理未开、未重启、未catch不算过。TASK05大觅服务端通信配置01字段对齐02接到一页03联调清单5.5把零件装进项目组件里的名字必须对上接口，对不齐会silently空白importhttpfrom'@/api/http'import{onMounted,ref}from'vue'constlist=ref([])consterr=ref('')onMounted(()=>{http.get('/list/guesslike',{params:{itemTypeId:0}}).then(data=>{list.value=data.data||[]}).catch(()=>{err.value='列表暂时不可用