# PublicWelfareProject

**Repository Path**: janet-w/public-welfare

## Basic Information

- **Project Name**: PublicWelfareProject
- **Description**: 用户：一群大学朋友
场景：大学校园中的公益活动
需求：开展/发布/接受/分享/展示公益活动
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2021-08-04
- **Last Updated**: 2023-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PublicWelfareProject

#### 项目介绍

------------

- 用户：一群大学朋友

- 场景：大学校园中的公益活动

- 需求：开展/发布/接受/分享/展示公益活动

- 产出：一个响应式(PC端及移动端)网站

- 项目地址：https://gitee.com/janet-w/public-welfare





### 运行效果图
> 在[video](./videos)文件夹下
- [首页(PC端)](https://gitee.com/janet-w/public-welfare/blob/master/videos/index.gif)
- [首页(移动端)](https://gitee.com/janet-w/public-welfare/blob/master/videos/index-moble.gif)
- [学校选择](https://gitee.com/janet-w/public-welfare/blob/master/videos/college.gif)
- [公益活动搜索](https://gitee.com/janet-w/public-welfare/blob/master/videos/search.gif)
- [圈子](https://gitee.com/janet-w/public-welfare/blob/master/videos/circle.gif)
- [活动详情及收藏参与](https://gitee.com/janet-w/public-welfare/blob/master/videos/activity_details.gif)
- [活动发布及资讯推送](https://gitee.com/janet-w/public-welfare/blob/master/videos/release.gif)
- [聊天系统](https://gitee.com/janet-w/public-welfare/blob/master/videos/chat.gif)

### 项目代码结构
```
├─css
├─js
├─videos
├─index.html     #首页
├─college.html   #学校选择
├─carouse.html   #轮播图
├─search.html    #公益活动搜索
├─server.js      #聊天系统
└─components
         └─circle    #圈子
             ├─index.html
             ├─css
             │	 ├─circlePC.css
             │	 └─circlePhone.css
             ├─js
             │	├─common.js
             │	├─rankingList.js
             │	└─moments.js
             └─images
└─activity  
		 ├─index.html     #我的首页
		 ├─details.html   #活动详情
		 ├─entered.html   #我的参与
		 ├─star.html      #我的收藏
		 ├─common   #公共样式
		 ├─css
         │	 ├─base.css     #基础样式
         │	 └─details.css  #详情页样式
         ├─js
         │	├─details.js    #详情页样式
         │	├─entered.js    #我的参与样式
         │	└─star.js       #我的收藏样式
         └─images
     	 └─release    #发布及推送
             ├─release.html  #活动发布
             ├─push_act.html #资讯推送
             ├─components    #封装组件
             ├─css
             ├─js
             └─images
								


```
### 项目结构详细介绍
- ##### 首页：主要实现消息管理、活动进展详情、公益活动搜索、学校选择功能

   - 消息管理功能：有新消息时弹窗显示，并在消息图标右上角设置未读标记
   - 活动进展详情：调用百度地图接口，进行活动地址解析，并在地图上展示相关活动信息
   -  公益活动搜索：点击首页搜索栏进入活动搜索页search.html，搜索界面分四个部分
   - 学校选择：点击首页地址进入学校选择页面college.html，页面分两部分
   - 首页轮播图

- ##### 圈子：分为三个文件夹：css、images、js和一个页面入口文件index.html

  - index.html文件主要写页面结构，circle页面主要结构主要为两部分：rankingList和moments，分别为排行榜和公益分享；
  - css文件夹下有circlePC.css和circlePhone.css分别是圈子页面在PC端和移动端的层叠样式表；
  - images文件夹下存放圈子独立使用的图片；
  - js文件夹下有common.js、moments.js、rankingList.js三个js文件
    - common.js文件作用：生成静态数据并将其存放于localStorage中、汇总circle所用到的方法
    - rankingList.js和moments.js分别用于操作circle中rankingList和moments的DOM

- ##### 公益活动：主要实现发布公益活动，活动详情页，以及公益资讯推送

  - 发布公益活动：realse.html为发布活动页面
      - css文件夹中的realse.css渲染页面
      - js文件夹中的address.js为页面中的表单二级联动，people_num.js为活动增减人数、time.js为活动具体时间点的选择、veryfy.js为表单的一些验证
      - components文件夹中有3个组件，calendar为活动日期选择的日历选择组件，suspend_btn为可拖拽悬浮按钮组件，upload_pic为图片上传组件
  - 瀑布流活动资讯：push_act.html为瀑布流活动资讯页面
      - css文件夹中的waterfall.css渲染页面
      - js文件夹中的waterfall.js为瀑布流的功能实现 
  - 公益活动详情：details.html
      - 通过details.js渲染出活动详情信息
      - 可以切换“详情”、“进展”、“推荐”tag，查看不同模块信息
      - 可以点击“收藏”或取消，将当前活动收藏到“我的收藏”模块
      - 可以点击“我要报名”或取消，将当前活动添加到“我的参与”模块

- ##### 我的：主要实现我的收藏，我的参与功能

  - 我的收藏
    - 通过star.js渲染出所有已收藏活动信息
    - 当浏览器窗口足够大时活动信息分两列展示
    - 点击活动的“报名人数”部分可以跳转到相应活动的详情页面
  - 我的参与
    - 通过entered.js渲染出所有已报名活动信息
    - 当浏览器窗口足够大时活动信息分两列展示
    - 点击活动的“报名人数”部分可以跳转到相应活动的详情页面

- ##### 聊天系统：主要实现用户一对一实时聊天功能

      - 封装了drag和drag边界，封装了$全局变量，实现了快速查询dom、ajax请求等方法。
      - 实现一对一实时聊天,可发送文字图片
      - 实现离线消息缓存，可以将消息缓存到远程数据库中。
      - 实现了朋友添加功能，指定用户id，进行用户的添加
      - node简单实现静态目录，加载图片、emoji等信息





#### 各模块分工及功能：

![avatar](/images/module_arrangement.png)