# webuiex1

**Repository Path**: fieldyang/webuiex1

## Basic Information

- **Project Name**: webuiex1
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-08
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebUI 综合实验1

## 概述
一个简易的学生信息管理系统，前端使用`vue3 + element plus`，后端使用[noomi](https://gitee.com/weblabsw/noomijs)+[relaen](https://gitee.com/weblabsw/relaendev)搭建，noomi和relaen为`杨雷团队`开源框架。

## 安装环境

### node安装
node下载地址：`https://nodejs.cn/download`。   
下载安装后，运行命令 `node -v`，显示版本号，则表示node安装成功。

### typescript安装
输入命令
```
npm i typescript -g
```

## 更换npm源
npm 源默认地址为：`https://registry.npmjs.org/`。

可能存在访问受限，更新npm源命令如下：
```
npm config set registry https://registry.npmmirror.com/
```

## 课程安排
### 课程1：数据库及模型
1. 安装mysql；  
2. 创建数据库；
3. 导入sql；
4. 通过relaen-cli 创建entity，并进行修改***

创建一个目录  
运行 `npm i relaen-cli -g`, 安装`relaen-cli`工具   
运行 `relaen-cli -i` ，初始化relaen-cli初始配置   
修改 生成的 `config.json`文件对应的user、password、database三项为你数据库实际配置  
运行 `relaen-cli -g` ， 生成entity类在`out`目录。  
拷贝到所有entity类文件到工程目录 `/server/dao/entity`。  
对entity类进行少量修改，参考源码。 

5. 创建模型
参考`server/model`，通常每个entity类对应一个模型类。

### 课程2：创建 route和service层
route为浏览器访问web层的入口地址  
service为业务层  
通过路由路径进行测试。  
***具体代码参考源码***   

### 课程3：页面搭建1
搭建`专业、班级`相关页面，并接入服务器进行测试。

### 课程4：页面搭建2
搭建`学生`相关页面，并接入服务器进行测试。

## IDE
建议选择VS Code，后续采用VS Code环境进行阐述。

## 安装依赖包
下载源码后，在目标目录下，执行 `npm i`进行依赖包安装。

## 运行
查看VS Code版本，如果为中文版，修改`.vscode/launch.json`文件
```json
"preLaunchTask": "tsc: build - tsconfig.json",
```
为
```json
"preLaunchTask": "tsc: 构建 - tsconfig.json",
```

└──
## 目录结构
```
├──.vscode: vscode配置
|  └──launch.json：启动配置
├──db 数据库相关
|  ├──webui.pdm：powerdesigner 物理模型
|  └──webui.sql：sql文件（mysql版本） 
├──dist：编译后的服务端代码
├──node_modules：第三方包
├──pagesrc：前端源代码  
├──pages：  编译后的前端代码  
└──server： 服务端  
|  ├──config：服务端配置文件  
|  |  ├──web.json:    Web配置文件
|  |  └──relaen.json：数据库配置文件  
|  └──module：服务器代码目录   
|     ├──model：模型  
|     ├──route：路由  
|     ├──service：业务层  
|     └──dao：DAO层
├──package.json: npm package配置文件
├──tsconfig.app.json: vite ts编译配置文件
├──tsconfig.json： node ts编译配置文件
└──vite.config.ts：vite配置文件
```
## 数据库
### mysql安装
自行百度

### 数据库创建
通过mysql终端进入命令行
```sql
create database webui default character set utf8;
use webui;
source your path\webui.sql
# your path 是webui.sql存储路径
# 修改 native password
use mysql;
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';
```

### 数据库配置
`server/config/relaen.json`文件第7、8行，修改username和password为你的数据库账号和密码

## 编译
### 服务端编译
运行命令 `tsc`

### 页面编译
运行命令 `npm run vitebuild`


## 运行

打开app.ts文件，按`F5`运行应用。  
打开浏览器，输入`localhost:5118` 。

## 服务器地址
### student
|功能 | url | 参数 | 返回 |
|-|-|-|-|
| 添加或修改学生信息 | /student/save | 查看MStudent |  {} |
| 删除学生信息 | /student/delete | ids=1,2,3,...| {success:true} |
| 通过id查询学生详情 | /student/findbyid | studentId=1 | MStudent 对应信息 |
| 根据条件查询单个学生 | /student/query | conditions(条件对象，可为空),fields(查询字段数字，可为空) | {success:true,result:学生信息对象} |
| 根据条件查询多个学生 | /student/querylist | conditions(条件对象，可为空),fields(查询字段数字，可为空) | {success:true,result:学生信息对象数组} |
| 获取班级学生列表 | /student/queryclazzstudents | clazz:{clazzId:1} | {success:true,result:学生信息数组} |
### clazz
|功能 | url | 参数 | 返回 |
|-|-|-|-|
| 添加或修改班级信息 | /clazz/save | 查看MClazz |  {} |
| 删除班级信息 | /clazz/delete | ids=1,2,3,...| {success:true} |
| 通过id查询班级详情 | /clazz/findbyid | studentId=1 | MClazz 对应信息 |
| 根据条件查询单个班级 | /clazz/query | conditions(条件对象，可为空),fields(查询字段数字，可为空) | {success:true,result:班级信息对象} |
| 根据条件查询多个班级 | /clazz/querylist | conditions(条件对象，可为空),fields(查询字段数字，可为空) | {success:true,result:班级信息对象数组} |
| 设置班长 | /clazz/setmonitor | clazzId:1,monitor:{studentId:1} | {success:true} |
| 设置书记 | /clazz/setsecretary | clazzId:1,secretary:{studentId:1} | {success:true} |

### major
|功能 | url | 参数 | 返回 |
|-|-|-|-|
| 添加或修改专业信息 | /major/save | 查看MMajor |  {} |
| 删除专业信息 | /major/delete | ids=1,2,3,...| {success:true} |
| 通过id查询专业详情 | /major/findbyid | studentId=1 | MMajor 对应信息 |
| 根据条件查询单个专业 | /major/query | conditions(条件对象，可为空),fields(查询字段数字，可为空) | {success:true,result:专业对象} |
| 根据条件查询多个专业 | /major/querylist | conditions(条件对象，可为空),fields(查询字段数字，可为空) | {success:true,result:专业对象数组} |