# VirtualClassroomTool

**Repository Path**: lveMonsi/virtual-classroom-tool

## Basic Information

- **Project Name**: VirtualClassroomTool
- **Description**: 虚拟教研室
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-11
- **Last Updated**: 2025-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

todo 晚点Typora写好再复制上来

工具开发模板 SpringIOC容器版本
主要是为了方便工具开发
注意action并没有受Spring管理

可以使用切面技术

```xml
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-aspects</artifactId>
    <version>4.3.7.RELEASE</version>
</dependency>
```

### :warning:前端项目版本说明

- NodeJS版本：`'^18.0.0 || >=20.0.0'`
- yarn版本：`>=1.22.19`【如果使用yarn】
- npm版本：`>=8.0.0`【如果使用npm】
- vite版本：`^5.0.0`，此版本必须要求NodeJS版本在18或20及以上。（来自：https://cn.vitejs.dev/guide/）

### 前端项目启动前的配置

#### 前端修改工具名称

在项目目录下的`.env`文件里修改`VITE_APP_TITLE`属性的值，例如：

```properties
VITE_APP_TITLE=XXX工具
```

#### 配置ESLint和Prettier实现代码规范化（可选）

项目中的ESLint和Prettier的依赖和配置都已搭好，为了使其生效，我们需要安装VS Code插件 `ESLint` 和 `Prettier`。

安装好两个插件后，在项目根目录添加`.vscode`文件夹并且新建一个`settings.json`文件

```bash
# Create directory
mkdir .vscode
# Create settings.json file
touch .vscode/settings.json
```

配置保存时使用`Prettier`对代码进行格式化, 在`settings.json`文件中增加如下内容:

```json
// settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.fixAll": true
  }
}
```

这样可以通过键盘快捷键或在保存文件时自动从编辑器中运行 `Prettier`，从而充分利用它。当一行在编码时变得太长，以至于不适合你的屏幕时，只需按保存快捷键，就可以看到它神奇地被包裹成多行！或者，当你粘贴一些代码时，缩进会变得一团糟，让 `Prettier` 在不离开编辑器的情况下为你修复它。

最后要记得配置使用格式化，在`.vue`或`.ts`等文件右键，然后执行如下操作：

![image-20231223175329639](./images/Readme.assets/image-20231223175329639.png)

![image-20231223175425941](./images/Readme.assets/image-20231223175425941.png)

### 后端项目启动前的配置

#### 修改项目名称

1. 第一步：修改项目名称

   - 修改 ToolTemplate-Java  ——–>  自定义项目名

2. 第二步：修改包名

3. 第三步：修改`com.wetoband.template.action`包下的类名

   - ToolTemplateAction ——> 自定义类名

   - 同时修改`src`下的`config.xml`的配置：

     ```diff
     <?xml version="1.0" encoding="UTF-8"?>
     <Config>
     	<!-- 开发包版本，重要参数，如不了解作用，切勿修改 -->
     	<SDKVersion>3.0</SDKVersion>
     	<!-- 需要加载器加载的类(入口类)的全名 -->
     +	<EntryClass>action包下的类的全路径</EntryClass>
     	<!-- 工具配置参数 -->
     	<toolConfig>{aid:"21419389378723787447"}</toolConfig>
     	<!-- 普通声明式调用配置 -->
     	<UrlAlias name="abc">http://127.0.0.1:8080</UrlAlias>
     </Config>
     ```

4. 修改`pom.xml`的名称

#### 导入项目依赖的jar包

1. 导入项目路径下的`lib`
2. 导入项目路径下的`WebRoot/WEB-INF/lib`

#### 设置WebRoot为项目的web

1. 进入idea的Project Structure，找到Modules下的项目并展开
2. 点击上面的加号，在菜单中选中`web`
3. 修改弹出的右侧设置
   1. 修改`Deployment Descriptors`的Path为WebRoot下的web.xml
   2. 修改`Web Resource Directories`下的`Web Resource Director`的路径为WebRoot路径

#### 添加Tomcat服务器

点击idea界面右上角的`Add Configuration`，进去添加一个Tomcat服务器就可以运行了。

#### 修改AppConfig.java的ComponentScan注解

```java
@ComponentScan("Java项目的包路径")
```

如模板中的就是：`com.wetoband.template`

### 启动项目

#### 启动前端

- 第一步：yarn install

- 第二步：yarn run dev

#### 启动后端

- 第一步：在idea中配置tomcat

- 第二步：启动tomcat

#### 运行成功效果

分别点击页面的`发送GET请求`和`发送POST请求`按钮，出现如下结果即为成功：

![image-20231229194853913](./images/Readme.assets/image-20231229194853913.png)



![image-20231229194927753](./images/Readme.assets/image-20231229194927753.png)

切换About路由页面：

![image-20231229195132053](./images/Readme.assets/image-20231229195132053.png)

切换Background路由：

![bg](./images/Readme.assets/bg.png)

### 打包项目

#### 打包前端

- 第一步：执行 yarn run build 或 yarn build 命令，会在项目目录下生成一个dist目录

#### 打包后端

- 第一步：把前端生成的dist目录下的所有文件放到后端项目的WebRoot目录下的resource目录中
- 第二步：执行Maven的 clean 和 package 指令，会在target目录下生成一个jar包文件。

### :warning:注意事项

1. 项目路径不可为中文路径；
2. 前端路由最好使用Hash；