11 | > `aspectRatio = width/height` 12 | ```js 13 | build() { 14 | Row() { 15 | Row() 16 | .width(100) 17 | .backgroundColor(Color.Blue) 18 | .aspectRatio(1) // [!code error] 19 | Row() 20 | .width(100) 21 | .backgroundColor(Color.Red) 22 | .aspectRatio(16 / 8) // [!code error] 23 | } 24 | .height('100%') 25 | } 26 | ``` 27 | - `aspectRatio`的值可以是 `1` 宽高等比 28 | - `aspectRatio`的值可以是 `16 / 9` >>> 16 * 9的比例 29 | ::: 30 | 31 | 32 | -------------------------------------------------------------------------------- /docs/web/vue/css-use-vue.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 在css中使用vue的变量 3 | description: 在css中使用vue的变量 4 | --- 5 | 6 | # 在css中使用vue的变量 7 | 8 | ## 原理 9 | 10 | - 使用vue的动态行内样式，也就是 `:style="{ '--color': color }"` 11 | - 动态绑定一个css变量 `--color` 12 | - 在class中使用 `var()` 函数去使用这个变量 13 | 14 | ## 示例 15 | 16 | ::: info 使用示例 17 | 18 | html 19 | ```html 20 |
杰夫贝佐斯
21 | change
22 | ```
23 |
24 | js
25 | ```js
26 | const color = ref()
27 | const change = () => {
28 | color.value = 'red'
29 | }
30 | ```
31 |
32 | css
33 | ```css
34 | .demo-text {
35 | color: var(--color);
36 | }
37 | ```
38 | :::
39 |
40 |
--------------------------------------------------------------------------------
/docs/other/tools/web/collect.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 前端开发工具集
3 | description: 前端开发工具，常用网站推荐
4 | outline: [2, 3]
5 | ---
6 |
7 | # 前端开发工具
8 |
9 | > 工欲善其事，必先利其器
10 |
11 | ## 软件
12 |
13 | ### nvm
14 |
15 | 支持 `mac` 和 `win` [官网直通车 🚘](https://github.com/nvm-sh/nvm)
16 |
17 | * 使用阿里镜像源
18 |
19 | ```sh
20 | nvm npm_mirror https://npmmirror.com/mirrors/npm/
21 | ```
22 |
23 | ```sh
24 | nvm node_mirror https://npmmirror.com/mirrors/node/
25 | ```
26 |
27 | ## 网站
28 |
29 | ### TinyPNG
30 |
31 | > 无损压缩图片
32 |
33 | 支持 `mac` 和 `win` [官网直通车 🚘](https://tinify.cn/)
34 |
35 | TinyPNG使用智能有损压缩技术将您的WebP, PNG and JPEG图片的文件大小降低。 通过选择性的减少图片中的颜色，只需要很少的字节数就能保存数据。 对视觉的影响几乎不可见，但是在文件大小上有非常大的差别。
--------------------------------------------------------------------------------
/docs/web/wechat/api-request.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 微信request的二次封装
3 | description: 微信使用promise对request的二次封装
4 | ---
5 |
6 | # 微信request的二次封装
7 |
8 | ## 代码
9 |
10 | ::: info 微信请求的二次封装
11 | ```js
12 | const baseUrl = "http://www.baidu.com/";
13 |
14 | export const request = ({ url, method, data }) => {
15 | new Promise((resolve, reject) => {
16 | wx.request({
17 | url: `${baseUrl}${url}`,
18 | data,
19 | method,
20 | header: {
21 | "content-type": "application/json", // 默认值
22 | },
23 | success: (res) => {
24 | // 请求成功，就将成功的数据返回出去
25 | resolve(res);
26 | },
27 | fail: (err) => {
28 | reject(err);
29 | },
30 | });
31 | });
32 | };
33 | ```
34 | :::
35 |
36 |
--------------------------------------------------------------------------------
/docs/web/basics/wrap.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CSS解决纯英文文字不会自动换行
3 | description: CSS解决纯英文文字不会自动换行
4 | ---
5 |
6 | # CSS解决纯英文文字不会自动换行
7 |
8 | > 代码不规范，亲人两行泪
9 |
10 | ## 示例
11 |
12 | > 只需要两行代码就可以搞定
13 |
14 | ```css
15 | {
16 | word-wrap: break-word;
17 | word-break: break-all;
18 | }
19 | ```
20 |
21 | ## 效果对比
22 |
23 | asdhaklssdhaklsdhaklsdhklasdhkdhaklsdhklaasdhaklssdhaklsdhaklsdhklasdhkdhaklsdhklasdhkasdhaklssdhaklsdhaklsdhklasdhkdhaklsdhklasdhk
24 |
25 | asdhaklssdhaklsdhaklsdhklasdhkdhaklsdhklaasdhaklssdhaklsdhaklsdhklasdhkdhaklsdhklasdhkasdhaklssdhaklsdhaklsdhklasdhkdhaklsdhklasdhk
26 |
27 |
34 |
--------------------------------------------------------------------------------
/docs/.vitepress/theme/index.mts:
--------------------------------------------------------------------------------
1 | const imgUrl = Object.freeze('https://www.jwblog.cn/images/')
2 |
3 | import type { Theme } from 'vitepress'
4 | import DefaultTheme from "vitepress/theme";
5 | import 'animate.css';
6 | import MyLayout from '../custom/components/MyLayout.vue'
7 | // 引入antd组件库
8 | import "ant-design-vue/dist/reset.css";
9 | import { Button, Input, Modal } from "ant-design-vue";
10 | // 自定义主题颜色
11 | import "../custom/css/index.scss";
12 |
13 | export default {
14 | extends: DefaultTheme,
15 | Layout: MyLayout,
16 | enhanceApp({ app }) {
17 | app.use(Button)
18 | app.use(Input)
19 | app.use(Modal)
20 | app.config.globalProperties.$filterImgUrl = (val: string) => {
21 | return val.indexOf('http') !== -1 ? val : `${imgUrl}${val}`
22 | }
23 | },
24 | } as Theme
25 |
26 |
--------------------------------------------------------------------------------
/docs/oneself/author.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 一条懒羊羊的联系方式
3 | description: 一条懒羊羊的联系方式，赞助一条懒羊羊
4 | footer: false
5 | ---
6 |
7 | # 一条懒羊羊的联系方式
8 |
9 | > 制作不易，尊重他人劳动成果
10 |
11 | ## 联系方式
12 |
13 | ::: warning 邮箱
14 |
15 | > 如有建议、内容错误请发送邮箱联系作者
16 |
17 | ```js
18 | jiangwan1773@163.com
19 | ```
20 | :::
21 |
22 | ## 成为网站的赞助者
23 |
24 | ::: tip 扫码赞助
25 |
26 | 
27 | 
28 |
29 | :::
30 |
31 |
32 |
--------------------------------------------------------------------------------
/docs/other/tools/collect.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 开发工具集
3 | description: 多年从事开发工作，整理的工具集
4 | ---
5 |
6 | # 开发工具集
7 |
8 | > 工欲善其事，必先利其器
9 | ## 软件推荐
10 |
11 | ::: info utools
12 | > 支持 `mac` 和 `win` [官网直通车 🚘](https://www.u.tools)
13 | ```js
14 | 新一代效率工具平台，搭配插件使用yyds
15 | ```
16 | :::
17 |
18 | ::: info Snipaste
19 | > 支持 `mac` 和 `win` [官网直通车 🚘](https://zh.snipaste.com)
20 | ```js
21 | 简单但强大的 截图 + 贴图 + 取色器 工具
22 | ```
23 | :::
24 |
25 | ::: info ditto
26 | > 支持 `win` [官网直通车 🚘](https://ditto-cp.sourceforge.io)
27 | ```js
28 | 剪切版工具，比win自带的剪切版多了搜索功能
29 | ```
30 | :::
31 |
32 | ::: info icopy
33 | > 支持 `mac` [官网直通车 🚘](https://www.better365.cn/icopy.html)
34 | ```js
35 | 剪切版工具，可以弥补mac没有剪切版，平替可以用Paste(收费)
36 | ```
37 | :::
38 |
39 |
--------------------------------------------------------------------------------
/crawlerConfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "index_name": "一条懒羊羊",
3 | "start_urls": ["http://www.jwblog.cn"],
4 | "rateLimit": 8,
5 | "maxDepth": 10,
6 | "selectors": {
7 | "lvl0": {
8 | "selector": "",
9 | "defaultValue": "Documentation"
10 | },
11 | "lvl1": ".content h1",
12 | "lvl2": ".content h2",
13 | "lvl3": ".content h3",
14 | "lvl4": ".content h4",
15 | "lvl5": ".content h5",
16 | "content": ".content p, .content li",
17 | "lang": {
18 | "selector": "/html/@lang",
19 | "type": "xpath",
20 | "global": true
21 | }
22 | },
23 | "selectors_exclude": [
24 | "aside",
25 | ".page-footer",
26 | ".next-and-prev-link",
27 | ".table-of-contents"
28 | ],
29 | "custom_settings": {
30 | "attributesForFaceting": ["lang", "tags"]
31 | },
32 | "js_render": true
33 | }
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Blog
2 |
3 | 基于vitepress开发的个人博客
4 |
5 | ## 核心亮点
6 |
7 | * 多样性的前端知识
8 |
9 | * 提交代码到一个代码仓库自动同步其他代码仓库
10 |
11 | * 自动打包发布github pages网站
12 |
13 | * 运行linux服务器脚本执行拉取代码、打包部署操作
14 |
15 | ## 网站链接
16 |
17 | - :car: [官网](http://www.jwblog.cn)
18 |
19 | - :car: [国际官网访问](https://jwblog.vercel.app)
20 |
21 | ## 源码链接
22 |
23 | - :beginner: [github仓库地址](https://github.com/ytlyy1773/blog)
24 |
25 | - :beginner: [gitee仓库地址](https://gitee.com/ytlyy1773/blog)
26 |
27 | ## 环境
28 |
29 | - node >= v18
30 |
31 | - pnpm | yarn
32 |
33 | ## 启动命令
34 |
35 | ```pnpm
36 | pnpm dev
37 | ```
38 |
39 | ## 赞助
40 |
27 |
28 |
41 | 
42 | 
43 |
44 |
--------------------------------------------------------------------------------
/docs/.vitepress/theme/custom.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --vp-home-hero-name-color: transparent;
3 | --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
4 | --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
5 | --vp-home-hero-image-filter: blur(40px);
6 | --vp-button-brand-bg: #5d86ff;
7 | --vp-button-brand-hover-bg: #3366ff;
8 | --vp-c-indigo-1: #3366ff;
9 | }
10 |
11 | .ant-input {
12 | margin: 8px 0;
13 | }
14 |
15 | .vp-dja {
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | }
20 |
21 | .cp-span-warn {
22 | display: inline-block;
23 | border-radius: 4px;
24 | padding: 3px 6px;
25 | background-color: #ffebec;
26 | transition: color 0.25s, background-color 0.5s;
27 | font-size: var(--vp-code-font-size);
28 | color: #fc3b40;
29 | }
--------------------------------------------------------------------------------
/docs/web/vue/resetData.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Vue2重置data里边的数据
3 | description: Vue2重置data里边的数据
4 | ---
5 |
6 | # Vue2重置data里边的数据
7 |
8 | > 局限于vue2
9 |
10 | ## 初始化组件中的所有数据
11 |
12 | ```js-vue
13 | Object.assign(this.$data,this.$options.data())
14 | ```
15 |
16 | ## 初始化组件中某个对象中的数据
17 |
18 | ```js-vue
19 | Object.assign(this.$data.form,this.$options.data().form)
20 | ```
21 |
22 | ## 重置方法总结
23 | ```js-vue
24 | Object.assign(this.$data,this.$options.data())
25 | // 方法慎用
26 | 会导致BUG 生命周期请求接口返回的数据也会清空，只能是搭配使用
27 |
28 | // 重置所有数据方法
29 | reSetData(
30 | Object.assign(this.$data,this.$options.data())
31 | this.getQueryData()
32 | )
33 |
34 | // eg：BUG实例--生命周期有请求接口赋值数据
35 | created() {
36 | this.getQueryData()
37 | }
38 | methods: {
39 | async getQueryData() {
40 | const res = await getPost({})
41 | // 赋值
42 | res.code == 200 && (this.formObj = res.data)
43 | }
44 | }
45 | ```
46 |
--------------------------------------------------------------------------------
/docs/web/basics/is-NaN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: js判断内容是不是是NaN
3 | description: js判断内容是不是是NaN
4 | ---
5 |
6 | # js判断内容是不是是NaN
7 |
8 | ## 示例
9 | ## isNaN() 函数
10 | > isNaN() 是 JavaScript 中的一个全局函数，用于判断一个值是否为 NaN。该函数的参数可以是任何类型的值，如果该值为 NaN，则返回 true，否则返回 false。
11 | ```js
12 | console.log(isNaN(NaN)); // true
13 | console.log(isNaN(123)); // false
14 | console.log(isNaN("abc")); // true
15 | ```
16 |
17 | ## Number.isNaN() 函数
18 | > Number.isNaN() 是 JavaScript 中 Number 对象的一个静态方法，用于判断一个值是否为 NaN。该函数的参数可以是任何类型的值，如果该值为 NaN，则返回 true，否则返回 false。
19 | ```js
20 | console.log(isNaN(NaN)); // true
21 | console.log(isNaN(123)); // false
22 | console.log(isNaN("abc")); // true
23 | ```
24 |
25 | ## Object.is() 方法
26 | > Object.is() 是 JavaScript 中 Object 对象的一个静态方法，用于判断两个值是否严格相等
27 | ```js
28 | console.log(Object.is(NaN, NaN)); // true
29 | console.log(Object.is(123, 123)); // true
30 | console.log(Object.is("abc", "abc")); // true
31 | ```
--------------------------------------------------------------------------------
/docs/web/wechat/global-share.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 微信小程序全局添加分享功能
3 | description: 微信小程序全局添加分享功能
4 | ---
5 |
6 | # 微信小程序全局添加分享功能
7 |
8 | > 页面本身的分享方法会覆盖全局的分享方法
9 |
10 | ## 缺陷 & 思路
11 |
12 | - 全局添加分享功能，每个子页面都需要有一个分享方法（微信原生Api已经提供）
13 |
14 | - 页面本身的分享会覆盖全局封装的方法
15 |
16 | - 支持自定义的显示内容很少（微信小程序本身导致）
17 |
18 | ## 实现功能源代码
19 |
20 | > 全局分享功能，页面有空的onShareAppMessage()会不生效
21 |
22 | ```js
23 | (function(){
24 | const PageTmp = Page;
25 | Page = (pageConfig) => {
26 | // 设置全局默认分享
27 | pageConfig = Object.assign({
28 | onShareAppMessage:function () {
29 | return {
30 | title:'默认文案title',
31 | path:'默认分享路径+id',
32 | imageUrl:'默认分享图片',
33 | };
34 | }
35 | },pageConfig);
36 | PageTmp(pageConfig);
37 | };
38 | })();
39 | ```
40 |
41 | ## 代码截图
42 |
43 | 
44 |
45 | 
46 |
47 |
--------------------------------------------------------------------------------
/docs/web/basics/sleep.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: JavaScript 实现 Sleep（伪 sleep）
3 | description: 如何在 JavaScript 中实现 sleep 功能，通过 Promise 结合 setTimeout 实现异步暂停。详细介绍了核心实现方式并说明了为什么在此场景下无需手动清除定时器。
4 | outline: [2, 3]
5 | ---
6 |
7 | # JavaScript 实现 Sleep（伪 sleep）
8 |
9 | 在 JavaScript 中，我们通常用 `setTimeout` 和 `Promise` 结合实现类似 `sleep` 的效果。以下是一个核心示例：
10 |
11 | ### 核心代码
12 |
13 | > 这个代码片段会使当前执行的异步函数暂停 4 秒，然后继续执行。
14 |
15 | ```js
16 | await new Promise(resolve => setTimeout(resolve, 4000));
17 | ```
18 |
19 | ### eg
20 |
21 | ```js
22 | async function falseSleep() {
23 | console.log('开始执行----');
24 | await new Promise(resolve => setTimeout(resolve, 4000));
25 | console.log('延迟4秒执行----');
26 | }
27 | ```
28 |
29 | ## 详细解析
30 |
31 | ### 为什么不需要 `clearTimeout`
32 |
33 | * `setTimeout` 的一次性定时器：
34 |
35 | - 在这个场景中，`setTimeout` 只执行一次，定时器触发后会自动清除。因此，无需手动调用 `clearTimeout`。
36 |
37 | - `resolve` 被调用后，`Promise` 会完成其使命，且定时器已经完成并自动清理。
38 |
39 | * `Promise` 的自动完成：
40 |
41 | - 通过 `resolve` 执行，`Promise` 状态会从 `pending` 变为 `fulfilled`，这时 JavaScript 引擎会清理相关资源。
42 |
--------------------------------------------------------------------------------
/.github/workflows/algolia.yml:
--------------------------------------------------------------------------------
1 | name: algolia # 工作流名称
2 |
3 | on:
4 | push:
5 | branches:
6 | - master # 触发条件：当推送到 master 分支时触发此工作流
7 |
8 | jobs:
9 | algolia:
10 | runs-on: ubuntu-latest # 在最新版本的 Ubuntu 环境中运行此作业
11 |
12 | steps:
13 | - uses: actions/checkout@v3 # 步骤1：使用 GitHub 官方的动作检出代码库
14 |
15 | - name: Get the content of algolia.json as config # 步骤2：读取 crawlerConfig.json 文件内容作为配置
16 | id: algolia_config
17 | run: echo "config=$(cat crawlerConfig.json | jq -r tostring)" >> $GITHUB_OUTPUT
18 | # 读取 crawlerConfig.json 文件的内容并转换为字符串格式，然后将其保存到 GitHub Actions 的输出变量中
19 |
20 | - name: Push indices to Algolia # 步骤3：将索引推送到 Algolia
21 | uses: signcl/docsearch-scraper-action@master
22 | env:
23 | APPLICATION_ID: ${{ secrets.APPLICATION_ID }} # 从 GitHub Secrets 中读取 Algolia 应用程序 ID
24 | API_KEY: ${{ secrets.API_KEY }} # 从 GitHub Secrets 中读取 Algolia API 密钥
25 | CONFIG: ${{ steps.algolia_config.outputs.config }} # 使用上一步骤中读取的配置
26 | # 使用 signcl/docsearch-scraper-action 动作，将配置推送到 Algolia
27 |
--------------------------------------------------------------------------------
/.github/workflows/syncToGitee.yml:
--------------------------------------------------------------------------------
1 | name: syncToGitee
2 | on:
3 | push:
4 | branches:
5 | - master
6 | jobs:
7 | repo-sync:
8 | runs-on: ubuntu-latest
9 | steps:
10 | - name: Mirror the Github organization repos to Gitee.
11 | uses: Yikun/hub-mirror-action@master
12 | with:
13 | src: 'github/ytlyy1773'
14 | dst: 'gitee/ytlyy1773'
15 | dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}
16 | dst_token: ${{ secrets.GITEE_TOKEN }}
17 | static_list: "blog" # 仓库名字
18 | force_update: true # 强制同步
19 | debug: true # 启用 `debug` 开关
20 |
21 | # - name: Build Gitee Pages
22 | # uses: yanglbme/gitee-pages-action@main
23 | # with:
24 | # # 注意替换为你的 Gitee 用户名
25 | # gitee-username: 'ytlyy1773'
26 | # # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
27 | # gitee-password: ${{ secrets.GITEE_PASSWORD }}
28 | # # 注意替换为你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错
29 | # gitee-repo: 'ytlyy1773/blog'
30 | # # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
31 | # branch: github-pages
--------------------------------------------------------------------------------
/docs/web/harmony/distinction.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Harmony 属性和参数的区别
3 | description: 鸿蒙属性和参数的区别
4 | ---
5 |
6 | # Harmony 属性和参数的区别
7 |
8 | ::: info 什么是属性
9 |
10 | > 标签后以.开头的就是属性
11 |
12 | ```js
13 | build() {
14 | Row() {
15 | Row()
16 | .width(100) // [!code warning]
17 | .backgroundColor(Color.Blue) // [!code warning]
18 | .aspectRatio(1) // [!code warning]
19 | }
20 | .height('100%') // [!code warning]
21 | }
22 | ```
23 | :::
24 |
25 | ::: tip 什么是参数
26 |
27 | > 以对象形式写在标签里边的就是参数
28 |
29 | ```js
30 | build() {
31 | Flex({
32 | direction: FlexDirection.Row, // [!code error]
33 | justifyContent: FlexAlign.SpaceAround, // [!code error]
34 | wrap: FlexWrap.Wrap // [!code error]
35 | }) {
36 | Row().width(100).height(100).backgroundColor(Color.Blue)
37 | Row().width(100).height(100).backgroundColor(Color.Blue)
38 | Row().width(100).height(100).backgroundColor(Color.Blue)
39 | Row().width(100).height(100).backgroundColor(Color.Blue)
40 | Row().width(100).height(100).backgroundColor(Color.Blue)
41 | }
42 | }
43 | ```
44 | :::
45 |
46 |
47 |
--------------------------------------------------------------------------------
/docs/web/vue/dialog/dialog.ts:
--------------------------------------------------------------------------------
1 | import { ref, createApp } from 'vue'
2 | // @ts-ignore
3 | import dialogModule from './dialogModule.vue'
4 |
5 | interface OptionsType {
6 | title?: string // 标题
7 | mainText?: string // 内容
8 | width?: string // 宽度
9 | LeftText?: string // 左侧按钮文字
10 | LeftType?: string // 左侧按钮样式，支持elementUI组件库按钮组type
11 | RightText?: string // 右侧按钮文字
12 | RightType?: string // 右侧按钮样式，支持elementUI组件库按钮组type
13 | }
14 |
15 | const visible = ref(false)
16 |
17 | export default function (options: OptionsType = {}) {
18 | return new Promise((resolve, reject) => {
19 | // 创建dom实例挂载在body上边
20 | const div = document.createElement('div')
21 | div.style.width = '0'
22 | div.style.height = '0'
23 | document.body.appendChild(div)
24 | const module = createApp(dialogModule, {
25 | modelValue: visible,
26 | resolve: () => {
27 | resolve('成功返回')
28 | div.remove()
29 | },
30 | reject: () => {
31 | reject('失败返回')
32 | div.remove()
33 | },
34 | ...options
35 | })
36 | module.mount(div)
37 | visible.value = true
38 | })
39 | }
--------------------------------------------------------------------------------
/docs/web/basics/dashed-line.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CSS控制虚线间距虚线长度
3 | description: CSS控制虚线间距虚线长度
4 | ---
5 |
6 | # CSS控制虚线间距虚线长度
7 |
8 | ## 示例
9 |
10 | ::: info 源代码
11 |
12 |
13 | ```css
14 | {
15 | margin: 26px 0 28px 0;
16 | width: 498px;
17 | padding: 1px 30px;
18 | box-sizing: border-box;
19 | background-image: linear-gradient(
20 | to right,
21 | #c2daff 35%,
22 | rgba(255, 255, 255, 0) 0%
23 | ); /* 35%设置虚线点x轴上的长度 */
24 | background-position: bottom; /* top配置上边框位置的虚线 */
25 | background-size: 10px 1px; /* 第一个参数设置虚线点的间距；第二个参数设置虚线点y轴上的长度 */
26 | background-repeat: repeat-x;
27 | }
28 | ```
29 | :::
30 |
31 |
47 |
--------------------------------------------------------------------------------
/docs/.vitepress/custom/css/index.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary: #1677ff;
3 | --primary-hover: #4096ff;
4 | --vp-home-hero-name-color: transparent;
5 | --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
6 | --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
7 | --vp-home-hero-image-filter: blur(40px);
8 | --vp-button-brand-bg: var(--primary);
9 | --vp-button-brand-hover-bg: var(--primary-hover);
10 | --vp-c-indigo-1: var(--primary);
11 | }
12 |
13 | .main .vp-doc .github-dark {
14 | background: rgb(40, 44, 52);
15 | }
16 |
17 | .ant-input {
18 | margin: 8px 0;
19 | }
20 |
21 | .vp-dja {
22 | display: flex;
23 | justify-content: center;
24 | align-items: center;
25 | }
26 |
27 | .cp-span-warn {
28 | display: inline-block;
29 | border-radius: 4px;
30 | padding: 3px 6px;
31 | background-color: #ffebec;
32 | transition: color 0.25s, background-color 0.5s;
33 | font-size: var(--vp-code-font-size);
34 | color: #fc3b40;
35 | }
36 |
37 | .VPFooter .message {
38 | display: flex;
39 | justify-content: center;
40 | align-items: center;
41 | }
--------------------------------------------------------------------------------
/docs/other/system/win/clear-icon.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 如何除去Windows的快捷方式小图标
3 | description: 多年从事开发工作，整理的工具集
4 | ---
5 |
6 | # 如何除去Windows的快捷方式小图标
7 |
8 | ## 去除前后效果对比
9 | ::: danger 去除之后（after）
10 |
42 |
43 | 单机事件
39 |
40 | function handle(type) {
41 | // 这里必须做区分，安卓和iphone在这里区别还是很大的，安卓走click，苹果走touchstart
42 | const phone = navigator.userAgent;
43 | const isAndroid = phone.indexOf('Android') > -1 || phone.indexOf('Adr') > -1; //android安卓
44 | const isiOS = !!phone.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios苹果
45 | if(isAndroid && type === 2) {
46 | return
47 | },
48 | if(isiOS && type === 1) {}
49 | }
50 | ```
--------------------------------------------------------------------------------
/docs/web/vue/dialog/core.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: vue封装dialog弹窗
3 | description: 在vue项目中使用函数式封装一个dialog弹窗
4 | ---
5 |
6 | # 封装dialog弹窗
7 |
8 | > Vue3 + ts函数式封装
9 |
10 | ## 演示
11 |
12 |
21 |
22 | ![]()
23 |
24 |
25 | $1
",
43 | "",
44 | "",
45 | "",
58 | "",
59 | ""
60 | ],
61 | "description": "初始化Vue3-模板"
62 | }
63 | ```
64 |
65 |
66 | ## 打包省略console ｜ debugger
67 | ```js-vue
68 | export default defineConfig({
69 | // 打包之后没有，不会影响开发环境
70 | esbuild: {
71 | pure: ['console.log'],
72 | drop: ['debugger']
73 | },
74 | })
75 | ```
76 |
--------------------------------------------------------------------------------
/docs/web/harmony/use-image.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Harmony 使用Image资源的4种方法
3 | description: 鸿蒙使用Image资源的4种方法
4 | ---
5 |
6 | # Harmony 使用Image资源的4种方法
7 |
8 | ## 具体使用
9 | ::: info 方法一：`assets` 目录
10 | - 1.新建 `src/main/ets/assets/image` 目录
11 | - 2.添加 `startIcon.png` 图片文件
12 | ```js
13 | Image('/assets/image/startIcon.png') // [!code error]
14 | .width(100)
15 | .aspectRatio(1)
16 | ```
17 | :::
18 |
19 | ::: info 方法二：使用网络图片
20 | ```js
21 | Image('https://www.jwblog.cn/images/blog/update-after.jpg') // [!code error]
22 | .width(100)
23 | .aspectRatio(1)
24 | ```
25 | :::
26 |
27 | ::: info 方法三：`media` 目录
28 | > 固定用法`$r('app.media.图片名字')`
29 | - 1.ets目录下新建 `src/main/resources/base/media` 目录
30 | - 2.添加 `startIcon.png` 图片文件
31 | ```js
32 | Image($r('app.media.startIcon')) // [!code error]
33 | .width(100)
34 | .aspectRatio(1)
35 | ```
36 | :::
37 |
38 | ::: info 方法四：`rawfile` 目录
39 | > 固定用法`$r('$rawfile.图片名字')`
40 | - 1.在 `src/main/resources/rawfile` 目录下
41 | - 2.添加 `startIcon.png` 图片文件
42 | ```js
43 | Image($rawfile("startIcon.png")) // [!code error]
44 | .width(100)
45 | .aspectRatio(1)
46 | ```
47 | :::
48 |
49 | ## 优缺点对比
50 | | 区别 | assets | 网络图片 | media | rawfile |
51 | |:---|:---|:---|:---|:---|
52 | | 优点 | 1.可以有二级目录 2.利于维护 | | 1.使用简单 | 1.使用简单 | 53 | | 缺点 | | 需要有网络 | 1.不可以有二级目录
2.不可以有文件后缀
3.必须简写(无后缀) | 1.资源必须是全路径(有后缀) | 54 | 55 | ## 网络资源遇到的问题 56 | > 网络资源的图片在模拟器和真机上边不显示 57 | - 在鸿蒙中在模拟器和真实项目中，必须申请网络权限 58 | - 在 `src/main/module.json5` 文件添加以下代码 59 | ```json 60 | "requestPermissions": [{ 61 | "name":"ohos.permission.INTERNET" 62 | }], 63 | ``` -------------------------------------------------------------------------------- /docs/web/basics/code-safety.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 前端加密安全 3 | description: 前端怎么做数据接口的加密安全处理 4 | outline: [2, 3] 5 | --- 6 | 7 | # 前端加密安全 8 | 9 | > 核心使用了前端js库 `CryptoJS` 10 | 11 | ## 加密流程 12 | 13 | ### 加密场景和加密方式 14 | * 前端加密场景有哪些？ 15 | - 请求接口 16 | - 路由跳转携带参数 17 | 18 | * 常用加密方式 19 | - base64 20 | - Sha256 21 | - AES 22 | - ... 23 | 24 | ### 简单的Base64加密使用场景 25 | 26 | * 浏览器url地址栏 27 | 28 |  29 | 30 | * 区别&缺陷 31 | 32 |  33 | 34 | ::: tip Base64优缺点(Base64本质是一种编码方式，而非加密方式) 35 | * 优点 36 | - 使用简单，javascript语言支持 37 | - 对称性加密（加密之后可以解密） 38 | * 缺点 39 | - 加解密会改变基础类型（Number 变成String），仅支持ASCII 40 | - 编码后的大小会比原文件大小大1/3 41 | - 加密单一，内容相同的密文加密解密对一样的 42 | - 会造成文件体积增加，影响文件的加载速度 43 | - 兼容性的问题，ie8以前的浏览器不支持 44 | ::: 45 | 46 | ### Sha256加密简介 47 | 48 | - 比较流行，也是最强的加密函数之一 49 | - 非对称性加密（加密之后，无法通过密文解密） 50 | - 应用场景：比特币等加密货币 51 | 52 | 加密、解密过程演示 53 | 54 |  55 | 56 | ### AES加密简介 57 | 58 | 加密、解密过程演示 59 | 60 |  61 | 62 | ::: warning 前端加密步骤 63 | 64 | * 获取当前时间戳 65 | * 拼接密钥字符串（eg：token + 时间戳） 66 | * 哈希算法对拼接后的字符串进行哈希 67 | - 借助sha256生成非对称性加密 68 | - 生成结果64位 69 | * 取哈希结果前32位生成完整的密钥（utf8格式） 70 | * 使用前端js库CryptoJS生成密文 71 | ::: 72 | 73 | ### 如何加密 74 | 75 |  76 | 77 | ### 如何解密 78 | 79 |  80 | -------------------------------------------------------------------------------- /docs/web/basics/exist-key.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript(js)判断对象是否包含某个 key 3 | description: javascript(js)判断对象是否包含某个 key 4 | --- 5 | 6 | # javascript(js)判断对象是否包含某个 key 7 | 8 | ## 方法对比 9 | 10 | | 方法 | 特点 | 11 | | ------------- | :-----------: | 12 | | in 操作符 | 会检查对象的原型链 | 13 | | hasOwnProperty() 方法 | 不会检查对象的原型链 | 14 | | Object.hasOwn() 方法 | 不会检查对象的原型链（旨在取代 hasOwnProperty方法） | 15 | | Reflect.has() 方法 | es6方法，不会受对象的 Symbol 属性的影响 | 16 | 17 | ## in 操作符 18 | ```js 19 | key in object 20 | 21 | // eg 22 | const obj = { 23 | name: 'John', 24 | age: 30 25 | }; 26 | 27 | console.log('name' in obj); // true 28 | console.log('age' in obj); // true 29 | console.log('gender' in obj); // false 30 | ``` 31 | 32 | ## hasOwnProperty() 方法 33 | ```js 34 | object.hasOwnProperty(key) 35 | 36 | // eg 37 | const obj = { 38 | name: 'John', 39 | age: 30 40 | }; 41 | 42 | console.log(obj.hasOwnProperty('name')); // true 43 | console.log(obj.hasOwnProperty('age')); // true 44 | console.log(obj.hasOwnProperty('gender')); // fal 45 | ``` 46 | 47 | ## Object.hasOwn() 方法 48 | ```js 49 | Object.hasOwn(object, key) 50 | 51 | // eg 52 | const obj = { 53 | name: 'John', 54 | age: 30 55 | }; 56 | 57 | console.log(Object.hasOwn(obj, 'name')); // true 58 | console.log(Object.hasOwn(obj, 'age')); // true 59 | console.log(Object.hasOwn(obj, 'gender')); // false 60 | ``` 61 | 62 | ## Reflect.has() 方法 63 | 64 | ```js 65 | const obj = { 66 | name: 'John', 67 | age: 30 68 | }; 69 | 70 | console.log(Reflect.has(obj, 'name')); // true 71 | console.log(Reflect.has(obj, 'age')); // true 72 | console.log(Reflect.has(obj, 'gender')); // false 73 | ``` -------------------------------------------------------------------------------- /.github/workflows/run_script.yml: -------------------------------------------------------------------------------- 1 | name: Run Root Script # 工作流名称 2 | 3 | on: 4 | push: 5 | branches: 6 | - master # 监控 master 分支上的推送事件 7 | workflow_dispatch: # 手动触发工作流 8 | 9 | jobs: 10 | run-script: 11 | runs-on: ubuntu-latest # 使用最新版本的 Ubuntu 作为运行环境 12 | 13 | steps: 14 | - name: Checkout code # 步骤1：检出代码 15 | uses: actions/checkout@v2 # 使用官方的 checkout 动作 16 | 17 | - name: Install SSH client and sshpass # 步骤2：安装 SSH 客户端和 sshpass 18 | run: | 19 | sudo apt-get update # 更新包列表 20 | sudo apt-get install -y openssh-client sshpass # 安装 openssh-client 和 sshpass 21 | 22 | - name: Run script on server # 步骤3：在服务器上运行脚本 23 | env: 24 | SSH_HOST: ${{ secrets.SSH_HOST }} # 从 GitHub Secrets 中读取 SSH 主机名 25 | SSH_USER: ${{ secrets.SSH_USER }} # 从 GitHub Secrets 中读取 SSH 用户名 26 | SSH_PASSWORD: ${{ secrets.SSH_PASSWORD }} # 从 GitHub Secrets 中读取 SSH 密码 27 | run: | 28 | # 使用 sshpass 和 SSH 密码进行 SSH 连接，并在服务器上运行脚本 29 | sshpass -p "$SSH_PASSWORD" ssh -o StrictHostKeyChecking=no $SSH_USER@$SSH_HOST 'nohup /root/update.sh > /root/update_output.log 2>&1' 30 | 31 | echo "The build command was executed successfully" 32 | 33 | ## 监视服务器，时间过长 34 | # # 捕获脚本的退出状态 35 | # EXIT_STATUS=$? 36 | 37 | # # 从服务器获取输出日志文件 38 | # sshpass -p "$SSH_PASSWORD" scp -o StrictHostKeyChecking=no $SSH_USER@$SSH_HOST:/root/update_output.log . 39 | 40 | # # 显示输出日志文件内容 41 | # cat update_output.log 42 | 43 | # # 输出脚本执行结果 44 | # if [ $EXIT_STATUS -ne 0 ]; then 45 | # echo "Script execution failed with exit status $EXIT_STATUS" # 如果脚本执行失败，输出错误状态并退出 46 | # exit $EXIT_STATUS 47 | # else 48 | # echo "Script executed successfully" # 如果脚本执行成功，输出成功消息 49 | # fi 50 | -------------------------------------------------------------------------------- /docs/.vitepress/custom/components/MyLayout.vue: -------------------------------------------------------------------------------- 1 | 2 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | ## layoutWeight属性
21 | ::: info 借助`layoutWeight`属性
22 | > `layoutWeight` 效果等效 `flex` 布局里的 `flex： 1`
23 | ```js
24 | build() {
25 | Row() {
26 | Row()
27 | .width(100)
28 | .height(100)
29 | .backgroundColor(Color.Orange)
30 |
31 | Row()
32 | .width(100)
33 | .height(100)
34 | .backgroundColor(Color.Blue) // [!code error]
35 | .layoutWeight(1)
36 |
37 | Row()
38 | .width(100)
39 | .height(100)
40 | .backgroundColor(Color.Red)
41 | }
42 | .height('100%')
43 | }
44 | ```
45 | :::
46 |
47 | ## Blank标签
48 | ::: info 借助`Blank`标签
49 | > [官网说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-basic-components-blank-0000001428061724-V2)
50 | - `Blank` 效果等效 `flex` 布局里的 `flex： 1`
51 | - 空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。
52 | - 仅当父组件为Row/Column/Flex时生效
53 | ```js
54 | build() {
55 | Row() {
56 | Row()
57 | .width(100)
58 | .height(100)
59 | .backgroundColor(Color.Orange)
60 |
61 | Blank() // [!code error]
62 |
63 | Row()
64 | .width(100)
65 | .height(100)
66 | .backgroundColor(Color.Red)
67 | }
68 | }
69 | ```
70 | :::
71 |
72 |
--------------------------------------------------------------------------------
/docs/other/blog/up/setup-oss.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: nginx搭建对象存储OSS
3 | description: 在云服务器借助nginx搭建对象存储OSS，使用nginx做图片服务器
4 | outline: [2, 3]
5 | ---
6 |
7 | # 搭建个人的对象存储OSS
8 |
9 | ## 什么是对象存储OSS
10 |
11 | 对象存储 OSS (Object Storage Service) 是一种云存储服务，它提供了一种存储海量数据的安全、可靠、经济高效的方式。简单来说，它就像一个巨大的在线仓库，你可以用来存储各种类型的数字文件。
12 |
13 | ### 示例
14 | * 图片：产品照片、用户头像、视频截图等
15 | * 视频：电影、电视剧、短视频等
16 | * 音频：音乐、播客、语音文件等
17 | * 文档：合同、账单、用户手册等
18 | * 代码：源代码、配置文件等
19 | * 备份数据：数据库备份、系统日志等
20 |
21 | ### 特点
22 |
23 | * 使用简单
24 | * 例如小程序项目图片必须使用oss存储
25 | * 大部分厂商提供的oss上传免费，存储空间不限大小，但是`下行流量收费`
26 | - 下行流量：访问这个图片的流量
27 | - 一张图片大小 `100kb`，那么访问一次这个图片就是 `100kb` 下行流量
28 |
29 | ## windows系统搭建oss
30 |
31 | > 这里我们可以借助 `nginx` 做代理
32 |
33 | ### 修改nginx配置文件
34 |
35 | > 访问链接 `/image` 的资源访问都被转接到 `alias 配置的文件地址目录下`
36 |
37 | ::: info `conf/nginx.conf` 文件
38 | ```nginx
39 | location /image {
40 | alias C:/Users/picture/; # 使用 alias 而不是 root
41 | }
42 |
43 | location / {
44 | root html;
45 | index index.html index.htm;
46 | }
47 | ```
48 | :::
49 |
50 | 修改nginx配置文件，生效需要执行 `nginx -s reload`
51 |
52 | ### 如何看效果
53 |
54 | - 在本地 `C:/Users/picture/` 文件夹下放入一张图片001.png
55 | - 执行 `nginx -s reload`
56 | - 验证 > 浏览器访问 `C:/Users/picture/001.png` 是否可以看到图片
57 | - 验证 > `localhost/image/001.jpg` 可以访问就是转接成功
58 | - 在自己的私人电脑通过浏览器访问图片，进行验证 > http://公网ip/image/001.jpg
59 |
60 | 如果可以通过公网ip可以访到图片，那么就可以了，后续域名绑定ip之后，我们就可以通过域名 `http://www.jwblog.cn/image/001.jpg` 进行访问
61 |
62 | ### 注意事项
63 |
64 | - 这里配置图片的转接地址是用 `alias` 而不是 `root`
65 | - 修改了nginx配置文件或者添加的新的图片，必须执行 `nginx -s reload`
66 |
67 | ## linux系统搭建oss
68 |
69 | linux的oss搭建，nginx内容同windows一样
70 |
71 | * Ubunto配置文件在
72 | ```nginx
73 | /etc/nginx/sites-available
74 | ```
75 | * CentOs配置文件在
76 | ```nginx
77 | /etc/nginx/nginx.conf
78 | ```
79 |
80 | 添加oss配置代码
81 |
82 | ```nginx
83 | location /image {
84 | root /path/to/images;
85 | }
86 | ```
--------------------------------------------------------------------------------
/docs/web/vue/plugins.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Vue项目常用插件
3 | description: 精选Vue项目开发中必备的插件和工具库，涵盖UI组件、开发辅助、表格处理、数学计算和性能优化等多个方面，助力开发者提高效率和项目质量。
4 | outline: [2, 3]
5 | ---
6 |
7 | # Vue项目常用插件
8 |
9 | ### UI篇
10 |
11 | `Element Plus`
12 |
13 | > 兼容性最好，使用最广泛
14 |
15 | `Ant Design of Vue`
16 |
17 | > 未来的设计标准，缺陷很明显社区维护BUG较多，代码开发上略有缺陷
18 |
19 | `Vant`
20 |
21 | > 移动端H5首选，不适用于混合开发模式
22 |
23 | ### 开发辅助篇
24 |
25 | `VueUse`
26 |
27 | > Vue组合式API的实用工具集
28 |
29 | `unplugin-auto-import`
30 |
31 | > 自动按需引入 vue｜vue-router｜pinia 等的 api
32 |
33 | `unplugin-vue-components`
34 |
35 | > 自动按需引入 第三方的组件库组件(elementUI) 和 我们自定义的组件
36 |
37 | `pinia-plugin-persistedstate`
38 |
39 | > 持久化pinia数据，中文官网，使用简单，绝对的后起之秀
40 |
41 | `vuex-persistedstate`
42 |
43 | > 持久化pinia｜vuex数据，vue2时代的产物，主要用于vuex
44 |
45 | `Lodash`
46 |
47 | > 封装了常用的js函数，不过使用率在下降
48 |
49 | `Day.js`
50 |
51 | > 操作和显示日期和时间
52 |
53 | ### table篇
54 |
55 | `vxe-table`
56 |
57 | > 复杂表格业务需求首选
58 |
59 | ### js计算篇
60 |
61 | `bignumber.js`
62 |
63 | > 推荐使用
64 |
65 | `mathjs`
66 |
67 | > 强大且易于使用，使用最广泛的js计算库
68 |
69 | `big.js`
70 |
71 | > 一个小型，快速，易于使用的库，用于任意精度的十进制算术运算
72 |
73 | #### 对比
74 |
75 | | 包 | 特点 | 缺点 |
76 | | ------------- | :------------- |:------------- |
77 | | `bignumber.js` | 专为大数运算设计，支持任意精度的加减乘除、开方等运算 | 功能相对简单，不支持复杂数学运算 |
78 | | mathjs | 功能非常全面，支持符号计算、矩阵运算、复数运算等。除了高精度计算，还提供了丰富的数学函数 | 包大小相对较大，如果仅需高精度计算，引入整个库可能有些臃肿。 |
79 | | big.js | 与 bignumber.js 类似，但 API 设计有所不同 | 功能相对简单 |
80 |
81 | ### 优化篇
82 |
83 | `vite-plugin-compression`
84 |
85 | gzip压缩，需要nginx开启GZIP，打包之后可以明显提高项目的打开速度
86 |
87 | 类似还有br压缩，不过br压缩存在兼容性问题，压缩效率比Gzip压缩能提高15%
88 |
89 | `vite-plugin-imagemin`
90 |
91 | 本地静态图片压缩
92 |
93 | ### 扩展篇
94 |
95 | `vite-plugin-vue-inspector`
96 |
97 | 快捷键开启和关闭，点击page元素可以打开对应的.vue文件
98 |
99 | `avue`
100 |
101 | 搬砖神器, 更加贴合企业开发, 包含了大量基于vue + elementui的常用组件库以及插件库。
102 |
--------------------------------------------------------------------------------
/docs/web/basics/download.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: JS实现文件下载
3 | description: JS实现文件下载
4 | ---
5 |
6 | # JS实现文件下载
7 |
8 | ## 示例
9 |
10 | ## location.href 或 window.open
11 |
12 | * 优点
13 | - 单文件下载
14 | - 使用简单
15 | * 缺点
16 | - 多次调用前面的下载会被覆盖掉
17 |
18 | ```js
19 | window.location.href = url;
20 | // 或者
21 | window.open(url)
22 | ```
23 |
24 |
25 | ## a标签封装
26 | ```js
27 | /**
28 | * @param [String] url 文件地址
29 | * @param [String] fileName 文件name
30 | */
31 | function downFile(url: string, fileName?: string) {
32 | // 文件名必带有格式，eg: cs.txt, cs.pdf
33 | if (!url) {
34 | return
35 | }
36 | const name: string = fileName ? fileName : url.split('/')[url.split('/').length - 1]
37 | const callback = (url: string) => {
38 | const link = document.createElement('a')
39 | const objectUrl = window.URL.createObjectURL(new Blob([url]))
40 | link.style.display = 'none'
41 | link.href = objectUrl
42 | link.download = name
43 | document.body.appendChild(link)
44 | link.click()
45 | window.URL.revokeObjectURL(objectUrl)
46 | }
47 | const xhr = new XMLHttpRequest()
48 | xhr.open('get', url, true)
49 | xhr.responseType = 'blob'
50 | xhr.onload = () => {
51 | callback(xhr.response)
52 | }
53 | xhr.send()
54 | }
55 | ```
56 |
57 | ## 图片下载
58 | ```js
59 | // 图片下载
60 | function imgDown(imgsrc: string, CustomName?: string) {
61 | if (!imgsrc) {
62 | return
63 | }
64 | const name: string = CustomName ? CustomName : imgsrc.split('/')[imgsrc.split('/').length - 1]
65 | fetch(imgsrc).then(res => {
66 | res.blob().then(myBlob => {
67 | const href = URL.createObjectURL(myBlob)
68 | const a: HTMLAnchorElement = document.createElement('a')
69 | a.href = href
70 | a.download = name
71 | a.click()
72 | a.remove()
73 | })
74 | })
75 | }
76 | ```
--------------------------------------------------------------------------------
/docs/public/image/cont.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/docs/web/vue/upgradation/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue2'
3 | import vueJsx from '@vitejs/plugin-vue2-jsx'
4 | import createSvgSpritePlugin from 'vite-plugin-svg-sprite'
5 | const path = require('path')
6 | import legacy from '@vitejs/plugin-legacy'
7 |
8 | export default defineConfig(({ mode }) => {
9 | const configFile = require(`./config/${mode}.env.js`)
10 | const defineMap = {}
11 | // 解决vite不兼容process.env
12 | Object.keys(configFile).forEach(key => {
13 | defineMap[`process.env.${key}`] = JSON.stringify(configFile[key])
14 | })
15 | return {
16 | build: {
17 | target: 'es2015'
18 | },
19 | plugins: [
20 | vue(),
21 | vueJsx(), // 兼容jsx语法
22 | createSvgSpritePlugin({
23 | symbolId: 'icon-[name]'
24 | }), // 兼容svg图片
25 | legacy({
26 | targets: ['chrome >= 65', 'edge >= 79', 'safari >= 11.1', 'firefox >= 67'],
27 | ignoreBrowserslistConfig: true,
28 | renderLegacyChunks: false,
29 | additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
30 | modernPolyfills: true
31 | }) // 兼容部分老旧浏览器
32 | ],
33 | server: {
34 | host: '0.0.0.0',
35 | port: 9700,
36 | open: false, //自动打开
37 | proxy: {
38 | '/web': {
39 | target: 'http://www.dev.com', // 开发环境
40 | // target: 'http://www.test.com', // 测试环境
41 | changeOrigin: true
42 | }
43 | }
44 | },
45 | define: defineMap,
46 | esbuild: {
47 | pure: ['console.log'],
48 | drop: ['debugger'],
49 | target: 'es2015'
50 | },
51 | resolve: {
52 | alias: {
53 | '@': path.resolve(__dirname, 'src')
54 | },
55 | extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
56 | }
57 | }
58 | })
59 |
--------------------------------------------------------------------------------
/docs/other/tools/git-command.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 如何使用git提交代码
3 | description: 如何使用git提交代码，把git代码提交应用于实际项目
4 | outline: [2, 3]
5 | ---
6 |
7 | # 如何使用git提交代码
8 |
9 | > 工欲善其事，必先利其器
10 |
11 | ## git操作软件推荐
12 |
13 | ::: info GitHub Desktop
14 | > 支持 `mac` 和 `win` [官网直通车 🚘](https://desktop.github.com)
15 | ```js
16 | 优点：可以复制操作代码
17 | 缺点：没有中文界面
18 | ```
19 | :::
20 |
21 | ::: info sourcetree
22 | > 支持 `mac` 和 `win` [官网直通车 🚘](https://www.sourcetreeapp.com)
23 | ```js
24 | 优点：支持中文界面
25 | 缺点：不可以复制操作代码
26 | ```
27 | :::
28 |
29 | ## git提交代码流程
30 |
31 | ::: info 推送代码到远端
32 | ```js
33 | 1.首先在项目目录下初始化本地仓库
34 | git init
35 |
36 | 2.添加所有文件( . 表示所有)
37 | git add .
38 |
39 | 3.提交所有文件到本地仓库
40 | git commit -m "备注信息"
41 |
42 | 4.连接到远程仓库
43 | git remote add origin 你的远程仓库地址
44 |
45 | 5.将项目推送到远程仓库，（失败，可以先拉去远端代码到本地，再提交）
46 | git push -u origin master
47 |
48 | 6.拉取代码到本地，再推送代码到远端
49 | git pull --rebase origin master
50 | ```
51 | :::
52 |
53 | ## git回滚代码的方式
54 |
55 | ### git revert
56 |
57 | ```sh
58 | git revert HEAD
59 | ```
60 |
61 | `git revert` 会创建一个新的提交，并且不会改变提交历史，适合已经共享到远程仓库的情况。
62 |
63 | ### git reset
64 | * 回滚到特定提交并保留更改：
65 | ```sh
66 | git reset --soft 时间最会骗人，但也能让你明白，这个世界没有什么是不能失去的，留下的尽力珍惜，得不到的都不重要。
20 | 时间最会骗人，但也能让你明白，这个世界没有什么是不能失去的，留下的尽力珍惜，得不到的都不重要。
21 |
22 | ## 多行文字
23 |
24 | ```css
25 | {
26 | display: -webkit-box;
27 | -webkit-box-orient: vertical;
28 | -webkit-line-clamp: 3;
29 | overflow: hidden;
30 | }
31 | ```
32 | > 效果对比:
33 | 北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。 作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。 难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些居心叵测的，更诛心地丢了顶“二皇帝”的帽子。 今天王府很热闹，位高权重的北凉王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是天大的福缘，北凉王府都解释成傻人有傻福。 可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，这不就如约而至了。 王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘二字，谁看都要由衷赞一声世外高人呐。 但此番收徒显然遇到了不小的阻碍，倒不是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总该有的吧。
34 | 北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。 作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。 难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些居心叵测的，更诛心地丢了顶“二皇帝”的帽子。 今天王府很热闹，位高权重的北凉王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是天大的福缘，北凉王府都解释成傻人有傻福。 可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，这不就如约而至了。 王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘二字，谁看都要由衷赞一声世外高人呐。 但此番收徒显然遇到了不小的阻碍，倒不是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总该有的吧。
35 |
36 |
37 |
55 |
--------------------------------------------------------------------------------
/docs/other/blog/basics/deploy.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 网站的部署发布
3 | description: 博客的部署发布工作流程，以及详细的介绍
4 | outline: [2, 3]
5 | ---
6 |
7 | # 网站的部署发布
8 |
9 | ## 前置准备工作
10 |
11 | 如果不想花钱可以使用 [`github pages`](/other/blog/up/use-page.html)
12 |
13 | ::: tip 所需
14 | - 云服务器 （年花费200rmb左右）
15 | - 域名 （年花费50rmb左右）
16 | :::
17 |
18 | ## 云服务器
19 |
20 | ::: tip 注意事项
21 | 1. 初次使用云服务器建议先买一年最便宜的华为云试试
22 | 2. 初次购买建议 `windows server` 服务器，可以快速上手。云服务器可以随时刷其他系统，也可以刷 `linux` 系统
23 | 3. 充分掌握云服务器之后再换其他 `linux` 服务器
24 | 3. 服务器配置 `2核2G3M` 够用了
25 | :::
26 |
27 | ::: info 云服务器种类
28 | - `阿里云`
29 | - 有过云服务器使用经验的首选，也是博主现在使用的云服务器厂商
30 | - 个人感觉使用体验最好的
31 | - 服务器限制不多
32 | - `华为云`
33 | - 新用户有个`28rmb/年`
34 | - `腾讯云`
35 | :::
36 |
37 | ### 关于费用问题
38 | - 博主目前服务器年消费在200以内
39 | - 每个服务器厂商也会有新用户活动，但是推荐 *`618`* 或 *`双11`* 活动的时候购买
40 | - 活动买一年用完了就换一家厂商的服务器即可，不行也可以用家人的身份信息购买
41 | - 现在 *`618`* 或 *`双11`* 都有连续几年的服务器便意出售
42 |
43 | ## 域名
44 |
45 | > 推荐第一次使用的话可以先买一个便宜的`.top`，`.dev`等，`华为云`、`阿里云`等均有售卖
46 |
47 | ::: info 云服务器种类
48 | 1. `三大顶级域名`
49 | - `.com` 商业机构（commercial），诸如`apple.com`, `google.com`
50 | - `.net` 网络服务提供商（network）诸如网站后台接口地址
51 | - `.org` 非营利组织（organization） 诸如`vuejs.org`
52 | 2. `国家顶级域名`
53 | - `.cn` 中国
54 | - `.us` 美国
55 | - `.jp` 日本
56 | :::
57 |
58 | ## 配置nginx
59 |
60 | * 建议先用windows电脑本地先熟悉一下 `nginx` 的使用
61 | * 命令都需要在 `nginx文件目录下` 执行
62 |
63 | [官网直通车 🚘](https://nginx.org/en/)
64 |
65 | [nginx的详细使用 🚘](/other/blog/up/use-nginx.html)
66 |
67 | ## 网站备案
68 |
69 | - 服务器是香港或者国外是不需要进行备案的
70 | - 服务器在国内是需要进行备案
71 | - 备案周期大概是 `15-30` 天
72 |
73 | [关于网站如何备案，参考链接 🚘](https://beian.aliyun.com/)
74 |
75 | ## 部署到云服务器
76 |
77 | > 这里假设购买的是 `windows server` 云服务器
78 |
79 | - 买完服务器，在自己电脑操作使用过nginx
80 | - 在服务器下载nginx，在服务器的浏览器里测试nginx是否可用
81 | - 代码上传云服务器，建议通过 `git clone` 的方式
82 | - 这里需要注意 `vitepress` 打包后 `dist打包文件` 也需要上传的代码仓库
83 | - 云服务器电脑安装git工具，拉取代码
84 | - 两种方式启动博客项目
85 | - `方式一:` 将dist目录复制到 `nginx/html` 文件夹下
86 | - `方式二:` 修改nginx配置文件，将项目地址映射到git拉取的dist目录下
87 | - 推荐使用地址映射，可以省去复制粘贴代码，后续升级linux服务器，我们将通过执行脚本方式，`一键完成` 拉取，部署，重载
88 | - 重载nginx，在服务器浏览器访问 `localhost` 看网站效果
89 |
90 | ## 如何使用linux云服务器
91 |
92 | [参考链接](/other/blog/up/use-linux.html)
--------------------------------------------------------------------------------
/docs/web/vue/upload-image/core.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 函数式封装上传图片组件
3 | description: 在vue中使用函数式封装上传图片组件
4 | ---
5 |
6 | # 函数式封装上传图片组件
7 |
8 | > Vue3 + ts函数式封装支持 `函数式｜组件` 两种使用方式
9 |
10 | ## 演示
11 |
12 |
18 |
19 | ![]()
20 |
21 |
22 |
23 |
56 |
57 |
67 |
68 | ## 挂载使用
69 |
70 | ### 全局挂载
71 | ```js-vue
72 | // vue2全局挂载
73 | Vue.prototype.$upload = uploadImage
74 |
75 | // vue3全局挂载
76 | app.config.globalProperties.$upload = uploadImage
77 | ```
78 |
79 |
80 | ### 使用
81 | ```js-vue
82 | // vue2
83 | this.$upload().then(()=> {}).catch(err => {})
84 |
85 | // vue3
86 | > 必须使用proxy，正式环境ctx是获取不到的所以不能使用const { ctx } = getCurrentInstance()
87 | const { proxy } = getCurrentInstance()
88 | proxy.$upload().then(()=> {}).catch(err => {})
89 | ```
90 |
91 |
92 | ::: details 源代码
93 | <<< ./upload.js
94 | :::
--------------------------------------------------------------------------------
/docs/web/basics/regExp.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 常用的正则表达式
3 | description: 前端常用的正则表达式
4 | ---
5 |
6 | # 常用的正则表达式
7 |
8 | ## 代码演示
9 |
10 | ::: info 一、开头不为0的数字
11 | 
57 | ```
58 |
59 |
60 |
61 | ## 如何使用 Shields.io
62 |
63 | ::: info 使用
64 |
65 | > 支持 .svg，.png等可以自定义
66 |
67 | ```md
68 |
69 | ```
70 |
71 |
72 |
73 | ```html
74 | 
75 | ```
76 |
77 |
78 | :::
79 |
80 | ## 为什么使用 Shields.io
81 |
82 | * **提升项目专业度：** 徽章可以让你的项目看起来更加专业和有吸引力。
83 |
84 | * **提供快速信息：** 用户可以通过徽章快速了解项目的相关信息，而无需查看详细的文档。
85 |
86 | * **促进交流：** 徽章可以引发讨论和交流，帮助你获得更多的反馈。
87 |
88 | ## 总结
89 |
90 | `Shields.io` 是一个非常实用的工具，可以帮助你为你的项目增添光彩。通过使用 `Shields.io`，你可以轻松地创建各种各样的徽章，以展示项目的相关信息，提升项目的专业度。
91 |
92 |
--------------------------------------------------------------------------------
/docs/web/basics/reflow-repaint.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 浏览器的回流与重绘
3 | description: 浏览器的回流与重绘
4 | ---
5 |
6 | # 浏览器的回流与重绘
7 |
8 | > 核心就是``标签；只有pdf是可以直接被预览的，word格式需要使用做拼接
9 |
10 |
11 | ## 知识补充
12 |
13 | ::: info `回流必将引起重绘，重绘不一定会引起回流`
14 | 15 | 1.浏览器使用流式布局模型 (Flow Based Layout)
16 | 2.浏览器会把`HTML`解析成`DOM`，把`CSS`解析成`CSSOM`，`DOM`和`CSSOM`合并就产生了`Render` `Tree`。
17 | 3.有了`RenderTree`，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
18 | 4.由于浏览器使用流式布局，对`Render Tree`的计算通常只需要遍历一次就可以完成，但`table`及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用`table`布局的原因之一。 19 | 20 | ::: 21 | 22 | ## 回流 (Reflow) 23 | > 也叫重排 24 | ::: info 当`Render Tree`中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。 25 | > 会导致回流的操作： 26 | ```js 27 | 1.页面首次渲染 28 | 2.浏览器窗口大小发生改变 29 | 3.元素尺寸或位置发生改变 30 | 4.元素内容变化（文字数量或图片大小等等） 31 | 5.元素字体大小变化 32 | 6.添加或者删除可见的DOM元素 33 | 7.激活CSS伪类（例如：:hover） 34 | 8.查询某些属性或调用某些方法 35 | ``` 36 | > 一些常用且会导致回流的属性和方法： 37 |
38 | `clientWidth`、`clientHeight`、`clientTop`、`clientLeft`
39 | `offsetWidth`、`offsetHeight`、`offsetTop`、`offsetLeft`
40 | `scrollWidth`、`scrollHeight`、`scrollTop`、`scrollLeft`
41 | `scrollIntoView()`、`scrollIntoViewIfNeeded()`
42 | `getComputedStyle()`
43 | `getBoundingClientRect()`
44 | `scrollTo()` 45 | ::: 46 | 47 | ## 重绘 (Repaint) 48 | 49 | ::: info 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：`color`、`background-color`、`visibility`等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘 50 | ::: 51 | 52 | ## 性能影响 53 | 54 | ::: info 回流比重绘的代价要更高 55 | 有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。
56 | 57 | 现代浏览器会对频繁的回流或重绘操作进行优化：
58 | 59 | 浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
60 | 61 | 当你访问以下属性或方法时，浏览器会立刻清空队列：
62 | 63 | `clientWidth`、`clientHeight`、`clientTop`、`clientLeft`
64 | `offsetWidth`、`offsetHeight`、`offsetTop`、`offsetLeft`
65 | `scrollWidth`、`scrollHeight`、`scrollTop`、`scrollLeft`
66 | `width`、`height`
67 | `getComputedStyle()`
68 | `getBoundingClientRect()`
69 | 70 | 因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。 71 | ::: 72 | 73 | ## 如何避免 74 | 75 | ::: info CSS 76 | 避免使用`table`布局。
77 | 尽可能在`DOM`树的最末端改变`class`。
78 | 避免设置多层内联样式。
79 | 将动画效果应用到`position`属性为`absolute`或`fixed`的元素上。
80 | 避免使用`CSS`表达式（例如：`calc()`）。
81 | ::: 82 | 83 | ::: info JavaScript 84 | 避免频繁操作样式，最好一次性重写`style`属性，或者将样式列表定义为`class`并一次性更改`class`属性。
85 | 避免频繁操作DOM，创建一个`documentFragment`，在它上面应用所有DOM操作，最后再把它添加到文档中。
86 | 也可以先为元素设置`display: none`，操作结束后再把它显示出来。因为在`display`属性为`none`的元素上进行的`DOM`操作不会引发回流和重绘。
87 | 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
88 | 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。 89 | ::: -------------------------------------------------------------------------------- /docs/other/system/linux/release.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: linux发行版 3 | description: linux发行版介绍说明，常见的linux发行版有哪些，以及使用场景 4 | outline: [2, 3] 5 | --- 6 | 7 | # 什么是linux发行版 8 | 9 | `Linux` 发行版，为一般用户预先集成好的Linux操作系统及各种应用软件。一般用户不需要重新编译，在直接安装之后，只需要小幅度更改设置就可以使用，通常以软件包管理系统来进行应用软件的管理。 10 | 11 | ## 国内常见的linux发行版 12 | 13 | * `Debian` 14 | 15 | 稳定 16 | 17 | * `Ubuntu` 18 | 19 | 对开发者友好 20 | 21 | * `CentOS` 22 | 23 | CentOS宣布其传统版本将 `不再继续维护` 24 | 25 | 国内众多公司都有在使用 26 | 27 | 28 | ## Debian 29 | 30 | * 特点： 31 | 32 | * **稳定性**：Debian以稳定性著称，其稳定版本（stable release）经过长时间测试，适合生产环境。 33 | 34 | * **安全性**：Debian拥有严格的软件包审核流程，这有助于提高系统的安全性。 35 | 36 | * **灵活性**：Debian提供了多个分支，包括stable、testing和unstable，用户可以根据需求选择适合自己的分支。 37 | 38 | * **开源原则**：Debian严格遵循自由软件基金会的原则，所有软件包都是自由软件。 39 | 40 | * 适用场景： 41 | 42 | * **关键业务应用**：对于需要高度稳定性的关键业务，Debian是一个不错的选择。 43 | 44 | * **安全敏感环境**：Debian因其严谨的安全策略而成为安全敏感环境的理想选择。 45 | 46 | * **自定义部署**：Debian的灵活性使其适用于各种自定义部署方案。 47 | 48 | ## Ubuntu 49 | 50 | * 特点： 51 | 52 | * **广泛的社区支持**：Ubuntu拥有庞大的用户群和活跃的社区，这使得获取技术支持和解决问题变得相对容易。 53 | 54 | * **软件包丰富**：Ubuntu使用APT作为包管理系统，这意味着用户可以从丰富的软件库中选择需要的软件包进行安装。 55 | 56 | * **更新频繁**：Ubuntu提供短期支持（LTS）和长期支持版本，其中LTS版本每两年发布一次，提供长达五年的支持。 57 | 58 | * **易于使用**：Ubuntu以其用户友好的界面和文档闻名，即使是对Linux不太熟悉的用户也能快速上手。 59 | 60 | * 适用场景： 61 | 62 | * **开发者环境**：Ubuntu非常适合开发者，尤其是Web开发、移动应用开发等领域。 63 | 64 | * **教育和研究机构**：由于其易用性和丰富的文档，Ubuntu在教育领域被广泛应用。 65 | 66 | * **云计算平台**：许多云服务提供商默认支持Ubuntu，因此在云环境中非常流行。 67 | 68 | ## CentOS 69 | 70 | * 特点： 71 | 72 | * **稳定性高**： 基于Red Hat Enterprise Linux (RHEL)，经过长时间的测试和验证，系统稳定性非常高，适合用于生产环境。 73 | 74 | * **社区活跃**： 拥有庞大的中文社区，资料丰富，问题容易解决。 75 | 76 | * **兼容性好**： 与RHEL高度兼容，很多企业级软件都支持CentOS。 77 | 78 | * 缺点： 79 | 80 | * **停止更新**： CentOS宣布其传统版本将不再继续维护。 81 | 82 | * **更新较慢**： 由于注重稳定性，更新频率相对较慢，可能导致一些新软件或功能的缺失。 83 | 84 | * **桌面环境不完善**： CentOS的桌面环境相对简单，不如Ubuntu等发行版功能丰富。 85 | 86 | ## 总结 87 | 88 | | 特性 | CentOS | Ubuntu | Debian | 89 | | -- | -- | -- | -- | 90 | | 稳定性 | 高 | 中 | 高 | 91 | | 易用性 | 中 | 高 | 中 | 92 | | 软件源 | 丰富 | 非常丰富 | 丰富 | 93 | | 社区 | 活跃 | 非常活跃 | 活跃 | 94 | | 中文资料 | 丰富 | 丰富 | 较少 | 95 | 96 | * **选择建议：** 97 | 98 | * **注重稳定性，适合生产环境**： CentOS或Debian 99 | * **易用性好，适合新手**： Ubuntu 100 | * **追求自由度和配置灵活度**： Debian 101 | 102 | * **选择时还需要考虑以下因素：** 103 | 104 | * **使用场景**： 不同的使用场景对系统的要求不同。 105 | * **个人偏好**： 不同的用户有不同的偏好。 106 | * **团队技术水平**： 团队的Linux技术水平也会影响选择。 107 | 108 | 总结来说，CentOS、Ubuntu和Debian都是优秀的Linux发行版，没有绝对的好坏，只有最适合你的。 109 | 110 | ### 温馨提示 111 | 112 | * 以上对比仅供参考，实际情况可能有所不同。 113 | 114 | * 建议根据自己的实际需求进行选择。 115 | 116 | * 可以尝试在虚拟机中安装不同的发行版，体验一下再做决定。 -------------------------------------------------------------------------------- /docs/web/basics/code-promise.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Promise理解 3 | description: 认识Promise、理解Promise、使用Promise 4 | outline: [2, 3] 5 | --- 6 | 7 | # Promise理解 8 | 9 | ## 示例 10 | 11 | ::: info 模拟请求： 12 |
elementUI应该也是最终版了，建议升级最终版 | 39 | | vite | 使用vite打包 | 40 | | vite-plugin-vue2 | 兼容vue2语法 | 41 | | vitejs/plugin-vue2-jsx | 兼容vue2的jsx语法 | 42 | | vitejs/plugin-legacy | 传统浏览器兼容 | 43 | | sass | vite打包需要安装sass，版本过低的sass需要升级sass版本 | 44 | 45 | ### 二、修改打包命令 46 | 47 | ::: info `package.json` 文件 48 | ```json 49 | "scripts": { 50 | "dev": "vite --mode dev", 51 | "build:dev": "vite build --mode dev", 52 | "build:test": "vite build --mode test" 53 | }, 54 | ``` 55 | ::: 56 | 57 | ### 三、修改vite打包入口 58 | 59 | ::: info `index.html` 修改入口文件 60 | ```html 61 | 62 | ``` 63 | ::: 64 | 65 | ### 四、根目录新建vite.config.ts文件 66 | 67 | [配置文件请参考 🚘](/web/vue/upgradation/up-vite.html#配置文件) 68 | 69 | ## 遇到的问题 70 | 71 | ### css的 `/deep/` 72 | 73 | * vite打包css不可以使用sass的 `/deep/` 语法 74 | * 全局替换成 `::v-deep` 75 | 76 | ### webpack中使用require引入文件 77 | 78 | vite中需要改成 `import` 引入 79 | 80 | ### svg字体图标的批量导入变更 81 | 82 | ```js 83 | const req = require.context('./svg', false, /\.svg$/) 84 | const requireAll = requireContext => requireContext.keys().map(requireContext) 85 | requireAll(req) 86 | ``` 87 | 88 | 89 | ### 盗版浏览器 90 | 升级的项目是对外的，遇到了 `2345浏览器非官网版本` 白屏 91 | 92 | 报错Uncaught ReferenceError: globalThis is not defined 93 | 94 | 粗暴的解决方案（暂未有其他解决方案） 95 | 96 | ```js-vue 97 | // 在index.html文件添加 98 | 103 | ``` 104 | 105 | 106 | ## vue2生态升级使用 107 | 108 | ### vue-router的使用 109 | 110 | > vue2可以使用`ref`和`reactive`，没有使用`proxy`实现，还是用了`defineProperty`的`getter, setter` 111 | 112 | ```js-vue{2} 113 | 118 | ``` 119 | 120 | 在`vue2.7 + vite`中使用`vue-router` 121 | 122 | ```js-vue{2} 123 | 127 | ``` -------------------------------------------------------------------------------- /docs/other/blog/basics/write.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 怎么写博客 3 | description: 搭建个人博客教程，使用vitepress编写个人博客项目 4 | outline: [2, 3] 5 | --- 6 | 7 | # 怎么写博客 8 | 9 | ## 个人经验 10 | * 一口吃不成一个胖子。第一次写建议想什么写什么，等写的多了再进行 `整合规划` 11 | * `收费项目` 建议用便宜实惠的产品，等博客质量积累起来再去适当 `氪金升级` 12 | * 博客是一个不断积累的过程，可以借鉴其他，但不建议完全照搬，要有自己的想法 13 | * 可以多参考其他 `开源博客` 的内容。[优质博客集 🚘](https://github.com/foru17/front-end-collect?tab=readme-ov-file) 14 | 15 | ### 我的博客大概费用 16 | 17 | > 如果不想花钱可以使用 [`github pages`](/other/blog/up/use-page.html) 18 | 19 | | 项目 | 必要 | 费用 | 备注 | 20 | | :--- | :--- | :--- | :--- | 21 | | 云服务器 | 必要 | `100-260`不等/年 | 建议博客写的适量再去购买，而不是什么都没写就先买服务器，`千里之行始于足下` | 22 | | 域名 | 必要 | `50`左右/年 | --- | 23 | | ssl证书 | 非必需 | `100`左右/3年 | 建议买便宜的就行，也可以不停的用免费适用3个月的，到期继续申请免费试用3个月 | 24 | 25 | ## 常见博客框架 26 | 27 | * `vitepress` 28 | > 由 Vite 和 Vue 驱动的静态站点生成器 29 | * `WordPress` 30 | > 最流行的博客框架，功能丰富、插件众多，适合各种类型的博客。 31 | * `Ghost` 32 | > 轻量级博客框架，注重写作体验，适合个人博客。 33 | * `Jekyll` 34 | > 静态博客框架，速度快、易于部署，适合技术博客。 35 | * `Hexo` 36 | > 基于 Node.js 的静态博客框架，易于使用，适合个人博客和技术博客。 37 | * `Hugo` 38 | > 基于 Go 语言的静态博客框架，速度快、功能强大，适合各种类型的博客。 39 | 40 | ## 技术选型 41 | * `vitepress`：博客框架推荐使用 42 | * `github`：代码仓库强烈推荐使用github 43 | - 多样化的github actions，可以做到`CI/CD` 44 | - 支持github pages 45 | - 后续升级提升都是基于github 46 | 47 | ## vitepress 48 | > 这里我们选择 `vue` 团队出品的 `vitepress` 49 | 50 | [官网直通车 🚘](https://vitepress.dev/zh/) 51 | 52 | ### 需要了解什么？ 53 | 54 | > vitepress采用md为主要书写语言，vue语言多为辅助 55 | 56 | 1. `Markdown` 语法 57 | * `markdown` 程序员的必修课 58 | * 轻量级标记语言，极易上手 59 | * 适用所有开发者，代码托管平台 `README.md` 文件语言 60 | * [官方教程 🚘](https://docs.github.com/zh/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github) 或 自行访问[GitHub 文档](https://docs.github.com/zh) 选择 "入门" > "在 GitHub 上写入" 61 | * md教程推荐 [菜鸟教程 🚘](https://www.runoob.com/markdown/md-tutorial.html) 62 | 2. `Vue` 语法 63 | * [vue官网 🚘](https://cn.vuejs.org/) 64 | 3. `Node` 环境 65 | * vitepress是一个前端框架，需要node环境 66 | 67 | ### 本地开发需要的环境 68 | 69 | - `Node.js` 18 及以上版本。 70 | - 支持 `Markdown` 语法的编辑器，推荐 `Vscode` 71 | 72 | ### 进入开发 73 | 74 | > `vitepress` 官网有详细的操作流程和初始化模版，直接参考官网 75 | 76 | ## 遇到的问题 77 | 78 | > 略微区别于开发单页面应用程序的点 79 | 80 | ### 不同环境打包的问题 81 | 82 | * 正常的环境配置是 `不会生效` 的需要做特殊处理 83 | * github actions的运行环境默认是 Linux 84 | * 这里用 `github actions` 打包举例 85 | 86 | 问题描述：本地使用 `pnpm run build:github` 打包没问题，但是配置了自动化命令的时候就不行了 87 | 88 | ::: tip 89 | * 添加项目依赖 `cross-env`，解决跨平台环境之间的差异而导致的问题 90 | * 修改 `docs/.vitepress/config.mts` 文件下的 `base` 属性 91 | > `deploy.yml` 这是一个github pages的自动化打包配置文件，存放于 `.github/workflows/` 目录下 92 | ```ts 93 | // 环境变量的控制来源子deploy.yml文件 94 | base: process.env.BUILD_ENV === "github" ? "/blog/" : "/" 95 | ``` 96 | ::: 97 | 98 | 我们可以添加一条命令 `build:github` 本地看github打包效果 99 | 100 | > 验证过后可以删除这个 `build:github` 的命令 101 | 102 | ```sh 103 | "scripts": { 104 | "dev": "vitepress dev docs", 105 | "build": "vitepress build docs", 106 | "build:github": "cross-env BUILD_ENV=github vitepress build docs", 107 | "preview": "vitepress preview docs" 108 | } 109 | ``` 110 | 111 | ### 禁止使用index.md 112 | 113 | * 除了首页使用index，其余一律不使用index 114 | * 使用index是一个重定向的目录，seo不会收录这样的目录 115 | 116 | [具体解释请参考seo 🚘](/other/blog/basics/seo-info.html) 117 | -------------------------------------------------------------------------------- /docs/web/vue/upload-image/upload.js: -------------------------------------------------------------------------------- 1 | import { message } from 'ant-design-vue' 2 | 3 | export const IMAGE_TYPE = ['jpg', 'jpeg', 'png', 'gif'] 4 | export const typeMes = '.jpg、.jpeg、.png、.gif' 5 | 6 | // 全局引入,二次封装，只限于上传图片 7 | export function uploadImage() { 8 | return new Promise((resolve, reject) => { 9 | uploadWhole({ 10 | multiple: true, 11 | accept: 'image/*', 12 | typeArr: IMAGE_TYPE 13 | }) 14 | .then(fileList => { 15 | if (judgeImage(fileList, IMAGE_TYPE)) { 16 | // 临时本地回显，后续调用阿里云对接第三方上传 17 | resolve(fileList) 18 | } else { 19 | message.info(`上传文件类型需满足${typeMes}`) 20 | reject(`上传文件类型需满足${typeMes}`) 21 | } 22 | }) 23 | .catch(err => { 24 | reject(err) 25 | }) 26 | }) 27 | } 28 | 29 | // 核心：上传功能 30 | export function uploadWhole(options = {}) { 31 | return new Promise((resolve, reject) => { 32 | const config = { 33 | accept: '*', // 接受的文件类型 34 | typeArr: [], // 接受的文件类型，格式列表 35 | multiple: false, // 是否多选 36 | size: 10240, // 文件大小限制，单位是kb 37 | limit: 5, // 可选文件个数限制 38 | ...options 39 | } 40 | const input = document.createElement('input') 41 | input.type = 'file' 42 | input.multiple = config.multiple 43 | input.accept = config.accept 44 | input.style.width = '0' 45 | input.style.height = '0' 46 | document.body.appendChild(input) 47 | input.click() 48 | input.oninput = e => { 49 | // 必须做一次拷贝 50 | const list = [...e.target.files] 51 | check(list, config) 52 | .then(() => { 53 | resolve(list) 54 | }) 55 | .catch(err => { 56 | message.error(err) 57 | reject(err) 58 | }) 59 | } 60 | window.addEventListener( 61 | 'focus', 62 | () => { 63 | setTimeout(() => { 64 | if (!input.value) { 65 | document.body.removeChild(input) 66 | reject('用户取消上传') 67 | } 68 | }, 500) 69 | }, 70 | { once: true } 71 | ) 72 | }) 73 | } 74 | 75 | // 判断是不是图片 76 | function judgeImage(file, typeList = []) { 77 | // file：要判断的文件，typeList：非必需，上传文件类型数组 78 | const list = Array.from(file) 79 | let arr = [] 80 | list.forEach(ele => { 81 | arr.push(filterImage(ele)) 82 | }) 83 | const fileList = arr.filter(ele => { 84 | return typeList.includes(ele) 85 | }) 86 | const ifT = arr.length === fileList.length ? true : false 87 | return ifT 88 | } 89 | 90 | // 获取文件类型 91 | export function filterImage(item) { 92 | return item.name.split('.')[item.name.split('.').length - 1]?.toLowerCase() 93 | } 94 | 95 | // 校验 96 | function check(list, config) { 97 | return new Promise((resolve, reject) => { 98 | // 长度校验 99 | if (list.length > config.limit) { 100 | return reject(`上传数量超过${config.limit}个`) 101 | } 102 | // accept校验... 103 | // size校验... 104 | resolve('校验通过') 105 | }) 106 | } -------------------------------------------------------------------------------- /docs/web/vue/dialog/dialogModule.vue: -------------------------------------------------------------------------------- 1 | 2 |
×
4 |
5 | {{ title }}
6 |
7 |
8 |
10 | {{ mainText }}
9 |
11 | {{ LeftText }}
12 | {{ RightText }}
13 |
14 | ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock'
137 | :::
138 |
139 | 确保MySQL配置文件路径正确。打开配置文件并确认以下内容:
140 |
141 | ```sh
142 | sudo nano /usr/local/mysql/my.cnf
143 | ```
144 |
145 | 添加或确认以下内容:
146 |
147 | ```ini
148 | [mysqld]
149 | socket = /usr/local/mysql/mysql.sock
150 | datadir = /usr/local/mysql/data
151 | port = 3306
152 |
153 | [client]
154 | socket = /usr/local/mysql/mysql.sock
155 | port = 3306
156 | ```
157 |
158 |
159 | * 连接mysql报错
160 |
161 | ::: info 启动mysql报错信息
162 | ERROR! The server quit without updating PID file (/usr/local/mysql/data/jiangwandeMac-mini.local.pid).
163 | :::
164 |
165 | 确保MySQL数据目录及其内容具有正确的权限和所有者
166 |
167 | ```sh
168 | sudo chown -R _mysql:_mysql /usr/local/mysql/data
169 | sudo chmod -R 755 /usr/local/mysql/data
170 | ```
--------------------------------------------------------------------------------
/docs/other/blog/up/config-algolia.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: vitepress配置algolia
3 | description: 在vitepress项目里边怎么配置algolia
4 | outline: [2, 3]
5 | ---
6 |
7 | # vitepress配置algolia
8 |
9 | ## 申请algolia资源
10 |
11 | ### 注意事项
12 |
13 | * 您必须是该网站的所有者，或至少有更新其内容的权限
14 | * 网站必须是一个开源项目或技术博客的技术文档
15 | * 第一次注册可能需要一定时间通过，注意邮箱查收相关邮件同意注册
16 |
17 | ### 注册algolia账号
18 |
19 | [algolia官网 🚘](https://dashboard.algolia.com)
20 |
21 | 点击控制台 `Apis keys` 申请Apis keys
22 |
23 | 
24 |
25 | 复制我们需要的内容到vitepress配置文件夹里边
26 |
27 | 
28 |
29 | - `Application ID` 填入 `options.appId`
30 | - `Search-Only API Key` 填入 `options.apiKey`
31 |
32 | ## 配置使用algolia
33 |
34 | > algolia可能需要很久才会自动索引，可以尝试手动索引网站
35 |
36 | ::: tip config.mts/defineConfig配置
37 | ```ts
38 | {
39 | search:
40 | process.env.BUILD_ENV === "github"
41 | ? {
42 | provider: "local",
43 | }
44 | : {
45 | provider: "algolia",
46 | options: {
47 | appId: "2T********3X", // 应用程序 ID
48 | apiKey: "************408f9c****", // 公钥
49 | indexName: "blog",
50 | placeholder: "请输入关键词",
51 | },
52 | },
53 | }
54 | ```
55 | :::
56 |
57 | ## 推送索引自动化脚本
58 |
59 | * 项目根目录下新建algolia的配置文件 `crawlerConfig.json`
60 |
61 | ::: details `crawlerConfig.json` 配置文件
62 | ```json
63 | {
64 | "index_name": "一条懒羊羊",
65 | "start_urls": ["http://www.jwblog.cn"],
66 | "rateLimit": 8,
67 | "maxDepth": 10,
68 | "selectors": {
69 | "lvl0": {
70 | "selector": "",
71 | "defaultValue": "Documentation"
72 | },
73 | "lvl1": ".content h1",
74 | "lvl2": ".content h2",
75 | "lvl3": ".content h3",
76 | "lvl4": ".content h4",
77 | "lvl5": ".content h5",
78 | "content": ".content p, .content li",
79 | "lang": {
80 | "selector": "/html/@lang",
81 | "type": "xpath",
82 | "global": true
83 | }
84 | },
85 | "selectors_exclude": [
86 | "aside",
87 | ".page-footer",
88 | ".next-and-prev-link",
89 | ".table-of-contents"
90 | ],
91 | "custom_settings": {
92 | "attributesForFaceting": ["lang", "tags"]
93 | },
94 | "js_render": true
95 | }
96 | ```
97 | :::
98 |
99 | > 实现自动推送索引到algolia
100 |
101 | * .github/workflows/目录下新建 `algolia.yml` 文件
102 |
103 | ::: info algolia.yml
104 | ```yml
105 | name: algolia # 工作流名称
106 |
107 | on:
108 | push:
109 | branches:
110 | - master # 触发条件：当推送到 master 分支时触发此工作流
111 |
112 | jobs:
113 | algolia:
114 | runs-on: ubuntu-latest # 在最新版本的 Ubuntu 环境中运行此作业
115 |
116 | steps:
117 | - uses: actions/checkout@v3 # 步骤1：使用 GitHub 官方的动作检出代码库
118 |
119 | - name: Get the content of algolia.json as config # 步骤2：读取 crawlerConfig.json 文件内容作为配置
120 | id: algolia_config
121 | run: echo "config=$(cat crawlerConfig.json | jq -r tostring)" >> $GITHUB_OUTPUT
122 | # 读取 crawlerConfig.json 文件的内容并转换为字符串格式，然后将其保存到 GitHub Actions 的输出变量中
123 |
124 | - name: Push indices to Algolia # 步骤3：将索引推送到 Algolia
125 | uses: signcl/docsearch-scraper-action@master
126 | env:
127 | APPLICATION_ID: ${{ secrets.APPLICATION_ID }} # 从 GitHub Secrets 中读取 Algolia 应用程序 ID
128 | API_KEY: ${{ secrets.API_KEY }} # 从 GitHub Secrets 中读取 Algolia API 密钥
129 | CONFIG: ${{ steps.algolia_config.outputs.config }} # 使用上一步骤中读取的配置
130 | # 使用 signcl/docsearch-scraper-action 动作，将配置推送到 Algolia
131 |
132 | ```
133 | :::
134 |
--------------------------------------------------------------------------------
/docs/chatGPT/gptApi.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
4 |
13 |
5 |
8 | 🥷
6 | {{ item.text }}
7 |
9 |
12 | 💻
10 | {{ item.result }}
11 |
15 |
23 |
24 | {{ loading ? "请求中..." : "⏎" }}
25 |
26 |
27 |
28 |
29 |
84 |
140 |
--------------------------------------------------------------------------------
/docs/other/blog/up/use-github-actions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 如何使用github actions自动化工作流
3 | description: linux云服务器使用教程
4 | outline: [2, 3]
5 | ---
6 |
7 | # 如何使用github actions自动化工作流
8 |
9 | ## github actions是什么
10 |
11 | GitHub Actions 是一种在 GitHub 上自动执行任务的平台。它允许你将你的工作流自动化，例如：
12 |
13 | * 构建和测试代码
14 | * 部署应用程序
15 | * 发布软件包
16 | * 协作开发
17 |
18 | 以下是使用 GitHub Actions 的一些优势：
19 |
20 | * 自动化任务: 消除手动任务，提高效率。
21 | * 提高代码质量: 自动化构建、测试和部署过程，减少错误和提升代码质量。
22 | * 加速开发流程: 自动化流程，让开发人员专注于更重要的任务。
23 | * 提升团队协作: 方便团队成员在工作流中协作，提高效率。
24 | * 开源和易于使用: GitHub Actions 是开源的，并且提供易于使用的界面。
25 |
26 | ## 已经实现的github actions
27 |
28 | * 同步代码仓库内容到 `gitee` 仓库
29 | * 同步内容索引更新到 `algolia`
30 | * 代码提交自动打包部署 `github pages`
31 | * 代码提交 `linux` 服务器自动打包部署
32 |
33 | ## 怎么配置GitHub Secrets
34 | 1. 进入GitHub仓库设置：
35 | * 打开你的GitHub仓库。
36 | * 点击右上角的 Settings。
37 |
38 | 2. 添加Secrets：
39 | * 在左侧栏中找到 Secrets and variables，然后选择 Actions。
40 | * 点击 New repository secret 来添加新的Secret。
41 |
42 | ### Secrets的示例内容
43 |
44 | > 假设你有一个服务器，IP地址为 192.168.1.100，用户名为 root，密码为 your_password，你需要将这些信息添加为Secrets：
45 |
46 | 1. 添加SSH_HOST：
47 | * Name: SSH_HOST
48 | * Value: 192.168.1.100
49 |
50 | 2. 添加SSH_USER：
51 | * Name: SSH_USER
52 | * Value: root
53 |
54 | 3. 添加SSH_PASSWORD：
55 | * Name: SSH_PASSWORD
56 | * Value: your_password
57 |
58 | ## 执行linux系统脚本
59 |
60 | > 这里假设服务器的脚本已经实现相应的功能了：自动拉取代码、自动打包、自动更新nginx
61 |
62 | 实现效果
63 |
64 | * 编写 `github actions` 配置文件，提交代码自动执行服务器脚本
65 | * 作者只需要关注代码提交，其余均是自动化脚本
66 |
67 | 在你的项目根目录下创建一个 `.github/workflows` 目录，并在其中创建一个 `.yml` 文件来定义GitHub Actions工作流，例如 `run_script.yml`。
68 |
69 | * 由于GitHub Actions运行在Ubuntu环境中，而Ubuntu使用apt-get包管理器而不是yum。为了在Ubuntu环境中运行并安装sshpass和openssh-client，你需要使用适合的包管理器和命令。
70 | * 请注意，使用密码认证相对 `不太安全`，因此要确保密码的复杂性和保密性。同时，为了避免密码泄露，不要在代码中直接包含密码，而是通过 `GitHub Secrets` 来管理。
71 |
72 | ```sh
73 | # 保持命令运行：即使用户退出会话，使用 `nohup` 运行的命令也会继续运行。
74 | nohup /root/update.sh > /root/update_output.log 2>&1
75 | ```
76 |
77 | ::: info run_script.yml 文件
78 | ```yml
79 | name: Run Root Script # 工作流名称
80 |
81 | on:
82 | push:
83 | branches:
84 | - master # 监控 master 分支上的推送事件
85 | workflow_dispatch: # 手动触发工作流
86 |
87 | jobs:
88 | run-script:
89 | runs-on: ubuntu-latest # 使用最新版本的 Ubuntu 作为运行环境
90 |
91 | steps:
92 | - name: Checkout code # 步骤1：检出代码
93 | uses: actions/checkout@v2 # 使用官方的 checkout 动作
94 |
95 | - name: Install SSH client and sshpass # 步骤2：安装 SSH 客户端和 sshpass
96 | run: |
97 | sudo apt-get update # 更新包列表
98 | sudo apt-get install -y openssh-client sshpass # 安装 openssh-client 和 sshpass
99 |
100 | - name: Run script on server # 步骤3：在服务器上运行脚本
101 | env:
102 | SSH_HOST: ${{ secrets.SSH_HOST }} # 从 GitHub Secrets 中读取 SSH 主机名
103 | SSH_USER: ${{ secrets.SSH_USER }} # 从 GitHub Secrets 中读取 SSH 用户名
104 | SSH_PASSWORD: ${{ secrets.SSH_PASSWORD }} # 从 GitHub Secrets 中读取 SSH 密码
105 | run: |
106 | # 使用 sshpass 和 SSH 密码进行 SSH 连接，并在服务器上运行脚本
107 | sshpass -p "$SSH_PASSWORD" ssh -o StrictHostKeyChecking=no $SSH_USER@$SSH_HOST 'nohup /root/update.sh > /root/update_output.log 2>&1'
108 |
109 | # 捕获脚本的退出状态
110 | EXIT_STATUS=$?
111 |
112 | # 从服务器获取输出日志文件
113 | sshpass -p "$SSH_PASSWORD" scp -o StrictHostKeyChecking=no $SSH_USER@$SSH_HOST:/root/update_output.log .
114 |
115 | # 显示输出日志文件内容
116 | cat update_output.log
117 |
118 | # 输出脚本执行结果
119 | if [ $EXIT_STATUS -ne 0 ]; then
120 | echo "Script execution failed with exit status $EXIT_STATUS" # 如果脚本执行失败，输出错误状态并退出
121 | exit $EXIT_STATUS
122 | else
123 | echo "Script executed successfully" # 如果脚本执行成功，输出成功消息
124 | fi
125 |
126 | ```
127 | :::
--------------------------------------------------------------------------------
/docs/web/basics/es6-practice.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 优雅的代码-es6实践
3 | description: 优雅的代码-es6实践
4 | ---
5 |
6 | # 优雅的代码-es6实践
7 |
8 | > 代码不规范，亲人两行泪
9 |
10 | ## 简化if（ && 或 三元运算符）
11 | ```js
12 | // 第一种情况 (简化if)
13 | if( a === true ) { return console.log('返回是个真') }
14 | // 简写
15 | eg:2
16 | if(a) return console.log('返回是个真')
17 | // 缺点
18 | const a = 'string'; if (a)的值也是true，字符串不是假
19 |
20 | eg:2
21 | a && console.log('返回是个真')
22 | // 缺点
23 | 只能走if循环的true，不能走else
24 |
25 | // 第二种情况 (巧用对象)
26 |
27 | {{ status === 1 ? '杰夫贝佐斯' : '斯嘉丽约翰逊' }}
28 |
29 | 如果status多个呢???
30 | status:1 >>> '杰夫贝佐斯'
31 | status:2 >>> '斯嘉丽约翰逊'
32 | status:3 >>> '贾斯汀比伯'
33 | status:4 >>> '马斯克'
34 | function filterStatus(val: keyof {
35 | 1: number
36 | }) {
37 | const obj = {
38 | 1: '杰夫贝佐斯',
39 | 2: '斯嘉丽约翰逊',
40 | 3: '贾斯汀比伯',
41 | 4: '马斯克'
42 | }
43 | return obj[val] || val
44 | }
45 |
46 | // 第三种情况
47 | if( a > 0 ) { isBoon = true } else { isBoon = false }
48 | // 简写
49 | a > 0 ? (isBoon = true) : (isBoon = false)
50 | 不适合复杂的if判断，不能return，
51 | 如果需要return那就 return isBoon = a > 0 ? true : false
52 |
53 | // 进阶用法
54 | &&= ||= ??=
55 | 1.&&=
56 | if (props.code) {
57 | props.code = 200
58 | }
59 | 简写
60 | props.code &&= 200
61 | 2.||=
62 | if (!props.code) {
63 | props.code = 200
64 | }
65 | 简写
66 | props.code ||= 200
67 | 3.||=
68 | if (props.code === null || props.code === undefined) {
69 | props.code = 200
70 | }
71 | 简写
72 | props.code ??= 200
73 | ```
74 |
75 | ## 批量命名
76 |
77 | > 能用const关键字定义变量就用const关键字
78 |
79 | ```js
80 | let valA = '斯嘉丽约翰逊';
81 | let valB = '艾玛沃特森';
82 | let valC = '泰勒斯威夫特';
83 | let valD = '克里斯汀斯图尔特';
84 | const [ a, b, c, d] = ['斯嘉丽约翰逊', '艾玛沃特森', '泰勒斯威夫特', '克里斯汀斯图尔特']
85 | ```
86 |
87 | ## 解构赋值
88 | * eg1：
89 |
90 | 示例数据
91 |
92 | ```js
93 | const obj = {
94 | name: '杰夫贝佐斯',
95 | age: 48,
96 | }
97 | ```
98 |
99 | ```js
100 | const { name } = obj // 可以避免obj.name，多次使用obj.，来调用name属性，
101 | console.log(name) // 打印结果-- 杰夫贝佐斯
102 | ```
103 |
104 | * eg2：
105 |
106 | ```js
107 | this.name = 'aaa'
108 | this.obj = 'bbb'
109 | this.arr = 'ccc'
110 |
111 | // 正确使用
112 | const { name, obj, arr, ... } = this
113 | name = 'aaa' , obj = 'bbb' , arr = 'ccc'
114 | ```
115 |
116 | * eg3：
117 |
118 | ```js
119 | const ren = {
120 | name: '马斯克',
121 | age: 54,
122 | sex: '男',
123 | identity: '世界首富',
124 | }
125 |
126 | // 解构赋值搭配展开运算符
127 | const { name, ...newObj } = ren
128 | console.log('结构常用变量，剩余变量包装一个新的对象-------',name,newObj) // ↓↓
129 | 结构常用变量，剩余变量包装一个新的对象-------,马斯克, {age: 54,sex: '男',identity: '世界首富',}
130 |
131 | ```
132 |
133 | * eg3：
134 |
135 | ```js
136 | // 多重结构
137 | const moreRen = {
138 | name: '马斯克',
139 | age: 54,
140 | sex: '男',
141 | identity: '世界首富',
142 | company: {
143 | cart: '特斯拉',
144 | space: 'SpaceX'
145 | }
146 | }
147 |
148 | const { company: { cart } } = moreRen
149 | console.log('cart------',cart) // 特斯拉
150 | ```
151 |
152 | ## includes检测
153 |
154 | > 代替if判断,vue路由常用,白名单权限...
155 |
156 | ```js
157 | includes是恒等价于===的逻辑判断
158 | 也就是说 1 === '1' 返回false 等价于 [1].includes('1') 返回false
159 |
160 | eg: 错误示范
161 | if (val === '/login' || val === '/about' || val === '/home' || val === '/index') {
162 | console.log('vue需要放行token白名单的路由')
163 | }
164 |
165 | eg:<正确写法>
166 | const whiteList = [ '/login', '/about', '/home', '/index' ]
167 | whiteList.includes('login') && console.log('vue需要放行token白名单的路由')
168 | ```
169 |
170 | ## 代码规范
171 | ```js
172 | 1.css的命名不能使用驼峰，尽量使用-，或者_拼接
173 | 错误：.mainBox
174 | 正确：.main-box || .main_box
175 |
176 | 2.js的命名尽量使用驼峰，带有语意话的英文单词拼写
177 | 错误：function mainbox () { }
178 | 正确：mainBox () { }
179 | ```
180 |
181 | ## 补充
182 | ```js
183 | 1.不使用第三个变量进行换值操作
184 | let a = 5
185 | let b = 10
186 | [a, b] = [b, a]
187 | console.log('置换之后-----',a,b) // 置换之后-----,10,5
188 | ```
--------------------------------------------------------------------------------
/docs/web/knowledge/use-pm2.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: pm2使用教程
3 | description: pm2是什么，pm2的作用，linux怎么使用pm2
4 | outline: [2, 3]
5 | ---
6 |
7 | # pm2
8 |
9 | [pm2官网](https://pm2.keymetrics.io/)
10 |
11 | **PM2** 是 **node** 进程管理工具，可以利用它来简化很多 node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等
12 |
13 | ## 安装
14 |
15 | **前置条件**
16 |
17 | - 安装pm2需要node环境
18 |
19 | ```sh
20 | $ npm install pm2@latest -g
21 | # or
22 | $ yarn global add pm2
23 | ```
24 |
25 | - 启动
26 |
27 | ```sh
28 | pm2 start app.js
29 | ```
30 |
31 | ## 常用命令
32 |
33 | * **查看进程**: pm2 list
34 |
35 | * **启动所有进程**: pm2 startup
36 |
37 | * **删除某个进程**: pm2 delete <进程ID>
38 |
39 | * **停止某个进程**: pm2 stop <进程ID>
40 |
41 | * **重启所有进程**: pm2 restart all
42 |
43 | * **删除所有进程**: pm2 delete all
44 |
45 | * **停止所有进程**: pm2 stop all
46 |
47 | * **查看日志**: pm2 logs
48 |
49 | * **保存进程列表**: pm2 save
50 |
51 | ## pm2启动项目
52 |
53 | * 普通启动
54 |
55 | ```sh
56 | pnpm run start
57 | ```
58 |
59 | * pm2启动
60 |
61 | ```sh
62 | pm2 start pnpm --name “自定义你的进程名字” -- run [实际执行的命令]
63 | ```
64 |
65 | **示例**
66 |
67 | ```sh
68 | pm2 start pnpm --name "blog" -- run start
69 | ```
70 |
71 | ## 保活
72 |
73 | > 重启服务器，pm2启动的项目可以自行启动，也是我们使用pm2最主要的原因
74 |
75 | ### 配置自动启动项目
76 |
77 | > 配置 PM2 使其在系统重启后自动启动项目
78 |
79 | 执行 `pm2 list` 查看项目已经在pm2启动列表里边
80 |
81 | 执行
82 |
83 | ```sh
84 | pm2 startup systemd
85 | ```
86 |
87 | 这个命令会生成一个 systemd 服务文件，并给出一个命令供你复制和运行。
88 |
89 | ::: details 脚本生成示例
90 | ```sh
91 | pm2 startup systemd
92 | [PM2] Init System found: systemd
93 | Platform systemd
94 | Template
95 | [Unit]
96 | Description=PM2 process manager
97 | Documentation=https://pm2.keymetrics.io/
98 | After=network.target
99 |
100 | [Service]
101 | Type=forking
102 | User=root
103 | LimitNOFILE=infinity
104 | LimitNPROC=infinity
105 | LimitCORE=infinity
106 | Environment=PATH=/root/加密加密加密加密/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin
107 | Environment=PM2_HOME=/root/.pm2
108 | PIDFile=/root/.pm2/pm2.pid
109 | Restart=on-failure
110 |
111 | ExecStart=/加密加密加密加密/ons/node/v18.20.4/lib/node_modules/pm2/bin/pm2 resurrect
112 | ExecReload=/加密加密加密加密/ons/node/v18.20.4/lib/node_modules/pm2/bin/pm2 reload all
113 | ExecStop=/加密加密加密加密/ons/node/v18.20.4/lib/node_modules/pm2/bin/pm2 kill
114 |
115 | [Install]
116 | WantedBy=multi-user.target
117 |
118 | Target path
119 | /etc/systemd/system/pm2-root.service
120 | Command list
121 | [ 'systemctl enable pm2-root' ]
122 | [PM2] Writing init configuration in /etc/systemd/system/pm2-root.service
123 | [PM2] Making script booting at startup...
124 | [PM2] [-] Executing: systemctl enable pm2-root...
125 | [PM2] [v] Command successfully executed.
126 | +---------------------------------------+
127 | [PM2] Freeze a process list on reboot via:
128 | $ pm2 save
129 |
130 | [PM2] Remove init script via:
131 | $ pm2 unstartup systemd
132 | ```
133 |
134 | :::
135 |
136 | 运行以下命令来完成 PM2 的启动配置：
137 |
138 | ```sh
139 | sudo env PATH=$PATH:${环境变量 PATH} ${PM2 的完整路径} startup systemd -u root --hp /root
140 | ```
141 |
142 | **示例**
143 |
144 | ```sh
145 | sudo env PATH=$PATH:/root/加密加密加密加密/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin /加密加密加密加密/ons/node/v18.20.4/lib/node_modules/pm2/bin/pm2 startup systemd -u root --hp /root
146 | ```
147 |
148 | 命令的解析如下
149 |
150 | - sudo: 以超级用户权限运行命令。
151 | - env PATH=$PATH:...: 设置环境变量 PATH，包含了所有必要的目录。
152 | - /root/.nvm/versions/node/v18.20.4/lib/node_modules/pm2/bin/pm2: PM2 的完整路径。
153 | - startup systemd: 指示 PM2 创建 systemd 启动脚本。
154 | - -u root: 指定运行 PM2 的用户为 root。
155 | - --hp /root: 指定 root 用户的主目录。
156 |
157 | 运行这个命令后，PM2 将被配置为在系统启动时自动运行
158 |
159 | 运行保存脚本
160 |
161 | ```sh
162 | pm2 save
163 | ```
164 |
165 | 这将保存当前的 PM2 进程列表，确保在系统重启后这些进程会被自动重启
166 |
167 | 要使 PM2 在系统启动时自动启动，运行
168 |
169 | ```sh
170 | sudo systemctl enable pm2-一条懒羊羊
30 |
31 |
32 | ```
33 | * 选择 "Setting" -> "Secrets" -> "Code and automation" -> `"Pages"`
34 |
35 | 看到 `Build and deployment` 的 `Source` 存在两个选项
36 | * `Deploy from a branch` 从分支部署
37 | - Branch选择master分支
38 | - 默认他会读取跟目录的 `index.html` 文件，也就是说一个项目跟目录下只能有一个 `index.html` 文件
39 | - 刷新之后在 `GitHub Pages` 页面会出现一个网站，这个网站就是我们发布好的网站
40 | * `GitHub Actions` 自动化部署
41 | > 后续介绍使用
42 |
43 | ## 使用github pages自动化
44 |
45 | > 项目代码提交之后我们可以配置自动化发布 `github pages` 网站
46 |
47 | `1.` 选择 "Setting" -> "Secrets" -> "Code and automation" -> `"Pages"`
48 |
49 | `2.` 看到 `Build and deployment` 的 `Source` 选择 `GitHub Actions` 自动化部署
50 |
51 | ### 自动化脚本
52 |
53 | [vitepress部署脚本说明](https://vitepress.dev/zh/guide/deploy)
54 |
55 | * vitepress项目，`.github/workflows/` 新建 `deploy.yml` 脚本文件
56 | * 基于 `master` 新建分支 `github-pages`
57 | * 配置相关命令权限等
58 | * 构建脚本
59 | * 部署脚本
60 |
61 | > github-pages 分支提交上去之后我们就不需要做任何改动
62 |
63 | ```yml
64 | # 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
65 | #
66 | name: Deploy VitePress site to Pages
67 |
68 | on:
69 | # 在针对 `main` 分支的推送上运行。如果你
70 | # 使用 `master` 分支作为默认分支，请将其更改为 `master`
71 | push:
72 | branches: [master]
73 |
74 | # 允许你从 Actions 选项卡手动运行此工作流程
75 | workflow_dispatch:
76 |
77 | # 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
78 | permissions:
79 | contents: read
80 | pages: write
81 | id-token: write
82 |
83 | # 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
84 | # 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
85 | concurrency:
86 | group: pages
87 | cancel-in-progress: false
88 |
89 | jobs:
90 | # 构建工作
91 | build:
92 | runs-on: ubuntu-latest
93 | steps:
94 | - name: Checkout
95 | uses: actions/checkout@v4
96 | with:
97 | fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
98 | - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释
99 | with:
100 | version: 8.14.0 # 这里指定 pnpm 的版本
101 | - name: Setup Node
102 | uses: actions/setup-node@v4
103 | with:
104 | node-version: 18.17.1
105 | cache: pnpm # 或 pnpm / yarn
106 | - name: Setup Pages
107 | uses: actions/configure-pages@v4
108 | - name: Install dependencies
109 | run: pnpm install # 或 pnpm install / yarn install / bun install
110 | - name: Build with VitePress
111 | env:
112 | BUILD_ENV: github # 配置环境变量
113 | run: pnpm run build # 打包命令
114 | - name: Upload artifact
115 | uses: actions/upload-pages-artifact@v3
116 | with:
117 | path: docs/.vitepress/dist
118 |
119 | # 部署工作
120 | deploy:
121 | environment:
122 | name: github-pages
123 | url: ${{ steps.deployment.outputs.page_url }}
124 | needs: build
125 | runs-on: ubuntu-latest
126 | name: Deploy
127 | steps:
128 | - name: Deploy to GitHub Pages
129 | id: deployment
130 | uses: actions/deploy-pages@v4
131 | ```
132 |
133 | ### 实现效果
134 |
135 | - 配置完成之后 `master` 分支有提交就会触发脚本自动构建部署网站，也就是实现了 `CD`
136 | - `CD` 即持续交付/部署
137 |
--------------------------------------------------------------------------------
/docs/web/wechat/custom-nav.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 小程序自定义顶部导航栏组件
3 | description: 微信小程序自定义顶部导航栏组件
4 | ---
5 |
6 | # 小程序自定义顶部导航栏组件
7 |
8 | ## 组件源代码
9 |
10 | ::: code-group
11 | ```html
12 |
13 |
27 |
29 |
30 |
31 |
32 |
33 |
34 |
81 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
93 |
94 |
126 | ```
127 | :::
128 |
129 |
130 | ## 封装成`hook`
131 |
132 | ::: info 封装`useVModle`
133 | ```js
134 | // useVModel.js
135 | import { computed } from "vue";
136 |
137 | export default function useVModle(props, propName, emit) {
138 | return computed({
139 | get() {
140 | return new Proxy(props[propName], {
141 | get(target, key) {
142 | return Reflect.get(target, key)
143 | },
144 | set(target, key, newValue) {
145 | emit('update:' + propName, {
146 | ...target,
147 | [key]: newValue
148 | })
149 | return true
150 | }
151 | })
152 | },
153 | set(value) {
154 | emit('update:' + propName, value)
155 | }
156 | })
157 | }
158 | ```
159 | :::
160 |
161 | ::: info 子组件使用
162 | ```vue
163 |
164 |
165 |
169 |
170 |
185 | ```
186 | :::
187 |
--------------------------------------------------------------------------------
/docs/api/install-software/docker/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Docker
3 | description: Docker 是一个开源的容器化平台。它就像是一个轻量级的、独立运行的软件包，包含了运行某个应用程序所需的所有东西，包括代码、运行环境、系统工具、系统库等。
4 | outline: [2, 3]
5 | ---
6 |
7 | # Docker
8 |
9 | ## 链接
10 |
11 | * [Docker install 官网](https://docs.docker.com/engine/install/)
12 |
13 | * [Docker package 官网](https://hub.docker.com/search)
14 |
15 | ## Docker 简介
16 |
17 | ### 核心概念
18 |
19 | * **容器**
20 |
21 | 容器是 Docker 的核心元素。它就像是一个轻量级的、独立运行的软件包，包含了运行某个应用程序所需的所有东西，包括代码、运行环境、系统工具、系统库等。例如，一个运行着特定版本的 Web 服务器的容器，它能够在不同的计算机环境中保持一致的运行效果。
22 |
23 | * **镜像**
24 |
25 | 镜像是创建容器的基础。可以把它想象成容器的蓝图，它包含了容器启动时所需的文件系统和配置信息。例如，有一个 Ubuntu 操作系统的 Docker 镜像，基于这个镜像可以创建出多个运行 Ubuntu 系统的容器。
26 |
27 | ### 主要优势
28 |
29 | * **可移植性**
30 |
31 | Docker 容器可以在任何安装了 Docker 引擎的环境中运行，无论是开发者的个人电脑、测试服务器还是生产服务器。这使得开发、测试和部署的过程变得更加流畅，消除了传统环境中因操作系统、软件库版本等差异导致的 “在我机器上可以运行” 的问题。
32 |
33 | * **高效利用资源**
34 |
35 | 与传统的虚拟机相比，Docker 容器更加轻量级。多个容器可以共享主机的操作系统内核，不需要为每个容器运行一个完整的操作系统，大大节省了系统资源，使得在相同的硬件资源上可以运行更多的应用程序。
36 |
37 | * **快速部署和启动**
38 |
39 | 容器的启动速度非常快，通常只需要几秒钟。这使得在需要快速扩展应用程序实例的场景下，如应对流量高峰，Docker 能够快速响应，迅速启动新的容器来处理增加的负载。
40 |
41 | ## 安装Docker
42 |
43 | > Ubuntu 上安装 Docker 引擎
44 |
45 | ### 卸载旧版本
46 |
47 | 在安装 Docker Engine 之前，您需要卸载所有有冲突的软件包。
48 |
49 | 发行版维护者在 APT 中提供了 Docker 软件包的非官方发行版。您必须先卸载这些软件包，然后才能安装 Docker Engine 的正式版本。
50 |
51 | 要卸载的非官方软件包包括：
52 |
53 | ```md
54 | docker.io
55 | docker-compose
56 | docker-compose-v2
57 | docker-doc
58 | podman-docker
59 | ```
60 |
61 |
62 | 此外，Docker Engine 依赖于`containerd`和`runc`。Docker Engine 将这些依赖项捆绑为一个包：`containerd.io`。如果您之前安装了`containerd`或`runc`，请卸载它们以避免与 Docker Engine 捆绑的版本冲突。
63 |
64 | 运行以下命令来卸载所有冲突的包：
65 |
66 | ```sh
67 | for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done
68 | ```
69 |
70 | ### 添加Docker的签名密钥
71 |
72 | 在新的主机上首次安装 Docker Engine 之前，您需要设置 Docker 存储库。之后，您可以从存储库安装和更新 Docker。
73 |
74 | * 设置 Docker 的apt存储库
75 |
76 | ```sh
77 | # Add Docker's official GPG key:
78 | sudo apt-get update
79 | sudo apt-get install ca-certificates curl
80 | sudo install -m 0755 -d /etc/apt/keyrings
81 | sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
82 | sudo chmod a+r /etc/apt/keyrings/docker.asc
83 |
84 | # Add the repository to Apt sources:
85 | echo \
86 | "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
87 | $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
88 | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
89 | sudo apt-get update
90 | ```
91 |
92 | ### 查看可安装的Docker版本
93 |
94 | ```sh
95 | apt-cache policy docker-ce
96 | ```
97 |
98 |
99 | ### 安装 Docker 包
100 |
101 | ::: code-group
102 |
103 | ```sh [最新版]
104 | sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
105 | ```
106 |
107 | ```sh [指定版本]
108 | # List the available versions:
109 | apt-cache madison docker-ce | awk '{ print $3 }'
110 |
111 | 5:27.1.1-1~ubuntu.24.04~noble
112 | 5:27.1.0-1~ubuntu.24.04~noble
113 | ...
114 | ```
115 |
116 | :::
117 |
118 | ### 查看安装的Docker版本
119 |
120 | ```sh
121 | sudo docker version
122 | ```
123 |
124 | ## 添加国内镜像源
125 |
126 | 国内使用Docker下载镜像时会出现网速慢的问题，所以需要添加国内镜像源。
127 |
128 | * https://registry.docker - cn.com是 Docker 中国区官方镜像源。
129 | * https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 和 https://mirror.aliyuncs.com 是阿里云平台。
130 | * https://mirror.ccs.tencentyun.com 是腾讯云平台。
131 | * https://hub-mirror.c.163.com 是网易平台。
132 | * https://docker.mirrors.ustc.edu.cn 是中国科学技术大学平台。
133 |
134 | ### 创建daemon.json文件，并添加镜像地址
135 |
136 | 首先运行 `sudo vim /etc/docker/daemon.json` 来创建daemon.json文件，然后将以下内容复制到 `daemon.json` 文件中。
137 |
138 | ```json
139 | {
140 | "registry-mirrors": [
141 | "https://registry.docker-cn.com",
142 | "https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo",
143 | "https://mirror.ccs.tencentyun.com",
144 | "https://hub-mirror.c.163.com",
145 | "https://docker.mirrors.ustc.edu.cn",
146 | "https://mirror.aliyuncs.com",
147 | "https://hub-mirror.c.163.com",
148 | ]
149 | }
150 | ```
151 |
152 | ### 重启Docker
153 |
154 | ```sh
155 | sudo service docker restart
156 | ```
--------------------------------------------------------------------------------
/docs/web/vue/publish-npm.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: vue组件发布npm
3 | description: 如何开发Vue组件并将其打包发布到npm。包括环境设置、Vue CLI项目创建、组件编码、Webpack配置、本地测试及最终的npm发布流程。
4 | outline: [2, 3]
5 | ---
6 |
7 | # vue组件发布npm
8 |
9 | > 举例vue2的npm组件包发布
10 |
11 | ## 知识科普
12 |
13 | [常见的打包格式](/web/vue/packaging-format)
14 |
15 | ## 环境准备
16 |
17 | * [Nodejs](https://nodejs.org/zh-cn)环境
18 | - 示例使用node14版本
19 | * [Vue CLI](https://cli.vuejs.org/zh/)脚手架
20 | - 安装 `Vue CLI` 脚手架
21 | ```sh
22 | npm install -g @vue/cli
23 | ```
24 |
25 | ## 创建项目
26 |
27 | 通过 `Vue CLI` 新建一个vue2的项目
28 |
29 | ```sh
30 | vue create vue-components-package
31 | ```
32 |
33 | ## 开发组件
34 |
35 | ### 编写vue组件
36 |
37 | ::: info 新建 `src/packages/HelloWorld.vue` 文件
38 |
39 | > 需要注意的是，组件必须有 `name`，这将会是用户使用的组件名称
40 |
41 | ```vue
42 |
43 |
44 |
48 |
49 |
50 |
61 |
62 |
71 | ```
72 | :::
73 |
74 | ### 添加打包配置文件
75 |
76 | ::: info 新建 `src/index.js` 文件
77 |
78 | > 需要注意的是，组件必须有 `name`，这将会是用户使用的组件名称
79 |
80 | ```js
81 | import HellowWorld from "@/packages/HellowWorld.vue";
82 |
83 | const components = [HellowWorld];
84 |
85 | const install = (Vue, options) => {
86 | if (install.installed) return;
87 | install.installed = true;
88 | components.forEach((component) => {
89 | Vue.component(component.name, component);
90 | });
91 | };
92 |
93 | // 如果是直接引入的vue.js方式，则会挂到window下
94 | if (typeof window !== "undefined" && window.Vue) {
95 | install(window.Vue);
96 | }
97 |
98 | export default {
99 | // 使用Vue.use必须具有install方法
100 | install,
101 | ...components,
102 | };
103 | ```
104 | :::
105 |
106 | ### 添加打包命令
107 |
108 | 在项目根目录下的 `package.json` 文件添加 `build:package` 打包命令
109 |
110 | ```json
111 | "scripts": {
112 | "serve": "vue-cli-service serve",
113 | "build:package": "vue-cli-service build --target lib --name vue-components-package --dest lib src/index.js"
114 | },
115 | ```
116 |
117 | 这里的 `–target lib` 是 vue-cli 自带的打包命令，此命令会将入口文件打包成一个库码，具体可参考官网说明vue-cli官方文档
118 |
119 | * `–name` 指的是打包后的文件名
120 | * `–dest` 指文件夹的名称
121 |
122 | 紧跟的 `src/index.js` 指的是执行上文新建的index文件，暴露vue的install方法
123 |
124 | ## 验证组件功能和css样式
125 |
126 | * 修改根目录下的 `App.vue` 文件
127 |
128 | ```vue
129 |
130 | 红色
45 | text：{{ text }}
46 | 蓝色
47 |
131 |
133 |
134 |
135 |
147 | ```
148 | * 启动项目
149 | ```sh
150 | npm run serve
151 | ```
152 |
153 | ## 打包
154 |
155 | ```sh
156 | npm run build:package
157 | ```
158 |
159 | 项目打包成功之后会新增 `lib` 文件夹
160 |
161 | lib文件夹下包含多个js文件一个html文件
162 |
163 | ### 添加包文件入口
164 |
165 | 修改 `package.json` 文件
166 |
167 | ```json
168 | "main": "lib/vue-components-package.umd.js"
169 | ```
170 |
171 | ## 调试
172 |
173 | ### 发布本地连接包
174 |
175 | ```sh
176 | npm link
177 | ```
178 |
179 | ### 新建测试项目
180 |
181 | 重新构建一个vue项目用于测试组件包
182 |
183 | 在测试项目的目录终端执行
184 |
185 | ```sh
186 | npm link vue-components-package
187 | ```
188 |
189 | ### 引入开发的组件包
190 |
191 | ::: info 新项目的 main.js 文件引入开发的组件包
192 | ```js
193 | import Vue from "vue";
194 | import App from "./App.vue";
195 |
196 | import HelloWorld from "vue-components-package";
197 | Vue.use(HelloWorld);
198 |
199 | Vue.config.productionTip = false;
200 |
201 | new Vue({
202 | render: (h) => h(App),
203 | }).$mount("#app");
204 | ```
205 | :::
206 |
207 | 在 `App.vue` 中使用
208 |
209 | ```vue
210 |
211 |
212 |
214 |
215 | ```
216 |
217 | 然后运行项目，看打包内容是否正确
218 |
219 | ```sh
220 | npm run serve
221 | ```
222 |
223 | ### 其他方案
224 |
225 | 新建文件夹 `node_modules/vue-components-package`
226 |
227 | 采用复制的方式把 `lib` 和 `package.json` 文件复制到对应项目的 `node_modules/vue-components-package` 文件夹下
228 |
229 | 修改测试项目跟目录 `package.json` 文件的 `dependencies` 字段，手动添加包信息，注意包名和版本号要和拷贝过来的一致
230 |
231 | ```json
232 | "dependencies": {
233 | "vue-components-package": "^1.0.0",
234 | },
235 | ```
236 |
237 | ## 发布npm包
238 |
239 | [发布npm包教程](/web/knowledge/npm-publish.html)
240 |
--------------------------------------------------------------------------------
/docs/other/blog/up/sync-code.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 代码自动同步多个代码托管平台
3 | description: 一套代码自动同步到多个代码托管平台上，实现一次提交多平台存储
4 | ---
5 |
6 | # 代码自动同步多个代码托管平台
7 |
8 | ## 常见的代码托管平台
9 |
10 | * `GitHub`
11 | - 最大的代码托管平台，拥有庞大的用户群和丰富的功能。
12 | - 拥有免费的公共仓库，以及付费的私有仓库选项。
13 | - 强大的协作功能，支持分支管理、Pull Request、Issue跟踪等。
14 | - 拥有丰富的社区资源，方便学习和解决问题。
15 | - 支持CI/CD流程，方便自动化部署和测试。
16 | * `Gitee`
17 | - 中国本土的代码托管平台，用户界面简洁易用。
18 | - 支持多种语言和项目类型，拥有丰富的开发工具。
19 | - 提供免费的公共仓库和私有仓库选项。
20 | * `GitLab`
21 | - 功能类似于 GitHub，但更加注重安全性、隐私和自主性。
22 | - 提供免费的私有仓库，适合企业内部使用。
23 | - 支持CI/CD流程，方便自动化部署和测试。
24 |
25 | ## Github Actions 自动同步
26 |
27 | > **配置Actions好处是当我们提交代码到github的时候，代码会`自动更新同步`到gitee，便于国内用户访问**
28 |
29 | 我们可以利用 Github Actions，写一个工作流，在发现 Github 博客仓库的 master 分支代码更新后，自动同步当前代码到 Gitee 上。
30 |
31 | 关于 Github Actions 的介绍，可以参考阮一峰老师的 [《GitHub Actions 入门教程》](https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html)。
32 |
33 | 为了实现 Gitee 和 Github 的同步，我们需要借助一个 action，还好业界已经有现成的实现了，这里我采用的是 [Hub Mirror Action](https://github.com/Yikun/hub-mirror-action)，我们可以看到使用的示例代码：
34 |
35 | ```yml
36 | name: syncToGitee
37 | on:
38 | push:
39 | branches:
40 | - master
41 | jobs:
42 | repo-sync:
43 | runs-on: ubuntu-latest
44 | steps:
45 | - name: Mirror the Github organization repos to Gitee.
46 | uses: Yikun/hub-mirror-action@master
47 | with:
48 | src: 'github/jiangwan1773'
49 | dst: 'gitee/jiangwan1773'
50 | dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}
51 | dst_token: ${{ secrets.GITEE_TOKEN }}
52 | static_list: "blog" # 仓库名字
53 | force_update: true # 强制同步
54 | debug: true # 启用 `debug` 开关
55 | ```
56 |
57 | 其中有四个必填项：
58 | * `src` 表示需要被同步的源端账户名，即我们 `Github` 的账户名，因为我的 Github ID 是 jiangwan1773，所以这里我应该改成 `github/jiangwan1773`。
59 | * `dst` 表示需要同步到的目的端账户名，即我们 `Gitee` 的账户名，因为我的 Gitee ID 也是 jiangwan1773，所以这里我应该改成 `gitee/jiangwan1773`。
60 | * `dst_key` 表示用于在目的端上传代码的私钥，然后将其保存在 `Secrets` 中。
61 | 具体的操作步骤如下：
62 |
63 | 获取私钥：
64 |
65 | ```sh
66 | cat ~/.ssh/id_rsa
67 | ```
68 |
69 | 复制私钥内容，然后在要同步的 Github 仓库中，选择 "Setting" -> "Secrets" -> "Actions secrets and variables" -> "New repository secret"
70 |
71 | 填入 Secret 内容，Name 命名为 "GITEE_PRIVATE_KEY"，Value 为复制的内容
72 |
73 | 然后点击 `Add secret` 即可。
74 |
75 | - `dst_token` 创建仓库的API tokens， 用于自动创建不存在的仓库。这里我们从 Gitee 上获取，[gitee地址](https://gitee.com/profile/personal_access_tokens)。生成并复制 Token，然后同样的步骤，保存在 Github 的 Secrets 中，Name 为 `GITEE_TOKEN`
76 |
77 | 那么我们就可以在仓库建立的根目录下，建立目录 `.github/workflows` ，然后创建一个名为 `syncToGitee.yml` 的文件：
78 | ```yml
79 | name: syncToGitee
80 | on:
81 | push:
82 | branches:
83 | - master
84 | jobs:
85 | repo-sync:
86 | runs-on: ubuntu-latest
87 | steps:
88 | - name: Mirror the Github organization repos to Gitee.
89 | uses: Yikun/hub-mirror-action@master
90 | with:
91 | src: 'github/ytlyy1773'
92 | dst: 'gitee/ytlyy1773'
93 | dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}
94 | dst_token: ${{ secrets.GITEE_TOKEN }}
95 | static_list: "blog" # 仓库名字
96 | force_update: true # 强制同步
97 | debug: true # 启用 `debug` 开关
98 | ```
99 |
100 | [怎么配置GitHub Secrets 🚘](/other/blog/up/use-github-actions.html#怎么配置github-secrets)
101 |
102 | ## gitee pages Actions 
豫公网安备41132402411828`,
106 | copyright: `豫ICP-备2023019165`,
107 | },
108 | ...chineLanguage,
109 | },
110 | });
111 |
--------------------------------------------------------------------------------
/docs/other/blog/up/use-linux.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 如何使用linux云服务器
3 | description: linux云服务器使用教程
4 | outline: [2, 3]
5 | ---
6 |
7 | # 如何使用linux云服务器
8 |
9 | ## 连接linux服务器
10 |
11 | > 服务器连接linux需要修改一次服务器密码，之后重启实例，注意是重启实例不是重启服务器
12 |
13 | ### 常见连接linux服务器的终端
14 | 1. Windows
15 | - cmd
16 | - powershell
17 | 2. Mac
18 | - 终端
19 | 3. 第三方
20 | - Xshell
21 |
22 | ```sh
23 | # 链接linux服务器命令
24 | ssr root@(ip)
25 | # 示例
26 | ssr root@110.110.110.110
27 | # 清理服务器密钥，可以重新输入服务器密钥
28 | ssh-keygen -R ip
29 | ```
30 |
31 | ### 服务器浏览项目
32 |
33 | > `linux` 没有所谓的图形界面，想要访问网站可以用命令进行访问
34 |
35 | ```sh
36 | curl https://localhost
37 | ```
38 |
39 | ## linu常用命令学习资源
40 |
41 | * [请参考 🚘](/other/system/linux/command.html)
42 | * [菜鸟教程 🚘](https://www.runoob.com/w3cnote/linux-common-command-2.html)
43 | * [45个常用Linux 命令 🚘](https://juejin.cn/post/6844903930166509581)
44 | * [阿里云开发者社区 🚘](https://developer.aliyun.com/article/842453)
45 |
46 | ## linu常见发行版
47 |
48 | > 以下三种博主都有使用过，服务器推荐使用 `Debain`
49 |
50 | - **Debain**
51 |
52 | - **Ubuntu**
53 |
54 | - **CentOs**
55 |
56 | ## Debain/Ubuntu
57 |
58 | ### Ubuntu是什么
59 |
60 | * 著名的Linux发行版之一，基于Debian，以桌面应用为主的Linux发行版
61 | * Ubuntu每六个月（即每年的四月与十月）发布一个新版本，长期支持（LTS）版本每两年发布一次。普通版本一般只支持9个月，但LTS版本一般能提供5年的支持。
62 | * `是目前最多用户的Linux版本`
63 |
64 | ### Ubuntu下载命令
65 | ```sh
66 | apt install packagesName
67 | ```
68 |
69 | > 下载报错
70 |
71 | ```bash
72 | Reading package lists... Done
73 | Building dependency tree... Done
74 | Reading state information... Done
75 | E: Unable to locate package nginx
76 | ```
77 |
78 | 使用 `apt update` 命令更新软件包列表。这将确保你拥有最新的软件包信息，在重新下载包。
79 |
80 | ```bash
81 | apt update
82 | ```
83 |
84 | ### 使用nginx教程
85 |
86 | [请参考 🚘](/other/blog/up/use-nginx.html)
87 |
88 | ## CentOs
89 |
90 | ### CentOs是什么
91 |
92 | * CentOS是Linux发行版之一，它是来自于Red Hat Enterprise Linux依照开放源代码规定发布的源代码所编译而成。
93 | * CentOs广泛用于 Web 服务器、数据库服务器、邮件服务器等
94 | * `CentOs目前已经停止更新`
95 |
96 | ### Ubuntu下载命令
97 |
98 | ```sh
99 | yum install packagesName
100 | ```
101 |
102 | ### CentOs下载git
103 |
104 |
105 | ```sh
106 | yum install git
107 | ```
108 |
109 | ::: tip 文件位置
110 | 安装路径
111 | ```sh
112 | /usr/share/git-core
113 | ```
114 | :::
115 |
116 | ### 使用git教程
117 |
118 | [请参考 🚘](/other/tools/git-command.html)
119 |
120 | ## 编写linux执行脚本
121 |
122 | 这里默认nginx的网页配置指向我们打包后的dist目录
123 |
124 | > 只需执行脚本即可完成项目代码的拉取，nginx的重载
125 |
126 | * root文件下新建脚本文件
127 | ```sh
128 | # 新建脚本文件
129 | touch update.sh
130 | # 编辑脚本
131 | vim update.sh
132 | ```
133 | * 按 i 进入插入模式
134 | * `/usr/local/code/demo` 为项目代码地址
135 | ::: tip 脚本内容
136 | ```sh
137 | cd /usr/local/code/demo && git pull
138 | nginx -s reload
139 | ```
140 | :::
141 | * 报错提示权限不足
142 | ::: warning 处理权限问题
143 | ```sh
144 | chmod +x update.sh
145 | ```
146 | :::
147 | * 配置完毕需要重启服务器实例才会生效
148 | * 执行脚本
149 | ```sh
150 | ./update.sh
151 | ```
152 |
153 | ## github自动执行服务器脚本
154 |
155 | > 通过 `github avtions` 实现代码提交，服务器自动执行脚本更新服务器内容
156 |
157 | [请参考 🚘](/other/blog/up/use-github-actions.html#github执行linux系统脚本)
158 |
159 |
160 | ## 升级脚本
161 |
162 | 执行脚本可以实现的效果
163 |
164 | * 拉取代码
165 | - 这里强烈建议使用 `ssh` 的方式链接github仓库。[ssh链接请参考 🚘](/other/tools/git-command.html#ssh链接)
166 | - 不然使用https的方式 `git pull` 经常失败，导致达不到我们想要的效果
167 | * 使用服务器的node进行打包
168 | * 执行nginx更新命令
169 |
170 | 环境准备
171 |
172 | * 服务器需要下载nvm
173 | * 通过nvm下载打包需要的node
174 | * 打包使用pnpm就下载pnpm
175 |
176 | ::: tip 脚本内容
177 | ```sh
178 | # git pull的时候，代码远端采用ssh绑定
179 | # 通过github actions执行脚本必须显式声明PATH
180 |
181 | # 确保 pnpm 和 Node.js 在 PATH 中
182 | export PATH=/root/.nvm/versions/node/v18.20.3/bin/:$PATH
183 |
184 | # 定义重试函数
185 | retry() {
186 | local n=1
187 | local max=5
188 | local delay=5
189 | while true; do
190 | "$@" && break || {
191 | if [[ $n -lt $max ]]; then
192 | ((n++))
193 | echo "Command failed. Attempt $n/$max:"
194 | sleep $delay;
195 | else
196 | echo "The command has failed after $n attempts."
197 | return 1
198 | fi
199 | }
200 | done
201 | }
202 |
203 | # 拉取代码并重试
204 | retry git -C /path/to/core/blog pull
205 |
206 | # 在脚本开头记录开始时间
207 | echo "Script started at $(date)" >> /var/log/up_script.log
208 | cd /path/to/core/blog && pnpm i && pnpm run build
209 |
210 | # 你的脚本内容
211 | echo "Executing script commands" >> /var/log/up_script.log
212 |
213 | nginx -s reload
214 |
215 | # 在脚本末尾记录结束时间
216 | echo "Script finished at $(date)" >> /var/log/up_script.log
217 | ```
218 | :::
219 |
220 | ## linux常见发行版对比
221 |
222 | | 发行版名称 | 基于 | 桌面环境 | 特点 | 适用人群 |
223 | |---|---|---|---|---|
224 | | **Ubuntu** | Debian | GNOME | 易用性强，软件源丰富，社区活跃，适合新手和开发者 | 桌面用户、开发者、服务器 |
225 | | **CentOS** | Red Hat Enterprise Linux (RHEL) | GNOME | 稳定性高，安全性好，适合服务器 | 服务器管理员、企业用户 |
226 | | **Fedora** | Red Hat Enterprise Linux (RHEL) | GNOME | 最新技术，创新性强，适合开发者和对新技术感兴趣的用户 | 开发者、技术爱好者 |
227 | | **Debian** | 自身 | GNOME | 稳定性高，自由软件的典范，适合追求稳定和自由的用户 | 服务器管理员、开发者 |
228 | | **Linux Mint** | Ubuntu | Cinnamon | 易用性强，外观美观，适合对Windows 用户体验有需求的用户 | 桌面用户 |
229 | | **Arch Linux** | 自身 | 用户自定义 | 灵活性高，可高度定制，适合有经验的Linux 用户 | 高级用户 |
230 | | **Manjaro** | Arch Linux | KDE Plasma | 基于Arch Linux，易用性更好，适合想体验Arch Linux但又不想折腾的用户 | 中级用户 |
231 | | **Kali Linux** | Debian | GNOME | 渗透测试、安全审计，预装大量渗透测试工具 | 安全专业人员、黑客 |
232 | | **openSUSE** | 自身 | KDE Plasma | 社区活跃，易于使用，适合开发者和系统管理员 | 开发者、系统管理员 |
233 |
234 | ### 各发行版特点简述
235 |
236 | * **Ubuntu:** 最受欢迎的Linux发行版之一，易于使用，软件源丰富，社区活跃。
237 | * **CentOS:** 稳定性高，安全性好，适合搭建服务器。
238 | * **Fedora:** 创新性强，经常引入最新的技术，适合开发者。
239 | * **Debian:** 稳定性高，自由软件的典范，适合追求稳定和自由的用户。
240 | * **Linux Mint:** 易用性强，外观美观，适合对Windows 用户体验有需求的用户。
241 | * **Arch Linux:** 灵活性高，可高度定制，适合有经验的Linux 用户。
242 | * **Manjaro:** 基于Arch Linux，易用性更好，适合想体验Arch Linux但又不想折腾的用户。
243 | * **Kali Linux:** 专为渗透测试和安全审计设计的。
244 | * **openSUSE:** 社区活跃，易于使用，适合开发者和系统管理员。
245 |
246 | ### 选择建议
247 |
248 | * **新手:** Ubuntu、Linux Mint
249 | * **服务器:** CentOS、Debian
250 | * **开发者:** Ubuntu、Fedora、openSUSE
251 | * **渗透测试:** Kali Linux
252 | * **追求稳定性:** CentOS、Debian
253 | * **追求个性化:** Arch Linux、Manjaro
254 |
255 | **注意:** 这只是一份简单的对比，每个发行版都有其独特的优势和适用场景。建议你在选择发行版之前，多了解一些相关信息，或者在虚拟机中尝试一下不同的发行版，找到最适合自己的那个。
--------------------------------------------------------------------------------
/docs/public/image/user.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/docs/other/blog/up/use-nginx.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 怎么使用nginx
3 | description: 不同系统下怎么使用nginx
4 | outline: [2, 3]
5 | ---
6 |
7 | # 怎么使用nginx
8 |
9 | ## nginx介绍
10 |
11 | > Nginx是一个 轻量级/高性能的反向代理Web服务器，它是由C语言写的，所以速度非常快、性能非常优秀。它的主要功能就是反向代理、负载均衡、配置SSL证书、防盗链、解决跨域问题、缓存、限流、动静资源分离等等
12 |
13 | ::: info nginx的常用 `配置文件` 说明
14 | - `nginx.exe` nginx的启动文件，不推荐使用，建议使用命令行启动项目
15 | - `html` html文件夹下是默认的项目路径
16 | - `conf/nginx.conf` nginx的核心配置文件
17 | - `sites-available` Ubunto下的 `nginx server` 配置文件
18 | :::
19 |
20 | ::: tip nginx的 `常用命令`
21 |
22 | > 命令都需要在 `nginx文件目录下` 执行
23 |
24 | ```bash
25 | # windows server 启动 Nginx
26 | start nginx
27 | # linux启动 Nginx
28 | nginx
29 |
30 | # 停止 Nginx
31 | nginx -s stop
32 |
33 | # 重新加载配置（项目需要更新操作执行，最常用）
34 | nginx -s reload
35 | ```
36 | :::
37 |
38 |
39 | ## `windows server` 系统
40 |
41 | ::: info 如何使用nginx
42 | - 进入官网下载好nginx文件，进行解压
43 | - 在nginx文件目录下打开 `cmd` 终端
44 | - 执行命令 `start nginx` 启动nginx
45 | - 打开浏览器访问 `localhost` 可以看到 `Welcome to nginx!` 界面即成功
46 | - 把自己的项目打包后的dist文件内容放入 `nginx/html` 文件夹下
47 | - 执行 `nginx -s reload` 命令
48 | - 刷新 `localhost` 预览自己的博客项目
49 | :::
50 |
51 | ### 借助nginx实现自己的图片服务器
52 | [参考链接](/other/blog/up/setup-oss.html)
53 |
54 |
55 | ## `linux` 系统
56 |
57 | ### Ubuntu下载nginx
58 |
59 | 使用 `apt update` 命令更新软件包列表。这将确保你拥有最新的软件包信息。
60 |
61 | ```sh
62 | apt update
63 | apt install nginx
64 | ```
65 |
66 | ::: tip 文件位置
67 | - 配置文件路径
68 | ```sh
69 | /etc/nginx/nginx.conf
70 | # server配置文件
71 | /etc/nginx/sites-available
72 | ```
73 |
74 | - html默认文件路径
75 | ```sh
76 | /var/www/html
77 | ```
78 | :::
79 |
80 | ### CentOs下载nginx
81 |
82 | ```sh
83 | yum install nginx
84 | ```
85 | ::: tip 文件位置
86 | - 配置文件路径
87 | ```sh
88 | /etc/nginx/nginx.conf
89 | ```
90 |
91 | - html默认文件路径
92 | ```sh
93 | /usr/share/nginx/html
94 | ```
95 | :::
96 |
97 | ### 修改nginx配置
98 |
99 | ```sh
100 | cd /etc/nginx
101 | vim ./nginx.conf
102 | ```
103 | ::: warning vim模式无法编辑，需要进入 `插入模式`
104 | * 要进入插入模式，请按 i 键。
105 | * 要返回命令模式，请按 Esc 键。
106 | :::
107 |
108 | ## nginx配置参考
109 |
110 | Gzip压缩的配置也可以放在http对象下，和放在serve下略有区别
111 |
112 | ```nginx
113 | # Nginx 主配置文件
114 |
115 | # 使用Nginx用户
116 | user nginx;
117 |
118 | # 自动设置工作进程数量
119 | worker_processes auto;
120 |
121 | # 错误日志文件路径
122 | error_log /var/log/nginx/error.log;
123 |
124 | # PID 文件路径
125 | pid /run/nginx.pid;
126 |
127 | # 包含所有Nginx模块配置文件
128 | include /usr/share/nginx/modules/*.conf;
129 |
130 | events {
131 | # 设置每个工作进程的最大连接数
132 | worker_connections 1024;
133 | }
134 |
135 | http {
136 | # 日志格式定义
137 | log_format main '$remote_addr - $remote_user [$time_local] "$request" '
138 | '$status $body_bytes_sent "$http_referer" '
139 | '"$http_user_agent" "$http_x_forwarded_for"';
140 |
141 | # 访问日志文件路径和使用的日志格式
142 | access_log /var/log/nginx/access.log main;
143 |
144 | # 启用高效文件传输
145 | sendfile on;
146 | tcp_nopush on;
147 | tcp_nodelay on;
148 |
149 | # 设置长连接超时时间
150 | keepalive_timeout 65;
151 |
152 | # 增加类型哈希表的最大大小
153 | types_hash_max_size 4096;
154 |
155 | # 包含MIME类型映射表
156 | include /etc/nginx/mime.types;
157 |
158 | # 包含所有Nginx虚拟主机配置文件
159 | include /etc/nginx/conf.d/*.conf;
160 |
161 | server {
162 | # 监听80端口（HTTP）和443端口（HTTPS）
163 | listen 80;
164 | listen 443 ssl;
165 |
166 | # 配置服务器名
167 | server_name www.jwblog.cn;
168 |
169 | # 如果请求的端口不是443，则重定向到HTTPS
170 | if ($server_port !~ 443){
171 | rewrite ^(/.*)$ https://$host$1 permanent;
172 | }
173 |
174 | # SSL证书配置
175 | ssl_certificate cert/full_chain.pem;
176 | ssl_certificate_key cert/private.key;
177 | ssl_prefer_server_ciphers on;
178 |
179 | # 启用Gzip压缩
180 | gzip on;
181 | gzip_static on;
182 | gzip_min_length 1k; # 最小压缩文件大小
183 | gzip_buffers 4 16k; # 压缩缓冲区
184 | gzip_http_version 1.1; # HTTP版本
185 | gzip_comp_level 6; # 压缩级别
186 | gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
187 | gzip_vary on; # 根据请求头决定是否压缩
188 | gzip_proxied expired no-cache no-store private auth; # 压缩代理请求
189 | gzip_disable "MSIE [1-6]\."; # 禁用对IE 6及以下版本的压缩
190 |
191 | # 配置静态资源路径（如OSS存储的图片）
192 | location /images {
193 | root /path/to/data/images;
194 | }
195 |
196 | # 配置网站主目录
197 | location / {
198 | root /path/to/code/blog/docs/.vitepress/dist;
199 | index index.html index.htm;
200 | # 处理单页面应用程序的路由问题
201 | try_files $uri $uri/ /index.html;
202 | }
203 | }
204 | }
205 | ```
206 |
207 |
208 | ## nginx常见问题
209 |
210 | ### 页面刷新内容丢失
211 |
212 | > 刷新页面，路由url末尾会多拼接一个/
213 |
214 | ```nginx
215 | server {
216 | listen 80 default_server;
217 | listen [::]:80 default_server;
218 |
219 | root /项目存放路径/open-api-blog/out;
220 |
221 | index index.html;
222 |
223 | # 将所有以斜杠结尾的请求重定向到没有斜杠的URL
224 | location ~ ^(.+)/$ {
225 | return 301 $scheme://$host$1;
226 | }
227 |
228 | location / {
229 | try_files $uri $uri.html $uri/ @remove_slash;
230 | }
231 |
232 | # 处理找不到文件时的情况
233 | location @remove_slash {
234 | rewrite ^(.+)/$ $1 permanent;
235 | }
236 | }
237 | ```
238 |
239 | ### 客户端无法请求接口
240 |
241 | > 在服务器可以访问到相应的接口服务，通过nginx转发的就不可以
242 |
243 | ```nginx
244 | server {
245 | location ^~ /api/ {
246 | proxy_pass http://localhost:3000/;
247 | proxy_set_header Host $host;
248 | proxy_set_header X-Real-IP $remote_addr;
249 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
250 | proxy_set_header X-Forwarded-Proto $scheme;
251 | }
252 | }
253 | ```
254 |
255 | 将上边的代码补充道nginx的配置文件中
256 |
257 | location ^~ /api/ 是核心
258 |
259 | * `proxy_pass http://localhost:3000/`;
260 |
261 | 将匹配到的请求代理到 http://127.0.0.1:3000 这个地址。
262 |
263 | 后面的 / 表示将请求的 URI 路径部分完整地传递给后端服务器。
264 |
265 | * `proxy_set_header Host $host`;
266 |
267 | 将原始请求的 Host 头部信息传递给后端服务器，以便后端服务器能够正确地处理请求。
268 |
269 | * `proxy_set_header X-Real-IP $remote_addr`;
270 |
271 | 将客户端的真实 IP 地址添加到 X-Real-IP 头部中，以便后端服务器能够获取客户端的真实 IP 地址。
272 |
273 | * `proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for`;
274 |
275 | 将客户端的 IP 地址以及之前经过的代理服务器的 IP 地址添加到 X-Forwarded-For 头部中。
276 |
277 | * `proxy_set_header X-Forwarded-Proto $scheme`;
278 |
279 | 将客户端使用的协议（http 或 https）添加到 X-Forwarded-Proto 头部中。
--------------------------------------------------------------------------------
/docs/web/vue/preview/preview.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
28 |
5 | ![]()
26 |
27 |
6 |
8 | ✕
7 |
9 |
11 | ⟳
10 |
16 |
18 | ◀︎
17 |
23 |
25 | ▶︎
24 |