【前端】模块化

时间: 2023-07-11 admin 互联网

【前端】模块化

【前端】模块化

学习


推荐博客:前端工匠
前端模块化详解(完整版) ***
ES6可以配合使用Nodejs、Babel、webpack


静态项目

未使用前端框架

参考:
CDN 引入 axios 和 qs 及其使用方法
axios的封装、配置及使用

注意:必须要本地开启一个服务器进行访问,比如VSCode的Live Server插件,webstorm自带服务器端口访问,否则浏览器会报错

目录

工程名- js- - http.js- - index.js- index.html

关键代码
index.html

<!-- 先引入axios,qs 然后引入http.js 再引入该html对应的js文件 顺序不可颠倒 -->
<script src=".21.1/axios.min.js"></script>
<script src=".10.1/qs.min.js"></script>
<script src="js/http.js" type="module"></script>
<script src="js/video.js" type="module"></script>

js/http.js

/*请求模版类封装请求*/// 在此文件之前导入qs.js,会在全局作用域下生成一个Qs对象,常用操作:Qs.stringify(),Qs.parse()
// console.log(Qs) //首字母要大写
// 导入axios.js,会在全局作用域下生成一个axios对象
// console.log(axios)/*封装axios*/
const httpService = axios.create({baseURL: 'http://127.0.0.1:8080',timeout: 10000,// headers: {'X-Custom-Header': 'foobar'}
});
/*
// 添加请求拦截器
httpService.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
httpService.interceptors.response.use(function (response) {// 对响应数据做点什么return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});
*//*封装请求*/function get(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'get',params: params}).then(res => {console.log(res)resolve(res.data); //res.data 返回数据}).catch(err => {console.log(err)reject(err);})})
}//  post请求封装  默认json格式:'Content-Type':'application/json',
// 如果是文件上传,可以修改headers为 headers: { 'Content-Type': 'multipart/form-data' }
function post(url, params = {}, headers = {'Content-Type': 'application/json'}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params,headers: headers}).then(res => {console.log(res)resolve(res.data);}).catch(err => {console.log(err)reject(err);})})
}//7、将模块暴露
export {get,post
}// 测试类
// function getUserAccount() {
//     let params = {id: 123, name: 'jack'};
//     return axios.post(
//         "http://127.0.0.1:8080/test/demo011",
//         params) // post请求axios会自动stringify
//         .then(function (response) {
//             console.log("请求成功:", response.data); // axios会自动parse
//             return Promise.resolve(response.data) // 请求返回的数据
//         }).catch(function (error) {
//             console.error("请求失败:", error);
//             return Promise.reject(error)
//         });
// }
//
// export {
//     getUserAccount
// }

js/index.js

import {get, post} from "./http.js"async function test1() {let params1 = {id: 123, name: 'Jack'};let user_one = await get('/test/demo01', params1);console.log(user_one)
}async function test2() {let params2 = {id: 456, name: 'Tom'};let user_two = await post('/test/demo02', params2);console.log(user_two)
}test1()
test2()

后端部分代码

@RestController
@RequestMapping("/test")
public class TestController {@GetMapping("/demo01")public Result testdemo01(String id,String name){return Result.ok("成功", new String[]{id, name});}@PostMapping("/demo02")public Result testdemo02(String id,String name){return Result.ok("成功", new String[]{id, name});}
}