JianghuJS

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

重点概念

  • NodeJS
  • JianghuJS

Mac电脑的安装步骤

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

第1步：安装NodeJS

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

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

2.1. 打开命令行工具

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

(1) 方法一：点按程序坞（Dock）中的“启动台”图标 ，在搜索栏中键入“终端”，然后点按“终端”。
(2) 方法二：在“访达”（Finder）中，打开“/应用程序/实用工具”文件夹，然后连按“终端”。

2.2. 安装jianghu-init

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

  1. $ npm install -g jianghu-init@latest

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

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

2.3. 创建一个JianghuJS项目

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

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

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

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

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

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

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

  1.     ✔ 目录切换 my-jh-project     
  2.          [mysql importer] 94.39% Completed
  3.     ✔ 初始化`数据库基本表和数据`完成
  4.     ✔ usage:
  5.           - cd /xxx/my-jh-project
  6.           - npm install
  7.           - npm start / npm run dev
  8.     ✔ 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这个项目需要用到的代码库：

  1. $ npm install

(4) 启动并运行项目

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

  1. $ npm run dev

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

  1. 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操作。

本课资源

点击此处下载示范代码.