一、構建方法
-
確定工具庫的需求和功能：在開始構建工具庫之前，你需要明確你的工具庫需要包含哪些方法及工具，以及這些工具或方法應該具備哪些功能。這有助于你更好地規(guī)劃你的開發(fā)工作。
-
編寫工具代碼：使用你熟悉的前端框架（如React、Vue等）編寫工具代碼。確保你的代碼具有良好的可讀性和可維護性，并遵循相關的編碼規(guī)范。
-
創(chuàng)建工具庫的結構：為了組織和管理你的組件，你需要創(chuàng)建一個清晰的目錄結構。這可以包括組件的源代碼、樣式文件、文檔和示例等。
1、api/request.js
這里是axios操作的封裝
import axios from 'axios'
import {
replayDefence,
encryptRequest,
distortDefence,
requestTimeOut
} from './requestHandler'
axios.defaults.timeout = requestTimeOut || 20000; //超時響應
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'; // 配置請求頭
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'; // 區(qū)分ajax請求還是普通請求
axios.defaults.withCredentials = true; // axios 默認不發(fā)送cookie，需要全局設置true發(fā)送cookie
class HttpRequest {
constructor() {
this.instance = axios.create()
this.interceptors()
}
interceptors() {
// request攔截器
this.instance.interceptors.request.use((config) => {
if (config.url) {
// 防重放
replayDefence(config);
// 報文加密
encryptRequest(config);
// 防篡改
distortDefence(config);
return config;
}
}, error => {
return Promise.reject(error);
})
// respone攔截器
this.instance.interceptors.response.use(async (res) => {
if (res.status === 200) {
// return Promise.resolve(res)
return res
} else {
return Promise.reject(res)
}
}, error => {
return Promise.reject(error)
})
}
/**
* 提交數(shù)據(jù)，同時支持 data 和 params
* @param {*} url
* @param {*} params
* @returns
*/
post(url, params = {}) {
return this.instance({
url: url,
method: 'post',
data: params
})
}
/**
* 獲取數(shù)據(jù)，只支持 params 傳參
* @param {*} url
* @param {*} params
* @returns
*/
get(url, params = {}) {
return this.instance({
url: url,
method: 'get',
params: params
})
}
/**
* 更新數(shù)據(jù)，同時支持 data 和 params
* @param {*} url
* @param {*} params
* @returns
*/
put(url, params = {}) {
return this.instance({
url: url,
method: 'put',
data: params
})
}
/**
* 刪除數(shù)據(jù)，只支持 params傳參
* @param {*} url
* @param {*} params
* @returns
*/
delete(url, params = {}) {
return this.instance({
url: url,
method: 'delete',
params: params
})
}
}
export default HttpRequest
2、api/requestHandler.js
這里是請求攔截中的方法的抽離
const winConfig = window._CONFIG || {}
const {
urlRandom,
tampering,
SM4Rncrypt,
timeout
} = winConfig
export const requestTimeOut = timeout
/**
* 防重放，這里添加時間戳和6位隨機數(shù)
* @param {*} config
*/
export const replayDefence = (config) => {
if (urlRandom && config.url) {
const nonce = Math.floor(Math.random() * 1000000)
config.params = {
_t: Date.parse(new Date()),
nonce,
...config.params
}
}
}
/**
* 報文加密，這里使用base64代替加密，你可以替換成SM4加密
* @param {*} config
*/
export const encryptRequest = (config) => {
if (SM4Rncrypt && config.url && config.data) {
if (['post', 'put', 'delete'].includes(config.method)) {
config.headers["Content-Type"] = "application/json";
let jsonStr = JSON.stringify(config.data);
config.data = btoa(jsonStr);
}
}
}
/**
* 防篡改，這里是btoa(url+params+btoa(data))，你可以再加鹽
* @param {*} config
*/
export const distortDefence = (config) => {
if (tampering && config.url) {
let validCode = `${config.url}`
if (config.params) {
for (let key in config.params) {
validCode += `&${key}=${config.params[key]}`
}
}
if (config.data && config.method != 'get') {
validCode += SM4Rncrypt ? config.data : JSON.stringify(config.data);
}
console.log('validCode:', validCode)
config.headers["sign"] = btoa(validCode)
}
}
3、api/index.js
這里文件首頁
import HttpRequest from "./request";
const axios = new HttpRequest()
export default axios
二、測試方法
編寫文檔和示例：為你的工具方法編寫清晰的文檔和示例，這有助于其他開發(fā)者理解和使用你的工具庫。
1、api/axios.js
這個是使用時的文件。現(xiàn)在測試用
import axios from "./index";
const baseURL = "";
//手機號歸屬地查詢
export const getPhone = (params) => axios.post(baseURL + '/v2/phone', params)
//歷史上的今天
export const getHistory = (params) => axios.post(baseURL + '/v2/history', params)
// Bing每日壁紙
export const getBing = (params) => axios.post(baseURL + '/v2/bing', params)
// 用戶IP信息
export const getIp = (params) => axios.post(baseURL + '/v2/getip', params)
//隨機顏色
export const getColor = (params) => axios.get(baseURL + '/v2/color', params)
2、main.js
這個是使用時的文件?，F(xiàn)在測試用
import * as api from './api/axios'
Vue.prototype.$apis = api
3、app.vue
這個是使用時的文件?，F(xiàn)在測試用
console.log(this.$apis)
this.$apis.getPhone({ tel: 13225750729 }).then(res => {
console.log(res.data)
})
this.$apis.getHistory({}).then(res => {
console.log(res.data)
})
this.$apis.getIp({}).then(res => {
console.log(res.data)
})
this.$apis.getColor({}).then(res => {
console.log(res.data)
})
4、vue.config.js
配置代理
module.exports = {
productionSourceMap: false,
devServer: {
proxy: 'https://tenapi.cn/'
}
}
5、index.html
首頁添加全局變量配置信息
window._CONFIG = {
urlRandom: true, //防重放
tampering: true, //防篡改
SM4Rncrypt: false, //報文加密
timeout: 10000 //超時時間
}
三、打包
1、配置package.json
添加打包到庫命令
{
"scripts": {
"plugin": "vue-cli-service build --target lib --name zouAxion --dest zouAxion src/api/index.js"
},
}
2、生成庫包
打包工具庫：運行打包命令，將你的工具庫打包成一個npm包。這通常會在你的項目根目錄下生成一個目錄，其中包含打包后的文件。
npm run plugin
這是生成的zouAxion文件夾。
3、配置發(fā)布信息
配置package.json：在項目的根目錄下創(chuàng)建一個package.json文件，并配置相關的元信息，例如包的名稱、版本、描述、入口文件等。確保你的包名在npm上是唯一的，尤其是如果你打算將它發(fā)布到公共npm倉庫。
注意：如果你的npm倉庫是私有的，你可能需要在package.json中添加一個publishConfig字段來指定你的私有倉庫地址。
在zouAxion文件夾里面創(chuàng)建package.json文件，配置發(fā)布信息。
{
"name": "zou-axion",
"version": "0.1.2",
"private": false,
"license": "MIT",
"description": "今天我發(fā)布一個zouAxion插件",
"main": "zouAxion.umd.min.js",
"scripts": {
},
"dependencies": {
},
"devDependencies": {
}
}
4、發(fā)布
-
配置npm倉庫：如果你還沒有一個私有的npm倉庫，你需要先搭建一個。你可以使用Verdaccio等工具來快速搭建一個私有的npm倉庫。
-
配置npm源：在你的本地開發(fā)環(huán)境中，將npm的源配置為你的私有倉庫地址。這可以確保當你發(fā)布組件庫時，它會被上傳到你的私有倉庫而不是公共的npm倉庫。
-
登錄到npm倉庫：在終端中運行npm login命令，并按照提示輸入你的npm倉庫的用戶名、密碼和郵箱地址。這將使你能夠發(fā)布包到你的私有倉庫。
-
發(fā)布工具庫：在終端中運行npm publish命令來發(fā)布你的工具庫。這會將你的工具庫上傳到你的私有npm倉庫中。
配置npm源
npm set registry http://localhost:4873/
在zouAxion文件夾里面執(zhí)行發(fā)布命令
npm publish
四、使用
一旦你的工具庫被發(fā)布到私有npm倉庫，你就可以在其他項目中使用它了。只需在項目中使用npm install命令來安裝你的工具庫，然后按照文檔中的說明來使用它即可。
跟使用axios的方法一樣。
1、安裝
npm install axios
npm install zou-axios
2、使用
api/axios.js
import axios from "zou-axios";
const baseURL = "";
//歷史上的今天
export const getHistory = (params) => axios.post(baseURL + '/v2/history', params)
main.js
import * as api from './api/axios'
Vue.prototype.$apis = api
app.vue
this.$apis.getHistory({}).then(res => {
console.log(res.data)
})
五、維護
1、維護和更新
隨著項目的進行，你可能需要對你的工具庫進行維護和更新。這包括修復bug、添加新功能、更新文檔等。在每次更新后，記得重新打包并發(fā)布你的工具庫，以便其他項目能夠使用到最新的版本。
2、注意事項
-
版本控制：確保你的工具庫使用版本控制（如Git），以便你可以追蹤和管理不同版本的代碼。
-
測試：在發(fā)布工具庫之前，確保進行充分的測試，以確保其穩(wěn)定性和可用性。
-
文檔和示例：持續(xù)更新和維護你的文檔和示例，以幫助其他開發(fā)者更好地理解和使用你的工具庫。文章來源：http://www.zghlxwxcb.cn/news/detail-851397.html
-
記得在開發(fā)過程中保持代碼質量和可維護性，并定期更新和維護你的組件庫。文章來源地址http://www.zghlxwxcb.cn/news/detail-851397.html
到了這里，關于自己動手封裝axios通用方法并上傳至私有npm倉庫：詳細步驟與實現(xiàn)指南的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
