(Windows版)安装NodeJS与启动JianghuJS项目

重点概念

NodeJS
JianghuJS

Windows电脑的安装步骤

以下部分介绍如何在Windows电脑上安装NodeJS以及启动JianghuJS项目。如果你用的是Mac电脑，请看这篇文章：https://cn.openjianghu.org/doc/page/article/10155

第1步：安装NodeJS

点击https://nodejs.org/zh-cn/download/ ，下载并安装Windows安装包。这次的课程，我们使用的版本是16.15.1。

第2步：安装JianghuJS启动工具`jianghu-init`

2.1. 打开命令行工具

在接下来的步骤中，我们会使用命令行工具输入命令，来安装和启动JianghuJS项目。在Windows电脑中，命令行工具叫做“命令提示符”。你可以用以下的方法打开命令提示符

（1）方法一：点击开始菜单，找到“Windows系统”，点击打开“命令提示符”。
（2）方法二：在任务栏上，点击“搜索框”，输入“命令提示符”，或者“cmd”，在显示的结果中，点击“命令提示符”。
（3）方法三：在键盘上按住Windows键 + R键，在弹出的对话框里输入“cmd”，然后按回车键。

2.2. 安装`jianghu-init`

在命令提示符中，输入以下的命令，然后按回车键开始运行：

$ npm install -g @jianghujs/jianghu-init

当你看到以下的信息，说明安装成功了：

changed 494 packages, and audited 495 packages in 30s
23 packages are looking for funding
  run `npm fund` for details
9 vulnerabilities (2 moderate, 5 high, 2 critical)
To address all issues (including breaking changes), run:
  npm audit fix --force
Run `npm audit` for details.

2.3. 创建一个JianghuJS项目

jianghu-init工具可以帮助你快速启动一个JianghuJS项目。这个项目是一个学生班级管理系统，包括一系列页面代码和MySQL数据库的数据。

在命令提示符里，输入以下的命令：

$ cd Desktop
$ jianghu-init project --type=xiaoapp my-jh-project

注意：在命令提示符里，当前所在的文件夹很重要。我们要在桌面文件夹创建这个JianghuJS项目。所以，在启动JianghuJS项目之前，我们需要先换到桌面文件夹里。

在这个过程中，jianghu-init会提示你输入这个项目的相关配置：

    ? 数据库IP： 127.0.0.1          // 不需要改，按回车键继续
    ? 数据库端口： 3306            // 不需要改，按回车键继续
    ? 数据库账号： root            // 不需要改，按回车键继续
    ? 数据库密码：123456            // 默认密码，也不需要改，按回车键继续

当你看到以下的信息，说明项目已经启动成功了：

    ✔ 目录切换 my-jh-project     
         [mysql importer] 94.39% Completed
    ✔ 初始化`数据库基本表和数据`完成
    ✔ usage:
          - cd /xxx/my-jh-project
          - npm install
          - npm start / npm run dev
    ✔ jianghu init project is success

接下来，你就可以在桌面文件夹里，看到新创建的项目my-jh-project了。

2.4. 启动并运行新创建的JianghuJS项目

从这一步开始，你需要使用VScode来启动和运行新创建的项目。

(1) 打开VScode，使用菜单栏上的“文件” >> “打开文件夹”，来打开桌面上新创建的项目文件夹my-jh-project。

(2) 打开VScode的命令行工具：

VScode也有一个命令行工具，叫做“终端”。你可以用以下的几个方法来打开终端：

使用快捷键 Ctrl键 + ` 键来打开终端
点击菜单栏上的 “查看” >> “终端”
点击菜单栏上的“终端” >> “新建终端”

打开终端以后，你会在VScode的窗口下半部分，看到一个新打开的命令行工具，这就是VScode的终端工具。

(3) 安装项目所需要的其他代码库

在终端里，运行以下的命令，来安装my-jh-project这个项目需要用到的代码库：

$ npm install

(4) 启动并运行项目

接下来，你就可以运行以下的命令来启动项目了：

$ npm run dev

当你在终端里看到类似于以下的信息时，说明项目已经启动成功了：

2022-06-23 02:35:23,693 INFO 20116 [master] egg-jianghu started on http://127.0.0.1:7001 (5012ms)

(5) 在浏览器里打开项目页面：

打开浏览器，你可以在地址栏里输入：

http://127.0.0.1:7001

然后你就会看到项目的登录页面。使用以下的用户名和密码登录：

用户名：admin
密码：123456

登录进去以后，你就可以看到示范的班级管理系统了。

作业

下载并安装NodeJS。安装JianghuJS启动工具jianghu-init。创建一个JianghuJS项目my-jh-project。

在新创建的项目中，试试修改文件protocolDemo.html。把其中的内容改为Vuetify的数据表格CRUD操作。

本课资源

点击此处下载示范代码.

## 重点概念

- NodeJS
- JianghuJS

## Windows电脑的安装步骤

以下部分介绍如何在Windows电脑上安装NodeJS以及启动JianghuJS项目。如果你用的是Mac电脑，请看这篇文章：https://cn.openjianghu.org/doc/page/article/10155

### 第1步：安装NodeJS

点击https://nodejs.org/zh-cn/download/ ，下载并安装Windows安装包。这次的课程，我们使用的版本是16.15.1。

### 第2步：安装JianghuJS启动工具`jianghu-init`

#### 2.1. 打开命令行工具

在接下来的步骤中，我们会使用命令行工具输入命令，来安装和启动JianghuJS项目。在Windows电脑中，命令行工具叫做“命令提示符”。你可以用以下的方法打开命令提示符

（1）方法一：点击开始菜单，找到“Windows系统”，点击打开“命令提示符”。
（2）方法二：在任务栏上，点击“搜索框”，输入“命令提示符”，或者“cmd”，在显示的结果中，点击“命令提示符”。
（3）方法三：在键盘上按住Windows键 + R键，在弹出的对话框里输入“cmd”，然后按回车键。

#### 2.2. 安装`jianghu-init`

在命令提示符中，输入以下的命令，然后按回车键开始运行：

```sh
$ npm install -g @jianghujs/jianghu-init
```

当你看到以下的信息，说明安装成功了：

```sh
changed 494 packages, and audited 495 packages in 30s

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

9 vulnerabilities (2 moderate, 5 high, 2 critical)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
```

#### 2.3. 创建一个JianghuJS项目

`jianghu-init`工具可以帮助你快速启动一个JianghuJS项目。这个项目是一个学生班级管理系统，包括一系列页面代码和MySQL数据库的数据。

在命令提示符里，输入以下的命令：

```sh
$ cd Desktop
$ jianghu-init project --type=xiaoapp my-jh-project
```

注意：在命令提示符里，当前所在的文件夹很重要。我们要在桌面文件夹创建这个JianghuJS项目。所以，在启动JianghuJS项目之前，我们需要先换到桌面文件夹里。

在这个过程中，`jianghu-init`会提示你输入这个项目的相关配置：

```sh
	? 数据库IP： 127.0.0.1		  // 不需要改，按回车键继续
	? 数据库端口： 3306			// 不需要改，按回车键继续
	? 数据库账号： root			// 不需要改，按回车键继续
	? 数据库密码：123456			// 默认密码，也不需要改，按回车键继续
```

当你看到以下的信息，说明项目已经启动成功了：

```sh
	✔ 目录切换 my-jh-project	 
		 [mysql importer] 94.39% Completed
	✔ 初始化`数据库基本表和数据`完成
	✔ usage:
		  - cd /xxx/my-jh-project
		  - npm install
		  - npm start / npm run dev
	✔ jianghu init project is success
```

接下来，你就可以在桌面文件夹里，看到新创建的项目`my-jh-project`了。

#### 2.4. 启动并运行新创建的JianghuJS项目

从这一步开始，你需要使用VScode来启动和运行新创建的项目。

(1) 打开VScode，使用菜单栏上的“文件” >> “打开文件夹”，来打开桌面上新创建的项目文件夹`my-jh-project`。

(2) 打开VScode的命令行工具：

VScode也有一个命令行工具，叫做“终端”。你可以用以下的几个方法来打开终端：

- 使用快捷键 Ctrl键 + \` 键 来打开终端
- 点击菜单栏上的 “查看” >> “终端”
- 点击菜单栏上的“终端” >> “新建终端”

打开终端以后，你会在VScode的窗口下半部分，看到一个新打开的命令行工具，这就是VScode的终端工具。

(3) 安装项目所需要的其他代码库

在终端里，运行以下的命令，来安装`my-jh-project`这个项目需要用到的代码库：

```sh
$ npm install
```

(4) 启动并运行项目

接下来，你就可以运行以下的命令来启动项目了：

```sh
$ npm run dev
```

当你在终端里看到类似于以下的信息时，说明项目已经启动成功了：

```sh
2022-06-23 02:35:23,693 INFO 20116 [master] egg-jianghu started on http://127.0.0.1:7001 (5012ms)
```

(5) 在浏览器里打开项目页面：

打开浏览器，你可以在地址栏里输入：

http://127.0.0.1:7001

然后你就会看到项目的登录页面。使用以下的用户名和密码登录：

- 用户名：admin
- 密码：123456

登录进去以后，你就可以看到示范的班级管理系统了。

## 作业

下载并安装NodeJS。安装JianghuJS启动工具`jianghu-init`。创建一个JianghuJS项目`my-jh-project`。

在新创建的项目中，试试修改文件`protocolDemo.html`。把其中的内容改为Vuetify的数据表格CRUD操作。

## 本课资源

[点击此处下载示范代码](https://dl.openjianghu.org/training/donlowd-code-it-training-level2-lesson04-2022-06-23.zip "点击此处下载示范代码").