前端开发
北京前端外包 电话:186-2237-7561
服务客户有中国移动、方正国际、中百集团等
Search:DIV
目录结构： src src/htmlsrc/jssrc/json package.json{ "author": "Your Name", "license": "ISC", "type": "module",...目录结构： src src/htmlsrc/jssrc/json package.json{ "author": "Your Name", "license": "ISC", "type": "module", "dependencies": { "fs": "^0.0.1-security", "marked": "^14.1.1", "openai": "^4.58.0" }}js/config.js // 指定要创建的 JSON 文件的路径const filePathJson = '../json/data.json'; export { filePathJson } fsHandle.js内容import fs from 'fs'; // 导入 fs 模块 export function creatJson(filePath, jsonContent) { // 使用 fs.writeFile 方法写入 JSON 文件 fs.writeFile(filePath, jsonContent, (err) => { if (err) { console.error('An error occurred:', err); return; } console.log('JSON data has been saved to', filePath); });} libkimi.js 内容 import { OpenAI } from "openai"; const client = new OpenAI({ apiKey: "", // 在这里将 MOONSHOT_API_KEY 替换为你从 Kimi 开放平台申请的 API Key baseURL: "https://api.moonshot.cn/v1",}) export async function someAsyncOperation(obj) { // 模拟一个异步操作，比如从API获取数据 return new Promise(async (resolve) => { const completion = await client.chat.completions.create({ model: "moonshot-v1-8k", messages: [ {"role": "system", "content": "你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅长中文和英文的对话。你会为用户提供安全，有帮助，准确的回答。同时，你会拒绝一切涉及恐怖主义，种族歧视，黄色暴力等问题的回答。Moonshot AI 为专有名词，不可翻译成其他语言。"}, {"role": "user", "content":obj.title} ], temperature: 0.3, }) resolve(completion.choices[0].message.content) }); } test.js 执行文件import { someAsyncOperation } from './libkimi.js';import { marked } from 'marked';import { creatJson } from './fsHandle.js';import { filePathJson } from './config.js';import fs from 'fs'; // 导入 fs 模块 let array = [{ title: "帮我写理财融资最好的方案都有哪些"}, { title: "帮我写提升工作效率的方案"}, { title: "帮我写如何更好的向上管理"}] async function asyncMapWithAwait(array, asyncFunction) { const results = []; for (const item of array) { let markdownText = await asyncFunction(item); console.log(markdownText); //单独数据 let htmlText = marked.parse(markdownText) fs.writeFileSync(`../html/${item.title}.html`, htmlText); let tempJson = { title: item.title, content: marked.parse(htmlText) } results.push(tempJson); } return results;} console.log("config.filePath.json",filePathJson) // 使用asyncMapWithAwait(array, someAsyncOperation).then((results) => { console.log(results); // 输出: [2, 4, 6, 8, 10] // 将 JSON 对象转换为字符串 let jsonContent = JSON.stringify(results, null, 2); // 使用缩进为 2 空格的格式 creatJson(filePathJson, jsonContent)});
在 Vue 3 中，如果你想在 setup 函数中监听 URL 的变化，可以使用 Vue Router 的导航守卫（Navigation Guards）或者 Vue 的响应式 API 来实现。以下是两种常见的方法：...在 Vue 3 中，如果你想在 setup 函数中监听 URL 的变化，可以使用 Vue Router 的导航守卫（Navigation Guards）或者 Vue 的响应式 API 来实现。以下是两种常见的方法：方法 1: 使用 Vue Router 的导航守卫如果你的 Vue 3 应用使用了 Vue Router，你可以利用 Vue Router 提供的导航守卫来监听 URL 的变化。 全局守卫: 你可以在应用的入口文件中（通常是 main.js 或 main.ts）设置全局守卫。 javascriptimport { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ // 定义路由 ] }); router.beforeEach((to, from, next) => { // 监听 URL 变化 console.log('路由变化：', from.path, '->', to.path); next(); }); export default router; 组件内守卫: 如果你只想在特定组件中监听 URL 变化，可以在该组件内使用 beforeRouteEnter 或 beforeRouteUpdate 守卫。 javascriptexport default { beforeRouteEnter(to, from, next) { console.log('路由变化：', from.path, '->', to.path); next(); }, beforeRouteUpdate(to, from, next) { console.log('路由变化：', from.path, '->', to.path); next(); }, }; 方法 2: 使用 Vue 的响应式 API 监听 window.location如果你的应用没有使用 Vue Router，或者你只是想监听浏览器地址栏的变化，可以使用 Vue 的响应式 API 来监听 window.location 的变化。 使用 watchEffect 或 watch: javascriptimport { watchEffect, ref } from 'vue'; export default { setup() { const url = ref(window.location.href); watchEffect(() => { // 监听 URL 变化 console.log('URL 变化：', url.value); }); // 监听 window 的 popstate 事件（如用户点击浏览器的前进或后退按钮） window.addEventListener('popstate', () => { url.value = window.location.href; }); // 返回响应式数据 return { url }; } }; 请注意，使用 watchEffect 或 watch 来监听 window.location 的变化可能需要手动处理一些特殊情况，比如用户使用浏览器的前进或后退按钮时，并不会触发 popstate 事件。此外，这种方法可能不如使用 Vue Router 的导航守卫那样方便和强大，特别是在复杂的单页应用中。总的来说，选择哪种方法取决于你的应用是否使用了 Vue Router，以及你希望监听 URL 变化的具体场景。
chrome插件会包含哪些文件及文件D:.│ manifest.json│├─html│ index.html│├─images│ icon-128.png│ icon-16.png│├─scripts│ background.chrome插件会包含哪些文件及文件D:.│ manifest.json│├─html│ index.html│├─images│ icon-128.png│ icon-16.png│├─scripts│ background.js│├─styles│ main.css│└─_locales ├─en │ messages.json │ └─zh_CN messages.json简单说明一下： html：存放html页面images：存放插件图标scripts：存放js文件styles: 存放样式_locales: 存放多语言文件manifest.json：一些关于插件的元数据，作为chrome入口文件看目录结构，像不像一个网站？Chrome插件就是一个网站类的应用，它是用html、javascript、css组成的一个webapp; 相比于通常的webapp, Chrome插件还可以调用更多浏览器层面的api,包括书签、历史记录、网络请求拦截、截获用户输入等等。（PS：插件不要随便乱装哦，很危险滴！）重点说一说这个文件：manifest.json如前所述，它包含了一些插件的元数据，作为chrome的入口文件，可以理解为插件的程序清单，那么它到底做了什么事情呢？ 结合示例，我们细细来看： { // 清单版本号，建议使用 版本 2，版本 1 是旧的，已弃用，不建议使用 "manifest_version": 2, "name": "chome-plugin", // 插件名称 "version": "1.8.6", // 插件版本 // 这里写些废话，举个栗子，‘应产品要求，杀个程序祭天’ "description": "This is an extension for your chrome", "icons": { "16": "images/custom/16x16.png", "48": "images/custom/48x48.png", "128": "images/custom/128x128.png" }, //browser_action和page_action只能添加一个 "browser_action": { //浏览器级别行为，所有页面均生效 "default_icon": "images/custom/16x16.png",//图标的图片 "default_title": "Hello ELSE", //鼠标移到图标显示的文字 "default_popup": "html/popup.html" //单击图标后弹窗页面 }, "page_action":{ //页面级别的行为，只在特定页面下生效 "default_icon":{ "24":"images/custom/24x24.png", "38":"images/custom/38x38.png" }, "default_popup": "html/popup.html", "default_title":"Hello ELSE" }, // 可选 "author": "ELSE TEAM", "automation": "...", "background": { "scripts": [ "scripts/background.js", "scripts/devtools-page.js" ] }, "devtools_page": "html/devtools-page.html", // 定义对页面内容进行操作的脚本 "content_scripts": [ { "js":["js/else-insert.js"], "css": ["css/else-insert.css"], "matches":["<all_urls>"] // 只在这些站点下 content_scripts会运行 } ], // 数组，声明插件所需要的权限，这里就是很危险的存在了，想干坏事的你是不是很激动！ "permissions": [ "cookies", "http://*/*", "management", "tabs", "contextMenus" ]}
