背景#

在前端开发的江湖上，Vite 就像一个轻盈迅捷的剑客，以“快”和“爽”闻名。默认栖身于本地 3000 端口，简直是开发者的“专属包间”。但江湖人多，难免遇到这种情况：你刚起剑练招，发现隔壁的同门师兄已经占了你的包间。于是，你只能抱着代码，哼哼唧唧换个地方继续修炼——这种“被端口抢占”的故事，简直就是开发者的日常笑话！

例如：

1. 多人协作：团队中的多个开发者同时运行了 Vite 项目，使用了相同的端口。
2. 多项目运行：本地同时启动了多个 Vite 项目或其他服务（如 Webpack、Node.js 服务器），导致端口冲突。
3. 默认配置不足：Vite 默认没有处理端口占用的逻辑，遇到冲突会直接报错，开发中断。

为了解决这个问题，我研究了几种方法，最终采用了 detect-port 插件，实现了动态检测和自动调整端口的功能，极大地提升了开发效率。

解决方案#

1. 常见解决方法#

1.1 *手动更改端口**#

在 vite.config.ts 文件中修改 server.port 的值。例如：

​ 缺点：需要手动调整端口，效率较低，且不方便多人协作。

1.2 尝试端口范围#

一些开发者会通过运行脚本动态尝试多个端口，但编写脚本可能较繁琐且不直观。

1.3 使用第三方工具#

利用工具如 detect-port 或 portfinder，自动检测端口是否被占用并返回可用端口。

2. Detect-port 的解决方案（本人的解决方法）#

我最终采用了 detect-port 插件，因为它简单易用，能够自动检测当前端口是否被占用，并返回一个可用的端口。

Step 1: 安装 detect-port#

在项目根目录下运行以下命令：

或者使用 npm/yarn 安装：

Step 2: 配置 Vite 项目#

修改 vite.config.ts 文件，引入 detect-port，实现动态端口检测：

Step 3: 效果展示#

• 如果默认端口（如 3000）已被占用，detect-port 会自动检测下一个可用端口，例如 3001 或 3002。
• 启动时会输出实际使用的端口号：

这样，我们无需手动修改端口设置，提升了开发效率。lalala~

3. 优化点#

在实践中，我还添加了一些优化：

3.1 添加日志输出#

使用 console.log 记录端口信息，便于调试：

3.2 范围检测（可选）#

通过扩展 detect-port，可尝试在特定范围内寻找端口：

小结#

问题总结#

Vite 默认端口冲突的问题在多人协作和多项目运行的场景中非常常见。传统的手动解决方案需要频繁调整配置，显得麻烦且低效。

我的解决方案#

利用 detect-port 插件，可以轻松实现动态端口检测和分配：

• 自动检测端口冲突。
• 动态分配可用端口，提升开发效率。
• 配置简单、易于扩展。

未来优化#

• 扩展端口范围检测：可以尝试自定义检测端口范围（如 3000-3100）。
• 集成其他工具：例如结合 vite-plugin-inspect，提供更多启动信息。
• 多环境支持：为不同环境（开发、测试、生产）定制端口策略。

在团队开发中，这种自动化的方式能够显著减少端口冲突问题，提升协作效率，非常值得推广。

1 前言#

今天写项目时，遇到一个问题，我需要打开点击一个按钮打开一个弹框页面，然后通过watch去监听传进来的值，但是呢，写了watch我点击按钮只有首次打开能够监听到，尽管加上了deep: true页面也不能监听到变化，点击效果如下图：

2 代码实例#

直接上我的关键代码，这个是我弹框页面的代码：

解决后的代码：

其实，只是修改了一句话，多加了一个箭头函数~ 就可以了！他就可以每次进来就都监听了，为啥呢？请看下面的代码精读环节

3 代码精读#

3.1 直接监听 props 属性#

当你直接监听 props.currentRow 时，watch 函数会尝试将 props.currentRow 当作一个响应式引用进行监听。然而，props 本身并不是一个响应式引用，而是一个对象。因此，这种方式可能会导致以下问题：

• 非响应式引用: 如果 props.currentRow 是一个简单的值（如字符串或数字），那么 watch 可能无法正确地监听到它的变化。
• 对象或数组内部属性变化: 即使设置了 deep: true，watch 仍然可能无法正确地监听到对象或数组内部属性的变化。

3.2 使用箭头函数监听 props 属性#

使用箭头函数 () => props.currentRow 可以确保每次 props.currentRow 发生变化时，都会重新计算并触发 watch 回调。这种方式更可靠，因为它明确地告诉 watch 如何获取最新的 props.currentRow 值。

4 总结#

在正常的开发中，我们应该使用箭头函数组合watch来进行props值的变化，来确保每次 props 变化时都能重新计算。

1 前言#

最近在使用 vben admin 项目迁移时，从一个文件夹复制到另一个文件夹运行不起来，排查了一天，终于把问题排查出来了，特地记录一下，便于自己看也便于大家看。

使用项目安装包版本：

v2.11.5 https://github.com/vbenjs/vue-vben-admin/tags

2 解决方案#

2.1 软链接问题解决#

​ 问题: pnpm 使用硬链接或符号链接来管理 node_modules 中的依赖项。如果链接路径在新的文件夹或文件系统中失效，可能会导致依赖解析失败。

​ 解决方法: 尝试删除并重新安装所有依赖，确保链接正确创建。

node_modules 文件夹一定要全部删除，pnpm-lock.yaml文件也要删除，上述是用命令删除的，也可以自己手动删（所有的 node_modules 都要删）

2.2 文件路径过长问题#

问题: 在 Windows 系统上，文件路径过长（超过 260 个字符）可能导致文件系统问题，导致文件无法被正确访问。

解决方法: 尝试将项目目录移动到一个路径较短的位置，比如 C:\Projects\my-project，然后重新安装依赖。

node_modules 文件夹里面的内容路径会很长，所以整个项目文件夹所在路径不宜过长，否则路径可能会超过 260 个字符。

2.3 pnpm 缓存问题#

问题: pnpm 的缓存可能导致一些包没有被正确更新或安装。

解决方法: 清除 pnpm 的缓存：

依次执行下面命令

• 清理未使用的缓存包

• 清空整个 pnpm 的缓存存储库

2.4 pnpm 缓存深度清理#

执行下面这句话：

然后我们看到这个路径

进入这个目录，将这 3 个文件夹都手动删除

2.5 pnpm install#

删完之后，执行pnpm install

2.6 pnpm dev#

等待依赖安装完毕后，我们执行pnpm dev

程序运行成功

3 pnpm 安装依然失败解决方案#

当我们试了各种方法还是不行，诶？这个时候我们返璞归真，是不是我们的 pnpm 的源下载不了的原因呢？国内的 pnpm 下载出现网络相关的问题还是挺多的，那么让我们来替换成国内专属的 pnpm 源试试

3.1 国内可用源#

3.1.1 淘宝 pnpm 源

3.1.2 腾讯云 pnpm 源

3.1.3 cnpm 源

3.2 设置国内可用源命令#

3.3 查看设置的源#

返回信息内容是你刚刚设置地址，即设置成功。

3.4 再次 pnpm install#

ok，pnpm 相关依赖在徐徐下载，我的终于又又装成功了~

4 遗留的瑕疵#

项目虽然可以成功运行了，也可以正常写代码的了，但是终端还有几个 warning ，如果有大佬知道如何解决也可以指点一下，感谢~

前言#

今天突然想起一个奇怪的问题，记录一下，我在控制台执行内容如下：

由上图可见，2 != false 和 2 != true 返回的值竟然都是true，那么为什么呢，请看下文：

1 != 操作符的作用#

• != 是“不等于”操作符。它会在比较前执行类型转换，然后再比较两个值是否不相等。

  在 JavaScript 中，2 != false 和 2 != true 返回 true 的原因涉及到 JavaScript 中的类型转换和比较规则。

2 类型转换#

当使用 != 进行比较时，JavaScript 会尝试将比较的两个值转换为相同的类型，然后再进行比较。以下是 2 != false 和 2 != true 的过程：

2 != false#

1. false 会被转换为数字类型。根据 JavaScript 的转换规则，false 被转换为 0。
2. 现在表达式变成了 2 != 0。
3. 2 和 0 不相等，因此返回 true。

2 != true#

1. true 会被转换为数字类型。根据 JavaScript 的转换规则，true 被转换为 1。
2. 现在表达式变成了 2 != 1。
3. 2 和 1 不相等，因此返回 true。

总结#

• 2 != false 返回 true 是因为 2 和 0 不相等。
• 2 != true 返回 true 是因为 2 和 1 不相等。

这就是为什么 2 != false 和 2 != true 都会返回 true。

参考这个问题：

Vue 常用的修饰符有哪些？分别有哪些应用场景？

https://www.mianshiya.com/bank/1817900864917000193/question/1817828893659258882

1 需求引入#

直接上图，原先程序显示效果是这样：

由上图可见，element plus 的 tag 标签组件里面内容过长时，把页面都撑开了，不能自动换行，我的 tag 标签代码原先是这样写的

2 解决需求，代码实现#

先看解决效果图：

如何解决的呢，只要我们再单独写一下 css 的样式就 ok 了，看下面的 css 样式代码：

好了，直接加上上面这段 css 代码就 ok 了。

3 小结#

我当时用这个标签是显示错误信息的，后来发现 element 的 Alert 组件用于现实错误信息才比较合适，因为那个有个关闭的按钮，既然已经写了，就记录一下吧~ 希望对看文章的你也有些用吧 ~ >_< ~

前言#

我们都知道async、await 是用来将“同步函数变成异步函数，可以同步获取到里面异步函数的返回值”的，比如我们在请求一个接口的时候，这个接口的返回值是一个异步的，那我们就可以用 await 将这个异步接口返回变成同步，使我们可以同步的获取到接口的返回值，然后在紧接着的下文中就可以直接用这个接口的返回值。

一 实例 1#

循序渐进，先上一个简单的代码

如上图代码，输出的结果是

我们来浅分析一下这段代码，这段代码其实我们是模拟了一个接口请求的操作，asyncFun(value: number)返回一个 Promise，Promise 就代表这个结果是一个异步的，当我们调用这个函数时得到的结果就会等所有同步代码执行完以后才会得到这个 Promise 的结果。

如果我们调用asyncFun(value: number)这个函数想要同步获取到里面的结果，获取完这个结果后，紧接着同步执行下面的代码，那我们就要使用async、await 来解决，这是ES6 推出的新语法，好用的很啊，但是也有一些细节需要注意（下文会提到）。

所以我们在使用getValue() 这个函数调用asyncFun(value: number)时，首先在getValue()函数头部加了 async，声明咱这个函数是一个异步函数，这样在这个函数里面我们就可以用await将异步的返回值转为同步获取到了，所以await asyncFun(1); 的意思是等这里完全执行完（2 秒之后），获取到value+1这个具体数值，然后才会执行console.log('result:', result); 这句话。

所以上面这段代码最后输出的就是

二 实例 2（踩坑记录）#

同样的，咱们也是直接上代码块，大家看一下这段代码输出的是个啥：

上面这段代码就是将getValue()方法又封装了一遍，得到这个结果，然后再去输出这个结果，那么大家觉得这个是个啥值呢？可能有的人会认为输出的是result: 2666，其实不然，真正输出的结果是：

嘿嘿，这是为啥呢？这就是前面说的那个小细节了，使用 async 声明的函数其返回值是一个 Promise。通常我们写一个普通函数，想 return 啥它就能直接 return 啥，但是只要在这个函数头上加了 async ，那它就会返回 Promise 类型，这个函数的返回值就是一个异步的了，等到所有同步函数执行完以后才会等到里面的确切值。

比如这个小例子 1：

这个littleExample1()的返回值就是一个 number 类型的 1;

而看下面这个小例子 2：

嘿，这个小例子 2 返回的就是个 Promise 了，你就说细节不细节，之前都没关注过，但这个场景确实在实际使用中有用到的，然后我就说为啥返回值不是预期的值呢，结果一排查就是这个 async 的原因。

三 实例 2 解决方案#

话不多说，我们来看看 实例2 中的代码块如何处理才能得到一个我们预期的值，也就是： result: 2666 ，直接上代码：

ok，这样子就是我们预期的输出结果了，也就是我们将add666Value()前面加了个 async ，将其声明为异步函数 ，getValue()前面再加个await ,这样getValue()返回的结果就不是 Promise 了，result 就可以得到一个 number 类型的 2，number 类型+string 类型时前面的 number 类型会变成 string 类型，相当于'2'+'666'，所以最终输出的结果就是：

至此，async返回异步问题已解决。

四 加强记忆#

知识点参考：

• AsyncFunction

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction

前言#

今天在写代码时，一时觉得代码里面有一些图标，光标移到那里代码又显示处理了，这样会使那行代码忽长忽短，看起来很变扭，着实难受。早就看到了，但是不知道这个是啥原因导致的，然后就百度了一度，本以为是插件的原因，结果发现是 vscode 配置导致，下面情况问题及解决方案：

1 有图标的代码显示#

2 改完之后无图标的代码显示#

这样看起来比之前舒服多了....

3 详细解决流程#

设置->搜索 iconify，然后把下面这个 √ 去掉就 OK 了~

改为这个就 ok 啦~ 代码就会自动变为代码了~

1 背景#

最近在做动态路由相关的功能实现，涉及到一些页面跳转的功能，我们都知道返回上一页用的是 router.go(-1)，它的意思就是说返回上一个路由地址。

但是，现在有这么一个场景（技术栈：vue3+"vue-router": "^4.1.6"），比如原来我是在路由地址 A，然后我点击了路由 B，我会在前置路由钩子里面先检测当前访问的路由地址 B，如果 B 没有权限访问那么就会默认跳转地址 C（这个是 404 页面），在地址 C 的 404 页面里面有个返回上一页按钮。

我给返回上一页按钮写的事件如下：

可是呀，事实情况总是事与愿违，但我执行router.go(-1) 这句话的时候并不能直接返回我原来的路由地址（A 地址），而是返回了那个没有权限访问的 B 地址（尽管页面没有真正跳转到 B 地址，但是路由地址里面会显示），而且再点击一下才会真正返回到想要的上一页路由地址 A 页面。

显然，这不是我想要的，那咋办呢，请看我下面的实现：

2 突发奇想的实现#

我想既然跳转一次不行，那我跳转 2 次呢，实现如下：

哈哈，我运行了上面这段代码，显然不行，于是乎，我又改成了下面这样，

果然，将-1 改成了-2，就可以直接跳转到前两页的位置，竟然就是这么简单！

3 小结#

果然还是得实践。

1 背景#

最近遇到个需求，需要基于 vue3+element plus 的 upload 组件回显图片，通常我们是通过后端直接返回的 url 来回显就行了，而且在 element plus 也给出了示例：

不过，o_O，我们下面将要以 base64 的形式来填充，其实也很简单，自己构造一个这样的对象就行了，url 里面放我们 base64 字符串，然后其他的造成即可，下面请看我的实现样例：

2 实现#

• 构造一个用 base64 字符串填充的文件列表

• 将图片列表渲染到组件里

重点就是替换上面 fileList 就可。

3 小结#

ok 啦。

1 需求来源#

如图所示，这样一个查询页面，上面的条件太多，使得下面的列表展示的空间就变得很小了。所以，需要有一个东西控制，当条件太多时，就展示一个展开/收起按钮，可以控制查询条件的展开和收起。

2 实现效果图#

我们先直接来看下最终实现的效果图

如果这就是你想要的，可以继续看下面的实现关键代码

3 具体实现关键代码#

ok，代码就是上面的代码，可能少了一些变量，但是思路还是挺清晰的，主要就是通过conditionFold来控制按钮是否展示，conditionInitShowLength来控制收起时显示的默认长度。

4 技术小结#

当我们使用“展开/收起”按钮时，需要搭配row、col，列数需要是固定的，不然我们不知道“展开/收起”按钮展示及切换的时机。

1 需求#

直接上需求：

我想要直接点击下面这个“预览”按钮，然后呈现出预览图片的形式

也就是点击完“预览”按钮，会像下面这样：

ok，需求知道了，下面让我们来看看如何实现吧 ~

2 实现#

template 部分

script 部分

ok，经过上面简单几句代码，就实现了“点击按钮直接显示图片的预览形式”啦 ~

3 技术小结#

技术栈： vue3+ element plus，其中 vue3 采用的是 script setup 组合式语法的形式。

这部分功能其实在 element plus 官方文档中有写，

https://element-plus.org/zh-CN/component/image.html#image-viewer-api

不同的是，这里 element plus 并没有给出实际样例，只是用文字描述了下，咱就是说，家人们，这坑不坑，我还是看了别人的博客才知道这块的用处>_<

1 起源#

最近遇到了个这样的需求，大概就是：点击某个按钮，进入某个页面，然后再在这个页面执行某个操作（比如请求某个接口、赋初始值啥的）。

这个需求看似简单，其实也不难。但是，我遇到了个问题，就是当在那个页面点击这个按钮的时候，因为跳转路由路径是一样的原因，页面是不会刷新的，那我怎么判断我是否我是否点击了那个按钮并且跳到了这个页面呢？

于是，我想到了路由传参，通过路由传参的方式，判断这个参数是否变化了，变化了就代表这个路由再次进入了。

2 解决方案#

用 query 的方式传参，参数附上时间戳，这样每进来一次都是不同的参数

点击按钮如下操作：

在进入的那个页面增加如下代码：

ok，经过上面的操作便可以在跳转相同路由下，监听页面刷新并执行某个操作啦。

3 知识扩展-关于 Vue Router 路由传参的几种常用方式#

说到这里，vue-router 传参的几种方式也顺便总结一下吧

3.1 params 传参（显示参数）#

浏览器里路由地址显示为这样：

声明式：

编程式：

关于参数的获取：

3.2 params 传参（不显示参数）#

由于从 Vue Router 的 2022-8-22 这次更新后，便不能再用这种方式来写，关于不显示参数的传参，可以参考下面这篇博客：

https://blog.csdn.net/m0_57033755/article/details/129927829

3.3 query 传参#

浏览器里路由地址显示为这样：

声明式：

编程式：

关于参数的获取：

4 结语#

ok ,就到这里啦，对此你有何看法或想法呢，欢迎提出讨论呀~

1 需求描述#

最近遇到一个需求，就是前端页面要实时监听后端传过来的数据，同时当后端传过来这条数据时前端界面要语音播报这条数据。

2 分析与解决方案#

这里主要说说语音播报的部分。本来觉得用浏览器自带的 API 来实现直接写一句话就 ok 了，但是没想到居然有一个 bug。那就是这条语音有时候能播报，有时候就没有声音了？为什么呢，查了半天，是浏览器的安全限制的问题，需要用户交互才能播放声音，这个问题困扰了一两天，找到了如下两条解决方案：

• 第一个就是用按钮点击，当我们播报声音时，第一次播报必须得是用户用交互动作操作才行，显然我这里不能让用户点击，因为它是后台自动播报的，嘿嘿，这可难不到我，写了个模拟按钮点击事件，就 ok 啦~

• 第二种解决方案就是用其他第三方的库，不过基于浏览器的安全限制，可能也会存在无法在后台自动播放的情况，所以这里还是没有采用其他第三方的库。

3 参考链接#

官方文档：

​ https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis

其他小伙伴的博客：

​ https://blog.csdn.net/pridas/article/details/119097189

​ https://blog.csdn.net/qq_47247479/article/details/126933326

4 源码地址#

https://github.com/JACK-ZHANG-coming/frontEnd-all-knowledge/tree/master/examples/funnyDemo/a05%E8%AF%AD%E9%9F%B3%E6%92%AD%E6%8A%A5%E5%8A%9F%E8%83%BD

如果屏幕前的小伙伴有什么好的解决方案也可以分享一下哦

ts 绕开属性检查的 3 种方法#

引言#

不知道大家有没有遇到这种情况，当我们预先定义了 ts 的一些类型后，在我们真正用到时却又和原先约定的类型定义不一样，哎？那有时候我们有不想或者因为因为一些情况不好去改原来已经定义过的类型定义，这又该怎么办呢？ 不要着急，ts 为我们提供了 3 中解决方案，

请看下面：

示例代码：

如上所示，声明一个 createSquare 函数，形参类型是 SquareConfig 接口，传入的形参是{ color: "red", width: 100 }，好，这个时候是符合我们原先的 ts 类型定义的，但是当我们把入参改为{ color: "red", width12: 100 }，这个时候 ts 就会判断出入参传入有误，嘿，还智能的提示一下写 width12 是不是想传 width 这个变量

可是，如果我们真的是需要第二参数不同，那该如何嘞，请看下面的 3 种解决方式：

1 类型断言#

最简便的方法，用 as 告诉 ts 这就是我想要的，这个类型是对的，好的，那么 ts 就不会报错

2 添加一个字符串索引签名#

最佳方式

3 对象赋值转接一手#

参考：

​ https://typescript.bootcss.com/interfaces.html

前言

这是一篇关于react-router的通篇全解的文章，本文旨在阅读完本文可以对react-router有一个系统的了解——emmm原来的思路是打算这么写的，但是近日阅读了一个大佬的文章，发现最好还是学以致用，并且融入自己的思想，所以决定前面介绍react-router的一些常规知识（1-3大点），后面第4大点会写一个实例，用react-router写一个路由鉴权。第4大点最为重要，如果对react-router有些许了解的也可以直接进入第4大点。

首先，有一说一，最详细的教程还是：官网 。下面的介绍将是融入个人理解的白话文：

1 相关理解#

1.1 SPA的理解#

什么是spa？英文全拼single page web application，中文单页面Web应用。

通俗的说，点击页面中的链接不会刷新页面（浏览器左上角的那个小圆环不会转），只会做页面的局部更新，那这就是个单页面web应用。比如我们用的<a></a>标签，里面加个href='https://www.zhangqiang.hk.cn/' 属性，当我们点击那个a标签，此时页面跳转了网页，左上角那个小圆圈呼溜溜的转了，那这就不是个单页面web应用。

而ajax异步请求、react-router都是可以实现spa的、

1.2 路由的理解#

1.2.1 什么是路由?#

• 一个路由就是一个映射关系(key:value)
• key为路径, value可能是function或component

1.2.2 路由分类#

后端路由：

理解： value是function, 用来处理客户端提交的请求。 注册路由： router.get(path, function(req, res)) 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由：

浏览器端路由，value是component，用于展示页面内容。 注册路由: <Route path="/test" component={Test}> 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

react-router-dom的理解:

• react的一个插件库。
• 专门用来实现一个SPA应用。
• 基于react的项目基本都会用到此库。

2 react-router-v5#

2.1 react-router-dom相关API#

2.1.1 内置组件#

2.1.2 其它#

• history对象

• match对象

• withRouter函数

2.2 基本路由使用#

2.2.1 安装react-router-dom#

2.2.2 嵌套路由使用#

2.2.3 向路由组件传递参数数据#

2.2.4 多种路由跳转方式#

3 react-router-v6#

4 实例-react-router实现前端路由鉴权#

相关参考：

​ 使用React-Router实现前端路由鉴权：https://juejin.cn/post/6854573217445740557#comment

写在前面#

• 本文对应的 github 代码仓库地址

  https://github.com/front-end-study-GoGoGo/ajax-study-demo

• 本文对应的视频教程地址：

  https://www.bilibili.com/video/BV1yW4y137R5

• 博主个人前端网站：zhangqiang.hk.cn

• 欢迎加入博主的前端学习 qq 交流群：：706947563，专注前端开发，共同学习进步啊 ~

简介#

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

XMLHttpRequest 只是实现 Ajax 的一种方式。

上面是来自菜鸟教程的简介，用白话文概括呢，ajax 是 javascript 里面内置的一种异步方法实现方式，用 XMLHttpRequest 对象可以来实现这种异步方式。目前我们主流的前端接口请求方式fetch、axios 都是基于 ajax 封装的，所以了解 ajax 的使用对于解读 fetch 与 axios 的源码也是必不可少的。

In short，学习 ajax 的使用是很重要的。

0 准备工作#

首先，执行个小目标，我们在本地先快速起一个后端服务，使前端可以调到这个接口，很简单，请看下面的操作：

打开我们的 vscode（如果你使用的是 webstorm 也是一样的操作，不过很推荐 vscode 呀，干净简洁很喜欢~）,执行npm init初始化一下 npm 配置（在这之前要确保电脑上已经安装 node.js，可以在终端输入 node -v 查看，有版本号说明已经安装）：

0.1 npm 初始化

• node -v 有版本号显示说明已经安装 node.js

• 执行 npm init，一路回车就完事了，然后我们可以看到所在文件夹里面会有个 package.json 文件，说明 npm init 初始化成功。之后安装的 npm 包版本都可以在 package.json 里面查看到。

0.2 安装 express

在终端执行npm install express，安装 express，这是一个库可以让我们用 node.js 启动一个后端服务器，当这个后端服务启动的时候，我们就可以通过前端代码请求它暴露出来的接口访问到相应的后端服务。

0.2.1 如果安装成功的小伙伴不用看这个小点，我在安装的时候遇到了这个报错，分析一下是因为 npm 的源是国外的原因，所以我将其设置成了淘宝镜像

设置淘宝镜像命令,在终端执行（下面图片里面有）：

0.2.1 安装成功

顺便再装个库，npm install body-parser ， 后面会有用，针对 post 请求的

0.2.2 启动 node 后端服务

我们创建一个文件夹 src，在 src 下面建个 server.js 的文件，然后再粘贴下方的代码到 server.js 文件里面

终端进入 src 这个文件夹，然后执行node server.js，启动后端服务

如上图，我们已经在本地打开了 8000 端口，同时写了个/server get 类型的接口地址，我们可以直接通过浏览器来访问http://127.0.0.1:8000/server测试一下接口，如果我们看到下图这样，说明后端服务开启成功~

ok，后端服务启动完毕！~ 还是很厉害的嘛，我们进入下个流程~~ 前端写 ajax 请求。

1 写个简单的 ajax 请求#

1.1 get 请求 与 post 请求#

1.1.1 前端代码#

1.1.2 后端代码#

1.2.3 运行结果#

2 相关参考手册#

2.1 XMLHttpRequest 对象的方法#

2.2 XMLHttpRequest 对象的属性#

2.3 http 状态码#

1xx: 信息#

2xx: 成功#

3xx: 重定向#

4xx: 客户端错误#

5xx: 服务器错误#

• map()方法只能应用于数组遍历。如果想要遍历对象，可将对象转化为数组对象再其进行遍历。

• 输出结果：

• react官网 https://react.docschina.org/docs/getting-started.html

运行结果图：

一、安装vscode#

见链接：https://www.cnblogs.com/csji/p/13558221.html。

二、安装node、npm、yarn（采用淘宝镜像）#

1.安装node#

见链接：https://blog.csdn.net/bbj12345678/article/details/106741758

• 检测是否已经安装 键盘同时按下win+r，然后输入cmd，在黑窗口内输入：node -v

会出现相应的版本号，说明已经安装好了。

2.安装yarn#

见链接：https://blog.csdn.net/qq_45011985/article/details/105566648

• 检测是否已经安装 键盘同时按下win+r，然后输入cmd，在黑窗口内输入：yarn -v

三、拉取React脚手架，运行第一个项目#

• 官网教程：
• 在vscode终端里面运行下面的语句：

• 视频教程：https://www.bilibili.com/video/BV1CK4y1p7fb/

等待加载完毕，我们再输入 yarn run start 运行即可。

总结#

待更新。