24级《web前端开发》复习题库(答案)

更新时间: 试题数量: 购买人数: 提供作者:

有效期: 个月

章节介绍: 共有个章节

收藏
搜索
题库预览
读程序补全代码: 使用POST请求访问给定的API接口,将响应的数据存入本地存储中,再从本地存储中读取数据完成后续工作。 (1)模块间关系如下: (2)界面布局如下: (3)post请求相关信息如下: ①请求体参数: { userAccount: string 用户账号 userPwd: string 用户密码 } ②响应体内容: message: string 响应消息 data: 响应对象 { userID:string 用户ID号 userAccount: string 用户账号 userPwd: string 用户密码 regRegion: string 注册地区 regTime: string 注册时间 firstLoginTime: string 第一次登录时间 lastLoginTime: string 最后一次登录时间 } 补全以下三个模块的代码: main.js模块: import dataFetch from './dataFetcher.js'; //导入dataFetcher.js模块导出的函数,并重新命名为dataFetch import {dataRender as initTable } from './dataRender.js'; //导入dataRender.js模块导出的函数,并重新命名为initTable const filterForm=document.getElementById('filterForm'); filterForm.addEventListener('submit',async (evt)=>{ evt.preventDefault(); //id为filterForm的元素节点是表单中的提交按钮,当其触发提交事件时,不需要进行默认行为的执行 const formData = { //获取表单数据, 作为请求体参数 userAccount: document.getElementById('account').value, //获取用户输入的账号 userPwd: document.getElementById('pwd').value //获取用户输入的密码 }; __________dataFetch(formData); //等待函数调用结束 initTable(); }); dataFetcher.js模块: async function dataFetcher(parameters){ return fetch(API接口, { method: 'POST', //设置请求方式 headers: { 'Content-Type': 'application/json', }, body: __________ //设置请求体 }) .then(response => response.json()) .then(data => { __________; //将响应数据中的data中的数据存入本地存储中,键名为userLists return data; }) .catch(error => console.error(error)); } export default dataFetcher; //导出函数 dataRender.js模块: function dataRender() { let userArr=__________; //获取本地存储中指定关键字对应的值,以JSON对象形式存入变量 if(!userArr){ console.warn('没有找到用户数据'); return; } ... } export __________;//导出函数(含图)(含图)