hosts文件映射总结、入口页commit记录模块

docs/.vuepress/client.js

@@ -1,11 +1,13 @@
 import { defineClientConfig } from 'vuepress/client'
 import Layout from './layouts/Layout.vue'
+import FetchGithubCommit from './components/FetchGithubCommit.vue'
 import DynamicTitle from './components/DynamicTitle.vue'
 import DIframe from './components/DIframe.vue'
 
 // @see: https://v2.vuepress.vuejs.org/zh/advanced/cookbook/usage-of-client-config.html
 export default defineClientConfig({
   enhance({ app, router, siteData }) {
+    app.component('FetchGithubCommit', FetchGithubCommit)
     app.component('DynamicTitle', DynamicTitle)
     app.component('DIframe', DIframe)
   },

docs/.vuepress/components/FetchGithubCommit.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { reactive, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { rTime } from '../utils/tools'
+
+const state = reactive({
+  list: [],
+})
+
+let Tim = null
+const getRepoCommit = () => {
+  let cacheList = JSON.parse(window.localStorage.getItem('cacheList')) || []
+
+  if (!cacheList.length) return
+
+  state.list = [cacheList[0]]
+  Tim = setInterval(() => {
+    state.list.push(cacheList[state.list.length])
+    if (state.list.length >= 10) {
+      clearTimeout(Tim)
+      Tim = null
+    }
+  }, state.list.length * 100)
+}
+
+const route = useRoute()
+watch(
+  () => route.path,
+  async (val) => {
+    // console.log('监听route.path:', decodeURI(val) === '/技术总结/')
+    await nextTick()
+    getRepoCommit()
+  },
+  {
+    flush: 'post',
+    deep: true,
+    immediate: true,
+  }
+)
+
+onUnmounted(() => {
+  clearTimeout(Tim)
+  Tim = null
+})
+</script>
+
+<template>
+  <div class="flex-box">
+    <transition-group name="fadeBox" tag="div">
+      <div v-for="(item, i) in state.list" :key="i" class="box">
+        <div class="item-row">
+          <div>
+            {{ item.message }}
+          </div>
+          <div>
+            {{ rTime(item.committer.date) }}
+          </div>
+        </div>
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.fadeBox-move .item-row,
+.fadeBox-enter-active .item-row,
+.fadeBox-leave-active {
+  transition: all 1s ease;
+}
+
+.fadeBox-leave-active .item-row {
+  position: absolute;
+}
+
+.fadeBox-enter-from .item-row,
+.fadeBox-leave-to .item-row {
+  opacity: 0;
+  transform: translateX(-50px);
+}
+
+.flex-box {
+  width: 100%;
+  height: 690px;
+  .box {
+    & + div {
+      margin-top: 10px;
+    }
+    .item-row {
+      min-width: 400px;
+      height: 60px;
+      padding: 10px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 auto;
+      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+      border-radius: 10px;
+      user-select: none;
+
+      &:nth-child(1) {
+        transition-delay: 0.1s;
+      }
+
+      &:nth-child(2) {
+        transition-delay: 0.2s;
+      }
+
+      &:nth-child(3) {
+        transition-delay: 0.3s;
+      }
+
+      &:nth-child(4) {
+        transition-delay: 0.4s;
+      }
+
+      &:nth-child(5) {
+        transition-delay: 0.5s;
+      }
+
+      &:nth-child(6) {
+        transition-delay: 0.6s;
+      }
+
+      &:nth-child(7) {
+        transition-delay: 0.7s;
+      }
+
+      &:nth-child(8) {
+        transition-delay: 0.8s;
+      }
+
+      &:nth-child(9) {
+        transition-delay: 0.9s;
+      }
+      &:nth-child(10) {
+        transition-delay: 1s;
+      }
+    }
+  }
+}
+</style>

docs/.vuepress/config.js

@@ -29,7 +29,7 @@ export default defineUserConfig({
     viteOptions: {
       server: {
         host: '0.0.0.0', // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
-        port: 9008,
+        port: 9009,
         open: false,
         strictPort: true, // 若端口已被占用则会直接退出
         cors: true, // 配置 CORS

docs/.vuepress/config/silder.js

@@ -14,10 +14,11 @@ export default [
       '/技术总结/踩坑总结/项目生成md目录树',
       '/技术总结/踩坑总结/CICD相关',
       '/技术总结/踩坑总结/关于github_pages部署前端脚手架项目大刷404问题及解决方案',
-      '/技术总结/踩坑总结/vercel部署node项目',
       '/技术总结/踩坑总结/git篇',
       '/技术总结/踩坑总结/nginx篇',
       '/技术总结/踩坑总结/docker前端篇',
+      '/技术总结/踩坑总结/node总结',
+      '/技术总结/踩坑总结/vercel部署node项目',
       '/技术总结/踩坑总结/HTTP',
       '/技术总结/踩坑总结/如何检测网页http版本',
       '/技术总结/踩坑总结/referrer',

docs/.vuepress/layouts/Layout.vue

@@ -14,6 +14,27 @@ console.log(
   'padding: 3px; color: white; background: #219EBC;border-radius: 0 5px 5px 0;'
 )
 
+const username = 'onresize' // 替换为你的GitHub用户名
+const reponame = 'web-blogs' // 替换为你的仓库名
+const url = `https://api.github.com/repos/${username}/${reponame}/commits`
+const getCommit = () => {
+  fetch(url)
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      }
+      throw new Error('Network response was not ok.')
+    })
+    .then((data) => {
+      let cacheList = data.slice(0, 10).map(({ commit }) => commit)
+      window.localStorage.setItem('cacheList', JSON.stringify(cacheList))
+    })
+    .catch((error) => {
+      console.error('Error fetching commits:', error)
+    })
+}
+getCommit()
+
 const state = reactive({
   showPageBottom: true,
   onLinNum: 0,

docs/.vuepress/utils/tools.js

@@ -36,3 +36,8 @@ export const loopFps = () => {
     loop()
   } else document.getElementById('fps').style = 'display:none!important'
 }
+
+export const rTime = (date) => {
+  let Time = new Date(Date.parse(date)).toLocaleString()
+  return Time
+}

docs/技术总结/README.md

@@ -1 +1,3 @@
-### 🗃️🗃️🗃️🗃️🗃️🗃️ 持续更新...
+### 🗃️🗃️🗃️🗃️🗃️🗃️ 持续更新（最近10条更新记录）...
+
+<FetchGithubCommit />

docs/技术总结/踩坑总结/HTTP.md

@@ -52,4 +52,24 @@ description: HTTP
   | 数据重传     | 有                 | 有            |
   | 拥塞控制     | 有                 | 有            |
 
-
+### `浏览器输入域名后的域名解析过程`  
+  - 当浏览器输入域名时、浏览器会先去解析域名、获取对应的ip地址、再去向这个ip发送请求
+  - 浏览器解析域名时、会先在本机上的hosts文件查找、如果找到了、就会向hosts文件中对应的ip地址发送请求
+  - 如果hosts文件找不到、就会向DNS发出域名解析的请求、再向DNS返回的ip地址发出请求
+- ##### 例：phpStudy开启nginx服务下创建的一个 `www.baidu.com` 的网站、如下图：
+<p align="center">
+  <img src="/AA_mdPics/server.min.png" />
+</p>
+
+- hosts文件下 `www.baidu.com` 自动对应了 `127.0.0.1` 这个ip
+<p align="center">
+  <img src="/AA_mdPics/host.min.png" />
+</p>
+
+- edge打开 `www.baidu.com` 的效果（注：不要挂梯子）
+<p align="center">
+  <img src="/AA_mdPics/edge.min.png" />
+</p>
+
+- 常用场景：客户端主机hosts文件添加对应的ip、自定义的域名映射关联、去访问内网网站
+- 总之：hosts文件主要用于自定义域名和ip地址之间的映射关系、比如：本地开发用域名测试联调、没有添加ip映射的主机起到网站屏蔽作用

docs/技术总结/踩坑总结/docker前端篇.md

@@ -235,7 +235,7 @@ mongoose: v8.3.1
 - MongoDB客户端下载地址：[MongoDB Community Server](https://www.mongodb.com/try/download/community)
 
 - #### 用 `docker-desktop` 拉取官方 `mongo` 镜像并按步骤运行
-- 下图步骤2、3分别是mongodb本地物理机存储路径、和映射挂载到容器的路径
+- 下图步骤2、3分别是mongodb的数据在本地物理机的存储路径、和映射挂载到容器中的路径
 <p align="center">
   <img src="/AA_mdPics/docker-compose.min.png" />
 </p>

docs/技术总结/踩坑总结/node总结.md

@@ -0,0 +1,17 @@
+---
+title: node总结
+lang: zh-CN
+feed:
+  enable: true
+description: node总结
+---
+
+# node总结
+
+> 本文作者：[onresize](https://github.com/onresize)
+
+[node中文文档](https://nodejs.p2hp.com/)
+
+[node内置http模块](https://blog.csdn.net/weixin_46809263/article/details/133877683)
+
+[内置的http 和 express 和 koa的区别](https://blog.csdn.net/weixin_58555796/article/details/130331966)