# element-forum-app

**Repository Path**: hujiyi/element-forum-app

## Basic Information

- **Project Name**: element-forum-app
- **Description**: 使用 vue.js 2, element ui 2, 还有 leancloud 搭建的论坛应用

预览网址: https://hujiyi.github.io/element-forum-web/
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: https://hujiyi.github.io/element-forum-web/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-03
- **Last Updated**: 2022-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目说明

这是一个用来练习 vue.js 的项目， 基于一些原因继续使用 vue 2， vue 3 的话，下次应该可以用上了。

本项目使用 `leancloud` 存储数据，所以在项目最终完成之后，把 `build` 出来的目标代码上传到 `gitee` 或者 `github` ，启用该项目的 `pages` 功能之后就可以当成一个网站来使用了。

### 项目中除 vue.js 以外的其他包

1. Element UI, 基于 Vue 2.0 的桌面端组件库

安装命令：
```bash
npm i -S element-ui  
```
或 
```bash
yarn add element-ui
```

2. Moment.js , JavaScript 日期处理类库

安装命令：
```bash
npm i -S moment
```
或
```bash
yarn add moment
```
3. leancloud-storage , leancloud数据存储 SDK

```bash
npm i -S leancloud-storage 
```
或
```bash
yarn add leancloud-storage 
```

4. marked.js, 对`markdown`进行解析的插件

```bash
npm i -S marked 
```
或
```bash
yarn add marked
```

### Vue 项目部署到 GitHub Pages 或 gitee pages

#### `vue-router` 不要开启 `history` 模式

正常项目中我们会因为网站路径中带有“#”而将`vue-router`开启`history`模式，以去掉 # 号。但开启`history`模式需要服务器的支持，因为在`github pages`中不支持这一模式，所以我们不能开启`history`模式。
```javascript
const router = new VueRouter({
    // 如果项目要打包上传到　github pages ，不能使用 history 模式，因为 github 不支持
    // mode: 'history',  // history 模式路由, 网址中间没有 "#" 号
    routes
});
```
#### 在 vue.config.js 中设置正确的 publicPath

要将项目部署到 https://.github.io/仓库名/ 上 (即仓库地址为 https://github.com/用户名/仓库名 )，可将 publicPath 设为 "/仓库名/"。
举个例子，我的 `仓库名`  为 `element-forum-web`，那么 `vue.config.js`(没有这个文件的话，就自己建一个) 的内容应如下所示：


```javascript
// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/element-forum-web/'
    : '/'
}
```

### 配置你自己的 leancloud 应用 keys

`leancloud` 的应用凭证信息保存在配置文件: `src/api/config/lc_config.js` 中

当前项目中的　`AppID`, `AppKey`, `REST API 服务器地址` 等 `leancloud SDK` 初始化必须的值都是无效的

您需要自己创建一个 `leancloud 应用`, 并将该应用 `相应的值填` 写到配置文件中

### 部分文件说明

* `src/assets/css/style.css` : 全局通用样式

* `src/assets/json/menuItems.json` : 生成仪表盘左则导航菜单的 json 数据，请根据需要自行修改


### 关于异步操作 `async/await` 的一些说明

在这个项目之前，写的代码中主要使用 `Promise` 来完成异步任务，这个项目第一次全部改为使用 `async/await` 来进行替代。 感觉使用  `async/await` 来写代码，比  `Promise` 更清爽、直观，但是在调用使用 `async` 定义的函数时，可不要忘记在被调用的函数前加上  `await` 啊，不然就是一个找不到错误原因的大型灾难现场。

前两天写的访问 `leancloud` 的几个类中有少量函数是不需要异步操作的，定义时没有加 `async` 修饰。使用时发现很容易产生混乱，定义时有 `async` 修饰的函数调用时没有添加 `await` 的话会得不到正确结果，并且在错误信息中不能体现这个原因。 

所以现在对之前定义的 `leancloud` 操作的各个类进行修改，所有函数添加 `async` 修饰，以减少调用时的混乱情况

### 在项目中使用 font-awesome-4.7 图标(Element UI 自带的图标少又难看)
为什么不用最新的 font-awesome 5? 因为感觉新版在 vue.js 中的使用方式变化太大。
1. 下载 `font-awesome-4.7` 代码到本地, 解压到  `assets` 文件夹中(当前项目已包含)

2. 在 `main.js` 添加以下引用
``` js
import './assets/font-awesome-4.7.0/css/font-awesome.min.css';  // 导入 font awesome 图标
```

3. 使用图标， 例如： 
```html
<i class="fa fa-user-o" aria-hidden="true"></i>
```
4. 查找想要的图标： 

* 网址1(带名字的小图标)： http://www.fontawesome.com.cn/faicons/#web-application

* 网址2(没有名字的大图标)： http://www.fontawesome.com.cn/icons-ui/

5. 使用示例：http://www.fontawesome.com.cn/examples/

### 局部区域显示  `Loading 加载`

具体步骤如下： 
> 1、import { Loading } from "element-ui";   // 导入 Loading加载

> 2、在 data 定义控制变量： loading: false,

> 3、定义函数：showLoading(targetNode, message) 和 endLoading()

> 4、调用第 3 步定义的两个函数

> 具体代码请参考: `src/views/account/pages/Login.vue`

## 项目进展日志
### 2021-11-03
1. 已完成  `account` 模块下的 `登录`， `注册`， `找回密码` 功能;

2. 实现用户 `注销` 功能;

3. 后台管理的 `版块管理` ， 已实现数据读取，显示 `添加对话框`，显示 `编辑对话框`;


### 2021-11-04

4. 实现 `论坛版块` 的添加功能, 实现 `论坛版块` 的修改功能；

5. 更新` api/service` 中部分操作 `leancloud` 的类;

6. 清理部分 `vue` 文件中多余的样式

7. 大部分图标改成为 `font awesome` 图标，包括文件 `src/assets/json/menuItems.json`

8. 修正因为之前路由守卫 `router.beforeEach` 代码引起的一个 bug


### 2021-11-08  `论坛版块管理` 所有功能完成

9. 实现 `论坛版块` 的删除功能

10. 修改 BaseService 类中 批量删除函数 deleteBatch 的返回值

11. 实现 `论坛版块` 的 `批量删除` 功能

12. 实现 `论坛版块` 的 `批量修改` 功能（此处批量修改操作为将所有选中版块的 level 值 重置为0, 其他的批量修改操作可以参考例子进行处理）

13. `CategoryManager.vue` 中的 `async getCategories()` 查询时关联表的问题已修正

14. 实现 `论坛版块` 的分页功能

15. 显示日期时间时改为使用过滤器进行格式化

16. 为了提高通用性， BaseSerice 基类中的查询方法改写为支持 多字段排序

### 2021-11-09

17. 显示 `论坛话题管理` 的表格， 实现删除功能（这个从 `论坛版块` 复制代码过来，改几个变量就可以了）

18. `论坛话题管理` 实现 `添加新话题 `的功能; 实现 `话题修改` 功能; 使用一个 `模型类` 来处理 话题数据 

### 2021-11-11

19. `论坛话题管理` 的 `批量删除` 功能 完成

20. `论坛话题管理` 的 `批量修改` 功能 完成; 修改了 `CategoryManager.vue`  和 `TopicManager.vue` 中批量操作的代码, 解决了一个困扰了好久的问题, 代码写不好, 是一开始的思路就出了问题.

21. 首页显示版块列表 及 前 n 个话题列表

22. 登录页 添加局部区域显示  `Loading 加载`, 具体步骤如下： 
       > 1、import { Loading } from "element-ui";   // 导入 Loading加载

       > 2、在 data 定义控制变量： loading:false,

       > 3、定义函数：showLoading(targetNode, message) 和 endLoading()

       > 4、调用第 3 步定义的两个函数

       > 具体代码请参考: `src/views/account/pages/Login.vue`

### 2021-11-13

23. 将部分在多个 vue 文件中重复出现的过滤器改为 `全局过滤器`，不再每个 vue 文件中写重复、相同的代码

24. 修改 `src/api/service/base_service.js` 中 查询函数的结果, 合并返回 `状态码`、`查询结果`和`记录总数` 三个部分; 删除原来独立的查询总记录数函数

## 以下为待完成的功能

* 每个版块内使用分页显示话题列表

* 话题详情页显示详细内容(话题内容及评论支持 Markdown )

* 话题详情页实现已登录用户评论功能

* 后台管理实现评论管理功能

### 可选功能

* 用户信息修改：密码，头像，昵称等等