# SOSD 前端开发测试项目

## WINDOW开发指南

哈喽，各位小伙伴们，大家好。本节主要介绍如何在Window环境下搭建前端需要的开发软件：

### 宇宙最好用的编辑器

首先你需要安装目前最流行的VSCode编辑器（当然如果你是Sublime Text选手也是可以自行探索，此外我们不推荐使用WebStorm这类重量级选手），其下载地址为：
https://code.visualstudio.com/
按照安装包的指示进行安装，这里推荐安装过程中`将code命令加入到PATH`这个选项钩上～

### 安装NodeJS版本控制工具

在日常的开发环境，我们主要使用的是NodeJS16、18这两个版本，因此我们需要一个NODEJS版本控制工具。在Linux或者Mac环境下我们可以选择
```bash
npm install -g n
```
但遗憾的是，window环境下并没有此工具包。
因此，在Window下我们推荐使用nvm管理工具：
打开https://github.com/coreybutler/nvm-windows网页，点击右侧的Releases
![alt text](docs/image.png)  
在对应版本下的Assets文件中选择nvm-setup.exe并下载。当下载完成后按照安装指示进行安装即可。

### 安装Node18

本项目采用了最新的Vite以及Vue2.7版本，Vite项目需要在Node18+以上的版本进行运行，因此我们需要先安装一个node18。
```bash
nvm install 18
```
当执行这段命令后会提示我们使用命令：
```bash
nvm use 18
```
来切换到node18版本

### 安装包管理工具

vite官方使用的是pnpm包管理，但由于本项目采用的是yarn包管理，并且有对应的yarn.lock文件，因此在开发本项目时仍需要下载yarn v1版本。
https://classic.yarnpkg.com/en/docs/install
按照官方经典版的文档使用
```bash
npm install --global yarn
```
执行此命令后将会安装yarn到全局的node_modules中（全局node_modules会保存在用户目录下）

### 下载本项目的源码

1. 首先你需要安装git这个版本控制软件（注意git是版本控制客户端软件、而github只是git的一个服务端网站，两者并不相同）   

    官方网站：https://git-scm.com/
    下载对应的软件即可（如果下载过慢，可以考虑使用科学兴国上网工具）

2. GITHUB上FORK本项目（FORK将会在你自己的空间下创建一个跟本项目同名的项目，你的项目你做主）

3. GITHUB上在你FORK的项目设置中邀请你的小伙伴一起加入开发，并设置小伙伴的权限为Maintainer。  
![alt text](docs/image2.png)  

4. 克隆（clone）你FORK的项目到本地中：  
    ```bash
    git clone {你的项目}
    ```  
    {你的项目}替换成你FORK项目github地址，请勿CLONE本项目！格式类似于这样的：https://github.com/Fuzhou-U-ACM-SOSD/SOSDfe_dev.git

## 项目开发

本节将介绍如何进行前端开发：
1. 首先进入到项目所在的📁，并执行下述命令：
    ```bash
    code SOSDfe_dev
    ```
    该命令将会用VSCode打开本项目

2. 根据提示安装好Vue的插件Volar

3. 安装依赖
    ```bash
    yarn
    ```
    该命令执行后，此时项目下将会存在一个node_modules文件夹

4. 观察项目的package.json
    该文件将会包含项目的所有依赖信息以及脚本信息，其中项目的脚本都在scripts这个属性中
    ```json
    {
        "scripts": {
            "dev": "vite",
            "build": "vite build",
            "preview": "vite preview"
        },
    }
    ```

5. 启动调试服务器
    ```bash
    yarn dev
    ```

6. 🎉恭喜你成功地运行了本项目

## 项目的结构介绍

本节将主要介绍项目的结构：  
项目的主要源码在📁`src`中，主要包括`assets`/`views`/`styles`/`components`/`routes`/`stores`  
`views`放着页面，一个页面对应该文件夹下的一个文件；  
`components`中放着`views`中使用到的组件，所有组件都放在这里，并和`views`中的路径一一对应；  
`styles`放着全局的样式；  
`assets`放着需要在代码中调用的静态资源；  
`routes`放着路由信息； 
`stores`放着全局存储信息。

## 部署该项目（以下操作请确保在实验室网络下执行）

本节中你需要安装好Docker Client端并已配置好了远程Context上下文。

1. 构建本项目的生产代码
    ```bash
    yarn build
    ```
    执行命令后如果没有任何错误，则本项目下会有个dist文件夹

2. 修改docker-compose.yml中的PORT
    ```yaml
    "8081:80"
    ```
    将8081修改为你要开放的端口，你可以通过使用`docker ps`命令查看服务端已有的服务的端口，将该端口设置为与服务端应用都不冲突的端口即可，通常设置的范围是8000-8999

3. 执行部署
    ```bash
    docker compose up -d --build
    ```
    如果命令执行失败可以尝试
    ```bash
    docker-compose up -d --build
    ```

4. 访问测试服务器网站
    http://59.77.134.42:{port}

## 代码提交注释规范

我们推荐使用https://github.com/commitizen/cz-cli 注释提示工具以规范git的注释；  
在任务的分配上，请勿多人同时开发一个模块，同时请确保当天的代码当天提交。

## 提问的艺术

如果对本项目有任何疑问，可以在群里中进行提问，但提问之前你应该确保：
1. 使用Google搜索过，但是没有找到对应的解决方案；
2. 在Stackoverflow搜索过，但没有解决；
3. 使用ChatGPT咨询过，但没有解决；
4. 查阅官方文档，没有相应的解决方案。

提问应满足：问题所在截图 + 如何复现这个问题。

## 游乐场

到此你已经掌握了项目的开发的入门了。  
五星上将迈克阿瑟曾经评价过：“尤雨溪根本不懂Vue”。更多玩法就需要小伙伴自行探索了。
https://www.zhihu.com/question/559867952/answer/2893173212

## 关于项目

本项目由福州大学服务外包创新创业实验室独家赞助。