(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
在命令提示符中,输入以下的命令,然后按回车键开始运行:
$ npm install -g jianghu-init@latest
当你看到以下的信息,说明安装成功了:
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) 在浏览器里打开项目页面:
打开浏览器,你可以在地址栏里输入:
然后你就会看到项目的登录页面。使用以下的用户名和密码登录:
- 用户名:admin
- 密码:123456
登录进去以后,你就可以看到示范的班级管理系统了。
作业
下载并安装NodeJS。安装JianghuJS启动工具jianghu-init
。创建一个JianghuJS项目my-jh-project
。
在新创建的项目中,试试修改文件protocolDemo.html
。把其中的内容改为Vuetify的数据表格CRUD操作。