wordpress网站的cdn怎么设置,滨海新区商城网站建设,网站开发答辩ppt,惠州微网站建设文章目录 一、构建方法1、api/request.js2、api/requestHandler.js3、api/index.js 二、测试方法1、api/axios.js2、main.js3、app.vue4、vue.config.js5、index.html 三、打包1、配置package.json2、生成库包3、配置发布信息4、发布 四、使用1、安装2、使用 五、维护1、维护和… 文章目录 一、构建方法1、api/request.js2、api/requestHandler.js3、api/index.js 二、测试方法1、api/axios.js2、main.js3、app.vue4、vue.config.js5、index.html 三、打包1、配置package.json2、生成库包3、配置发布信息4、发布 四、使用1、安装2、使用 五、维护1、维护和更新2、注意事项 一、构建方法 确定工具库的需求和功能在开始构建工具库之前你需要明确你的工具库需要包含哪些方法及工具以及这些工具或方法应该具备哪些功能。这有助于你更好地规划你的开发工作。 编写工具代码使用你熟悉的前端框架如React、Vue等编写工具代码。确保你的代码具有良好的可读性和可维护性并遵循相关的编码规范。 创建工具库的结构为了组织和管理你的组件你需要创建一个清晰的目录结构。这可以包括组件的源代码、样式文件、文档和示例等。
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;charsetUTF-8; // 配置请求头
axios.defaults.headers[X-Requested-With] XMLHttpRequest; // 区分ajax请求还是普通请求
axios.defaults.withCredentials true; // axios 默认不发送cookie需要全局设置true发送cookieclass 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)})}/*** 提交数据同时支持 data 和 params* param {*} url * param {*} params * returns */post(url, params {}) {return this.instance({url: url,method: post,data: params})}/*** 获取数据只支持 params 传参* param {*} url * param {*} params * returns */get(url, params {}) {return this.instance({url: url,method: get,params: params})}/*** 更新数据同时支持 data 和 params* param {*} url * param {*} params * returns */put(url, params {}) {return this.instance({url: url,method: put,data: params})}/*** 删除数据只支持 params传参* param {*} url * param {*} params * returns */delete(url, params {}) {return this.instance({url: url,method: delete,params: params})}
}export default HttpRequest2、api/requestHandler.js
这里是请求拦截中的方法的抽离
const winConfig window._CONFIG || {}
const {urlRandom,tampering,SM4Rncrypt,timeout
} winConfigexport const requestTimeOut timeout/*** 防重放这里添加时间戳和6位随机数* 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(urlparamsbtoa(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二、测试方法
编写文档和示例为你的工具方法编写清晰的文档和示例这有助于其他开发者理解和使用你的工具库。
1、api/axios.js
这个是使用时的文件。现在测试用
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
这个是使用时的文件。现在测试用
import * as api from ./api/axios
Vue.prototype.$apis api3、app.vue
这个是使用时的文件。现在测试用
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、配置发布信息
配置package.json在项目的根目录下创建一个package.json文件并配置相关的元信息例如包的名称、版本、描述、入口文件等。确保你的包名在npm上是唯一的尤其是如果你打算将它发布到公共npm仓库。
注意如果你的npm仓库是私有的你可能需要在package.json中添加一个publishConfig字段来指定你的私有仓库地址。
在zouAxion文件夹里面创建package.json文件配置发布信息。
{name: zou-axion,version: 0.1.2,private: false,license: MIT,description: 今天我发布一个zouAxion插件,main: zouAxion.umd.min.js,scripts: {},dependencies: {},devDependencies: {}}4、发布 配置npm仓库如果你还没有一个私有的npm仓库你需要先搭建一个。你可以使用Verdaccio等工具来快速搭建一个私有的npm仓库。 配置npm源在你的本地开发环境中将npm的源配置为你的私有仓库地址。这可以确保当你发布组件库时它会被上传到你的私有仓库而不是公共的npm仓库。 登录到npm仓库在终端中运行npm login命令并按照提示输入你的npm仓库的用户名、密码和邮箱地址。这将使你能够发布包到你的私有仓库。 发布工具库在终端中运行npm publish命令来发布你的工具库。这会将你的工具库上传到你的私有npm仓库中。
配置npm源
npm set registry http://localhost:4873/
在zouAxion文件夹里面执行发布命令
npm publish四、使用
一旦你的工具库被发布到私有npm仓库你就可以在其他项目中使用它了。只需在项目中使用npm install命令来安装你的工具库然后按照文档中的说明来使用它即可。
跟使用axios的方法一样。
1、安装
npm install axios
npm install zou-axios2、使用
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 apiapp.vue
this.$apis.getHistory({}).then(res {console.log(res.data)
})五、维护
1、维护和更新
随着项目的进行你可能需要对你的工具库进行维护和更新。这包括修复bug、添加新功能、更新文档等。在每次更新后记得重新打包并发布你的工具库以便其他项目能够使用到最新的版本。
2、注意事项 版本控制确保你的工具库使用版本控制如Git以便你可以追踪和管理不同版本的代码。 测试在发布工具库之前确保进行充分的测试以确保其稳定性和可用性。 文档和示例持续更新和维护你的文档和示例以帮助其他开发者更好地理解和使用你的工具库。 记得在开发过程中保持代码质量和可维护性并定期更新和维护你的组件库。
