呆萌's Blog 2025-12-10T04:40:52.000Z https://www.xdxmblog.cn/ 小呆&小萌 Hexo 一文搞定音标、音节划分、自然拼读规则 https://www.xdxmblog.cn/posts/40574.html 2025-12-10T04:40:45.000Z 2025-12-10T04:40:52.000Z 整理一下英语的音标、音节划分、自然拼读规则，方便娃在学习的过程中可以快速查找、记忆以及巩固相关知识点。

英语音标：48个国际音标

单元音（12个）[ɑː] [ɔ:] [ɜː] [i:] [u:]
元[ʌ ] [ɒ ] [ə ] [ɪ ] [ʊ ] [æ ] [e ]
音双元音（8个）[eɪ] [aɪ] [ɔɪ] [əʊ] [aʊ]
[ɪə] [eə] [ʊə]
清辅音[p] [t] [k] [f] [θ] [s] [ʃ] [tʃ] [tr] [ts] [h]
辅浊辅音[b] [d] [g] [v] [ð] [z] [ʒ] [dʒ] [dr] [dz] [r]
鼻音[m] [n] [ŋ]
音舌侧音[l]
半元音[w] [j]

音节与音节划分知识

1.音节

以元音为主体构成的发音单位，一般说来元音发音响亮，可以构成音节，辅音发音不响亮，不能单独构成音节（[m] [n] [ŋ ] [l]例外）。从单词拼写形式上看，有几个元音字母就有几个音节。

2.音节的划分

① 在重读音节和非重读音节的相邻处有两个辅音字母时，一个辅音字母组属于前面的音节，一个属于后面的音节。

例如：let-ter，mem-ber，chil-dren，daugh-ter

② 在重读和非重读音节的相邻处只有一个辅音字母时，如果前面重读音节里的元音是长音则辅字组属于后面一个音节，如果重读音节里的元音是短音，则辅音字母属于重读音节。

例如：长音 pa-per，stu-dent，fa-ther，ze-ro，mo-tor，far-ther

　　　短音 sev-en，stud-y，moth-er，ver-y，mod-le ，weath-er

3.重读音节

单词中读音特别响亮的音节。用音标标记双音节、多音节词的读音时，应使用重读符号。单音节词多数是重读音节，标记读音时不需要使用重读符号。

4.开音节

① 绝对开音节：单个元音字母后面没有辅音字母的重读音节。

例如：no，blue，ba-by，stu-dent，se-cret

② 相对开音节：单个元音字母后面加单个辅音字母，再加一个不发音字母e构成的重读音节。

例如：name，these，bike，home，excuse

5.闭音节

单个元音字母后面有辅音字母（r、w、y 除外）且以辅音字母结尾的重读音节。

例如：bag，egg，fish，not，cup

6.双音节词重读规则

① 双音节词的第一个音节通常是重读音节。

例如： stu-dent，Chi-na，sec-ond，au-tumn

② 含有a- be- de- re- in- ex- 等前缀的双音节词往往是在第二个音节上重读。双音节词的重读位置不会因增加前缀或后缀而发生改变。

例如：a-bout，be-fore，ex-cuse，re-pair，for-get-ful，in-ven-tor

7. 多音节词重读规则

多音节词通常在倒数第三个音节重读。

例如： el-e-phant

词尾有-ic 或-tion,-sion 的词，在-ic或-sion,-tion前的一个音节上重读。

例如：scien-tific，im-pression，na-tion

英语单词拼读规则

1、元音字母在重读音节中的读音

元音字母读 音例 词
a在开音节中[ei]name plane Jane baby cake
在闭音节中[æ]bag dad hat map black back
e在开音节中[i:]he these me Chinese
在闭音节中[e]bed let pen desk yes egg
i在开音节中[ai]bike fly drive time nice kite
在闭音节中[i]fish big drink sit milk swim
o在开音节中[əu]those close go hoe home no
在闭音节中[ɔ]clock not box shop sock
u在开音节中[ju:]student excuse duty Tuesday
在闭音节中[ʌ]bus cup jump much lunch

在开音节中，元音字母u在辅音字母j l r s后面时读[u:]音，例如：June blue ruler super

2、元音字母在非重读音节中的读音

元音字母读 音例 词
a[ə]China another woman breakfast
[i]orange comrade village cabbage
e[ə]hundred student open weekend
[i]chicken pocket begin children
i[i]holiday beautiful family animal
[ai]exercise satellite
o[ə]second tonight somebody welcome
[əu]also zero photo
u[ə]autumn diffcult
[ju:]popular congratulation January

动词中的a如果处在开音节位置，a读[ei]音，例如：operate

u处在开音节位置，又在辅音字母j l r s后面时，读[u(:)]音，例如：July influence February issue

在非重读音节中，许多单词中的元音字母a e i 既可以读作[ə]音可以读作[i]音。

3、元音字母在重读音节中的特殊读音

元音字母读 音例 词
a在[w]音后面[ɔ]want what watch wash quality
a在f n sk ph sp ss st th前[α:]after plant graph ask grasp glass fast father
i在-nd -ld和gh前[ai]find child light high
o在-st -ld前[əu]most postcard old cold
o在m n v th前[ʌ]come monkey love mother

4、-r音节元音字组在重读音节中的读音

元音字组读 音例 词
ar[α:]car farm dark sharpener
ar在[w]音后面[ɔ:]warm quarter towards
or[ɔ:]forty morning short
or在[w]音后面[ə:]word worker worse
er ir ur[ə:]certainly bird Thursday

辅音字母r双写时，前面的元音字母不能与r构成-r音节,而是按重读闭音节的拼读规则发音。例如：carry sorry hurry

-r音节在非重读音节中通常读[ə]音，例如：dollar teacher forget Saturday

5、-re音节元音字组在重读音节中的读音

元音字组读 音例 词
are[εə]care dare hare
ere[iə]here mere
ire[aiə]fire hire wire
ore[ɔ:]more score before
ure[juə]pure cure

are ere ire ore很少出现在非重读音节中，ure在非重读音节中读[tʃə]音或[ʒə]，例如：picture pleasure

重读元音字母加Rr，再加非重读元字组时，重读元音字母应按-re音节拼读规则拼读，字母Rr读[r]音。 例如：parent zero story during inspiring　

某些常用词及多音节词经常出现长音短化现象。 例如：orange very American paragraph

6、元音字组在重读音节中的读音

元音字组读 音例 词
ai/ay[ei]afraid rain wait day play
air[εə]air hair chair pair repair
al[ɔ:l]small ball talk wall all
al在f m前[ɔ:l]always also salt almost
[α:]half calm
au/aw[ɔ:]autumn daughter draw
ea[i:]teach easy cheap please
[e]heavy bread sweater weather
[ei]break great
ear[iə]hear dear near clear year
[εə]bear pear wear swear
[ə:]earth learn early
ee[i:]jeep week green three
eer[iə]pioneer deer beer
ei/ey[ei]eight neighbour they
[i:]either key
eu/ew在 j l r s后[ju:]new few newspaper
[u:]flew brew jewelry
ie/ei[s]音之后[i:]piece field receive
oa[əu]coat Joan boat goal
oar/oor[ɔ:]roar board door floor
oi/oy[ɔi]noise point boy toilet
oo[u:]broom food tooth school
[u]book look cook foot good
ou/ow[au]flower house count down
[əu]know row throw though
[ʌ]young country enough
[u:]group you soup
our[ɔ:]course your four
[auə]our hour ours
[ə:]journey
ui 在j l r s后[ju:i]fluid suicide tuition suit
[u:]juice fruit

7、非重读音节中元音字组和字群的读音

元音字组或字群读 音例 词
ai/ay ei/ey[i]Sunday foreign monkey
ow[əu]yellow sparrow tomorrow
-sion -tion[ʃən]impression nation
-sion在元音字母后[ʒən]vision decision occasion
-tion在s后[tʃən]question suggestion
-sten[sn]listen
-stle[sl]whistle
-sure[ʒə]pleasure measure
-ture[tʃə]picture culture

8、元字组在复合词非重读音节中的读音

复合词中的第二部分不标注重音符号，但其中的元音字母或元音字组仍按重读音节拼读规则拼读。
例如：
everyday[ei]
handbag[æ]
blackboard[ɔ:]
有些词随着语言的发展，前后两部分已失去其单独存在的意义，融合成为一个词。其中的非重读部分要按非重读音节的读音规则发音。
例如：
sun太阳 + day[ei]日子 ＞ Sunday[i] 星期天
holy神圣 + day[ei]日子 ＞ holiday[i] 假日
break中断 + fast[a:]斋戒 ＞ breakfast[ə]早餐
cup茶杯 + board木板[ɔ:] ＞ cupboard[ɔ:] 碗柜

9、辅字组的读音

辅字组读 音例 词
b[b]bike bus bag
[/]bomb tomb
c[k]cake picture coat music
c在e前或在i/y前[s]face decide cinema
ch[tʃ]much chick rich teacher
[k]school headache chemistry
[ʃ]machine Chicago
-ck[k]cock pocket black knock
d[d]doctor bread hand day
-dge[dʒ]bridge fridge
dr-[dr]children driver drink
f[f]five four breakfast
g[g]bag gardon go
g在e i/y前[dʒ]orange large German
gh[f]cough enough photo
[/]light daughter high
gu- -gue gu在非重读音节中[g]guess league dialogue
[gw]language anguish
h[h]hot head house hand
[/]hour honest
j[dʒ]jeep jar joke join July
k[k]kind bike skate make week
kn-[n]knife know knock
l[l]life milk school tall
m[m]monkey come autumn
-mn[m]autumn column solemn
n[n]not shine ten note
n在[k] [g]音前[ŋ]uncle thank hungry
-ng[n]morning young wrong
p[p]paper plane pig ship pen
ph[f]elephant photo telephone
q[k]Iraq
qu-[kw]quality quite
r[r]red rubber ruler
s在词首或清辅音前[s]sit sleep desk
在元音字母间或浊辅音前[z]music husband
sc-[sk]scar
[s]muscle science
sh[ʃ]she fish shirt wash
t在通常情况下[t]ten letter meet
在弱读字母ia ie io前[ʃ]patient nation
tch[tʃ]watch
th在通常情况下[θ]thin thirty method
在冠词 代词 介词 连词中[ð]the these with than
在词尾-the -ther中[ð]clothe father weather
tr-[tr]tree train country truck
v[v]very voice love leave
w[w]week win wake sweet wait
[/]answer two
wh-[w]what when white why
wh-在字母o前[h]who whose whole
x[ks]box text exercise
在重读元音前[gz]examle exist exact
wr-[r]write
y-[j]yes yard yellow young
z[z]puzzle zero zoo
]]> <p>整理一下英语的音标、音节划分、自然拼读规则，方便娃在学习的过程中可以快速查找、记忆以及巩固相关知识点。</p> <h2 id="英语音标：48个国际音标"><a href="#英语音标：48个国际音标" class="headerlink" title="英语音标：48个国 基于Vue3和Element Plus实现Tab导航栏 https://www.xdxmblog.cn/posts/47739.html 2025-11-27T04:17:33.000Z 2025-11-27T04:17:33.000Z 在开发后台管理系统的时候，我们通常会在脚手架的基础上，利用UI框架快速搭建起Layout模板，而导航栏便是Layout里最常用的一个组件之一了。这篇文章主要用Vue + Vue Router + Pinia + Element Plus来快速实现一套Tab导航栏。

效果预览

前置准备

首先要保证你的项目中已经安装了以下依赖，它们是实现Tab导航栏必不可缺的一部分。

1
2
3
4
5
6
7
8
9
{
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.2",
    "element-plus": "^2.11.8",
    "pinia": "^3.0.4",
    "vue": "^3.5.24",
    "vue-router": "^4.6.3"
  }
}

如果你是从头创建一个后台管理系统，你可以使用以下命令来初始化项目。

1
pnpm create vite@latest

然后你会得到以下的项目结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
vite-project/
├── public/                 # 静态资源目录
├── src/                    # 源代码目录
│   ├── assets/            # 项目资源文件
│   ├── components/        # 公共组件
│   ├── App.vue          # 根组件
│   ├── style.css         # 全局样式文件
│   └── main.js            # 入口文件
├── .gitignore             # Git忽略文件
├── index.html            # HTML模板
├── package.json           # 项目配置
├── vite.config.js         # Vite配置
└── README.md             # 项目说明

接着安装上述依赖

1
pnpm install vue vue-router pinia element-plus @element-plus/icons-vue

开发Tab导航栏

框架基本改造

首先我们对脚手架生成的项目进行基本的改造，引入我们安装好的依赖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* src/main.js */

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'

import ElementPlus from 'element-plus'

import './style.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
const pinia = createPinia()

// 全局注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(pinia)
app.use(router)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
app.mount('#app')
1
2
3
4
// src/style.css
body {
  margin: 0; 
}
1
2
3
4
<!-- src/App.vue -->
<template>
  <router-view></router-view>
</template>

编写路由

接着我们在src目录下新建router文件夹，用来存放我们的路由文件。这里我们通过meta对象的hidden属性来决定该路由是否在菜单栏中隐藏。通过isShow属性来决定该路由是否为一级菜单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// src/router/index.js
import { createWebHashHistory, createRouter } from 'vue-router'
import { useNavStore } from '@/stores/nav'

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue'),
    meta: {
      title: '登录',
      hidden: true, // 不在菜单中显示
    },
  },
  {
    path: '/',
    component: () => import('@/layout/index.vue'),
    redirect: '/home',
    meta: {
      title: '根目录',
      hidden: true, // 不在菜单中显示
    },
    children: [
      {
        path: '/home',
        name: 'home',
        component: () => import('@/views/home/index.vue'),
        meta: {
          title: '首页',
          icon: 'HomeFilled',
          isShow: true,
        },
      },
      {
        path: '/system',
        name: 'system',
        meta: {
          title: '系统管理',
          icon: 'Setting',
          isShow: true,
        },
        children: [
          {
            path: '/system/user',
            name: 'user',
            component: () => import('@/views/system/user/index.vue'),
            meta: {
              title: '用户管理',
              icon: 'User',
            },
          },
          {
            path: '/system/role',
            name: 'role',
            component: () => import('@/views/system/role/index.vue'),
            meta: {
              title: '角色管理',
              icon: 'UserFilled',
            },
          },
        ],
      },
    ],
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404/index.vue'),
    meta: {
      title: '404',
      hidden: true,
    },
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

编写Layout组件

在src目录下新建layout文件夹，用来存放后台管理系统的框架。同时在layout目录下新建components文件夹，用来存放layout相关的组件。这里我们的layout组件的布局采用较为常见的上，下（左右）结构。

我的项目用了sass，所以style lang=”scss”，没用sass的话把lang属性去掉，然后把层级嵌套去掉即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!-- src/layout/index.vue -->
<template>
  <div class="common-layout">
    <el-container class="layout-container">
      <el-aside class="layout-aside" :width="isCollapse ? '64px' : '200px'">
        <Sidebar :is-collapse="isCollapse" />
      </el-aside>
      <el-container>
        <el-header class="layout-header">
          <HeaderBar :is-collapse="isCollapse" @change-collapse="updateIsCollapse" />
        </el-header>
        <el-main class="layout-main">
          <NavTabs />
          <el-container class="layout-content">
            <router-view />
          </el-container>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HeaderBar from './components/HeaderBar/index.vue'
import Sidebar from './components/Sidebar/index.vue'
import NavTabs from './components/NavTabs/index.vue'

// 侧边栏折叠状态
const isCollapse = ref(false)

const updateIsCollapse = value => {
  isCollapse.value = value
}
</script>

<style lang="scss" scoped>
.common-layout {
  height: 100vh;

  .layout-container {
    height: 100%;

    .layout-header {
      background-color: #fff;
      border-bottom: 1px solid #e6e6e6;
    }

    .layout-aside {
      transition: width 0.3s ease;
      overflow: hidden;
      overflow-y: auto;
    }

    .layout-main {
      padding: 10px 20px;
      background-color: #f5f7f9;
      overflow: hidden;

      .layout-content {
        padding: 15px;
        background-color: #fff;
        height: 100%;
        overflow-y: auto;
      }
    }
  }
}
</style>

编写Store数据

Layout组件编写好以后，我们来编写Store数据，这里我们没有用Vuex，而是选用pinia，毕竟使用起来比Vuex顺手多了，而且不需要再写那么多的冗余操作。这里的Store主要用于菜单栏和Tab导航栏之间的数据通信。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// src/stores/nav.js
import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useNavStore = defineStore('nav', () => {
  const tabList = ref([{ meta: { title: '首页', icon: 'HomeFilled' }, path: '/home' }])
  const tabActivePath = ref('/home')

  function addTab(tabItem) {
    const hasTab = tabList.value.find(item => item.path == tabItem.path)

    if (!hasTab) {
      tabList.value.push(tabItem)
    }

    tabActivePath.value = tabItem.path
  }

  function removeTab(path) {
    if (path == '/home') return

    const curTabIndex = tabList.value.findIndex(item => item.path == path)
    tabList.value.splice(curTabIndex, 1)
  }

  return { tabList, tabActivePath, addTab, removeTab }
})

编写菜单栏组件

菜单栏主要用到element-plus的el-menu组件，子菜单我们通过编写SidebarItme组件递归调用，将路由文件里的children数据传递到子组件里。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!-- src/layout/components/Sidebar/index.vue -->
<template>
  <div class="sidebar-container">
    <div class="sidebar-logo">
      <!-- <img src="@/assets/logo.png" alt="logo" class="logo-icon" /> -->
      <span class="sidebar-title" v-if="!isCollapse">后台管理系统</span>
    </div>

    <el-menu :default-active="activeMenu" :unique-opened="true" :collapse="props.isCollapse" router>
      <sidebar-item :router-list="menuRoutes" :base-path="'/'" />
    </el-menu>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SidebarItem from './SidebarItem.vue'

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
})

const route = useRoute()
const router = useRouter()

// 获取当前激活的菜单路径
const activeMenu = computed(() => {
  const { path } = route
  return path
})

// 获取过滤后的菜单路由
const menuRoutes = computed(() => {
  const routes = router.getRoutes()
  return routes.filter(route => route.meta && route.meta.isShow && !route.meta.hidden)
})
</script>

<style lang="scss" scoped>
.sidebar-container {
  height: 100%;

  .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 59px;
    border-bottom: 1px solid #e6e6e6;

    .sidebar-title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .el-menu {
    height: calc(100% - 60px);
    border-right: none;
    overflow-y: auto;

    &:not(.el-menu--collapse) {
      width: 200px;
    }
  }
}

// 滚动条样式
.el-menu::-webkit-scrollbar {
  width: 3px;
}

.el-menu::-webkit-scrollbar-thumb {
  background: #324157;
  border-radius: 3px;
}

.el-menu::-webkit-scrollbar-track {
  background: #001529;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- src/layout/components/SidebarItem/index.vue -->
<template>
  <template v-for="item in props.routerList" :key="item.path">
    <el-sub-menu v-if="item.children && item.children.length > 0 && !item.meta?.hidden" :index="item.path">
      <template #title>
        <el-icon v-if="item.meta?.icon">
          <component :is="item.meta.icon" />
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </template>

      <!-- 递归调用 -->
      <sidebar-item :router-list="item.children" :base-path="item.path" />
    </el-sub-menu>

    <el-menu-item v-else-if="!item.meta?.hidden" :index="item.path" @click="handleClickMenuItem(item.path, item.meta)">
      <el-icon v-if="item.meta?.icon">
        <component :is="item.meta.icon" />
      </el-icon>
      <template #title>
        <span>{{ item.meta?.title }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup>
import { defineProps } from 'vue'
import { useNavStore } from '@/stores/nav'

const store = useNavStore()

const props = defineProps({
  routerList: {
    type: Array,
    required: true,
  },
  basePath: {
    type: String,
    default: '',
  },
})

const handleClickMenuItem = (path, meta) => {
  store.addTab({ path, meta })
}
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: var(--el-menu-hover-bg-color);
  font-weight: 500;
}
</style>

编写Tab导航组件

依旧在layout/components目录下创建好对应的文件，编写以下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- src/layout/components/NavTabs/index.vue -->
<template>
  <div class="navtabs-container">
    <keep-alive>
      <el-tabs
        type="card"
        v-model="store.tabActivePath"
        closable
        @tab-click="handleSwitchTab"
        @tab-remove="handleRemoveTab"
      >
        <el-tab-pane v-for="(item, index) in store.tabList" :key="index" :name="item.path">
          <template #label>
            <div class="nav-tab-label">
              <el-icon v-if="item.meta?.icon">
                <component :is="item.meta.icon" />
              </el-icon>
              <span>{{ item.meta?.title }}</span>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </keep-alive>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useNavStore } from '@/stores/nav'

const router = useRouter()
const store = useNavStore()

const handleSwitchTab = tabItem => {
  const path = tabItem.props.name
  store.tabActivePath = path

  router.push(path)
}

const handleRemoveTab = path => {
  if (path == '/home') return

  store.removeTab(path)

  const lastTab = store.tabList[store.tabList.length - 1]
  store.tabActivePath = lastTab.path

  router.push(lastTab.path)
}
</script>

<style lang="scss" scoped>
.nav-tab-label {
  display: flex;
  align-items: center;
  > .el-icon {
    font-size: 16px;
    margin-right: 5px;
  }
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  border-bottom-color: var(--el-border-color-light);
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  border-bottom-color: transparent;
}
:deep(.el-tabs--card > .el-tabs__header) {
  margin-bottom: 0;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  background-color: #fff;
}
</style>

通过上面的代码，我们已经能够实现点击左侧菜单，跳转对应页面，并实现Tab导航栏自动联动的功能。

编写路由守护

但整体来说，还是有一点小小的缺陷在里面，当我们手动在url输入页面地址的时候，Tab导航栏并没有响应，下面我们通过编写路由守护来完善它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// src/router/index.js
...
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

// 添加以下代码
router.beforeEach((to, from) => {
  const routes = router.getRoutes()
  const hasRoute = routes.find(route => route.path == to.path)

  if (hasRoute) {
    const navStore = useNavStore()
    navStore.addTab({ path: to.path, meta: to.meta })
  }
})

export default router

小结

整个功能实现起来并不复杂，其实就是对数据的操作和组件的响应。对于很多前端同行来说，也就是看个热闹，但是对于一些初入前端的同学来说，也能给他们提供一些思路和经验。最后希望这篇笔记能帮助到屏幕前的你。

]]> <p>在开发后台管理系统的时候，我们通常会在脚手架的基础上，利用UI框架快速搭建起Layout模板，而导航栏便是Layout里最常用的一个组件之一了。这篇文章主要用<strong>Vue + Vue Router + Pinia + Element Plus</strong>来快 使用宝塔部署NodeJs+Express API接口保姆级教程 https://www.xdxmblog.cn/posts/53311.html 2025-11-18T08:56:52.000Z 2025-11-18T08:56:52.000Z 给娃做了一个自律的小程序，刚好也涉及到了使用服务器去部署Node项目，这对于我来说还是一个挺有趣的事情，以前一直也没用过宝塔面板，刚好借着这次机会记录一下整个流程。

前置准备

  • 一台服务器
  • 完整的NodeJS项目（需要注意依赖包所需的最低NodeJS版本）

我这里全程以阿里云ESC服务器实例操作，系统版本：Debian 12.12 64位。很多人安装系统的时候喜欢选CentOS 7，包括网上有大量老旧资料也都在推荐这个系统，但是需要注意的是CentOS 7安装宝塔面板后，NodeJS版本最高只支持到16。比如我的项目最低需要NodeJS 18+，那就不能选CentOS 7，否则项目跑步起来。

安装宝塔面板

点击实例=>远程连接，进入服务器（阿里云选免密登录即可）。输入以下命令，执行安装。

1
wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh && bash install_panel.sh ed8484bec

中途会询问**Do you want to install Bt-Panel to the /ww directory now?(y/n)**，输入y回车。这里的意思是询问你宝塔面板的安装路径。

1
Do you want to install Bt-Panel to the /ww directory now?(y/n) y

然后大概等个1~2分钟，会提示以下信息，就表示安装好了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
=============注意：首次打开面板浏览器将提示不安全=================

 请选择以下其中一种方式解决不安全提醒
 1、下载证书，地址：https://dg2.bt.cn/ssl/baota_root.pfx，双击安装,密码【www.bt.cn】
 2、点击【高级】-【继续访问】或【接受风险并继续】访问
 教程：https://www.bt.cn/bbs/thread-117246-1-1.html
 mac用户请下载使用此证书：https://dg2.bt.cn/ssl/mac.crt

========================面板账户登录信息==========================

 【云服务器】请在安全组放行 45678 端口
 外网ipv4面板地址: https://1.1.1.1:45678/4b5ce23c
 内网面板地址:     https://172.22.103.99:45678/4b5ce23c
 username: ezxceqwe
 password: 350fjk53

 浏览器访问以下链接，添加宝塔客服
 https://www.bt.cn/new/wechat_customer
==================================================================

把面板账户登录信息保存好，给你电脑里建个文档存一份。一会儿会用到，这个时候可以关掉远程连接了，暂时用不到它了。

安全组策略

划重点，这玩意就是你服务器的防火墙，能不能访问服务器主要靠它来控制。后续我们在宝塔配置的数据库，NodeJS等项目需要配置安全组策略时，除了在宝塔面板的安全里需要放行，还需要在云服务器的安全组策略里放行。

回到云服务器ESC实例面板=>网络与安全组。添加入方向规则，把刚才面板登录信息里的端口号填进去。

这时我们在浏览器里输入外网ipv4面板地址，用保存好的用户名和密码，就可以登录宝塔面板了。

宝塔面板配置

从这里开始，大部分的操作基本都是在我们的宝塔面板里进行了。大部分的操作都是图形化界面，对后端新手和纯前端同学也是比较友好的，不太需要向运维那样纯命令行操作。

安装基本环境

第一次登录进去会提示绑定宝塔账号，我没绑，直接点击左侧导航栏首页。这时会弹窗，推荐你一键安装环境，直接勾选LNMP一键安装即可。这里我没截图安装过程，点击左侧软件商店=>已安装，可以看到我们已经安装好的服务。

安装数据库

左侧导航栏选择数据库，进入页面之后，最好是先点一下root密码，自定义或随机生成一个数据库密码。

然后添加数据库，这里数据库名称，用户名和密码，就按照你自己的项目正常填就行。然后访问权限一定要打开，否则之后我们在自己电脑用Navicat等工具是访问不到的。

导入SQL

导入SQL之前我们需要确定一下自己的SQL文件大小，如果超过50M，要在PHP配置一下上传参数。小于50M的忽略这一步。

左侧导航栏选择软件商店=>已安装，找到PHP，点击设置。在弹窗中选择：配置修改，在下图框选处调整参数大小。修改完之后，点击弹窗里的服务，重启一下PHP，否则配置不生效。

SQL导入我们可以通过宝塔安装的phpMyAdmin，也可以用自己熟悉的SQL工具，比如Navicat Premium，这里两种方式我都讲一下。

通过phpMyAdmin导入SQL

左侧导航栏选择数据库=>phpMyAdmin=>通过面板访问，进入phpMyAdmin管理页面。

选择刚才已经添加好的数据，点导入。

通过Navicat Premium导入SQL

在安全组策略里，添加3306端口放行。忘了怎么操作的小伙伴回到前置准备的第二步。

之后打开Navicat Premium=>文件=>新建连接=>选择数据库，我这里是MySQL。

连接名随便写，自己能分清是连的哪个环境的数据库就行。主机填宝塔面板左上角的IP地址。端口默认3306，用户名和密码就是你要连哪个数据库，就填哪个数据库的用户名和密码。在宝塔面板的数据库列表可以看到。最后点一下测试连接，提示：连接成功，就说明没问题了。

Node项目部署

数据库配置完成以后，我们来配置NodeJS环境。

环境配置

左侧导航栏选择网站=>Node项目，通常第一次进入会提示你安装Node版本管理器。点击安装，安装完成后点击Node版本管理器，切换为官方源，选择支持你的NodeJS版本进行安装。

文件上传

左侧导航栏选择文件，选择wwwroot目录，创建一个新文件夹，名字随意，用来存放你的Node项目代码。

打开你电脑的Node项目代码，修改项目连接数据的配置，将数据的配置项，比如host、port、user、password、database等，改成刚才导入SQL时填写的那些值。

接着将项目里除了node_module以外的全部文件，上传到刚才创建的文件夹里。

添加项目

上传完成之后，左侧导航栏选择网站=>Node项目=>添加项目。

  • 项目目录选择刚才上传的目录。
  • 名称随便填
  • 启动选项可以用它带出来的，也可以自己填，比如 Node app.js等。
  • Node版本，包管理器根据项目自行选择。
  • 项目端口，填你项目里的真实端口，比如项目在本地跑是127.0.0.1:8888，这里端口就填8888。

完成之后，启动项目，会自动安装依赖，运行。然后去安全策略组把对应（对应例子里是8888）端口号放行，这点很重要！同时把ESC服务器的策略组放行80端口（http服务端口），这个只需要放行服务器安全策略组就行，宝塔的默认放行了。

Vue项目部署

我这里用的是axios，需要在配置文件里将baseURL改为服务端（也就是上面的Node项目）的地址。

1
2
3
4
5
const axiosInstance = axios.create({
  baseURL: 'http://192.168.1.217:3000/api', //这里改为服务端地址，后面如果配了域名，再替换为域名
  timeout: 5000,
  adapter: adapter,
})

与Node项目一样，在宝塔的wwwroot目录下创建一个新文件夹，用来存放Vue项目的代码。之后将Vue项目打包生成dist文件夹。将dist文件夹里的全部文件上传到刚才新建的文件夹里。然后左侧导航栏选择网站=>HTML项目=>添加项目。

  • 域名填宝塔左上角ip（后面域名备案好了过来替换）
  • 根目录选择创建好的文件夹

由于之前我们已经放行了80端口，这里就不用再次操作了。

测试项目

在浏览器输入宝塔左上角的IP地址，验证vue项目是否正常展示，然后打开F12调试面板，观察接口请求是否正常。如果有问题，检查一下是不是哪一步漏掉了。至此，从宝塔面板的安装，环境配置，数据库的安装，到Node后端接口的部署，前端页面的部署这一整套的流程就全部结束了。

]]> <p>给娃做了一个自律的小程序，刚好也涉及到了使用服务器去部署Node项目，这对于我来说还是一个挺有趣的事情，以前一直也没用过宝塔面板，刚好借着这次机会记录一下整个流程。</p> <h2 id="前置准备"><a href="#前置准备" class="headerlink" t MySQL数据库原理、设计与应用(一)数据库的基本操作 https://www.xdxmblog.cn/posts/58637.html 2025-04-30T07:52:05.000Z 2025-04-30T07:52:05.000Z 这个系列的笔记主要是读《MySQL数据库原理、设计与应用》一书过程中，整理的读书笔记和书中的练习作业。主要目的是解决因为MySQL数据库使用不熟练，导致在利用Node.js编写后端API时，知道逻辑却不知道对应的SQL语句怎么写的问题。

这篇笔记的内容对应书中的第二章部分。

学习目标

  • 掌握数据库的创建、查看、选择与删除操作
  • 掌握数据表的创建、查看、修改与删除操作
  • 掌握数据的添加、查询、修改与删除操作

数据库操作

创建数据库

一个MySQL服务器可以有多个数据库，分别存储不同的数据。创建数据的基本语法格式如下：

CREATE DATABASE 数据名称 [库选项];

1
2
mysql> CREATE DATABASE mydb;
Query OK, 1 row affected (0.00 sec)

如果创建的数据库已存在，则程序会报错如下。

1
2
mysql> CREATE DATABASE mydb;
ERROR 1007 (HY000): Can't create database 'mydb'; database exists

为了防止这种情况，在创建数据库时可以在“数据库名称”前添加IF NOT EXISTS,表示指定的数据库不存在时执行创建操作，否则忽略此操作。

1
2
mysql> CREATE DATABASE IF NOT EXISTS mydb;
Query OK, 1 row affected, 1 warning (0.00 sec)

在添加了IF NOT EXISTS后，执行结果并没有报错，但是可以观察到返回了一条警告信息。通过SHOW WARNINGS可以查看错误信息。

1
2
3
4
5
6
7
mysql> SHOW WARNINGS;
+-------+------+-----------------------------------------------+
| Level | Code | Message                                       |
+-------+------+-----------------------------------------------+
| Note  | 1007 | Can't create database 'mydb'; database exists |
+-------+------+-----------------------------------------------+
1 row in set (0.00 sec)

查看数据库

查看MySQL服务器下的所有数据库

当需要查看MySQL服务器中已经存在的数据库时，基本语法格式如下：

SHOW DATABASES;

1
2
3
4
5
6
7
8
9
10
11
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mydb               |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

上面的结果中，除了mydb是我们刚才创建的数据库以为，其他数据库都是MySQL安装时自动创建的。对于初学者来说，不建议去修改和删除这些数据库，以免造成服务器故障。

  • information_schema和performance_schema数据库分别是MySQL服务器的数据字典（保存所有数据表和库的结构信息）和性能字典（保存全局变量等的设置）。
  • mysql数据库主要负责MySQL服务器自己需要使用的控制和管理信息，如用户的权限关系等。
  • sys是系统数据库，包括了存储过程、自定义函数等信息。

查看指定数据库的创建信息

查看某个数据库的信息，基本语法格式如下。

SHOW CREATE DATABASE 数据库名称;

1
2
3
4
5
6
7
mysql> SHOW CREATE DATABASE mydb;
+----------+-----------------------------------------------------------------+
| Database | Create Database                                                 |
+----------+-----------------------------------------------------------------+
| mydb     | CREATE DATABASE `mydb` /*!40100 DEFAULT CHARACTER SET latin1 */ |
+----------+-----------------------------------------------------------------+
1 row in set (0.00 sec)

上面的输出结果显示了创建mydb数据库的SQL语句，以及数据库的默认字符集。

选择数据库

MySQL服务器中的数据都是存储在数据表中，而数据表又需要存储到对应的数据库下，所以在对数据和数据表进行操作前，要先选择数据库。其基本语法格式如下。

USE 数据库名称;

1
2
mysql> use mydb;
Database changed

数据库的选择除了使用USE关键字以外，在登录MySQL服务器时也可以直接选择要操作的数据库。

1
mysql -u 用户名 -p 密码 数据库名

删除数据库

删除数据库的基本语法格式如下。这命令一定谨慎在谨慎，毕竟“删库跑路”是犯法的。

DROP DATABASE 数据库名称;

1
2
mysql> DROP DATABASE mydb;
Query OK, 0 rows affected (0.04 sec)

同样，在删除数据库时可以使用IF EXISTS来防止因为删除的数据库不存在而报错。

1
2
mysql> DROP DATABASE IF EXISTS mydb;
Query OK, 0 rows affected, 1 warning (0.00 sec)

数据表操作

创建数据表

创建数据表指的是在已存在的数据库中建立新表。基本语法格式如下。

CREATE [TEMPORARY] TABLE [IF NOT EXISTS] 表名

(字段名 字段类型 [字段属性]…) [表选项]

  • 上述语法中，可选项TEMPORARY表示临时表，仅在当前会话中可见，并且在会话关闭时自动删除。

  • “字段名”指的是数据表的列名；

  • “字段类型”设置字段中保存的数据类型，如时间日期类型等；

  • 可选项“字段属性”指的是字段的某些特殊约束条件。

  • 可选的“表选项”用于设置表的相关特性，如存储引擎（ENGINE）、字符集（CHHARSET）和校对集（COLLATE）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 1. 创建mydb数据库
mysql> CREATE DATABASE mydb;
Query OK, 1 row affected (0.00 sec)
# 2. 选择mydb数据库
mysql> USE mydb;
Database changed
# 3. 创建goods数据表
mysql> CREATE TABLE goods(
    -> id INT COMMENT '编号',
    -> name VARCHAR(32) COMMENT '商品名',
    -> price INT COMMENT '价格',
    -> description VARCHAR(255) COMMENT '商品描述'
    -> );
Query OK, 0 rows affected (0.24 sec)

上述SQL语句中，INT用于设置字段数据类型是整形；VARCHAR(L)表示可变长度的字符串，L表示字符数，如VARCHAR(32)表示可变的字符数是32；COMMENT用于在创建表时添加注释内容，并将其保存到表结构中。

查看数据表

查看数据表

选择数据库后，可以通过MySQL提供的SQL语句进行查看，基本语法格式如下。

SHOW TABLES [LIKE 匹配模式];

上述语法中，若不添加可选项“LIKE匹配模式”，表示查看当前数据库中的所有数据表。其中匹配模式符有两种，分别为“%”和“_”。前者表示匹配一个或多个字符，代表任意长度的字符串，长度也可以为0，后者仅可以匹配一个字符。

先在数据库中一张新表new_goods。

1
2
3
4
5
6
7
mysql> CREATE TABLE new_goods(
    -> id INT COMMENT '编号',
    -> name VARCHAR(32) COMMENT '商品名',
    -> price INT COMMENT '价格',
    -> description VARCHAR(255) COMMENT '商品描述'
    -> );
Query OK, 0 rows affected (0.33 sec)

分别查看mydb数据库中的所有数据表和名称中含有new的数据表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mysql> SHOW TABLES;
+----------------+
| Tables_in_mydb |
+----------------+
| goods          |
| new_goods      |
+----------------+
2 rows in set (0.00 sec)

mysql> SHOW TABLES LIKE '%new%';
+------------------------+
| Tables_in_mydb (%new%) |
+------------------------+
| new_goods              |
+------------------------+
1 row in set (0.00 sec)

查看数据表的相关信息

利用MySQL提供的SQL语句查看数据表的相关信息，如数据表的名称、存储引擎、创建时间等，基本语法格式如下。

SHOW TABLE STATUS [FROM 数据库名] [LIKE匹配模式];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mysql> SHOW TABLE STATUS FROM mydb LIKE '%new%'\G               
*************************** 1. row ***************************  
           Name: new_goods                                      
         Engine: InnoDB                                         
        Version: 10                                             
     Row_format: Dynamic                                        
           Rows: 0                                              
 Avg_row_length: 0                                              
    Data_length: 16384                                          
Max_data_length: 0                                              
   Index_length: 0                                              
      Data_free: 0                                              
 Auto_increment: NULL                                           
    Create_time: 2025-04-30 13:14:37                            
    Update_time: NULL                                           
     Check_time: NULL                                           
      Collation: latin1_swedish_ci                              
       Checksum: NULL                                           
 Create_options:                                                
        Comment:                                                
1 row in set (0.00 sec)

上述SQL语句中，”\G”是MySQL客户端可以使用的结束符中的一种，用于将显示结果纵向排列，适合字段非常多的情况。

修改数据表

在实际开发时，若创建的数据表不符合当前项目的开发要求时，可以通过修改数据表来实现。如修改数据表的名称和表选项。

修改数据表名称

在MySQL中，提供了两种修改数据表名称的方式，基本语法格式如下。

#语法格式1

ALTER TABLE 旧表名 RENAME [TO|AS] 新表名;

#语法格式2

RENAME TABLE 旧表名1 TO新表名1[,旧表名2 TO新表名2]…;

1
2
3
4
5
6
7
8
9
10
11
mysql> RENAME TABLE new_goods TO my_goods;
Query OK, 0 rows affected (0.09 sec)

mysql> SHOW TABLES;
+----------------+
| Tables_in_mydb |
+----------------+
| goods          |
| my_goods       |
+----------------+
3 rows in set (0.00 sec)

修改表选项

数据表中的表选项字符集、存储引擎以及校对集也可以通过ALTER TABLE修改，基本语法格式如下。

ALTER TABLE 表名 表选项 [=] 值;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mysql> ALTER TABLE my_goods CHARSET = utf8;
Query OK, 0 rows affected (0.06 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> SHOW CREATE TABLE my_goods \G
*************************** 1. row ***************************
       Table: my_goods
Create Table: CREATE TABLE `my_goods` (
  `id` int(11) DEFAULT NULL COMMENT '编号',
  `name` varchar(32) CHARACTER SET latin1 DEFAULT NULL COMMENT '商品名',
  `price` int(11) DEFAULT NULL COMMENT '价格',
  `description` varchar(255) CHARACTER SET latin1 DEFAULT NULL COMMENT '商品描述'
) ENGINE=InnoDB DEFAULT CHARSET=utf8
1 row in set (0.00 sec)

查看表结构

MySQL提供的DESCRIBE语句可以查看数据表中所有字段或指定字段的信息，包括字段名、字段类型等。其中，DESCRIBE语句可以简写成DESC。基本语法格式如下。

#语法格式1：查看所有字段的信息

{DESCRIBE | DESC } 数据表名；

#语法格式2：查看指定字段的信息

{DESCRIBE | DESC } 数据表名 字段名；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
mysql> DESC my_goods;
+-------------+--------------+------+-----+---------+-------+
| Field       | Type         | Null | Key | Default | Extra |
+-------------+--------------+------+-----+---------+-------+
| id          | int(11)      | YES  |     | NULL    |       |
| name        | varchar(32)  | YES  |     | NULL    |       |
| price       | int(11)      | YES  |     | NULL    |       |
| description | varchar(255) | YES  |     | NULL    |       |
+-------------+--------------+------+-----+---------+-------+
4 rows in set (0.00 sec)

mysql> DESC my_goods name;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| name  | varchar(32) | YES  |     | NULL    |       |
+-------+-------------+------+-----+---------+-------+
1 row in set (0.00 sec)

其中，Field表示字段名，Type表示字段的数据类型，Null表示该字段是否可以为空，Key表示该字段是否已设置了索引，Default表示该字段是否有默认值，Extra表示获取到的与该字段相关的附件信息。

查看数据表的创建语句

若想要查看创建数据表的具体SQL语句及表的字符编码，可以使用以下SQL语句，基本语法格式如下。

SHOW CREATE TABLE 表名;

1
2
3
4
5
6
7
8
9
10
mysql> SHOW CREATE TABLE my_goods \G
*************************** 1. row ***************************
       Table: my_goods
Create Table: CREATE TABLE `my_goods` (
  `id` int(11) DEFAULT NULL COMMENT '编号',
  `name` varchar(32) CHARACTER SET latin1 DEFAULT NULL COMMENT '商品名',
  `price` int(11) DEFAULT NULL COMMENT '价格',
  `description` varchar(255) CHARACTER SET latin1 DEFAULT NULL COMMENT '商品描述'
) ENGINE=InnoDB DEFAULT CHARSET=utf8
1 row in set (0.00 sec)

查看数据表结构

MySQL数据库中的SHOW COLUMNS语句也可以查看表结构，基本语法格式如下。

#语法格式1

SHOW [FULL] COLUMNS FROM 数据表名 [FROM数据库名]；

#语法格式2

SHOW [FULL] COLUMNS FROM 数据库名.数据表名；

上述语法格式中，可选项FULL表示显示详细内容，在不添加的情况下查询结果与DESC的结果相同；在添加FULL选项时此语句不仅可以查看到DESC语句查看的信息，还可以查看到字段的权限、COMMENT字段的注释信息等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
mysql> SHOW FULL COLUMNS FROM my_goods;
+-------------+--------------+-------------------+------+-----+
| Field       | Type         | Collation         | Null | Key | 
+-------------+--------------+-------------------+------+-----+
| id          | int(11)      | NULL              | YES  |     |
| name        | varchar(32)  | latin1_swedish_ci | YES  |     | 
| price       | int(11)      | NULL              | YES  |     | 
| description | varchar(255) | latin1_swedish_ci | YES  |     | 
+-------------+--------------+-------------------+------+-----+
+---------+-------+---------------------------------+----------+
| Default | Extra | Privileges                      | Comment  |
+---------+-------+---------------------------------+----------+
| NULL    |       | select,insert,update,references | 编号      |
| NULL    |       | select,insert,update,references | 商品名    |
| NULL    |       | select,insert,update,references | 价格      |
| NULL    |       | select,insert,update,references | 商品描述  |
+---------+-------+---------------------------------+----------+
4 rows in set (0.00 sec)

修改表结构

修改字段名

在MySQL中仅修改数据表中的字段名称，使用CHANGE实现，基本语法格式如下。

ALTER TABLE 数据表名 CHANGE [COLUMN] 旧字段名 新字段名 字段类型 [字段属性];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mysql> ALTER TABLE my_goods CHANGE description des VARCHAR(255);
Query OK, 0 rows affected (0.49 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> DESC my_goods;
+-------+--------------+------+-----+---------+-------+
| Field | Type         | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+-------+
| id    | int(11)      | YES  |     | NULL    |       |
| name  | varchar(32)  | YES  |     | NULL    |       |
| price | int(11)      | YES  |     | NULL    |       |
| des   | varchar(255) | YES  |     | NULL    |       |
+-------+--------------+------+-----+---------+-------+
4 rows in set (0.00 sec)

修改字段类型

在MySQL中仅修改数据表中的字段类型，通常使用MODIFY实现，基本语法格式如下。

ALTER TABLE 数据表名 MODIFY [COLUMN] 字段名 新类型 [字段属性];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mysql> ALTER TABLE my_goods MODIFY des CHAR(255);
Query OK, 0 rows affected (0.55 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> DESC my_goods;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| id    | int(11)     | YES  |     | NULL    |       |
| name  | varchar(32) | YES  |     | NULL    |       |
| price | int(11)     | YES  |     | NULL    |       |
| des   | char(255)   | YES  |     | NULL    |       |
+-------+-------------+------+-----+---------+-------+
4 rows in set (0.00 sec)

修改字段的位置

数据表在创建时，字段编写的先后顺序就是其在数据库中存储的顺序，若需要调整某个字段的位置，也可以使用MODIFY实现，基本语法格式如下。

ALTER TABLE 数据表名

MODIFY [COLUMN] 字段名1 数据类型 [字段属性] [FIRST | AFTER 字段名2];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mysql> ALTER TABLE my_goods MODIFY des VARCHAR(255) AFTER name;
Query OK, 0 rows affected (0.52 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> DESC my_goods;
+-------+--------------+------+-----+---------+-------+
| Field | Type         | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+-------+
| id    | int(11)      | YES  |     | NULL    |       |
| name  | varchar(32)  | YES  |     | NULL    |       |
| des   | varchar(255) | YES  |     | NULL    |       |
| price | int(11)      | YES  |     | NULL    |       |
+-------+--------------+------+-----+---------+-------+
4 rows in set (0.01 sec)

新增字段

对于已经创建好的数据表，也可以根据业务需求利用ADD新增字段，基本语法格式如下。

#语法格式1：新增一个字段，并可指定其位置

ADD [COLUMN] 新字段名 字段类型 [FIRST | AFTER 字段名]

#语法格式2：同时新增多个字段

ALTER TABLE 数据表名

ADD [COLUMN] (新字段名1 字段类型1, 新字段名2 字段类型2,…)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mysql> ALTER TABLE my_goods ADD num INT AFTER name;
Query OK, 0 rows affected (0.37 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> DESC my_goods;
+-------+--------------+------+-----+---------+-------+
| Field | Type         | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+-------+
| id    | int(11)      | YES  |     | NULL    |       |
| name  | varchar(32)  | YES  |     | NULL    |       |
| num   | int(11)      | YES  |     | NULL    |       |
| des   | varchar(255) | YES  |     | NULL    |       |
| price | int(11)      | YES  |     | NULL    |       |
+-------+--------------+------+-----+---------+-------+
5 rows in set (0.00 sec)

删除字段

MySQL中可以通过DROP完成将某个字段从数据表中删除。基本语法格式如下。

ALTER TABLE 数据表名 DROP [COLUMN] 字段名;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mysql> ALTER TABLE my_goods DROP num;
Query OK, 0 rows affected (0.42 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> DESC my_goods;
+-------+--------------+------+-----+---------+-------+
| Field | Type         | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+-------+
| id    | int(11)      | YES  |     | NULL    |       |
| name  | varchar(32)  | YES  |     | NULL    |       |
| des   | varchar(255) | YES  |     | NULL    |       |
| price | int(11)      | YES  |     | NULL    |       |
+-------+--------------+------+-----+---------+-------+
4 rows in set (0.00 sec)

mysql>

删除数据表

删除数据表的同时，存储在数据表中的数据都将被删除，基本语法格式如下。

DROP [TEMPORARY] TABLE [IF NOT EXISTS] 数据表1[,数据表2]…;

数据操作

在写API的时候，前面关于创建库、表的操作，基本上是不太能用得到的。一般都用Navicat Premium去操作，毕竟可视化的操作要比去一行行敲SQL简单容易。

但是从这里开始，基本就是我们要必须掌握的内容了，因为会实打实的在写代码的过程中用到。

添加数据

MySQL中使用INSERT语句向数据表中添加数据。根据操作的不同目的一般可分为两种：

为所有字段添加数据

为所有字段插入记录时，可以省略字段名称，严格按照数据表结构（字段的位置）插入对应的值，基本语法格式如下。

INSERT [INTO] 数据表名 {VALUES | VALUE}(值1[,值2]…);

1
2
3
mysql> INSERT INTO goods
    -> VALUES (1,'notebook',4998,'High cost performance');
Query OK, 1 row affected (0.04 sec)

通过上述语句，我们在goods表中添加了一条商品记录，并且在插入时我们严格按照数据与字段顺序对应的规则来操作。

我们尝试再加一条数据，会发现这次的添加出现了错误。造成这种错误的原因：通常是创建的数据表未指定字符集，系统会默认为latinl。当插入含有中文的数据时，则会报错。

1
2
3
mysql> INSERT INTO goods
    -> VALUES (2,'笔记本',9998,'续航时间超过10个小时');
ERROR 1366 (HY000): Incorrect string value: '\xB1\xCA\xBC\xC7\xB1\xBE' for column 'name' at row 1

解决方式也有两种，一种是创建表时添加表选项，设置数据表的字符集。

CREATE [TEMPORARY] TABLE [IF NOT EXISTS] 表名

(字段名 字段类型 [字段属性]…)[DEFAULT]{CHARACTER SET|CHARSET}[=] utf8;

另外一种是对于已经添加数据的数据表，可以通过ALERT TABLE...CHANGE/MODIFY完成对表字段字符集的设置。

1
2
3
4
5
mysql> ALTER TABLE goods
    -> MODIFY name VARCHAR(32) CHARACTER SET utf8,
    -> MODIFY description VARCHAR(255) CHARACTER SET utf8;
Query OK, 1 row affected (0.57 sec)
Records: 1  Duplicates: 0  Warnings: 0

之后我们再次插入含有中文的数据，已经成功了。

1
2
3
mysql> INSERT INTO goods
    -> VALUES (2,'笔记本',9998,'续航时间超过10个小时');
Query OK, 1 row affected (0.06 sec)

为部分字段添加数据

为部分字段添加数据的基本格式如下。

INSERT [INTO] 数据表名 (字段名1[,字段名2]…) {VALUES|VALUE}(值1[,值2]…);

1
2
mysql> INSERT INTO goods (id,name) VALUE(3, 'Mobile phone');
Query OK, 1 row affected (0.05 sec)

除此之外，MySQL还提供了另外一种使用INSERT语句来为指定字段添加数据的方式。

INSERT [INTO] 数据表名 SET 字段名1=值1[, 字段名2=值2]…;

1
2
mysql> INSERT INTO goods SET id = 4, name = 'Camera';
Query OK, 1 row affected (0.05 sec)

一次添加多行数据

在实际开发中，向一张数据表中同时插入多条记录时，我们肯定不能重复的写上面的INSERT指令，这么玩自己迟早得疯。因此，我们可以使用MySQL提供的另外一种插入数据的方式。基本语法格式如下。

INSERT [INTO] 数据表名 [(字段列表)] {VALUES|VALUE}(值列表[,值列表]…);

当字段列表省略时，要严格按照数据表创建的的字段顺序插入，

1
2
3
4
5
mysql> INSERT INTO goods VALUES
    -> (5, 'keyBoard', 599, NULL),
    -> (6, 'radio', 299, NULL);
Query OK, 2 rows affected (0.04 sec)
Records: 2  Duplicates: 0  Warnings: 0

需要注意的是，在一次添加多行数据时，若一条数据插入失败，则整个插入语句都会失败。

查询数据

查询表中全部数据

查询数据表中所有字段的数据，可以使用星号“*”通配符代替数据表中的所有字段名，基本语法格式如下。

SELECT * FROM 数据表名;

1
2
3
4
5
6
7
8
9
10
11
12
mysql> SELECT * FROM goods;
+------+--------------+-------+-----------------------+
| id   | name         | price | description           |
+------+--------------+-------+-----------------------+
|    1 | notebook     |  4998 | High cost performance |
|    2 | 笔记本       |  9998 | 续航时间超过10个小时  |
|    3 | Mobile phone |  NULL | NULL                  |
|    4 | Camera       |  NULL | NULL                  |
|    5 | keyBoard     |   599 | NULL                  |
|    6 | radio        |   299 | NULL                  |
+------+--------------+-------+-----------------------+
6 rows in set (0.00 sec)

查询表中的部分字段

查询数据时，可在SELECT语句的字段列表中指定要查询的字段。基本语法格式如下。

SELECT {字段名1,字段名2,字段名3,…} FROM 数据表名;

1
2
3
4
5
6
7
8
9
10
11
12
mysql> SELECT id,name FROM goods;
+------+--------------+
| id   | name         |
+------+--------------+
|    1 | notebook     |
|    2 | 笔记本       |
|    3 | Mobile phone |
|    4 | Camera       |
|    5 | keyBoard     |
|    6 | radio        |
+------+--------------+
6 rows in set (0.00 sec)

简单条件查询数据

在查询数据时，若想要查询出符合条件的相关数据记录时，可以使用WHERE实现。基本语法格式如下。

SELECT * |{字段名1,字段名2,字段名3,…} FROM 数据表名 WHERE 字段名 = 值；

1
2
3
4
5
6
7
mysql> SELECT * FROM goods WHERE id = 1;
+------+----------+-------+-----------------------+
| id   | name     | price | description           |
+------+----------+-------+-----------------------+
|    1 | notebook |  4998 | High cost performance |
+------+----------+-------+-----------------------+
1 row in set (0.00 sec)

修改数据

MySQL提供了UPDATE语句修改数据。基本语法格式如下。

UPDATE 数据表名 SET 字段名1 = 值1 [,字段名2 = 值2,…] [WHERE 条件表达式]

上述语法中，若实际使用时没有添加WHERE条件，那么表中所有对应的字段都会被修改成统一的值，因此在修改数据时，请谨慎操作。

1
2
3
4
5
6
7
8
9
10
11
12
mysql> UPDATE goods
    -> SET price = 5899
    -> WHERE id = 2;
Query OK, 1 row affected (0.03 sec)
Rows matched: 1  Changed: 1  Warnings: 0
mysql> SELECT * FROM goods WHERE id = 2;
+------+--------+-------+----------------------+
| id   | name   | price | description          |
+------+--------+-------+----------------------+
|    2 | 笔记本 |  5899 | 续航时间超过10个小时 |
+------+--------+-------+----------------------+
1 row in set (0.00 sec)

删除数据

删除数据是指对表中存在的记录进行删除。MySQL中使用DELETE语句删除表中的记录，基本语法格式如下。

DELETE FROM 数据表名 [WHERE 条件表达式];

1
2
3
4
5
6
7
8
9
10
11
12
13
mysql> DELETE FROM goods WHERE id = 3;
Query OK, 1 row affected (0.06 sec)
mysql> SELECT * FROM goods;
+------+----------+-------+-----------------------+
| id   | name     | price | description           |
+------+----------+-------+-----------------------+
|    1 | notebook |  4998 | High cost performance |
|    2 | 笔记本   |  5899 | 续航时间超过10个小时  |
|    4 | Camera   |  NULL | NULL                  |
|    5 | keyBoard |   599 | NULL                  |
|    6 | radio    |   299 | NULL                  |
+------+----------+-------+-----------------------+
5 rows in set (0.00 sec)

上述语法中，若实际使用时没有添加WHERE条件，系统会自动删除该表中的所有记录，因此在操作时，请谨慎操作。

课后作业

  1. mydb数据库中创建一张电子杂志订阅表(subscribe)。

  2. 电子杂志订阅表中要包含4个字段，分别为编号(id)、订阅邮件的邮箱地址(email)、用户是否确认订阅(status,使用数字表示，1表示已确认，0表示未确认)、邮箱确认的验证码(code)。

  3. 为电子杂志订阅表添加5条测试数据，如下表。

    编号邮箱地址是否确认的状态邮箱确认验证码
    1tom123@163.com1TRBXPO
    2lucy123@163.com1LOICPE
    3lily123@163.com0JIXDAM
    4jimmy123@163.com0QKOLPH
    5joy123@163.com1JSMWNL

  4. 查看已经通过邮箱确认的电子杂志订阅信息。

  5. 将编号等于4的订阅确认状态设置为“已确认”。

  6. 删除编号等于5的电子杂志订阅信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
mysql> CREATE TABLE subscribe (
    -> id INT COMMENT '编号',
    -> email VARCHAR(60) COMMENT '邮件订阅的邮箱地址',
    -> status INT COMMENT '是否确认,0未确认,1已确认',
    -> code VARCHAR(10) COMMENT '邮箱确认的验证码'
    -> ) DEFAULT CHARSET = utf8;
Query OK, 0 rows affected (0.22 sec)

mysql> INSERT INTO subscribe VALUES
    -> (1, 'tom123@163.com', 1, 'TRBXPO'),
    -> (2, 'lucy123@163.com', 1, 'LOICPE'),
    -> (3, 'lily123@163.com', 0, 'JIXDAM'),
    -> (4, 'jimmy123@163.com', 0, 'QKOLPH'),
    -> (5, 'joy123@163.com', 1, 'JSMWNL');
Query OK, 5 rows affected (0.15 sec)
Records: 5  Duplicates: 0  Warnings: 0

mysql> SELECT * FROM subscribe WHERE status = 1;
+------+-----------------+--------+--------+
| id   | email           | status | code   |
+------+-----------------+--------+--------+
|    1 | tom123@163.com  |      1 | TRBXPO |
|    2 | lucy123@163.com |      1 | LOICPE |
|    5 | joy123@163.com  |      1 | JSMWNL |
+------+-----------------+--------+--------+
3 rows in set (0.00 sec)

mysql> UPDATE subscribe SET status = 1 WHERE id = 4;
Query OK, 1 row affected (0.05 sec)
Rows matched: 1  Changed: 1  Warnings: 0

mysql> SELECT * FROM subscribe WHERE id = 4;
+------+------------------+--------+--------+
| id   | email            | status | code   |
+------+------------------+--------+--------+
|    4 | jimmy123@163.com |      1 | QKOLPH |
+------+------------------+--------+--------+
1 row in set (0.00 sec)

mysql> DELETE FROM subscribe WHERE id = 5;
Query OK, 1 row affected (0.06 sec)

mysql> SELECT * FROM subscribe;
+------+--------------------+--------+--------+
| id   | email              | status | code   |
+------+--------------------+--------+--------+
|    1 |  tom123@163.com    |      1 | TRBXPO |
|    2 |  lucy123@163.com   |      1 | LOICPE |
|    3 |  lily123@163.com   |      0 | JIXDAM |
|    4 |  jimmy123@163.com  |      1 | QKOLPH |
+------+--------------------+--------+--------+
4 rows in set (0.01 sec)

小结

目前来说，数据库的相关操作都可以通过Navicat Premium等相关工具直接通过UI界面生成，所以重点在于熟练掌握数据的相关操作，但总体还是要根据书中的例子实际去敲一遍代码，强化对MySQL语句的语感。

]]> <p>这个系列的笔记主要是读《MySQL数据库原理、设计与应用》一书过程中，整理的读书笔记和书中的练习作业。主要目的是解决因为MySQL数据库使用不熟练，导致在利用Node.js编写后端API时，知道逻辑却不知道对应的SQL语句怎么写的问题。</p> <p>这篇笔记的内容对应书中 Node + Express + MySQL 开发RESULT API(四)权限+日志 https://www.xdxmblog.cn/posts/9650.html 2025-04-26T08:30:36.000Z 2025-04-26T08:30:36.000Z 上一篇笔记我们实现了接口的参数校验功能、全局中间件的开发和错误处理、以及环境变量的配置。这个小项目已经趋于完善，这篇笔记主要实现接口的权限校验以及日志的接入和上传。最终达到麻雀虽小，五脏俱全的效果。

权限认证

了解Token

Token表示令牌，也就是用户的登录凭证。我们做前端开发的时候，几乎可以说每个项目都会用到Token，并且需要把它存到sessionStorage里面，每次向后端请求接口的时候，都要把token放到请求头里，否则接口就会返回401。

token具有以下几个优点，这也使得它成为了目前主流的权限认证方式。

  • 支持跨域访问：默认情况下cookie是无法跨域的。而token一般是放到请求头中，所以跨域后不存在信息丢失。
  • 无状态：token机制在服务端不需要存储session信息，可以减轻服务端压力。
  • 适用于移动端：APP端使用token认证会简单便捷。
  • 无需考虑CSRF：由于不依赖cookie，所以使用token认证不会发CSRF，所以无需考虑CSRF防御。

了解JWT

JWT是token的一种具体实现方式，其全称是JSON Web Token。JWT由以下几方面组成：

  • header(标头)：包含有关JWT编码方式的信息，例如用于签署令牌的算法。
  • payload（有效负载）：包含声明（关于用户和附加元数据的声明）分为：注册声明、公共声明、私人声明。
  • signature（签名）：用于验证JWT的发送者是否是其声称的身份，并确保消息在此发送过程中没有被更改。

安装JWT

我们需要在项目中安装依赖：jsonwebtoken，它可以帮助我们在项目中生成token。

1
npm i jsonwebtoken express-jwt

使用JWT生成Token

使用JWT生成token之前，我们需要在.env文件里添加一个配置，并将其加入config配置文件。

1
2
# .env
JWT_SECRETKEY = '!@#$%^&*()'  # jwt密钥，随便定义一个，主要用于解密token
1
2
3
4
5
6
7
const dotenv = require('dotenv')
dotenv.config()

module.exports = {
  ...,
  jwtSecretkey: process.env.JWT_SECRETKEY,
}

打开utils.js文件，编写以下代码，用于生成token。

1
2
3
4
5
6
7
8
9
...
const jwt = require('jsonwebtoken')

// 生成token
exports.generateToken = (user, isRefresh = false) => {
  // jwt.sign接受3个参数，要加密的数据，jwt密钥，options
  const token = jwt.sign({ user }, config.jwtSecretkey, { expiresIn: isRefresh ? '7d' : '1h' }) // 有效期配置
  return `Bearer ${token}`
}

在这个方法中，我们预留一个isRefresh字段，用于后面生成refreshToken。

编写登录接口

通常我们会在登录的时候生成token并将其一起返回给前端，让前端存储token，并在调用接口时将token放在请求头中发给后端。

新增登录路由

接下来我们编写一个登录接口，打开user.routes.js，新增登录路由。

1
2
3
4
5
...
// 邮箱登录
router.post('/login', validator.body(userSchema.login), asyncHandler(userController.login))

...

登录接口我们选择使用邮箱+验证码的方式登录，也刚好可以利用上上一篇笔记中的发生验证码接口。

编写登录校验

打开user.schema.js文件，增加登录接口需要校验的参数。由于之前在写注册接口时已经定义过email、code参数的校验规则，这里我们直接暴露即可。

1
exports.login = Joi.object({ email, code })

编写登录逻辑

打开user.controller.js文件，编写以下代码。

1
2
3
4
5
6
exports.login = async (req, res) => {
  if (!req.body) throw createError(400, '缺少必要参数')
  const { email, code } = req.body
  const result = await User.login(email, code)
  res.success(result, '登录成功')
}

打开user.model.js文件，开始编写登录接口的核心逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 邮箱登录
exports.login = async (email, code) => {
  // 查询邮箱是否已被注册
  const users = await this.findUser('email', email)
  if (users.length == 0) {
    throw createError(400, '该用户不存在')
  }
  // 校验验证码
  const isLogin = true
  const isTrue = await this.verifyCode(email, code, isLogin)
  if (!isTrue) {
    throw createError(400, '验证码错误或已过期')
  }
  const accessToken = utils.generateToken({ email: users[0].email, id: users[0].id })
  return { ...users[0], accessToken }
}

优化通用方法

登录过程与注册过程差不多，这里我们优化一下verifyCode方法，使其入参更加语义化。

1
2
3
4
5
6
// 校验验证码
exports.verifyCode = async (email, code, isLogin = false) => {
  let sql = `select * from ${isLogin ? 'user' : 'temp_user_code'} where email = '${email}' and expires_at > NOW()`
  const [rows] = await pool.query(sql, [email])
...
}

同时我们还利用到了之前写的查询用户的方法，但是我们返回用户的信息并不需要全部字段，所以我们需要改造一下，过滤掉我们不希望展示给前端的数据。

1
2
3
4
5
6
7
// 查询用户
exports.findUser = async (findType, data) => {
  // 仅返回id,openid,email,typeId，并根据typeId查询typeName一并返回
  let sql = `select u.id, u.openid, u.email, u.type_id as typeId, t.name as typeName from user u join user_type t on u.type_id = t.id where ${findType} = ?`
  const [rows] = await pool.query(sql, [data])
  return rows
}

调用登录接口，输入邮箱和验证码，观察返回结果。我们可以看到token已经成功返回了。

1
2
3
4
5
6
7
8
9
10
11
12
{
    "code": 200,
    "message": "登录成功",
    "data": {
        "id": 16,
        "openid": null,
        "email": "416681736@qq.com",
        "typeId": 1,
        "typeName": "妈妈",
        "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImVtYWlsIjoiNDE2NjgxNzM2QHFxLmNvbSIsImlkIjoxNn0sImlhdCI6MTc0NTA0MzgyOSwiZXhwIjoxNzQ1MDUxMDI5fQ.2IpeNR6BFa0GprP-ahhlffPUg6ft_RnqhtuTDlSXA5o"
    }
}

校验Token

校验token通常有两种方式，一种是使用现成的express中间件，另一种是自己开发一个中间件。下面将两种方法都介绍一下,任选其中一个使用即可。

一. 开发authTokenMiddleware中间件

在middlewares文件夹下新建authTokenMiddleware.js文件，编写校验token的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const jwt = require('jsonwebtoken')
const config = require('../config')
const createError = require('http-errors')

module.exports = (req, res, next) => {
  // 定义无需验证token的路由
  const unlessPath = ['/api/user/login', '/api/user/register', '/api/user/sendEmaliCode']
  // 遇到无需token的接口，直接放行
  if (unlessPath.includes(req.path)) {
    return next()
  }

  // 获取请求头中的accessToken
  let accessToken
  if (req.headers && req.headers.authorization) {
    // 给前端返回token时我们拼了Bearer ，这里需要处理
    const parts = req.headers.authorization.split(' ')
    if (parts.length == 2 && /^Bearer$/i.test(parts[0])) {
      accessToken = parts[1]
      // 验证accessToken
      try {
        jwt.verify(accessToken, config.jwtSecretkey)
        return next() // 校验token成功，放行
      } catch (error) {
        throw createError(401, '无效或过期的token') // 校验失败，抛出异常
      }
    }
    throw createError(401, '无效或过期的token') // token 格式校验失败
  }
  throw createError(401, '无效或过期的token') // 没有携带token，抛出异常
}

在app.js文件中，将刚才写好的中间件进行注册，注意中间件的执行顺序，要放在路由之前。

1
2
3
4
5
6
7
8
...
const authTokenMiddleware = require('./middlewares/authTokenMiddleware')
...

app.use(authTokenMiddleware)
require('./routes')(app)

...

二. 使用express-jwt中间件

express-jwt是一个自动校验jwt的中间件，使用之前需要先安装依赖。

1
npm i express-jwt

打开utils.js文件，编写以下代码。

1
2
3
4
5
6
7
8
9
10
11
...
const { expressjwt } = require('express-jwt')
...

// 校验token
exports.jwtAuth = expressjwt({
  secret: config.jwtSecretkey,
  algorithms: ['HS256'],
}).unless({
  path: ['/api/user/login', '/api/user/register', '/api/user/sendEmaliCode'],
})

打开errorMiddleware.js，在全局错误中间件里添加错误处理。

1
2
3
4
5
6
7
8
9
module.exports = (err, req, res, next) => {
 ...
 // 处理token验证错误
 if (err.name === 'UnauthorizedError') {
   err = createError(401, '无效或过期的token')
 }
 
 ...
}

在app.js中注册中间件。

1
2
3
4
5
6
7
8
...
const utils = require('./utils')
...

app.use(utils.jwtAuth)
require('./routes')(app)

...

不管用上述哪种方式，现在我们调用之前写的/api/user/type接口，就会发现已经因为没有token被拦住了。

1
2
3
4
5
{
    "code": 401,
    "message": "无效或过期的token",
    "data": null
}

我们在请求头中添加Authorization字段，将登录成功后返回的token值附加到上述接口的请求头中，再次调用接口，会发现已经能正常返回数据了。

使用双Token无感刷新

目前的使用场景中，accessToken的有效期通常比较短，大概也就十几分钟到1小时不等。这么做的原因主要是降低token被盗用的风险。但单token的场景也有一个弊端，就是因为失效快而需要频繁登录。

而一个产品能否长久的存活最重要的一个原因就是用户体验，所以自然而然的就进化到了双Token方案。这种方案的操作步骤如下：

  1. 生成accessToken和refreshToken，其中accessToken不变，依旧是较短时效。而refreshToken通常具有较长的有效期（几天到几个月）。
  2. accessToken依旧用于访问受保护的资源，当accessToken过期时，访问refresh接口，利用refreshToken重新生成新的accessToken返回到客户端。
  3. 客户端拿着新的accessToken重新访问受保护的资源，实现token的无感刷新，提升用户的体验。

下面我们就来改造代码，将项目改造成双Token实现无感刷新。

打开utils.js，修改生成token的方法，通过添加字段来区别accessToken和reFreshToken，这么做的原因是为了防止拿accessToken来换取新的accessToken。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
... 
// 生成token
exports.generateToken = (user, isRefresh = false) => {
  const expiresIn = isRefresh ? '7d' : '2h'
  const tokenType = isRefresh ? 'refresh' : 'access'
  const token = jwt.sign({ user, tokenType }, config.jwtSecretkey, { expiresIn }) // 有效期配置
  return `Bearer ${token}`
}


// 校验refreshToken
exports.authRefreshToken = refreshToken => {
  let token
  const parts = refreshToken.split(' ')
  if (parts.length == 2 && /^Bearer$/i.test(parts[0])) {
    token = parts[1]

    try {
      const result = jwt.verify(token, config.jwtSecretkey)
      return result
    } catch (error) {
      return null
    }
  }
  return null
}

打开user.routes.js，添加刷新token的路由，注意要把这个路由添加到unlessPath的白名单里。

1
2
3
4
...
// 刷新Token
router.get('/refresh', asyncHandler(userController.refresh))
...

打开user.controller.js，添加对应的controller方法。

1
2
3
4
5
6
7
8
9
10
11
...
// 刷新token
exports.refresh = async (req, res) => {
  const refreshToken = req.headers.refreshtoken
  if (!refreshToken) {
    throw createError(403, 'Forbidden')
  }
  const result = await User.refresh()
  res.success(result)
}
...

打开user.modele.js，编写刷新token的方法，并对之前的login方法进行改造，返回双token。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 刷新token
exports.refresh = async refreshToken => {
  const jwtResult = utils.authRefreshToken(refreshToken)
  if (!jwtResult) {
    throw createError(403, 'Forbidden')
  } else {
    // 防止拿accessToken换取accessToken
    if (jwtResult.tokenType != 'refresh') {
      throw createError(403, 'Forbidden')
    }
    // 生成新的accessToken
    const accessToken = utils.generateToken(jwtResult.user)
    return accessToken
  }
}

// 邮箱登录
exports.login = async (email, code) => {
  // 查询邮箱是否已被注册
  const users = await this.findUser('email', email)
  if (users.length == 0) {
    throw createError(400, '该用户不存在')
  }
  // 校验验证码
  const isLogin = true
  const isTrue = await this.verifyCode(email, code, isLogin)
  if (!isTrue) {
    throw createError(400, '验证码错误或已过期')
  }
  const isRefresh = true
  const accessToken = utils.generateToken({ email: users[0].email, id: users[0].id })
  const refreshToken = utils.generateToken({ email: users[0].email, id: users[0].id }, isRefresh)

  return { ...users[0], accessToken, refreshToken }
}

至此，Token权限校验的部分就开发完了，下面开始开发日志部分。

日志

不管是前端开发还是后端开发，日志管理都是追踪错误和监控系统性能的关键。通过日志管理，我们能够更好的维护和问题排查。这里我们选用社区中使用广泛的winston来实现项目的日志管理。

安装winston、winston-daily-rotate-file

其中winston-daily-rotate-file

1
npm i winston winston-daily-rotate-file

使用winston生成日志

通过winston.createLogger()方法，我们可以创建自己的logger日志器。

该方法接受以下参数呢：

名称默认描述
level'info'仅当info.level小于或等于此级别时才记录
levelswinston.config.npm.levels表示日志优先级的级别（和颜色）
formatwinston.format.jsoninfo消息的格式
transports[]（无传输）info消息的日志记录目标集
exitOnErrortrue如果为false，则处理的异常不会导致process.exit
silentfasle如果为true，则所有日志都将被抑制

在scr目录下新建logger文件夹，并创建index.js文件，编写以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const winston = require('winston')
const DailyRotateFile = require('winston-daily-rotate-file')

const { combine, timestamp, printf, colorize, label } = winston.format
const env = process.env.NODE_ENV || 'development'

// 自定义日志格式
const logFormat = printf(info => {
  return `${info.timestamp} [${info.level}]: ${info.message}`
})

// 创建Logger实例
const logger = winston.createLogger({
  // 设置日志级别（error, warn, info, verbose, debug, silly）
  level: env === 'production' ? 'info' : 'debug',
  format: combine(
    timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }), // 添加时间戳
    logFormat, // 应用自定义格式
  ),
  transports: [
    // 控制台输出（带颜色）
    new winston.transports.Console({
      format: combine(colorize({ all: true }), logFormat),
    }),
    // 按日分割文件
    new DailyRotateFile({
      dirname: 'logs', // 日志目录
      filename: '%DATE%.log', // 文件名（%DATE% 自动替换为日期）
      datePattern: 'YYYY-MM-DD', // 日期格式
      zippedArchive: true, // 压缩旧日志
      maxSize: '20m', // 单个文件最大大小
      maxFiles: '7d', // 保留最近7天的日志
    }),
  ],
  // 异常处理（可选）
  exceptionHandlers: [new winston.transports.File({ filename: 'logs/exceptions.log' })],
  // Promise拒绝处理（可选）
  rejectionHandlers: [new winston.transports.File({ filename: 'logs/rejections.log' })],
})

module.exports = logger

开发loggerMiddleware中间件

在middlewares目录下创建loggerMiddleware.js文件，编写以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
const logger = require('../logger')

module.exports = (req, res, next) => {
  const start = Date.now()

  res.on('finish', () => {
    const duration = Date.now() - start
    logger.info(`${req.method} ${req.originalUrl} - ${res.statusCode} (${duration}ms)`)
  })

  next()
}

我们在每个请求完成的时候，记录了一条日志，包含了该条请求的主要信息。例如GET /api/user/type - 401 (14ms)，配合下面的错误日志，可以快速定位到是哪个接口报错，从而方便我们排查问题。

记录错误日志

在errorMiddleware.js文件中，编写以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
...
const logger = require('../logger')

module.exports = (err, req, res, next) => {
...
  if (!createError.isHttpError(err)) {
    err = createError(500, '服务器内部错误，请稍后重试')
  }
  // 记录错误到日志
  logger.error(`Error：' ${err.message}`)
  ...
}

在路由或服务中使用logger

以发送验证码为例，我们可以在任何路由或者服务中直接调用logger来记录日志。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const logger = require('../logger')

// 发送邮箱验证码
exports.sendEmailCode = async email => {
  logger.debug('Fetching data from database...');
  // 生成验证码，过期时间
  const { code, expiresAt } = utils.generateCode()
  // 查询当前邮箱是否被注册
  const users = await this.findUser('email', email)

  if (users && users.length > 0) {
    // 保存登录验证码
    let updateSQL = `UPDATE user SET code=?, expires_at=? WHERE email='${email}'`
    await pool.query(updateSQL, [code, expiresAt, email])
  } else {
    // 每次发送之前先清空之前保存的临时验证码
    await this.deleteCode(email)
    // 保存注册验证码
    let saveSQL = `INSERT into temp_user_code(email, code, expires_at) VALUES(?,?,?)`
    await pool.query(saveSQL, [email, code, expiresAt])
  }
  
  // 发送邮件
  const mailOptin = utils.generateMailOptions(email, code, expiresAt)
  const transporter = utils.transporter()
  await transporter.sendMail(mailOptin)
  logger.info('Database info: %s', '验证码发送成功');
  return null
}

加载日志中间件

打开app.js，编写以下代码：

1
2
3
4
5
6
7
8
...
const loggerMiddleware = require('./middlewares/loggerMiddleware')

...
// 加载日志中间件
app.use(loggerMiddleware)
app.use(responseMiddleware)
...

测试日志是否生成

随便调用一个接口，将请求头的token去掉，返回401后观察项目根目录是否生成logs文件夹和日志文件。还可以通过终端查看是否打印出日志：

1
2
3
2025-04-25 11:01:49 [info]: GET /api/user/type - 401 (2ms)
2025-04-25 11:01:49 [error]: Error：' Forbidden
2025-04-25 11:01:49 [info]: GET /api/user/refresh - 403 (1ms)

日志分割配置

参数类型说明
dirnamestring日志文件存储在项目根目录的哪个文件夹
filenamestring每日生成的文件名格式
datePatternstring按什么格式分割，按日，按小时（YYYY-MM-DD, YYYY-MM-DD-HH）
zippedArchiveboolean旧日志是否自动压缩为 .gz 文件以节省空间
maxSizestring单个日志文件超过XX体积时触发分割（即使未到日期）
maxFilesstring自动删除XX天前的日志文件
1
2
3
4
5
6
7
8
9
10
const DailyRotateFile = require('winston-daily-rotate-file')

new DailyRotateFile({
  dirname: 'logs', 
  filename: 'app-%DATE%.log',
  datePattern: 'YYYY-MM-DD', 
  zippedArchive: true, 
  maxSize: '20m', 
  maxFiles: '7d',
})

日志文件结构

1
2
3
4
5
-logs
  -2025-04-25.log     # 当日日志
  -2025-04-25.log.gz  # 压缩的旧日志
  -exceptions.log         # 异常日志
  -rejections.log         # Promise拒绝日志

高级配置（可选）

一. 多级别日志分割

为不同级别（如 error 和 info）创建独立文件：

1
2
3
4
5
6
7
8
9
10
11
12
transports: [
  new winston.transports.DailyRotateFile({
    level: 'error', // 仅记录 error 级别
    filename: 'error-%DATE%.log',
    // 其他配置同上
  }),
  new winston.transports.DailyRotateFile({
    level: 'info', // 仅记录 info 级别
    filename: 'info-%DATE%.log',
    // 其他配置同上
  })
]

二. 自定义日志格式

添加更多上下文信息（如请求 IP）：

1
2
3
4
5
6
const logFormat = printf(({ level, message, timestamp, meta }) => {
  return `${timestamp} [${level}] ${meta?.ip || '-'} - ${message}`;
});

// 在中间件中传递元数据
logger.info('Request received', { ip: req.ip });

更多配置可以参考winston开发文档。

小结

到这里，这个小项目的所有配置基本上就已经差不多都搭建完了，从第一篇笔记的安装Express开始，我们一步一步的完成了：

  1. 路由的配置与开发，数据库的配置与连接，编写接口。
  2. 实现邮箱+验证码注册，配置全局config、utils.js。
  3. 实现路由参数校验、完成全局错误中间件、响应中间件、异步异常处理中间件的开发。
  4. 完成环境变量的配置，完成Token开发，实现路由鉴权，无感刷新token，完成日志记录。

整个开发过程对我来说是一次很不错的旅程，就目前来说，这些东西已经足够支撑一些小型项目的运行了。但细心的朋友也会发现，在与数据库的交互过程中，我几乎是全部使用了原生的SQL语句，没有用任何的ORM库。

这块的话其实也是我有意为之，主要还是强化一下自己的SQL语句和用法，因为很多语句都是一遍翻书一边写的。再一个就是目前的ORM库我也只是很久以前用过Sequelize，但当时的体验并不友好，所有这次也不给自己增加太大的难度。

后续我应该会把整个项目的框架整理一下，做个脚手架，方便大家能够快速搭建，省去一步一步操作的麻烦。

]]> <p>上一篇笔记我们实现了接口的参数校验功能、全局中间件的开发和错误处理、以及环境变量的配置。这个小项目已经趋于完善，这篇笔记主要实现接口的权限校验以及日志的接入和上传。最终达到麻雀虽小，五脏俱全的效果。</p> Node + Express + MySQL 开发RESULT API(三)配置优化 https://www.xdxmblog.cn/posts/57037.html 2025-04-16T17:03:45.000Z 2025-04-16T17:03:45.000Z 上一篇笔记我们实现了邮箱+验证码注册的功能，并且在小结的时候也发现了几个问题。如果这些问题放到项目最后在解决，会存在代码改动量过大，容易出错。所以这篇笔记主要针对这几个问题进行优化、解决，使得项目更加健康。

参数校验

以上一篇笔记中的代码为例，我们仅仅判断3个入参是否为空就已经写了一堆if...else if...else来判断，那如果加上参数类型，或者入参更多一些，恐怕这种方式就难以为继了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 通过邮箱注册用户
exports.register = async (req, res, next) => {
  const { email, code, type_id } = req.body
  if (!email || !code) {
    res.status(400).send({ code: -1, message: '邮箱或验证码不能为空', data: null })
  } else if (!type_id) {
    res.status(400).send({ code: -1, message: '请选择身份', data: null })
  } else if (type_id && (type_id < 1 || type_id > 7)) {
    res.status(400).send({ code: -1, message: '身份值有误', data: null })
  } else {
    try {
      const result = await User.register(email, code, type_id)
      res.send({ code: 200, message: '注册成功', data: result })
    } catch (error) {
      res.status(error.status || 500).send({
        code: -1,
        message: error.message || '服务器内部错误',
        data: error.data || null,
      })
    }
  }
}

那有没有什么方式可以不用写一堆判断来校验参数呢？答案是有的，那就是使用Joi和express-joi-validation。

Joi是一个强大的对象模式描述语言和验证器，而express-joi-validation是Joi的一个中间件，用于将Joi的验证功能集成到Express应用中。

安装Joi

1
npm i joi

使用Joi进行数据验证

以上述代码为例进行改造，我们通过创建一个Schema对象，来决定每个参数的类型，是否为必填项，是否为某个特定的格式等。然后通过validate方法去进行校验。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const Joi = require('joi');

// 通过邮箱注册用户
exports.register = async (req, res, next) => {
  const userSchema = Joi.object({
    email: Joi.string().email().required(), // 字符串类型，email格式，必填项
    code: Joi.string().required(), // 字符串类型，必填项
    type_id: Joi.number().integer().valid(1, 2, 3, 4, 5, 6, 7).required(), // 数字类型，整数，必须为1-7的其中一个，必填项
  })
  const { error, value } = userSchema.validate(req.body)

  if (error) { // 验证错误，抛出异常
    res.status(400).send({ code: 400, message: error.details[0].message, data: null })
  } else {  // 验证通过
    console.log(value) 
    try {
      const result = await User.register(email, code, type_id)
      res.send({ code: 200, message: '注册成功', data: result })
    } catch (error) {
      res.status(500).send({
        code: 500,
        message: error || '服务器内部错误',
        data: null,
      })
    }
  }
}

Joi核心验证规则速查表

下面列举一些Joi的验证规则，方便快速上手。更全的规则请查看《Joi API v17.13.3》

通用规则

规则类型示例代码说明
必填项.required()强制字段存在
类型验证.string() .number() .boolean()基础类型验证
范围限制.min(5) .max(100)数值/字符串长度限制
正则验证.pattern(/^1[3-9]\d{9}$/)正则表达式匹配
枚举值.valid('admin', 'user')限定允许的枚举值
默认值.default('guest')未传值时自动填充默认值

字符串专用

1
2
3
4
5
6
Joi.string()
.alphanum() // 仅允许字母数字
  .trim()             // 自动去除两端空格
  .lowercase()        // 转换为小写
  .uppercase()        // 转换为大写
  .replace(/ /g, '_') // 替换字符

数字专用

1
2
3
4
Joi.number()
  .integer()          // 必须为整数
  .positive()         // 正数
  .precision(2)       // 小数点后保留2位

复杂结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 数组验证
Joi.array().items(Joi.string().valid('A', 'B', 'C'))

// 对象嵌套
Joi.object({
  address: Joi.object({
    city: Joi.string(),
    street: Joi.string()
  })
})

// 条件验证
Joi.when('role', {
  is: 'admin',
  then: Joi.object({ accessLevel: Joi.number().min(3) })
})

看上去比我们之前写很多if...else校验要好了很多，那能不能继续优化呢？比如在路由层面？答案是当然可以，利用express-joi-validation中间件就可以实现。

安装express-joi-validation

1
npm i express-joi-validation

在src目录下创建schemas文件，用来存放接口所需要校验的字段和规则。并在该目录下创建user.schemas.js文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Joi = require('joi')

const email = Joi.string().email().required().messages({
  'any.required': '缺少email',
  'string.email': 'email格式不正确',
})

const code = Joi.string().required().messages({
  'any.required': '缺少code',
})

const type_id = Joi.number().integer().required().valid(1, 2, 3, 4, 5, 6, 7).messages({
  'any.required': '缺少type_id',
  'any.only': 'type_id校验失败',
})

exports.registerSchema = Joi.object({ email, code, type_id })

修改user.routes.js文件，利用中间件将校验放到路由上。

1
2
3
4
5
...
const validator = require('express-joi-validation').createValidator({ passError: true })
const userSchema = require('../schemas/user.schema')

router.post('/register', validator.body(userSchema.registerSchema), userController.register)

express-joi-validation可以针对以下几种情况来进行校验。

1
2
3
4
5
6
7
8
const validator = require('express-joi-validation').createValidator({ passError: true })

validator.query(options)
validator.body(options)
validator.headers(options)
validator.params(options)
validator.response(options)
validator.fields(options)

修改user.controller.js文件，精简后的代码如下。

1
2
3
4
5
6
7
8
9
10
11
// 通过邮箱注册用户
exports.register = async (req, res, next) => {
  if (!req.body) throw new Error('参数不能为空')
  try {
    const { email, code, type_id } = req.body
    const result = await User.register(email, code, type_id)
    res.send({ code: 200, message: '注册成功', data: result })
  } catch (error) {
    next(error)
  }
}

虽然代码精简了，但是我们调用接口发现，如果传入错误的参数，express默认会返回一个html文件来展示error。这显然不是我们想要的，所以我们需要一个全局的错误处理中间件。

开发中间件

全局错误中间件

在src目录下新建middlewares文件夹，用来存放我们所有的中间件。在该文件夹下创建errorMiddleware.js文件，这个就是我们的全局错误中间件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = (err, req, res, next) => {
  // 处理Joi验证错误
  if (err.error && err.error.name && err.error.name === 'ValidationError') {
    const details = err.error.details.map(d => ({
      message: d.message.replace(/"/g, ''),
    }))

    return res.status(err.status || 400).json({
      code: 400,
      message: details && details.length > 0 ? details[0].message : '参数校验失败！',
      data: null,
    })
  }
  // 其他错误
  const errorMsg = err instanceof Error ? err.message : err
  return res.status(err.status || 500).json({
    code: 500,
    message: errorMsg,
    data: null,
  })
}

目前我们针对Joi的错误进行了特殊处理，使其更加贴近于日常开发的格式。并且对其他错误进行了一个暂时的兜底。后续做其他功能时会继续完善该中间件。

打开app.js，将刚才写好的中间件进行注册。

1
2
3
4
5
...
const errorMiddleware = require('./middlewares/errorMiddleware')

require('./routes')(app) // 注册路由
app.use(errorMiddleware) // 错误中间件一定要放到路由后面注册才能正常捕捉

但有时候，我们可能会需要在model文件中处理一些异常，但这些异常又不一定全部都要返回500状态码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
exports.register = async (email, code, type_id) => {
  try {
    ...
    if (users.length > 0) {
      // 这里应该返回400状态
    throw '该邮箱已被注册'
    } else {
     ...
      if (!isTrue) {
        // 同理，这里也应该返回400状态
        throw '验证码错误或已过期'
      }
...
    }
  } catch (error) {
    throw error
  }
}

这时我们需要一个能快速创建不同错误状态的工具，也就是http-errors。

http-errors

http-errors是一个Node.js模块，通过简单的API，让您可以方便地创建和扩展与HTTP状态码关联的错误对象。它提供了丰富的构造函数来直接创建不同类型的HTTP错误，并且可以自定义错误信息以及附加属性。

安装http-errors

1
npm i http-errors

使用http-errors创建HTTP错误

修改user.model.js，修改上述例子的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const createError = require('http-errors')

exports.register = async (email, code, type_id) => {
  try {
    ...
    if (users.length > 0) {
      // 这里应该返回400状态
    throw createError(400, '该邮箱已被注册')
    } else {
     ...
      if (!isTrue) {
        // 同理，这里也应该返回400状态
        throw createError(400, '验证码错误或已过期')
      }
...
    }
  } catch (error) {
    throw error
  }
}

修改errorMiddleware.js，形成统一的错误返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const createError = require('http-errors')

module.exports = (err, req, res, next) => {
  // 处理Joi验证错误
  if (err.error && err.error.name && err.error.name === 'ValidationError') {
    const details = err.error.details.map(d => ({
      message: d.message.replace(/"/g, ''),
    }))
    const message = details && details.length > 0 ? details[0].message : '参数校验失败！'
    err = createError(400, message)
  }

  // 对其他异常进行兜底，转换成通用的错误对象
  if (!createError.isHttpError(err)) {
    err = createError(500, '服务器内部错误，请稍后重试')
  }

  return res.status(err.status).json({
    code: err.status,
    message: err.message,
    data: null,
  })
}

全局响应中间件

返回成功响应的时候，我们每次都要写如下代码，这个地方能不能简化呢？答案是当然能，我们编写一个中间件来对res对象进行扩展。

1
res.send({ code: 200, message: '注册成功', data: result })

在middlewares文件夹下创建responseMiddleware文件，编写以下代码。

1
2
3
4
5
6
7
8
9
10
module.exports = (req, res, next) => {
  res.success = (data = null, message = '请求成功') => {
    res.status(200).json({
      code: 200,
      message,
      data,
    })
  }
  next()
}

打开app.js，将刚才写好的中间件进行注册。

1
2
3
4
5
...
const responseMiddleware = require('./middlewares/responseMiddleware')

app.use(responseMiddleware) // 要放到路由前面注册，否则路由里拿不到success方法
require('./routes')(app) // 注册路由

修改user.controller.js文件，现在代码看起来清爽多啦！

1
2
3
4
5
6
7
8
9
10
// 通过邮箱注册用户
exports.register = async (req, res, next) => {
  if (!req.body) throw new Error('缺少必要参数')
  try {
    const result = await User.register(email, code, type_id)
    res.success(result, '注册成功')
  } catch (error) {
    next(error)
  }
}

异步异常处理中间件

但我们的代码还有一个小问题，就是try...catch太多了，原因就是Epxress可以很好的处理同步的异常，因为同步的异常throw err，会自动转化为

1
next(err)

但是异步的异常，就必须要手动next(err)，就像上面的代码一样。然而，try...catch并非唯一可以手动next(err)的途径，Promise的catch也行。

1
2
3
4
5
6
// 官网提供的示例
app.get('/', (req, res, next) => {
  Promise.resolve().then(() => {
    throw new Error('BROKEN')
  }).catch(next) // Errors will be passed to Express.
})

在middlewares文件夹下创建asyncMiddleware文件，编写以下代码。

1
2
3
module.exports = fn => (req, res, next) => {
  return Promise.resolve(fn(req, res, next)).catch(next)
}

修改user.routes.js文件，在路由层面添加中间件处理。

1
2
3
4
5
6
7
8
const asyncHandler = require('../middlewares/asyncMiddleware')

// 查询用户身份列表
router.get('/type', asyncHandler(userController.findAllType))
// 注册
router.post('/register', validator.body(userSchema.register), asyncHandler(userController.register))
// 发送验证
router.post('/sendEmaliCode', validator.body(userSchema.sendEmailCode), asyncHandler(userController.sendEmailCode))

好了，可以愉快的把controller和model文件里的try...catch统统干掉啦！

1
2
3
4
5
6
7
// 通过邮箱注册用户
exports.register = async (req, res, next) => {
  if (!req.body) throw '缺少必要参数'
  const { email, code, type_id } = req.body
  const result = await User.register(email, code, type_id)
  res.success(result, '注册成功')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 注册用户
exports.register = async (email, code, type_id) => {
  // 查询邮箱是否已被注册
  const users = await this.findUser('email', email)
  if (users.length > 0) {
    throw createError(400, '该邮箱已被注册')
  } else {
    const isTrue = await this.verifyCode(email, code)

    if (!isTrue) {
      throw createError(400, '验证码错误或已过期')
    }

    let createSQL = 'insert into user (email, type_id) value(?,?)'
    const [results] = await pool.query(createSQL, [email, type_id])
    if (results.affectedRows === 1) {
      // 注册成功，删除临时保存的验证码
      await this.deleteCode(email)
      return null
    }
  }
}

环境变量配置

上一篇笔记也提到了目前很多敏感数据在config文件下明文存储，对于项目不是很友好。所以我们需要一个管理环境变量的工具，帮助我们管理开发、测试、生产的配置。

上一篇笔记也提到了目前很多敏感数据在config文件下明文存储，对于项目不是很友好。所以我们需要一个管理环境变量的工具，帮助我们管理开发、测试、生产的配置。

安装dotenv

1
npm i dotenv

创建.env文件

在根目录创建.env文件，将config文件下的配置写入。

1
2
3
4
5
6
7
8
9
10
11
12
13
#DB_CONFIG
DB_HOST= "127.0.0.1" #数据库地址
DB_PORT= "3306" #数据库端口
DB_USER= "root" #数据库用户名
DB_PASSWORD= "123456" #数据库密码
DB_DATABASE= "test" #数据库名称

#EMAIL_CONFIG
EMAIL_HOST= "smtp.163.com" #SMTP服务器地址
EMAIL_PORT= 465 #端口号
EMAIL_SECURE= true #使用SSL
EMAIL_USER="abc@163.com" #发件人邮箱
EMAIL_PASS= "xxxxxx" #邮箱授权码

引入dotenv

修改config配置文件，引入dotenv，dotenv会将.env文件内的变量都挂载到process.env上面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const dotenv = require('dotenv')
dotenv.config()

module.exports = {
  dbConfig: {
    host: process.env.DB_HOST,
    port: process.env.DB_PORT,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_DATABASE,
  },
  emailConfig: {
    host: process.env.EMAIL_HOST,
    port: process.env.EMAIL_PORT,
    secure: process.env.EMAIL_SECURE,
    auth: {
      user: process.env.EMAIL_USER,
      pass: process.env.EMAIL_PASS,
    },
  },
}

确保.env不被提交

在.gitignore 文件中添加.env文件，以确保它不会被提交到版本控制系统当中。

1
2
3
4
/node_modules
npm-debug.log
package-lock.json
.env

在不同的环境中设置环境变量

  • 开发环境：通常 .env 文件会包含开发环境的配置。
  • 测试环境：可以创建一个 .env.test 文件，并在测试脚本中加载它，或者通过命令行设置环境变量。
  • 生产环境：环境变量通常通过操作系统的环境变量设置，或者通过像 Heroku、AWS 等平台的环境变量管理工具来管理。

小结

这篇笔记没有加新的功能，主要是针对上一篇笔记末尾总结的三个问题进行优化和改良。同时也学习了中间件的开发与使用，并且通过使用社区成熟的库来减少重复造轮子的行为。希望这篇笔记能帮到同样在用Node+Express学习接口开发的你吧！

]]> <p>上一篇笔记我们实现了邮箱+验证码注册的功能，并且在小结的时候也发现了几个问题。如果这些问题放到项目最后在解决，会存在代码改动量过大，容易出错。所以这篇笔记主要针对这几个问题进行优化、解决，使得项目更加健康。</p> 解决群晖Docker安装MySQL时区问题 https://www.xdxmblog.cn/posts/58263.html 2025-04-15T02:34:30.000Z 2025-04-15T02:34:30.000Z 前段时间在群晖NAS的Docker里安装了MySQL，方便自己折腾result API开发，最近在开发时遇到了一个问题，就是数据库的时间跟北京时间相差8小时，会导致时间判断出错，这里记录一下解决办法，供遇到同样问题的同学参考。

问题描述

在做邮箱+验证码登录的功能时，我们将javascript生成的验证码和过期时间存到了数据库的表中。然而在利用过期时间做查询校验时，却发现不管验证码过没过期，都查不到任何数据。

1
2
let sql = `select * from ${type == 'register' ? 'temp_user_code' : 'user'} where email = '${email}' and expires_at > NOW()`
const [rows] = await pool.query(sql, [email])

排查过程

一开始以为是生成验证码和过期时间的函数有问题，但是不管是console.log()，还是查看数据库表的存储，过期时间确实没啥问题。

1
2
3
4
5
6
7
8
9
// 生成验证码
exports.generateCode = () => {
  const code = randomstring.generate({
    length: 6, // 验证码长度
    charset: 'numeric', //可以选择 'alphabetic', 'numeric', 'hexadecimal', 'binary' 或者自定义字符集
  })
  const expiresAt = new Date(Date.now() + 5 * 60 * 1000) // 验证码有效期为5分钟
  return { code, expiresAt }
}

于是我将怀疑对象转向了MySQL的NOW()方法，果断进入Docker容器，输入命令来验证我的猜想。

进入容器的方法：打开群晖Docker,点击容器——MySQL——详情——终端机,进入容器内部，输入用户名和密码，登录MySQL数据。

进入容器登录以后，输入select now();，查看打印的时间，通过打印结果观察，果然是数据库的时间不对。

1
2
3
4
5
6
7
select now();                                                                    
+---------------------+                                                                 
| now()               |                                                                 
+---------------------+                                                                 
| 2025-04-15 03:00:31 |                                                                 
+---------------------+                                                                 
1 row in set (0.00 sec)

继续输入show variables like '%time_zone%'; 来查看MySQL的时区。

1
2
3
4
5
6
7
8
show variables like '%time_zone%';                                               
+------------------+--------+                                                           
| Variable_name    | Value  |                                                           
+------------------+--------+                                                           
| system_time_zone | UTC    |                                                           
| time_zone        | SYSTEM |                                                           
+------------------+--------+                                                           
2 rows in set (0.00 sec)

观察可知，time_zone的值是SYSTEM，也就是取了群晖Docker的时区，我们继续查看Docker容器所属的时区。

1
2
3
4
5
# 先退出mysql
mysql > quit;
# 退出之后输入 date -R
date -R                                                                   
Tue, 15 Apr 2025 03:05:00 +0000

至此，真相大白了。

我们通过上面的排查，可以确定，问题出在了安装MySQL时未指定时区，而MySQL会默认取Docker容器所属的时区，而Docker容器默认的时区又是+0000，所以数据库的时间与中国时间相差了8个小时。

解决方案

既然知道了问题原因，自然而然的就可以列出解决方向：

  1. 修改Docker系统所属的时区。
  2. 修改MySQL所属的时区。

修改Docker容器（未验证成功）

网上很多文章都写了这个方案，然后我尝试了，很遗憾失败了。可能是因为我的Docker安装位置是群晖的NAS系统。不管是从上面的终端机还是使用putty连接NAS，输入该命令只会得到docker: command not found。

1
2
3
4
5
6
7
8
9
10
# 进入容器
docker exec -it mysql1 /bin/bash

# 下列方法 1~3 中任选其一即可：
# 1.强制生成 Asia/Shanghai 时区文件软链接
ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
# 2.Asia/Shanghai 软链接实际指向 PRC 文件，将其复制为 localtime 时区文件
cp /usr/share/zoneinfo/PRC /etc/localtime
# 3.通过 tzselect 命令，可选择 Beijing、HongKong 城市时区
tzselect

对Docker比较熟悉的小伙伴遇到这个问题可以尝试一下这个方案是否可行。

修改MySQL所属的时区（验证成功）

还是通过终端机登录MySQL，可以用以下命令来临时修改MySQL所属的时区。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 设置全局会话时区
set global time_zone = '+08:00';

# 设置当前会话时区
set session time_zone = '+08:00';

# 设置后查看 Mysql 时区配置属性。
show variables like '%time_zone%';
+------------------+--------+
| Variable_name    | Value  |
+------------------+--------+
| system_time_zone | UTC    |
| time_zone        | +08:00 |
+------------------+--------+

但因为我们的MySQL安装在了Docker里，一旦Docker遇到意外发生故障或者重启，该配置就会失效，所以我们要想办法将它永久化。

在另一篇笔记《群晖NAS使用指北-Docker安装MySQL》中，为了使数据库的数据永久化，我们在宿主机创建了三个文件夹logs、conf、data来进行映射。

在电脑中新建一个mycustom.txt文件，写入以下配置：

1
2
[mysqld]
default-time-zone='+08:00'

上面的配置会指定MySQL的时区，另存为改文件或者直接重命名改后缀为mycustom.cnf，将该文件放入NAS中我们先前创建的conf文件夹中。

重新启动MySQL容器，进入终端机，登录数据库，会发现提示一个报错。

1
mysql: [Warning] World-writable config file '/etc/mysql/conf.d/mycustom.cnf

这个报错的意思是：mycustom.cnf这个文件的权限太大了，任何人都可以修改，不太安全，MySQL会忽略其中的配置。导致这个问题的原因是因为conf文件夹的权限我们设置为了任何人都可以读取/写入。

右键该文件夹，点击属性——权限，编辑Everyone的权限设置为读取，把写入都给勾掉。

如果权限列表都是灰色的，就点高级选项——使继承权限显示化，再继续上述步骤即可。

修改完后重启MySQL，登录终端机，查看修改效果，发现已经OK了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
show variables like '%time_zone%';
+------------------+--------+
| Variable_name    | Value  |
+------------------+--------+
| system_time_zone | UTC    |
| time_zone        | +08:00 |
+------------------+--------+

select now();                                                                    
+---------------------+                                                                 
| now()               |                                                                 
+---------------------+                                                                 
| 2025-04-15 11:00:31 |                                                                 
+---------------------+                                                                 
1 row in set (0.00 sec)

小结

这篇笔记主要是对Docker中MySQL时区不正确的问题做一个复盘和记录。问题本身并不复杂，但是对于像我这种纯前端同学，初玩后端还不太熟练的话，解决起来也确实需要费一番功能。就像让纯后端同学去调试css样式一样难受，哈哈！

]]> <p>前段时间在群晖NAS的Docker里安装了MySQL，方便自己折腾result API开发，最近在开发时遇到了一个问题，就是数据库的时间跟北京时间相差8小时，会导致时间判断出错，这里记录一下解决办法，供遇到同样问题的同学参考。</p> Node + Express + MySQL 开发RESULT API(二)邮箱+验证码注册 https://www.xdxmblog.cn/posts/60030.html 2025-04-10T06:50:07.000Z 2025-04-10T06:50:07.000Z 上一篇笔记主要记录了如何快速搭建一个用Node + Express + MySQL开发的RESULT API小项目，并且编写并运行了一个GET接口。这篇笔记会继续完善这个小项目，将API开发中的CURD完整的写出来。

上一篇笔记的最后我们实现了一个查询接口，用来查询用户的身份（分类），这篇笔记我们来实现通过邮件验证码来注册用户。

创建数据库表

在数据库中创建两个表user，temp_user_code表，用来存储用户数据和验证码数据，并设计以下结构。

名类型长度小数点不是null虚拟键注释
idint100√√用户id(无符号，自动递增)
openidvarchar2550微信openid
emailvarchar150√邮箱（添加UNIQUE索引）
codevarchar60邮箱验证码
expires_atdatetime00验证码过期时间
type_idtinyint20用户身份id(添加外键指向user_type表中的id字段)
create_timedatetime00创建时间（默认值CURRENT_TIMESTAMP）
update_timedatetime00更新时间（默认值CURRENT_TIMESTAMP，自动更新）
名类型长度小数点不是null虚拟键注释
idint100√√验证码id(无符号，自动递增)
emailvarchar150邮箱（添加UNIQUE索引）
codevarchar60邮箱验证码
expires_atdatetime00验证码过期时间

实现邮箱+验证码注册

创建好数据库表以后，我们就正式进入接口开发的环节了，这里我们选择使用邮箱+验证码登录的方式来实现用户的创建。

安装依赖

安装nodemailer randomstring依赖，其中randomstring库用来生成随机字符串（也就是我们要做的验证码），而nodemailer用来实现发送邮箱验证码。

1
npm i nodemailer randomstring

编写路由、控制器函数

安装好依赖以后，我们来编写路由函数，打开user.routes.js，添加以下路由。

1
2
3
4
5
6
...
// 注册
router.post('/register', userController.register)
// 发送验证
router.post('/sendEmaliCode', userController.sendEmailCode)
...

接着我们来编写控制函数，打开user.controller.js，添加以下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 发送验证码
exports.sendEmailCode = async (req, res, next) => {
  const { email } = req.body
  if (!email) {
    res.status(400).send({ code: -1, message: '请提供邮箱地址', data: null })
  }
  try {
    const result = await User.sendEmailCode(email)
    res.send({ code: 200, message: '验证码已发送，请查收邮件', data: result })
  } catch (error) {
    res.status(error.status || 500).send({
      code: error.code || -1,
      message: error.message || '服务器内部错误',
      data: null,
    })
  }
}

接着我们使用接口调试工具（我这里使用的是Apifox)，调用接口，我们发现不管参数email有没有值，接口都会报错，并且在命令也发现打印的email值也是undefined。

接口调试

解析req.body入参

其实这是因为express默认没有解析请求体中的数据导致的，现在我们来对它进行设置，打开app.js，添加以下代码：

1
2
3
4
5
6
7
...
const app = express()
//添加以下代码
app.use(express.json()) // 解析json入参
app.use(express.urlencoded({ extended: false })) // 解析x-www-form-urlencoded入参

...

再次传入一个空的email，现在能正常返回错误信息了。

1
2
3
4
5
{
    "code": -1,
    "message": "请提供邮箱地址",
    "data": null
}

配置邮件config、创建工具文件

打开config.js文件，写入以下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  dbConfig: {
    ...
  },
  emailConfig: {
    host: 'smtp.163.com', // SMTP服务器地址
    port: 465, // 端口号
    secure: true, // 使用SSL
    auth: {
      user: 'youremail@163.com', // 发件人邮箱
      pass: '这里填你的授权码', // STMP授权码
    },
  },
}

在src目录下创建一个utils.js文件，用来开发工具函数,并写入以下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const nodemailer = require('nodemailer')
const randomstring = require('randomstring')
const config = require('./config')

// 创建nodemailer实例
exports.transporter = () => {
  return nodemailer.createTransport({
    ...config.emailConfig,
  })
}

// 生成验证码
exports.generateCode = () => {
  const code = randomstring.generate({
    length: 6, // 验证码长度
    charset: 'numeric', //可以选择 'alphabetic', 'numeric', 'hexadecimal', 'binary' 或者自定义字符集
  })
  const expiresAt = new Date(Date.now() + 5 * 60 * 1000) // 验证码有效期为5分钟
  return { code, expiresAt }
}

// 生成邮件模板
exports.generateMailOptions = (email, code, expiresAt) => {
  return {
    from: config.emailConfig.auth.user,
    to: email,
    subject: `您的验证码 ${code}`,
    text: `您好，您的验证码是：${code}。请不要告诉他人。验证码将在 ${expiresAt.toISOString()} 前有效。`,
    html: `<b>你的验证码是 ${code}，请勿告诉他人。</b>`, // HTML 内容
  }
}

编写发送验证码函数

打开user.model.js文件，编写发送验证码函数，这段函数的流程主要如下：

  1. 通过utils.generateCode()方法生成验证码和过期时间
  2. 通过辅助函数findUser()查询当前的邮箱是否已被注册，该函数做了通用化处理，可以根据user表的任意字段进行查询。
  3. 根据查询结果判断当前发送的是登录验证码还是注册验证码，将code,expiresAt存入数据库中，以供后续验证比对。
  4. 通过utils.transporter()方法发送邮件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const utils = require('../utils')

...

// 发送邮箱验证码
exports.sendEmailCode = async email => {
  try {
    // 生成验证码，过期时间
    const { code, expiresAt } = utils.generateCode()
    // 查询当前邮箱是否被注册
    const users = await this.findUser('email', email)

    if (users && users.length > 0) {
      // 保存登录验证码
      let updateSQL = `update user set code=?, expires_at=? where email='${email}'`
      await pool.query(updateSQL, [code, expiresAt, email])
    } else {
      // 每次发送之前先清空之前保存的临时验证码
      await this.deleteCode(email)
      // 保存注册验证码
      let saveSQL = `insert into temp_user_code(email, code, expires_at) values(?,?,?)`
      await pool.query(saveSQL, [email, code, expiresAt])
    }
    // 发送邮件
    const mailOptin = utils.generateMailOptions(email, code, expiresAt)
    const transporter = utils.transporter()
    await transporter.sendMail(mailOptin)
    return null
  } catch (error) {
    throw '验证码发送失败，请重新尝试'
  }
}

// 查询用户
exports.findUser = async (findType, data) => {
  try {
    let sql = `select * from user where ${findType} = ?`
    const [rows] = await pool.query(sql, [data])
    return rows
  } catch (error) {
    throw '服务器内部错误，请稍后重试'
  }
}

// 删除验证码
exports.deleteCode = async email => {
  try {
    let deleteSQL = `delete from temp_user_code where email='${email}'`
    await pool.query(deleteSQL, [email])
  } catch (error) {
    throw '服务器内部错误，请稍后重试'
  }
}

这时我们再次调用发送验证码的接口，可以观察到接口已经调用成功了，并且邮箱也收到了生成的验证码。

1
2
3
4
5
{
    "code": 200,
    "message": "验证码已发送，请查收邮件",
    "data": null
}

编写校验验证码函数

这个过程比较简单，为了方便使用，该辅助函数也做了复用处理，通过type入参来决定校验的是注册code还是登录code。并将比对结果进行返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 校验验证码
exports.verifyCode = async (email, code, type = 'register') => {
  try {
    let sql = `select * from ${
      type == 'register' ? 'temp_user_code' : 'user'
    } where email = '${email}' and expires_at > NOW()`
    const [rows] = await pool.query(sql, [email])

    if (rows.length === 0) {
      return false
    }
    // 比较验证码
    const storeCode = rows[0].code
    if (storeCode === code) {
      return true
    }
    return false
  } catch (error) {
    throw '服务器内部错误，请稍后重试'
  }
}

编写注册函数

在user.controller.js文件内，编写注册控制器函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 通过邮箱注册用户
exports.register = async (req, res, next) => {
  const { email, code, type_id } = req.body
  if (!email || !code) {
    res.status(400).send({ code: -1, message: '邮箱或验证码不能为空', data: null })
  } else if (!type_id) {
    res.status(400).send({ code: -1, message: '请选择身份', data: null })
  } else if (type_id && (type_id < 1 || type_id > 7)) {
    res.status(400).send({ code: -1, message: '身份值有误', data: null })
  } else {
    try {
      const result = await User.register(email, code, type_id)
      res.send({ code: 200, message: '注册成功', data: result })
    } catch (error) {
      res.status(500).send({
        code: 500,
        message: error || '服务器内部错误',
        data: null,
      })
    }
  }
}

在user.model.js文件内，编写注册函数。这个函数也比较简单，通过查询判断邮箱是否已注册，然后校验验证码，进行用户的创建即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 注册用户
exports.register = async (email, code, type_id) => {
  try {
    // 查询邮箱是否已被注册
    const users = await this.findUser('email', email)
    if (users.length > 0) {
      throw '该邮箱已被注册'
    } else {
      const isTrue = await this.verifyCode(email, code)

      if (!isTrue) {
        throw '验证码错误或已过期'
      }

      let createSQL = 'insert into user (email, type_id) value(?,?)'
      const [results] = await pool.query(createSQL, [email, type_id])
      if (results.affectedRows === 1) {
        // 注册成功，删除存储的验证码
        await this.deleteCode(email)
        return null
      }
    }
  } catch (error) {
    throw '注册失败，请稍后重试'
  }
}

小结

通过观察我们可以发现，仅仅实现一个发送验证码的函数，我们就用到了数据的增删改查四种能力。其实这四种sql语句单独使用的话，就对应了前端平时的接口调用GET、POST、PUT、DELETE，是不是很简单呢？

1
2
3
4
5
6
7
8
9
10
11
12
// 增加
let saveSQL = `insert into temp_user_code(email, code, expires_at) values(?,?,?)`
await pool.query(saveSQL, [email, code, expiresAt])
// 更新
let updateSQL = `update user set code=?, expires_at=? where email='${email}'`
await pool.query(updateSQL, [code, expiresAt, email])
// 删除
let deleteSQL = `delete from temp_user_code where email='${email}'`
await pool.query(deleteSQL, [email])
// 查询
let sql = `select * from user where ${findType} = ?`
const [rows] = await pool.query(sql, [data])

但是我们观察代码也能发现有几个问题：

  1. 入参校验需要写一大堆if else 很不美观，而且目前只做到了简单校验，对于入参的数据类型等等都没实现。
  2. 错误捕获目前只能靠try catch，而且要重复写很多的res.status().send()，没有进行统一处理。
  3. config文件保存很多敏感配置，比如数据库的用户名密码，邮件的授权码等，这种内容一旦传到github等，有暴露的风险。

下一篇笔记会针对这些错误进行优化配置，敬请期待吧！

]]> <p>上一篇笔记主要记录了如何快速搭建一个用<code>Node + Express + MySQL</code>开发的RESULT API小项目，并且编写并运行了一个GET接口。这篇笔记会继续完善这个小项目，将API开发中的CURD完整的写出来。</p> Node + Express + MySQL 开发RESULT API(一)框架搭建 https://www.xdxmblog.cn/posts/26719.html 2025-04-01T08:28:40.000Z 2025-04-01T08:28:40.000Z 最近在用uni-app给娃做一个日常习惯打卡的APP + 小程序，后端接口打算用Node+Express去做，后续部署到Serverless，虽然近几年出了很多Node框架，但思虑再三，还是选择用比较成熟的Express来做，毕竟社区成熟度在这儿摆着。

初始化

这个系列的文章主要记录开发和后续部署到Serverless的过程。至于如何安装Node和MySQL网上有大量现成的教程，这里不再过多赘述。

本系列笔记选用Express 5.X版本开发，需要Node.js版本至少为18或更高。

安装Express

首先新建一个文件夹，并初始化项目，然后安装Express。

1
npm init -y
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Wrote to C:\Users\Administrator\Desktop\express-api\package.json:

{
  "name": "express-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
1
npm i express
1
2
3
4
5
6
7
added 66 packages, and audited 67 packages in 4s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

编写入口文件

接下来我们在根目录创建src文件夹，并在文件夹下创建app.js文件，也就是主入口文件。

1
2
3
4
5
6
7
8
9
// 导入express
const express = require('express')
// 创建express实例
const app = express()

// 调用app.listen方法，指定端口号并启动web服务器
app.listen(3000, function () {
  console.log('server running at http://127.0.0.1:3000')
})

接着我们在命令行输入启动命令

1
node src/app.js

这时候在浏览器输入http://127.0.0.1:3000,看到Cannot GET/，说明我们的服务器就启动好了。

添加路由

规划目录结构

在src文件夹下分别创建controllers、models、routes文件夹，具体作用如下：

  • controllers：封装与前端进行的交互，如数据校验等。
  • models：封装Node.js与数据库的交互逻辑。
  • routes:存放路由文件。

创建路由文件

在routes目录下创建index.js、user.routes.js文件，具体作用如下：

  • index.js：作为路由的入口文件，负责暴露所有的路由模块。
  • user.routes.js：用户路由模块，用于存放用户相关的接口声明。
  • xxx.routes.js：根据项目需求，存放不同的路由模块。

在user.routes.js文件里写入以下代码，其中的router.get表示我们要创建一个GET接口，第一个参数表示接口的地址，第二个参数是一个函数，表示访问该接口时执行的方法。具体的req,res等参数和方法，可以查阅express官方文档了解。

1
2
3
4
5
6
7
8
9
10
const express = require('express')
// 创建路由对象
const router = express.Router()

// 获取用户分类
router.get('/type', (req, res) =>{
  res.send('ok')
})

module.exports = router

导入并注册写好的路由模块

在index.js文件里写入以下代码，这部分代码主要用于注册我们写好的路由模块，参数/api/user，表示为用户模块的接口添加统一的前缀，以刚才写的/type接口为例，访问时应该用/api/user/type。

1
2
3
4
5
6
7
// 导入用户路由模块
const userRouter = require('./user.routes')

// 暴露一个方法，用来注册已经写好的路由模块
module.exports = app => {
  app.use('/api/user', userRouter)
}

回到app.js文件，写入以下代码来将所有的路由进行注册。

1
2
3
const app = express()
// 添加以下代码
require('./routes')(app)

此时我们用浏览器访问http://127.0.0.1:3000/api/user/type并不会有任何反应，是因为我们每次修改文件都要重新启动服务器才能够得到最新的代码，那有什么办法可以不用一直手动重启服务器吗？答案是Nodemon。

自动监听并重启服务器

Nodemon是一个基于Node.js构建的开发工具，专为帮助开发者自动监控项目文件的更改而设计。每当文件发生变更时Nodemon会自动重启Node.js服务器，无需手动停止并重启。这对于提升开发速度、减少人工操作非常有帮助，尤其适用于构建后端服务或API接口时。

1
npm i -g nodemon
1
2
3
4
5
6
added 29 packages, and audited 30 packages in 4s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

接下来打开package.json文件，进行以下改写：

1
2
3
4
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start":"nodemon src/app.js"
  },

接着在命令行输入npm start，即可正常使用。

1
2
3
4
5
6
7
8
9
10
11
npm start

> express-api@1.0.0 start
> nodemon src/app.js

[nodemon] 3.1.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node src/app.js`
server running at http://127.0.0.1:3000

此时我们再次访问http://127.0.0.1:3000/api/user/type，就能看到返回的ok啦。

连接数据库

安装mysql2模块

在命令行输入以下代码来安装mysql2模块。

1
2
3
4
5
6
7
8
npm i mysql2

added 11 packages, and audited 78 packages in 2s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

这里使用mysql2而不使用mysql的主要原因是mysql2增加了很多mysql没有的功能，比如Promise、Prepared Statements、更好的错误处理等。

数据库配置

在src目录下新建config文件夹，用于存放配置文件，同时在该文件夹下创建index.js文件，在该文件内添加以下代码：

1
2
3
4
5
6
7
8
9
module.exports = {
  dbConfig: {
    host: '127.0.0.1', // 数据库地址
    port: '8996', // 端口
    user: 'root', // 用户名
    password: '123456', //密码
    database: 'test', //数据库名称
  },
}

在刚才创建好的models文件夹里新建db.js，并在该文件内添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 由于能够更好的使用Promise,这里选择引入promise模块
const mysql = require('mysql2/promise')
const config = require('../config')

// 建立与mysql数据库的连接池
const pool = mysql.createPool({
  host: config.dbConfig.host,
  port: config.dbConfig.port,
  user: config.dbConfig.user,
  password: config.dbConfig.password,
  database: config.dbConfig.database,
})

module.exports = pool

创建本地数据

打开本地的MySQL数据库，创建一个名为test的数据库，并新建一个user_type的表，写入以下数据：（如何安装MySQL,创建数据库表等内容，由于不是本系列笔记的重点，这里不再赘述，网上找教程即可）

名类型长度小数点不是null虚拟键注释
idtinyint20√√用户身份类型id
namevarchar20√用户身份类型名称
create_timedatetime00创建时间（默认值CURRENT_TIMESTAMP）
update_timedatetime00更新时间（默认值CURRENT_TIMESTAMP，自动更新）

创建好表后预先写入以下数据。

idnamecreate_timeupdate_time
1妈妈2025-03-28 10:20:552025-03-28 10:20:55
2爸爸2025-03-28 10:20:552025-03-28 10:20:55
3爷爷2025-03-28 10:20:552025-03-28 10:20:55
4奶奶2025-03-28 10:20:552025-03-28 10:20:55
5姥爷2025-03-28 10:20:552025-03-28 10:20:55
6姥姥2025-03-28 10:20:552025-03-28 10:20:55
7亲人2025-03-28 10:20:552025-03-28 10:20:55

编写接口

以上准备工作都做完以后，我们就可以进行正常的接口逻辑开发了。

与数据库的逻辑

在models文件夹里新建user.model.js，并写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
const pool = require('./db')

// 查询用户身份列表
exports.getAllType = async () => {
  let sql = 'select * from user_type' // 要执行的SQL语句
  try {
    const [rows, fields] = await pool.query(sql) // rows返回查询结果，fields返回该表的字段名数组，一般用不到
    return rows //执行成功，返回数据集
  } catch (error) {
    throw '查询失败，请稍后重试' //执行失败，返回错误信息
  }
}

与前端的逻辑

在controllers文件夹里新建user.controller.js，并写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const User = require('../models/user.model')

exports.findAllType = async (req, res) => {
  try {
    const result = await User.getAllType()
    res.send({ code: 200, message: '成功', data: result })
  } catch (error) {
    res.status(500).send({
      code: 500,
      message: error || '服务器内部错误',
      data: null
    })
  }
}

将接口逻辑与路由进行挂载

回到user.routes.js文件，将我们写好的逻辑挂载到路由上：

1
2
3
4
5
6
7
8
9
const express = require('express')
const userController = require('../controllers/user.controller')
// 创建路由对象
const router = express.Router()

// 获取用户分类
router.get('/type', userController.findAllType)

module.exports = router

现在我们刷新浏览器http://127.0.0.1:3000/api/user/type,就能看到数据库返回的数据啦~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
    "code": 200,
    "message": "成功",
    "data": [
        {
            "id": 1,
            "name": "妈妈",
            "create_time": "2025-03-28T02:20:55.000Z",
            "update_time": "2025-03-28T02:20:55.000Z"
        },
        {
            "id": 2,
            "name": "爸爸",
            "create_time": "2025-03-28T02:20:55.000Z",
            "update_time": "2025-03-28T02:20:55.000Z"
        },
        {
            "id": 3,
            "name": "爷爷",
            "create_time": "2025-03-28T02:20:55.000Z",
            "update_time": "2025-03-28T02:20:55.000Z"
        },
        {
            "id": 4,
            "name": "奶奶",
            "create_time": "2025-03-28T02:20:55.000Z",
            "update_time": "2025-03-28T02:20:55.000Z"
        },
        {
            "id": 5,
            "name": "姥爷",
            "create_time": "2025-03-28T02:20:55.000Z",
            "update_time": "2025-03-28T02:20:55.000Z"
        },
        {
            "id": 6,
            "name": "姥姥",
            "create_time": "2025-03-28T02:20:55.000Z",
            "update_time": "2025-03-28T02:20:55.000Z"
        },
        {
            "id": 7,
            "name": "亲人",
            "create_time": "2025-03-28T02:20:55.000Z",
            "update_time": "2025-03-28T02:20:55.000Z"
        }
    ]
}

tips:不过为了方便调试接口，最好能在电脑安装诸如Apifox、Postman等接口调试工具。

小结

这篇笔记主要记录了如何从零开始搭建一个Node.js + Express + MySQL为主的后端接口项目，包括如何规划目录结构，如何连接数据库，不同的处理逻辑应该如何解耦。目前的接口只实现了查的功能，后续的笔记会继续完善该项目，完成增删改，以及跨域、中间件等配置。

]]> <p>最近在用<code>uni-app</code>给娃做一个日常习惯打卡的APP + 小程序，后端接口打算用<code>Node+Express</code>去做，后续部署到Serverless，虽然近几年出了很多Node框架，但思虑再三，还是选择用比较成熟的Express来做，毕竟社区成熟度在这儿摆着。</p> 适合儿童的英文原版书阅读、裸听书单 https://www.xdxmblog.cn/posts/22628.html 2025-03-28T01:50:40.000Z 2025-03-28T01:50:40.000Z 整理一下互联网上推荐的英文原版书单，以及蓝思指数中外年级对照表，方便自家娃使用。俗话说得好，鸡娃不如鸡自己。好在娃对英语不反感，对好些英语绘本还挺喜欢的，希望能顺顺利利按照这个路子坚持下去。

蓝思指数

什么是蓝思值？

蓝思值（Lexile)是全球广泛使用的英语阅读分级系统，通过算法得出，精准反映个人英语阅读理解能力。

蓝思值是如何计算的？

蓝思值通过分析文本中的词汇复杂性和橘子结构来计算出一个数值，通常以“L”后跟数字表示，例如800L。

蓝思值的计算主要依赖句子长度和词汇频率。数值越大，表明句子长度越长，词汇重复出现的频率也越低，整体阅读难度也就更高。蓝思值的范围为0L-2000L,通常人的阅读能力为0-1700L。

蓝思值查询

  • AD = Adult Directed:家长指导读物，适合亲自共读。
  • NC = Non-Conforming:非常规书籍，语言难度超过了目标读者的阅读能力，适合阅读能力高于平均水平的读者。
  • HL = High-Low:趣味性高但难度低的书籍，适合较高年级阅读能力较低的学生。
  • G = lllustrated Guide:图释类，如百科全书。
  • GN = Graphic Novel:连环画或漫画。
  • NP = Non-Prose:非散文性文章，如诗歌、歌词或菜谱，此类文章无法评定蓝思等级。
  • BR = Beginning Reader:阅读入门者/初级读物，蓝思值在0L以下的书籍和阅读者，数值越大，难度越低。

蓝思值对照表

阅读阶段级别蓝思值范围中国年级美国年级
阅读萌芽期PreABR-0学龄前Grade K（学龄前）
PreB1L-150L小学1-3年级Grade K
阅读早期L1151L-300L小学4-6年级Grade 1（小学1年级）
L2301L-405L初中1年级Grade 2（小学2年级）
阅读发展期L3406L-510L初中2年级Grade 3（小学3年级）
L4511L-625L初中3年级Grade 4（小学4年级）
独立阅读早期L5626L-750L高中1年级Grade 5（小学5年级）
独立阅读发展期L6751L-875L高中2-3年级Grade 6（小学6年级）
独立阅读期L7876L-950L大学1年级Grade 7（初中1年级）
L8951L-1300L大学2-4年级Grade 8-10（初中2-3年级）

RAZ、牛津阅读树、海尼曼对照表

有些书家里买了实体书，有些书NAS里存了电子版，还有些自家有的没写进去，表中的大部分书也没看过，但我觉得也不是所有的书都是必读的，后续会根据选择进行精炼一下。

年级RAZ牛津阅读树海尼曼Lexile是否已读
学龄前RAZ aa- - -GKBR70L-BR10L是
A是
B牛1BR40L-160L是
C牛2是
小学1-2年级D牛3G1160L-310L
E牛4
小学2-4年级F牛5300L-450L
G牛6
小学5-6年级H430L-530L
I牛7G2
初中1-2年级J牛8
K520L-620L
L牛9-10
M530L-810L
N- - -
初中3年级O牛11-12600L-850L
P

桥梁书

序号书名LexileAR是否已读
1Amelia Bedelia《糊涂女佣》100L-570L1.8-3.2
2Nate The Great《大侦探内特》230L-570L2.0-3.2
3Junie B. Jones《朱妮·琼斯》250L-420L2.6-3.1
4Dog man《神探狗狗》260L-540L2.3-2.6
5Fly Guy《苍蝇小子》270L-470L1.3-2.7是
6Fancy Nancy《漂亮的南希》270L-540L
7Winnie the Witch《女巫温妮》330L-560L2.3-3.0
8Henry and Mudge《亨利和马奇》370L-600L2.1-2.9
9Owl Diaries《猫头鹰日记》370L-560L2.5-3.1
10Kung Pow Chicken《宫保鸡丁》440L-520L
11Mercy Watson《小猪梅西》450L-550L2.6-3.2
12Monkey Me《猴子男孩》490L-510L2.2-2.5
13Frog and Toad《青蛙和蟾蜍》400L-490L2.5-2.9

初章书

序号书名LexileAR是否已读
1Marvin Redpost《麻烦精马文》290L-460L2.7-3.6
2Roscoe Riley Rules《罗斯科莱利规则》349L-490L2.7-3.2
3Horrid Henry《可怕的亨利》320L-710L3.1-3.8
4Young Cam Jansen《照相机女孩》330L-630L3.2-3.9
5Dragon Masters《神龙斗士》360L-580L3.1-3.5
6The Zack Files《扎克档案》370L-590L2.7-3.9
7Magic Tree House《神奇树屋系列(前28本)》380L-580L2.6-3.5
8Stink Moody《斯丁莫迪》380L-600L3.0-3.6
9The Secrets of Droon《地下王国历险》380L-670L2.9-4.4
10Jigsaw Jones《小侦探琼斯》390L-420L2.9-3.1
11Big Nate《捣蛋王》400L-600L3.1-3.4
12Flat Stanley’s Worldwide Adventures《小扁人》420L-750L3.2-4.0
13Captain Underpants《内裤队长》420L-890L2.2-5.4
14The Boxcar Children《篷车少年》430L-800L2.9-5.0
15Wayside School《歪歪小学》440L-500L3.3-3.4
16Judy Moody《稀奇古怪小朱迪》440L-600L3.0-3.7
17Geronimo Stilton《老鼠记者》450L-700L3.1-3.8
18My Weird school《疯狂学校》450L-770L3.6-4.4
19Ready,Freedy《弗雷迪》460L-660L3.1-3.4
20Andrew Lost《微观世界儿童百科》490L-600L3.3-4.0
21A to Z Mysteries《神秘案件》490L-660L3.2-4.0
22Calendar Mysteries《日历神秘案件》550L-650L2.9-3.3

中章书

序号书名LexileAR是否已读
1Merlin Missions《梅林的任务》(神奇树屋第二部，25本)400L-700L3.7-4.1
2Goosebumps《鸡皮疙瘩》(7本)450L-600L3.7
3Vet Volunteers《兽医志愿者》510L-760L3.6-4.6
4The 39 Clues《39 条线索》(11本)550L-730L4.0-5.8
5The Spiderwick Chronicles《奇幻精灵事件薄》(5本)560L-690L3.9-4.4
6Nancy Drew : Girl Detective《少年侦探南茜•朱尔》(19本)560L-820L4.0-5.4
7Percy Jackson and the Olympians《波西•杰克逊第一部》(5本)590L-680L4.1-5.6
8Fantastic Mr Fox《了不起的狐狸爸爸》(罗德达尔系列)600L4.1
9The Little House《小木屋的故事》(9本)600L-700L
10Tom Gates《了不起的小盖茨》(10 本，英国的小屁孩日记)600L-720L3.9-4.4
11Children of the Red King《赤王的子民》(8本)630L-770L4.5-5.1
12The Heroes of Olympus《奥林匹斯英雄》(波西杰克逊第二部)(5本)640L-690L4.5-5.2
13Rainbow Magic《彩虹仙子》640L-820L3.3-3.9
14Holes《别有洞天》(纽伯瑞金奖)660L4.6
15The Famous Five《五伙伴历险记》(21本)670L-700L
16The Tale of Despereaux《浪漫鼠佩德罗》(纽伯瑞金奖)670L
17The Underland Chronicles Series《地底王国》(5本)680L-730L4.7-5.0
18Charlotte’s Web、The Trumpet of the Swan、Stuart Little680L-920L4.4-6.0
19The Miraculous Journey of Edward Tulane《爱德华的奇妙之旅》700L4.1
20The Ramona Quimby《永远的雷蒙拉》700L-850L
21The Little Prince《小王子》710L5.0
22The BFG《好心眼的巨人》(罗德达尔系列)720L4.8
23The Genius Files《天才档案》(3本)720L-750L4.8-5.0
24The land of stories《异世界童话》(6本)720L-860L5.0-6.1
25Guardians of Ga,Hoole《猫头鹰王国的守护者》(10本)730L-850L4.8-5.6
26A Wrinkle in Time《时间的皱纹》740L
27The Witches《女巫》(罗德达尔系列)740L4.7
28Harriet the Spy《小间谍哈瑞特》760L
29The Sisters Grimm《格林姐妹》(9本)780L-840L4.5
30The Cricket in Time Suare《时代广场的蟋蟀》(纽伯瑞大奖)780L4.9
31The Penderwicks《夏天的故事》(6本)800L-940L4.7-5.6
32Charlie and the Chocolate Factory《查理和巧克力工厂》(罗德达尔系列)810L4.8
33Frindle《我们叫它粉灵豆》830L
34Allie Finkle’s Rules for Girls《女孩守则》(6本)830L-860L5.0
35Matilda《玛蒂尔达》(罗德达尔系列)840L5.0

高章书

序号书名LexileAR是否已读
1Harry Potter《哈利•波特系列》500L-1230L3.9-8.8
2Artemis Fowl《阿特密斯奇幻历险》(8本)600L-930L5.0-6.6
3Sammy Keyes《萨米凯斯系列》(10本,破案小说)620L-860L4.0-5.7
4Alex Rider《少年 007》(间谍故事)(11本)630L-780L4.8-5.6
5The House of the Scorpion《蝎子之屋》(纽伯瑞银奖)660L5.1
6Dork Diaries Series《女版小屁孩日记》(13本)660L-890L4.2-5.4
7Number the stars《数星星》(纽伯瑞金奖)670L4.5
8Divergent Trilogy《分歧者三部曲》700L-850L4.8-5.8
9The Inheritance Cycle《遗产四部曲》710L-1050L5.6-8.1
10Esperanza Rising《风中玫瑰》(纽伯瑞奖)750L5.3
11The Giver《记忆传授人》(纽伯瑞奖)760L5.3
12Wolves Of The Beyond《绝境狼王》(5本)770L-890L5.1-6.2
13The Indian in the Cupboard《魔柜小奇兵》780L4.6
14The Chronicles of Namia《纳尼亚传奇》(7本)790L-970L2.8-5.9
15Warriors《猫武士系列》(4 本)790L-900L5.4-6.3
16The Dark is Rising sequence《黑暗崛起》(纽伯瑞奖5本)800L-930L5.3-6.2
17The Hunger Games《饥饿游戏三部曲》800L-820L5.3
18The Lord of the Rings《魔戒三部曲》810L-920L6.1-6.3
19Julie of the Wolves《狼群中的朱莉》(纽伯瑞奖)860L5.8
20TheWitch of Blackbird Pond《黑鸟水塘的女巫》(纽伯瑞奖)850L5.7
21The Mysterious Benedict Society《天才神秘会社》890L-900L5.6-6.3
22A Christmas Carol《圣诞颂歌》(狄更斯作品)900L6.7
23Dear Mr. Henshaw《亲爱的汉修先生》(纽伯瑞奖)910L4.9
24The Alchemist《牧羊少年奇幻之旅》910L6.4
25Diary of Wimpy Kid《小屁孩日记》(13本)910L-1060L5.2-5.8
26How to Train Your Dragon《驯龙高手》910L-1070L6.2-6.8
27Daddy Long Legs《长腿叔叔》920L6.1
28Everything on a Waffle《松饼屋的异想世界》(纽伯瑞奖)950L5.8
29Hatchet series《手斧男孩》(纽伯瑞奖)(5本)960L-1140L5.5-5.9
30The Secret Garden《秘密花园》970L6.8
31A Series of Unfortunate Events《雷蒙•斯尼奇的不幸历险》980L-1370L6.2-7.4
32Anne of Green Gables《绿山墙的安妮》990L7.3
33Island of the blue dolphins《蓝色海豚岛》(纽伯瑞奖)1000L5.4
34The Phantom Tollbooth《神奇的收费亭》1000L6.7
35The Hobbit《霍比特人》1000L6.6
36The Hitchhiker s Guide to the Galaxy《银河系漫游指南》1000L6.6
37Black Beayty《黑骏马》1010L
38The Diary of a Young Girl《安妮日记》1020L6.5
39The Mysterious Adventures of Sherlock Holmes《福尔摩斯探案集》(9本)1090L7.9
40Around the World in Eighty Days《八十天环游地球》1090L9.6
]]> <p>整理一下互联网上推荐的英文原版书单，以及蓝思指数中外年级对照表，方便自家娃使用。俗话说得好，鸡娃不如鸡自己。好在娃对英语不反感，对好些英语绘本还挺喜欢的，希望能顺顺利利按照这个路子坚持下去。</p> 群晖NAS使用指北-Docker安装MySQL https://www.xdxmblog.cn/posts/25614.html 2025-03-24T09:31:32.000Z 2025-03-24T09:31:32.000Z 玩 NAS 有一段时间了，最近准备试试在 NAS 上面安装 MySQL 数据库，用来存放一些自己折腾的数据，由于对 Docker 搭建 MySQL 还不是特别熟悉，特通过此笔记进行记录，方便后续查看。

安装教程

拉取映像

先使用PuTTY通过 ssh 连接 NAS，登录之后输入以下命令进行拉取 MySQL 的映像。

1
docker pull dockerpull.cn/mysql:8.0.4

如图所示，说明映像已经拉取成功，否则请检查 docker 的镜像是否可用，并替换dockerpull.cn字段重试。或者进行科学上网，使用官方镜像拉取。

docker拉取映像

安装映像

在 docker 文件夹下创建 mysql 文件夹，并创建 conf、data、logs 三个子文件夹，用于存储配置文件、数据、错误日志。

创建文件夹

右键我们创建的mysql文件夹，选择属性，选择权限，勾选应用到子文件夹。

设置文件夹权限

双击 mysql 映像并启动，输入容器名称，并点击高级设置，勾选“启用自动重新启动”。

启动映像

输入容器信息

切换到存储空间，添加文件夹，选择上面创建的三个文件夹，并填写相应的装在路径。

添加文件夹

切换到端口设置，填写本地端口（随便写，后面要用到），容器端口和类型默认即可。

填写端口

切换到环境，添加一个变量MYSQL_ROOT_PASSWORD，值就是你的数据库密码，这一步很重要，否则后续会失败，无法进行连接。

配置密码

远程配置

点击 docker 的容器选项，右键 mysql 容器，点击详情。接着点击终端机，点击新增，我们需要通过这种方式与容器进行连接。

输入以下代码来安装 vim：

1
2
3
apt-get update #同步最近的软件包列表到本地缓存
apt-get install net-tools #安装网络管理工具
apt-get install vim  #安装vim

安装vim

安装完成之后输入以下命令来登录 mysql：

1
mysql -u root -p

登录mysql

输入密码（刚才在环境变量设置的密码）以后，授权用户从任何主机连接到 MySQL 服务器。

  • grant：是 MySQL 的关键字，用于执行授权操作，给用户赋予特定的数据库权限。
  • all privileges：表示授予所有可用的权限，包括 SELECT、INSERT、UPDATE、DELETE、CREATE、DROP 等操作权限，涵盖了对数据库对象的各种操作能力。
  • on：第一个代表数据库名，这里的表示所有数据库；第二个代表表名，这里表示所有表。整体表示对所有数据库中的所有表进行授权。
  • to ‘root‘@’%’：root 是要授予权限的用户名，@是分隔符，用于分隔用户名和主机名。%表示允许该用户从任何主机连接到 MySQL 服务器。
1
grant all privileges on *.* to 'root'@'%';

接着执行以下命令：

这一步通过查询资料得知是修改密码，但是不执行的话，用 native 无法连接数据库。待后续了解以后再做补充。

1
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '密码';

通过native连接

常见错误

Q:挂载的data文件夹一直是空的，容器重启后，数据全部消失。

A:检查文件的挂载路径是否跟本教程的图片内容一致，网上有的教程配置如下，下面的挂载路径是错的，虽然能正常运行，但数据只会存在容器内。

  • /logs
  • /data
  • /conf

Q:在终端连接数据库报错：Can ‘t connect to local MySQL server through socket ‘/tmp/mysql.sock ‘(2) “;

A：文件夹权限问题，确保按步骤给docker文件夹下创建的mysql文件夹设置了足够的权限且应用于子文件和子文件夹。

Q:native连接报错：1045 - Access denied for user ‘root‘@’xxx.xxx.xxx.xxx’(using password:YES)

A:没执行文中远程授权的步骤。

总结

总体来说，用 Docker 安装 MySQL 还是挺方便的，配置项也基本都是图文的方式，接下来准备复习一下 SQL 知识，尝试写一套 API。

]]> <p>玩 NAS 有一段时间了，最近准备试试在 NAS 上面安装 MySQL 数据库，用来存放一些自己折腾的数据，由于对 Docker 搭建 MySQL 还不是特别熟悉，特通过此笔记进行记录，方便后续查看。</p> 手把手教你DIY一台属于自己的NAS——硬件篇 https://www.xdxmblog.cn/posts/21382.html 2025-03-08T13:50:02.000Z 2025-03-08T13:50:02.000Z 自己DIY的家庭NAS已经稳定使用一年半了，最近又刷到了很多成品NAS的软广，感觉真的是把很多不懂数码的小白当韭菜割。所以我决定写一个系列性教程，供那些想要DIY但又不知如何操作的小伙伴参考，话不多说，开干！

基础知识

想要DIY一个自己的NAS,首先要对NAS有一个基本的了解。本质上，NAS就是一个电脑主机加一个特殊的系统。我们可以通过这套设备来实现在任意时间、任意地点来访问我们存储在这套设备里的内容，比如：相册、电影、电子书。甚至我们可以利用NAS来搭建自己的导航页、博客等等。

直接把家里的电脑改成NAS这显然是有点大材小用，一方面家里的电脑还有其他用处，改成NAS以后没办法日常办公娱乐，另一方面NAS的使用场景使得我们必须考虑这套设备的功耗来节约电费。

但我们完全仍然可以利用家里淘汰下来的旧电脑主机配件来作为DIY的原材料。

定个小目标

我们希望DIY的这台NAS至少有以下几个功能：

  1. 相册备份以及管理全家人的照片。
  2. 实现家庭影音库。
  3. 实现电子图书馆。
  4. 存储各种资料。
  5. 可以在手机端操作。
  6. 便捷的可拓展性，便于后续实现其他功能。

硬件配置清单

先放出我自己DIY的NAS硬件配置清单：

序号零件型号2023年价格2025年价格购入渠道
1机箱（全新）矩阵Z3 6盘位| Dataline 6盘位| 恒煜 6盘位机箱电源打包350元350元闲鱼
2电源（全新）益衡7025b(250W)机箱电源打包350元80元闲鱼
3CPU（二手）G460060元30元闲鱼
4主板（二手）技嘉b150m-pio-si110元95元闲鱼
5硬盘（全新）海康&西数联名款（WD42PURU-78) 4T380元 & 450元400元 & 400元闲鱼&京东自营
6CPU风扇（全新）115X超薄风扇22元20元淘宝
7内存（旧电脑拆卸）金士顿DDR4 240060元60元京东自营
8引导U盘（全新）闪迪32G15元15元京东自营
总价1447元1408元

由于我们DIY的目标是普通家庭使用，所以万兆网卡，扩展卡，软路由等极客才折腾的东西不在我们的考虑范围之内。上述清单的硬盘是按照8T的大小配置的，如果用不了这么大的空间，只需要买一块即可。

机箱

机箱正反面

机箱我是淘了很久，选择了这款当时叫矩阵Z3 6盘位现在叫Dataline 6盘位或者恒煜 6盘位的机箱，选择它的原因有2点：

  1. 这款机箱是6盘位，颜值也还可以，自带2个散热风扇，自带一个小型显示屏，能够显示机箱温度和风扇的转速，而且有一个磁吸的防尘亚克力前挡板。
  2. 这款机箱自带一个全新的益恒7025b电源，而一个全新的电源大概在150-200左右，算下来这个全新的机箱也才150元。

在2023年，一款全新的6盘位定制机箱，价位基本都在500+以上，像星际蜗牛那种4盘位的又不太能入我的眼。而3D打印的机箱又没有硬盘架，且价格也较高。

这款机箱也有二手的，价格大概在200+，不过二手机箱后背板是没有像上图一样重新冲压的，只能装指定的某款主板才适配。如果想装其他主板，要自己进行切割才行。

不过经过两年的发展，现在很多3D打印的机箱卖的也很便宜，有些也挺好看的，这块根据自己的预算和需要选购即可。

需要注意的点是这款机箱装完配件以后，内部空间比较小，走线需要多费心才行。

电源

益恒7025b，可以说是小机箱或者NAS使用的标配了，1U的体积，铜牌80Plus认证，直出线缆，并且最大的亮点是静音。同时这款电源至少能支持8个盘位同时运行，转化率很高，也很省电。

CPU

由于我们需要实现家庭影音库，安装独立显卡显然有点大材小用，所以CPU必须选择带核显的才能进行硬解码。考虑到价格，我这里主要选择了G4600和i3 8100两款CPU做对比。

这两款CPU都是3.60Hz，并且都不能超频，其次两款CPU的核显都是HD630，完全足够我们硬解使用，在单线程方面，两款CPU的分数差不多，差距主要体现在多线程上面，最终我选择了价格相对便宜的G4600。

有条件的且不太在乎电费的童鞋可以直接上i3 8100，不过买cpu一定问清楚是否带核显。

型号G4600i3 8100
核心对比2核心4线程4核心4线程
单线程比较2060分（98%）2102分（100%）
多线程比较5098分（62%）8103分（100%）
TDP比较51W（78%）65W（100%）

主板

由于NAS的兴起，很多主板的价格也水涨船高，并且6个STAT口的主板价格更是飙升，毕竟一个STAT转接器就要200元！所以最终我选择了技嘉b150m-pio-si，ITX板的大小能够完美适配我选择的机箱，并且这块主板自带6STAT口，跟机箱的6盘位也完美搭配。

不过这块主板需要一点点动手能力，需要刷BIOS才能支持7代CPU。选择这款主板可以加钱让卖家刷好bios，或者自己淘宝买一个编码器来线刷。

特别注意：不要买技嘉b150m-pio-si-R3，跟技嘉b150m-pio-si是完全不同的两个主板！！

硬盘

硬盘这里不推荐买二手的企业盘，都是坑！有钱上红盘，没钱就跟着买这种监控盘就OK了。

其他

  • CPU风扇，直接淘宝买115X超薄风扇，高度在28mm（2.8cm)以内都可以，最好选择铜芯的。
  • 内存，金士顿DDR4 2400可以兼容，先锋DDR4 2400 不兼容！其他品牌未测试。
  • 引导U盘主要用来安装NAS系统，这里8G就够用，我买的32G。

总结

全部成本大概1500以内，就可以DIY一套带硬解，容量8T的NAS，如果只需要4T的容量，那整套硬件下来也才1000左右，还是极具性价比的。不过对于缺乏一定的动手能力的童鞋，最好是买品牌的成品NAS，当然价格就会高不少了。

]]> <p>自己DIY的家庭NAS已经稳定使用一年半了，最近又刷到了很多成品NAS的软广，感觉真的是把很多不懂数码的小白当韭菜割。所以我决定写一个系列性教程，供那些想要DIY但又不知如何操作的小伙伴参考，话不多说，开干！</p> 慢读《魔兽世界·部落的崛起》 https://www.xdxmblog.cn/posts/10344.html 2025-02-24T06:04:28.000Z 2025-02-24T06:04:28.000Z 权力、野心、堕落与救赎；文明的碰撞；个体与传统权威下的认知困境。花了四个晚上，一边看一边做笔记，终于看完了这本小说。小说通过霜狼氏族的酋长杜隆坦的成长经历为线索，讲述了兽人一族是如何在古尔丹的带领下走向腐化与堕落，最终沦为战争的机器：部落。

权力与堕落

“他的允诺十分诱人，令人激动，使人心生向往”面对萨格拉斯的允诺，艾瑞达的三位领袖做出了截然不同的选择：阿克蒙德和基尔加丹选择了宣誓效忠，得到了无尽的力量，可也变成了扭曲的怪物“曼阿瑞”。维纶选择了谨慎拒绝，拯救了部分艾瑞达人，却也因此遭到昔日好友基尔加丹的追杀，不得不在纳鲁的帮助下开启了逃亡之旅。

文明与冲突

兽人因为氏族隔阂一直以松散的氏族个体存在。在德莱尼人（维纶和他所拯救的人民）逃亡至此并定居的两百年间，两个种族保持着谨慎和微妙的平衡。

一次科什哈格节上，两个年幼的兽人——霜狼氏族的杜隆坦和黑石氏族的奥格瑞姆建立了兽人千百年来第一段跨越氏族的友情。

年幼的二人因为一次意外探险被德莱尼人瑞斯塔兰所救。在泰尔莫城，二人与维纶相遇，两种文明进行了短暂的交融，而这一经历也为后来的冲突埋下伏笔。

部落的崛起人物势力图

野心与背叛

“仇恨是强大的。仇恨可能是永无止境的。仇恨是可以被操纵利用的。同样，仇恨是可以被创造出来的。”在基尔加丹的诱惑下，耐奥祖以先祖之魂的名义编制谎言，配合古尔丹“自贬式表演”煽动群体情绪，两者利用兽人对荣誉的执念，将松散的兽人氏族进行统一。这种操纵也揭示了权力建构的共性：神话叙事与群体心理的精准把控。

而在这场战争的发起过程中，兽人将德莱尼的善意误解为侵略预谋，也体现了文明碰撞中“他者恐惧”的普遍性，折射出人类历史上种族矛盾的典型模式。

耐奥祖将德莱尼污名化为“灾厄源头”的手段，可谓与现实中极端民族主义的煽动策略如出一辙：当群体认同建立在对外敌的想象性仇恨上时，社会将滑向非理性深渊。

救赎、个体良知与集体狂热的对抗

“我们都在某些方面有所欠缺，这与我们的种族无关，有时弱点其实是一种尚未表现出来的力量，有时弱点则会导致我们彻底毁灭，而有的时候两者皆有。智者了解他的缺点，而且会从中吸取教训；而愚蠢的人则会任由他的弱点控制并毁灭他。”

霜狼氏族酋长杜隆坦与其他少数人对这场战争的正当性进行了质疑，但最终被“大多数人的决定”所压制。

书中通过杜隆坦的内心独白——“没有资格质疑先祖的眼光”，刻画出了个体在传统权威下的认知困境。虽然身为霜狼氏族的酋长，但在大环境的裹挟下，也不得不做出有违内心的决定，这也直接导致泰尔莫城被屠戮一空，曾经的救命恩人瑞斯塔兰战死在自己面前。

同样的场景也出现耐奥祖身上，当得知古尔丹要求部落所有人喝下恶魔之血成为恶魔的奴隶时，他写了一封密信交给了杜隆坦，试图对自己之前的行为进行救赎。最终，杜隆坦所领导的霜狼氏族拒绝喝下恶魔之血，在古尔丹与麦迪文打开通往艾泽拉斯的传送门后，霜狼氏族被流放到了奥特兰克山脉。

]]> <p>权力、野心、堕落与救赎；文明的碰撞；个体与传统权威下的认知困境。花了四个晚上，一边看一边做笔记，终于看完了这本小说。小说通过霜狼氏族的酋长杜隆坦的成长经历为线索，讲述了兽人一族是如何在古尔丹的带领下走向腐化与堕落，最终沦为战争的机器：部落。</p> Hexo + Butterfly 实现根据作者进行文章分类查询 https://www.xdxmblog.cn/posts/21905.html 2024-09-07T18:28:40.000Z 2024-09-07T18:28:40.000Z 前言

由于hexo自身并未实现多作者，包括butterfly主题也没有相关方面的设置。所以一直也无法根据作者进行文章分类。

今天抽空看了看hexo的插件开发教程，简单写了一个插件，搭配任意主题都可以实现根据作者进行文章分类查询（多人博客）效果。

安装

整个安装步骤分为三步：1.插件安装、2.主题文件修改、3.指定作者。

插件安装

在博客根目录打开git bash，输入以下命令安装hexo-generator-author3插件。

1
npm install hexo-generator-author3 --save

然后在博客的source目录下新建authors文件夹，进入authors文件，新建index.md文件并输入以下内容：

1
2
3
4
5
6
---
title: 作者
date: 2024-09-08 02:18:32
type: 'authors'
comments: false
---

主题文件修改

安装好插件以后，需要在对应的主题文件下面创建模板，便于根据模板生成对应的文件。

以butterfly主题为例：

在主题themes\butterfly\scripts\helpers\文件夹下，修改page.js文件，在文件末尾添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
hexo.extend.helper.register('authors', function (source = []) {
  let result = ''
  let authors = []
  if (source.length) {
    source.map(post => {
      if (post.author && !authors.includes(post.author)) {
        authors.push(post.author)
      }
    })
  }
  if (authors.length) {
    result += '<ul class="category-list">'
    authors.map(author => {
      let count = source.filter(post => post.author == author).length
      result += `<li class="category-list-item"><a class="category-list-link" href="/authors/${author}/">${author}</a><span class="category-list-count">${count}</span></li>`
    })
  }
  return result
})

在主题themes\butterfly\layout\文件夹下，修改page.pug文件，添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
extends includes/layout.pug

block content
  #page
    if top_img === false
      h1.page-title= page.title

    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
      //- 添加下面这句
      when 'authors'
        include includes/page/authors.pug
      //- 添加上面这句
      default
        include includes/page/default-page.pug

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

在主题themes\butterfly\layout\includes\page\文件夹下，新建authors.pug文件并输入以下内容：

1
2
.authors-list
  !=authors(site.posts)

在主题themes\butterfly\source\css\_page\文件夹下，修改categories.styl文件，第1行修改为以下内容：

1
.category-lists,.authors-list

指定作者

这一步就比较简单了，我们只需要在文章的信息里面，添加author字段，即可为该文章指定作者：

1
2
3
4
5
6
7
8
9
10
---
title: JavaScript this到底指向谁
author: 小呆
abbrlink: 45186
tags:
  - 前端面试
categories: JavaScript
date: 2023-04-07 17:36:44
updated: 2023-04-07 17:36:44
---

测试

在博客目录下，运行以下命令：

1
hexo clean & hexo g & hexo s

打开localhost:4000/authors/，就能查看到效果了。

效果图1

点击不同的作者，就能查看到该作者下的全部文章，不同的主题展示效果有差异，非butterfly主题自行写对应的模板及css即可。

PS:插件会默认根据['author','archive','index']的顺序查找对应模板，下图为archive的效果。

效果图2

美化

同样以butterfly主题为例：

在主题themes\butterfly\layout\文件夹下，新建author.pug文件，并添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
extends includes/layout.pug

block content
  if theme.author_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.authors_ui
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #author
      .article-sort-title= _p('page.authors') + ' - ' + page.author
      +articleSort(page.posts)
      include includes/pagination.pug

在主题themes\butterfly\layout\includes\header\文件夹下，修改index.pug文件，第22行添加以下内容：

1
var site_title = page.title || page.tag || page.category || page.author || config.title

在主题themes\butterfly\languages\文件夹下，修改每个文件，添加对应的多语言文字：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# default.yml  en.yml
page:
  articles: Articles
  tag: Tag
  category: Category
  archives: Archives
  authors: Authors
# zh-CN.yml
page:
  articles: 文章总览
  tag: 标签
  category: 分类
  archives: 归档
  authors: 作者
# zh-TW.yml
page:
  articles: 文章總覽
  tag: 標籤
  category: 分類
  archives: 歸檔
  authors: 作者

重新执行测试命令，查看美化后的效果：

效果图3

在主题配置文件_config.butterfly.yml中，还可以添加author_ui字段来决定是否使用主页模板来展示作者文章页。

若需使用主页模板，请使用author_ui: index

1
author_ui: # 留空或 index

最后我们在文章页内添加作者的快捷跳转入口：

修改主题themes\butterfly\layout\includes\header文件夹下，post-info.pug文件，在第28行加入以下代码：

1
2
3
4
5
6
if (page.author)
        span.post-meta-author
          span.post-meta-separator |
          i.far.fa-solid.fa-user-pen.post-meta-icon
          span.post-meta-label= _p('post.copyright.author')
          a.post-meta-categories(href="/authors" + url_for(page.author))= page.author

修改主题themes\butterfly\layout\includes\post文件夹下，post-copyright.pug文件，修改第3行代码：

1
let authorHref = page.copyright_author_href || '/authors/' + author || theme.post_copyright.author_href || config.url

效果图4

这样就可以通过文章顶部的小标识直接跳转到作者栏目下。

小结

总体实现步骤不难，主要是美化过程中主题文件比较分散，需要美化的小点比较多。但最终实现了多作者的展示效果，第一次写hexo的插件，感觉还是挺简单的。

]]> <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>由于hexo自身并未实现多作者，包括butterfly主题也没有相关方面的设置。所以一直也无法根据作者进行文章分类。</p> <p>今天抽空看了看hexo的插件开发教程，简单写了一个插件，搭配任意主题都可以实现根据作者进行文章分类查询（多人博客）效果。</p> Kindle 换美区超详细教程 https://www.xdxmblog.cn/posts/29034.html 2024-06-27T01:50:40.000Z 2024-06-27T01:50:40.000Z 前言

根据亚马逊官方消息，kindle中国运营在2024年6月30日将全面停止运营！

  1. 6月30日后，将无法继续从应用商店下载Kindle APP，以后kindle APP仅能阅读已经下载的电子书。
  2. 云端服务也将全面停止所有云端内容必须在6月30日之前下载，云端内容包含电子书及个人文档。
  3. Send to Kindle也将于6月30日关闭，包含浏览器传送、邮箱传送等所有无线传输路径，以后传输只能数据线传输。

但是，这能难倒我们国人吗？既然中国区停了，那我们换个正常运营的区是不是就行了！

于是在即将停服的前3天，通过查询资料，加上自己亲自动手，Kindle换美区成功，完美迁移，继续邮箱传书！

换区教程

第一步、备份当前Kindle图书数据

  1. 用数据线把kindle和电脑连接，打开我的电脑，找到Kindle磁盘（连接数据线时要解锁Kindle)。
  2. 找到documents文件夹，直接将整个文件夹复制一份到电脑桌面。（这个文件夹包含了电子书、浏览记录、摘要笔记等内容）

第二步、注册亚马逊美区账号

  1. 首先进入亚马逊美区（注意结尾是.com不是.cn）https://www.amazon.com/
  2. 注册美区账号（注意换个邮箱，不要用亚区的邮箱注册，163，QQ等常用邮箱都可以。
  3. 注册完成后登录，点击内容和设备，这时都是空的，不用管。

注册亚马逊美区账号

第三步、注销亚区账号，登录美区账号

这一步有两种方式，两种方式的操作只有一个区别就是是否重置设备。（初步推测是有些人美区和亚区用了同一个邮箱注册，当用同一个邮箱时，Kindle无法识别出是亚区账号还是美区账号，导致换区不成功）

我因为亚区和美区用了2个不同的账号，所以第一次没有重置，亲测也换区成功了。然后本着好奇的心态，又试了一遍重置的流程，也换区成功！

第一种（无需重置法）：

  1. 打开Kindle，点击右上角三个点，选择设置，您的账户，注销设备。
  2. 注销结束后，在kindle选择登录新账户，这里用第二步注册好的美区账号登录。
  3. 进入到设置，您的账户，查看【发送至Kindle】电子邮件地址是否变为.com结尾，进入主页查看商城是否推荐一些英文书籍。都有则换区成功！

第二种（需重置法）：

  1. 打开Kindle，点击右上角三个点，选择设置，您的账户，注销设备。

  2. 在您的账户这个选项页面中，点击右上角三个点，选择重置。

  3. 等设备重启后，会进入选择语言界面，选择English，下一步选择United States。

  4. 如果进入set up your kindle 页面，选择set up on this kindle，没有忽视（我没有这一步）。

  5. 然后会让你连WIFI，连好之后登录刚刚注册好的美区账号。

  6. 如果进入verify Account页面，打开电脑浏览器，输入第一个网址:www.amazon.com/code（没登陆的话登录一下，会提示注册您的设备，输入代码）。

    重置步骤截图

  7. 点击kindle的create new code，将生成的code输入到刚刚的网址里。

  8. 提示登录成功，点下一步，进入make this Kindle kid-friendly页面，选择no thanks（不需要儿童模式）

  9. 进入goodreads页面，选no thanks（不需要开通图书分享社交网站）

  10. 换区成功，点击右上角三个点，setting，language&dictionaries，language，简体中文。

  11. 等待重启，就会切换回中文模式。

    重置步骤截图

邮箱传书教程

邮箱传书的过程比较简单，这里简单介绍一下步骤。

  1. 登录美区亚马逊，鼠标移动到账户及心愿单，点击内容和设备。

  2. 点击首选项，点击个人文档设置。

  3. 这里会看到【发送至kindle电子邮箱】仍然是.cn结尾（因为我们选了简体中文，所以会显示.cn，无视即可）重点是只要你的kindle里的【发送至kindle电子邮箱】是.com结尾即可。

  4. 添加认可的电子邮箱，也就是白名单，用来给kindle发送邮件。
    点击首选项
    添加认可的电子邮箱

至此，就可以继续用邮箱传书给Kindle了。

引用

本文内容参考了以下文章及文档，感谢！感兴趣的同学可以进行阅读！

Kindle国区换美区其实很简单，可以先收藏 作者：阅读困难症

]]> <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>根据亚马逊官方消息，kindle中国运营在2024年6月30日将全面停止运营！</p> <ol> <li>6月30日后，将无法继续从应用商店下载Kindle APP，以后kindle APP仅能阅读已经下载的电子书。</li> <li>云端服务也将全面停止所有云端内容必须在6月30日之前下载，云端内容包含电子书及个人文档。</li> <li>Send to Kindle也将于6月30日关闭，包含浏览器传送、邮箱传送等所有无线传输路径，以后传输只能数据线传输。</li> </ol> <p>但是，这能难倒我们国人吗？既然中国区停了，那我们换个正常运营的区是不是就行了！</p> <p>于是在即将停服的前3天，通过查询资料，加上自己亲自动手，Kindle换美区成功，完美迁移，继续邮箱传书！</p> 剑指Offer(06)从头到尾打印链表 https://www.xdxmblog.cn/posts/10125.html 2023-07-17T05:30:20.000Z 2023-07-17T05:30:20.000Z 今天要练习的题目是：剑指 Offer 的第 6 题，从头到尾打印链表

题目要求

输入一个链表的头节点，从尾到头反过来返回每个节点的值（用数组返回）。

示例：

1
2
输入：head = [1,3,2]
输出：[2,3,1]

提示：

  • 0 <= 链表长度 <= 10000

解题思路

首先这道题的输入是从头到位，但是输出却是从尾到头。也就是FILO先进后出，这妥妥的就是栈结构嘛。所以我们可以遍历一遍链表，然后将每一项都存入数组中，最后反转数组即可。

栈结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} head
 * @return {number[]}
 */
var reversePrint = function (head) {
  let arr = [],
    node = head,
    ans = []
  while (node !== null) {
    arr.push(node.val)
    node = node.next
  }

  /* 不用API反转数组
    for(let i = arr.length - 1; i >= 0; i--) {
      ans.push(arr[i])
    }
  return ans
  */
  return arr.reverse() // 利用API反转数组
}

当然，利用API的话，我们还有更加简洁的写法，毕竟 JavaScript 无所不能~（偷笑）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} head
 * @return {number[]}
 */
var reversePrint = function (head) {
  let ans = [],
    node = head
  while (node !== null) {
    ans.unshift(node.val)
    node = node.next
  }
  return ans
}

既然用到了栈结构，那小呆很自然也能想到使用递归，毕竟递归本质上就是一种栈结构。

递归算法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} head
 * @return {number[]}
 */
var reversePrint = function (head) {
  if (head === null) return []
  const ans = reversePrint(head.next)
  ans.push(head.val)
  return ans
}

小结

这道题其实并不难，只要能想到栈结构，基本思路就出来了。当然也可以先把链表反转，然后在从头到尾顺序添加到数组中即可，但是如果面试题中不允许修改链表的话，这种方法就不太适合了。具体情况根据面试题要求选择对应解法即可。

引用

本文内容参考了以下书籍，感兴趣的同学可以购买正版图书进行阅读。

《剑指 Offer 第 2 版》——作者：何海涛

剑指 Offer 的第 6 题-从头到尾打印链表

]]> <p>今天要练习的题目是：剑指 Offer 的第 6 题，从头到尾打印链表</p> <h2 id="题目要求"><a href="#题目要求" class="headerlink" title="题目要求"></a>题目要求</h2><blockquote> <p>输入一个链表的头节点，从尾到头反过来返回每个节点的值（用数组返回）。</p> </blockquote> 剑指Offer(05)替换空格 https://www.xdxmblog.cn/posts/50720.html 2023-07-13T05:30:06.000Z 2023-07-13T05:30:06.000Z 今天要练习的题目是：剑指 Offer 的第 5 题，替换空格

题目要求

请实现一个函数，把字符串s中的每个空格替换成”%20”。

示例：

1
2
输入：s = "We are happy."
输出："We%20are%20happy."

提示：

  • 0 <= s 的长度 <= 10000

解题思路

这道题其实还是蛮简单的一道题，看过题目后小呆至少能想到三种方法：正则、分割、遍历。

正则

1
2
3
4
5
6
7
/**
 * @param {string} s
 * @return {string}
 */
var replaceSpace = function (s) {
  return s.replace(/\s/g, '%20')
}

分割

1
2
3
4
5
6
7
/**
 * @param {string} s
 * @return {string}
 */
var replaceSpace = function (s) {
  return s.split(' ').join('%20')
}

遍历+字符串拼接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * @param {string} s
 * @return {string}
 */
var replaceSpace = function (s) {
  let ans = ''
  for (let i = 0; i < s.length; i++) {
    if (s[i] === ' ') {
      ans += '%20'
    } else {
      ans += s[i]
    }
  }
  return ans
}

在《剑指 Offer 第 2 版》一书中，作者给出了另一种实现思路。通过计算空格的数量，对字符串的长度进行扩充，然后利用双指针去替换其中的空格。当然因为在 JavaScript 中，字符串无法直接扩充长度，所以还是要进行转换操作，这里我们只学习其中的思路即可。

老规矩，动态辅助理解：

替换空格-双指针算法

双指针

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * @param {string} s
 * @return {string}
 */
var replaceSpace = function (s) {
  let strArr = Array.from(s)
  let count = 0

  for (let i = 0; i < strArr.length; i++) {
    if (strArr[i] === ' ') {
      count++
    }
  }

  let left = strArr.length - 1
  let right = strArr.length + count * 2 - 1

  while (left >= 0) {
    if (strArr[left] === ' ') {
      strArr[right--] = '0'
      strArr[right--] = '2'
      strArr[right--] = '%'
      left--
    } else {
      strArr[right--] = strArr[left--]
    }
  }
  return strArr.join('')
}

小结

单从解题来看，其实利用现成的 API 或者遍历，要比双指针算法简单的多。并且由于 JavaScript 中字符串无法扩展长度，还是要转成数组进行操作，最终仍然要通过Array.join()方法再转换成字符串。但是双指针的这种思路，仍然值得我们去学习。

引用

本文内容参考了以下书籍，感兴趣的同学可以购买正版图书进行阅读。

《剑指 Offer 第 2 版》——作者：何海涛

剑指 Offer 的第 5 题-替换空格

]]> <p>今天要练习的题目是：剑指 Offer 的第 5 题，替换空格</p> <h2 id="题目要求"><a href="#题目要求" class="headerlink" title="题目要求"></a>题目要求</h2><blockquote> <p>请实现一个函数，把字符串<code>s</code>中的每个空格替换成”%20”。</p> </blockquote> 剑指Offer(04)二维数组中的查找 https://www.xdxmblog.cn/posts/8122.html 2023-07-08T05:29:44.000Z 2023-07-08T05:29:44.000Z 今天要练习的题目是：剑指 Offer 的第 4 题，二维数组中的查找

题目要求

在一个n * m的二维数组中，每一行都按照从左到右非递减的顺序排序，每一列都按照从上到下非递减的顺序排序。请完成一个高效的函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。

来源：力扣（LeetCode）
链接：
著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。

示例：

现有矩阵 matrix 如下：

1
2
3
4
5
6
7
[
  [1,   4,  7, 11, 15],
  [2,   5,  8, 12, 19],
  [3,   6,  9, 16, 22],
  [10, 13, 14, 17, 24],
  [18, 21, 23, 26, 30]
]

给定 target = 5，返回true。

给定 target = 20，返回false。

提示：

  • 0 <= n <= 1000
  • 0 <= m <= 1000

解题思路

这道题小呆的思路是先找出题中的二维数组规律。然后进行分析：因为这个二维数组每一行从左到右递增，每一列从上到下递增。所以我们能够得出：

  1. 某列的某个数字，该数字上方的数字都比它小。
  2. 某列的某个数字，该数字右侧的数字都比它小。

所以我们可以将这个二维数组的左下角定为原点，建立一个直角坐标轴。如果原点的数字比要查询的数字大，就往上移一位；如果原点的数字比要查询的数字小，就往右移一位。

话不多说，上图：

二维数组中额查找-坐标轴法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * @param {number[][]} matrix
 * @param {number} target
 * @return {boolean}
 */
var findNumberIn2DArray = function (matrix, target) {
  let x = matrix.length - 1,
    y = 0
  while (x >= 0 && y < matrix[0].length) {
    if (matrix[x][y] === target) {
      return true
    }
    if (matrix[x][y] > target) {
      x--
    } else {
      y++
    }
  }
  return false
}

小结

做了这么多天题，其实小呆发现解题的一个非常重要的点就是：要善于发现题目所给的规律，运用恰当的计算机逻辑、数学知识等条件。写不出来没关系，但是思维模式很重要。不要气馁，凤凰涅槃，浴火重生，我们也要有不屈不挠的坚强的意志。加油！

引用

本文内容参考了以下书籍，感兴趣的同学可以购买正版图书进行阅读。

《剑指 Offer 第 2 版》——作者：何海涛

剑指 Offer 的第 4 题-二维数组中的查找

]]> <p>今天要练习的题目是：剑指 Offer 的第 4 题，二维数组中的查找</p> <h2 id="题目要求"><a href="#题目要求" class="headerlink" title="题目要求"></a>题目要求</h2><blockquote> <p>在一个<code>n * m</code>的二维数组中，每一行都按照从左到右<strong>非递减</strong>的顺序排序，每一列都按照从上到下<strong>非递减</strong>的顺序排序。请完成一个高效的函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。</p> <p>来源：力扣（LeetCode）<br>链接：<br>著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。</p> </blockquote> 剑指Offer(03)数组中重复的数字 https://www.xdxmblog.cn/posts/18093.html 2023-07-01T03:33:12.000Z 2023-07-01T03:33:12.000Z 今天要练习的题目是：剑指 Offer 的第 3 题，数组中重复的数字

题目要求

找出数组中重复的数字。

在一个长度为n的数组nums里的所有数字都在0～n-1的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。

示例：

1
2
3
输入：
[2, 3, 1, 0, 2, 5, 3]
输出：2 或 3

提示：

  • 2 <= n <= 100000

解题思路

这道题的常规解法，就是利用哈希表，遍历数组，判断哈希表中是否包含当前值，如果包含，当前项就是重复项。这种在数组中查找重复的数字的题型，基本都可以用哈希表去解决，它的时间复杂度为O(n)，空间复杂度为O(n)。

哈希表

1
2
3
4
5
6
7
8
9
10
11
/**
 * @param {number[]} nums
 * @return {number}
 */
var findRepeatNumber = function (nums) {
  let hasMap = new Set()
  for (let num of nums) {
    if (hasSet.has(num)) return num
    hasMap.add(num)
  }
}

当然我们也可以先将数组进行排序，排序后的数组，重复的两个数字一定相邻。

排序

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * @param {number[]} nums
 * @return {number}
 */
var findRepeatNumber = function (nums) {
  nums.sort((a, b) => a - b)
  for (let i = 0; i < nums.length; i++) {
    if (nums[i] === nums[i + 1]) {
      return nums[i]
    }
  }
  return -1
}

在《剑指 Offer 第 2 版》中，作者给出了另一种思路，是小呆之前没有想到过的。因为nums里的所有数字都在0 ~ n - 1的范围呢，那不重复的数字排序后，和下标应该是一一对应的。所以遍历时当遍历到下标为i的数字时，首先比较这个数字（用m表示）是不是等于i。如果是，则接着遍历下一个数字；如果不是，则再拿它和第m个数字进行比较。如果它和第m个数字相等，就找到了一个重复的数字；如果它和第m数字不相等，就把第i个数字和第m个数字交换，把m放到属于它的位置。

老规矩，配合动图去理解更佳：

数组中重复的数字

原地交换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * @param {number[]} nums
 * @return {number}
 */
var findRepeatNumber = function (nums) {
  for (let i = 0; i < nums.length; i++) {
    while (nums[i] !== i) {
      if (nums[i] === nums[nums[i]]) {
        return nums[i]
      }
      let temp = nums[i]
      ;[nums[temp], nums[i]] = [nums[i], nums[temp]]
    }
  }
  return -1
}

注意在使用解构[nums[temp], nums[i]] = [nums[i], nums[temp]]前，声明临时变量时，末尾要加;，否则解构语句会报错。

小结

数组查找重复的数字，这种题型还是比较常见也是比较简单的，变种题型还会有查找数组中重复最多的数字，或者重复最多的次数。其实只要有了思路，基本都能写出来。当然《剑指 Offer 第 2 版》这本书中的思路也是非常能开拓视野的，感兴趣的小伙伴可以买来看看，书中的代码并非是 JavaScript，主要是开拓思路。

引用

本文内容参考了以下书籍，感兴趣的同学可以购买正版图书进行阅读。

《剑指 Offer 第 2 版》——作者：何海涛

剑指 Offer 的第 3 题-数组中重复的数字

]]> <p>今天要练习的题目是：剑指 Offer 的第 3 题，数组中重复的数字</p> <h2 id="题目要求"><a href="#题目要求" class="headerlink" title="题目要求"></a>题目要求</h2><blockquote> <p>找出数组中重复的数字。</p> <p>在一个长度为<code>n</code>的数组<code>nums</code>里的所有数字都在<code>0～n-1</code>的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。</p> </blockquote> LeetCode(118)杨辉三角 https://www.xdxmblog.cn/posts/24191.html 2023-06-26T07:19:00.000Z 2023-06-26T07:19:00.000Z 今天要练习的题目是：力扣（LeetCode)的第 118 题，杨辉三角

题目要求

给定一个非负整数*numRows，生成「杨辉三角」的前numRows*行。

在「杨辉三角」中，每个数是它左上方和右上方的数的和。

杨辉三角

示例：

1
2
3
4
5
输入: numRows = 5
输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]

输入: numRows = 1
输出: [[1]]

提示：

  • 1 <= numRows <= 30

解题思路

这道题其实官方已经给了非常容易理解的规律和图示：每个数是它左上方和右上方的数的和。

我们可以用一个二维数组来描述示例 1 的数据：

1
let list = [[1], [1, 1], [1, 2, 1], [1, 3, 3, 1], [1, 4, 6, 4, 1]]

根据上面给出的规律能够得出, 首尾的数字一定是 1, 其次从第三行开始，除去首尾，其他的数字都是它左上方和右上方的数的和，所以我们可以做出以下公式：（用i表示行，用j表示列）

  1. list[i][0] = 1 每行的第一个数字是 1
  2. list[i][j] = list[i - 1][j - 1] + list[i - 1][j] 当前行的第j个数等于上一行的j - 1 + 上一行的j
  3. list[i][i] = 1 每行的最后一个数字是 1

不难看出，这道题其实用动态规划就可以解决:（本题动态 gif 图直接看上面给的官方图即可）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * @param {number} numRows
 * @return {number[][]}
 */
var generate = function (numRows) {
  let ans = []
  for (let i = 0; i < numRows; i++) {
    ans[i] = [1] // 每一行的第一个数都是1
    for (let j = 1; j < i; j++) {
      ans[i][j] = ans[i - 1][j - 1] + ans[i - 1][j] // 当前行的第j个数等于上一行的j - 1 + 上一行的j
    }
    ans[i][i] = 1 // 每一行的最后一个数都是1
  }
  return ans
}

小结

刷题也有一段时间了，目前大部分题目都是刷的 LeetCode 热门 100 题，目前来看，简单难度的题目仔细思考还是能做出来的，但是看了几道中等难度的题目，基本上没思路的居多。只能先把同类型的简单题目多练习练习再去尝试中等难度的题目了。加油吧！

引用

力扣 LeetCode 的第 118 题-杨辉三角

]]> <p>今天要练习的题目是：力扣（LeetCode)的第 118 题，杨辉三角</p> <h2 id="题目要求"><a href="#题目要求" class="headerlink" title="题目要求"></a>题目要求</h2><blockquote> <p>给定一个非负整数*<code>numRows</code>，<em>生成「杨辉三角」的前</em><code>numRows</code>*行。</p> <p>在「杨辉三角」中，每个数是它左上方和右上方的数的和。</p> </blockquote>