CampusSNS校园社区: 技术栈：vue3+vite+pinia！一款风靡全球的校园社区开源项目！后端地址：https://gitee.com/KamenRider41/campus-community-backend

# CampusSNS校园社区

- 本项目是百度训练营晋级班第一题《CampusSNS校园社区》的前端

- 本项目基于Vue3+Vite构建

## 功能要求
> 构建一个简单的校园社区功能
- 具备支持多人文字内容生产及浏览功能，该功能仅支持移动端访问样式，PC端使用时也使用移动端样式，支持用户的注册及登录
- 具备一个PC端的管理系统，提供给管理员一个对于贴子修改删除屏蔽恢复等基本管理功能
- 参考可选功能
    - 支持分板块
    - 支持搜索
    - 支持回帖、评论、点赞等
    - 支持发图片、视频

###  主要任务
> 移动端框架使用VantUI，PC端框架使用ElementUI

- 论坛主页面
- 板块页面
- 详细帖子页面
- 登录注册页面
- 后端搭建
- 管理员页面

## 搭建过程记录

### 一. 项目搭建

#### 1.  创建项目
```bash
npm create vite@latest
```
#### 2.  运行项目
```bash
cd campusSNS
npm install
npm run dev
```
### 二. 项目配置

#### 1. 导入配置别名
- 在`vite.config.js`文件内增加导入文件别名配置项
- @ 为`src`文件夹
```javascript
import { resolve } from "path"
function pathResolve(dir) {
  return resolve(__dirname, ".", dir);
}
// ...
export default defineConfig({
  resolve: {
    alias: {
      "@": pathResolve('src')
    }
  },
  // ...
})
```
```bash
import xxx from '@/components/xxx.vue'
```

#### 2. 配置局域网访问
- 在`package.json`文件内，`script`中的`dev`命令新增局域网访问命令
```bash
"scripts": {
    "dev": "vite --host 0.0.0.0",
    # ...
  },
```

###  三. 添加路由

#### 1. 安装Vue-Router@4
```bash
npm install vue-router@4
```
#### 2. 路由配置
```javascript
import { createRouter, createWebHistory } from 'vue-router'
 
const routerHistory = createWebHistory()
 
const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: () => import('@/pages/Home.vue')
    },
  ]
})
export default router
 
```

#### 3.路由导入
```javascript
import router from './router/index'

createApp(App).use(router).mount('#app')
```

## 关于wsUtils的函数
```js

// 监听连接开启
  websocket.onopen = function () {
    console.log("连接成功");
  }
  // 监听连接关闭
  websocket.onclose = function () {
    console.log("退出连接");
  }
  // 监听后端发来的消息
  websocket.onmessage = function (event) {
    console.log("收到消息" + event.data);
    // 将后端收到的消息放到pinia中
    store.$patch((state) => {
      state.wsMessage = JSON.parse(event.data)
    })
  }
  // 监听错误
  websocket.onerror = function () {
    console.log("连接出错");
  }
}
/**
 * 私发消息
 * @param {number} toUId 发送给的用户
 * @param {object} data 发送的数据
 */
export function sendPrivateMessageToUser(toUId, data) {
  try {
    // 前端发送消息
    websocket.send(JSON.stringify({
      fromUId: null,  //  发起通信的用户
      toUId: toUId,    // 被通信的用户
      type: 'private', // 通信的类型， private（私发）、群发（group）、错误（error）
      data
    }))
    return "消息发送成功！"
  } catch (err) {
    return "消息发送失败！"
  }

}
/**
 * 群发消息
 * @param {Object}} data 发送的数据
 */
export function sendGroupMessageToAllUser(data) {
  try {
    // 前端发送消息
    websocket.send(JSON.stringify({
      fromUId: null,  //  发起通信的用户
      toUId: null,    // 被通信的用户
      type: 'group', // 通信的类型， private（私发）、群发（group）、错误（error）
      data
    }))
    return "消息发送成功！"
  } catch (err) {
    return "消息发送失败！"

}

export function colseWsConnection() {
  websocket.close()
}
```

### 对于wsConnection函数
主要用于建立websocket连接，传入连接的地址（由服务器基础地址和用户id组成，用户id主要用于身份保证身份唯一），token为了保证用户身份有效，再onmessage回调中，能够得到服务器发送的数据，我们拿到数据（json字符串）后，将数据转为对象、放入到pinia中，在有需要的页面监听数据变化，拿到后端数据进行渲染
```js
/**
 * 
 * @param {Number} user_id 用户id
 * @param {String} token 令牌
 * @param {String} baseUrl 基础url
 */
wsConnection(user_id, token, baseUrl) {
  // 创建websocket对象，将连接地址、用户id、以及token传入
  websocket = new WebSocket("ws://" + baseUrl + "/" + user_id, [token]);

// 监听连接开启
  websocket.onopen = function () {
    console.log("连接成功");
  }
  // 监听连接关闭
  websocket.onclose = function () {
    console.log("退出连接");
  }
  // 监听后端发来的消息
  websocket.onmessage = function (event) {
    console.log("收到消息" + event.data);
    // 将后端收到的消息放到pinia中
    store.$patch((state) => {
      state.wsMessage = JSON.parse(event.data)
    })
  }
  // 监听错误
  websocket.onerror = function () {
    console.log("连接出错");
  }
}
```
### 对于sendPrivateMessageToUser函数
主要用于主动和服务器通信、服务器只是作为消息的转发中心、前端调用函数，传递想要通信的用户id，以及通信的信息，服务器拿到数据后，对数据进行解析转发到对应的用户。 
```js
/**
 * 私发消息
 * @param {number} toUId 发送给的用户
 * @param {object} data 发送的数据
 */
export function sendPrivateMessageToUser(toUId, data) {
  try {
    // 前端发送消息
    websocket.send(JSON.stringify({
      fromUId: null,  //  发起通信的用户
      toUId: toUId,    // 被通信的用户
      type: 'private', // 通信的类型， private（私发）、群发（group）、错误（error）
      data
    }))
    return "消息发送成功！"
  } catch (err) {
    return "消息发送失败！"
  }

}
```
当用户不在线时,后端会返回错误给当前消息的发送者，前端可以监听错误并进行处理
```js
if (message.type == "private" && !clients[`${message.toUId}s`]) {
      ws.send(JSON.stringify({
        fromUId: 0,
        toUId: id,
        type: 'error',
        comtent: '当前用户不在线'
      }))
      return
    }
```

### 对于sendGroupMessageToAllUser函数
调用此函数，会对上线用户进行广播，后端会对全部在线用户进行信息推送，建议只允许管理员使用
```js
sendGroupMessageToAllUser(data) {
  try {
    // 前端发送消息
    websocket.send(JSON.stringify({
      fromUId: null,  //  发起通信的用户
      toUId: null,    // 被通信的用户
      type: 'group', // 通信的类型， private（私发）、群发（group）、错误（error）
      data
    }))
    return "消息发送成功！"
  } catch (err) {
    return "消息发送失败！"

}

}
```

### 基本的信息通信JSON数据格式
```js
const message = {
  fromUId: 1,  //  发起通信的用户
  toUId: 2,    // 被通信的用户
  type: 'private', // 通信的类型， private（私发）、群发（group）、错误（error）
  data: { // 传输的数据
    reply: 'hello nice to meet you!'
  }
}
```
因为没有需求的原因，后端考虑有限，开发者可以自主构造数据解析格式，以处理不同应用场景的需求！！！

honxin/CampusSNS校园社区

About

Releases

Contributors

Activities

honxin/CampusSNS校园社区 .gitee-modal { width: 500px !important; }

About

Releases

Contributors

Activities

Search

honxin/CampusSNS校园社区