企业官网建设流程全解析

校园生活小程序（1.0 基础版本）

项目简介

这是一个完整的校园生活服务平台，包含微信小程序端和PC管理后台。系统实现了校园新闻、失物招领、二手交易、兼职信息、校园交流等核心功能，为校园师生提供便捷的信息发布和交流平台，采用前后端分离架构，适合作为微信小程序全栈开发学习项目或计算机设计参考。

技术栈

后端技术

管理后台技术

小程序端技术

项目特点

• 前后端分离：后端提供RESTful API，前端独立开发部署
• 完整校园服务：涵盖新闻、失物、二手、兼职、交流全场景
• 用户互动：支持发布信息、评论交流
• 富文本支持：支持富文本内容编辑和展示
• 图片上传：支持多图上传和展示
• 数据可视化：管理后台集成ECharts图表展示
• 权限管理：区分普通用户和管理员角色

功能模块

小程序端功能

1. 首页模块 (pages/index)

• 功能导航入口
• 校园新闻快讯
• 失物招领信息
• 二手交易信息
• 兼职信息展示
• 校园交流动态

2. 校园新闻模块

• 新闻列表 (pages/newsList)
• 新闻详情 (pages/newsDetail)
• 富文本内容展示

3. 失物招领模块

• 失物列表 (pages/lost)
• 失物详情 (pages/lostDetail)
• 我的失物 (pages/myLost)
• 发布/编辑失物 (pages/myLostUpdateAdd)
• 联系方式展示

4. 二手交易模块

• 二手商品列表 (pages/secondhand)
• 商品详情 (pages/secondhandDetail)
• 我的二手 (pages/mySecondhand)
• 发布/编辑商品 (pages/mySecondhandUpdateAdd)
• 价格展示
• 联系卖家

5. 兼职信息模块

• 兼职列表 (pages/job)
• 兼职详情 (pages/jobDetail)
• 富文本详情展示
• 联系方式

6. 校园交流模块

• 交流广场 (pages/communication)
• 发布动态 (pages/communicationAdd)
• 评论功能 (pages/comment)
• 图片展示

7. 个人中心模块 (pages/my)

• 用户信息展示
• 用户信息编辑 (pages/userInfo)
• 我的失物
• 我的二手
• 问题反馈 (pages/question)

管理后台功能

1. 首页仪表盘

• 数据统计概览
• 图表展示

2. 用户管理

• 用户列表
• 用户信息查看
• 用户状态管理

3. 校园新闻管理

• 新闻列表
• 新增/编辑/删除新闻
• 富文本内容编辑

4. 失物招领管理

• 失物信息列表
• 失物详情查看
• 失物信息审核
• 删除违规信息

5. 二手交易管理

• 二手商品列表
• 商品详情查看
• 商品信息审核
• 删除违规商品

6. 兼职信息管理

• 兼职列表
• 新增/编辑/删除兼职
• 富文本内容编辑

7. 交流动态管理

• 动态列表
• 动态审核
• 评论管理
• 删除违规内容

8. 问题反馈管理

• 反馈列表
• 回复处理

项目结构

1.0 基础版本/ ├── admin/ # 管理后台（Vue2 + Element UI） │ ├── public/ # 静态资源 │ ├── src/ │ │ ├── api/ # API接口封装 │ │ ├── assets/ # 静态资源 │ │ ├── components/ # 公共组件 │ │ ├── router/ # 路由配置 │ │ ├── store/ # Vuex状态管理 │ │ ├── utils/ # 工具函数 │ │ ├── views/ # 页面视图 │ │ │ ├── Home.vue # 主布局 │ │ │ ├── Login.vue # 登录页 │ │ │ ├── Dashboard.vue # 首页仪表盘 │ │ │ ├── User.vue # 用户管理 │ │ │ ├── News.vue # 新闻管理 │ │ │ ├── Lost.vue # 失物管理 │ │ │ ├── Secondhand.vue # 二手管理 │ │ │ ├── Job.vue # 兼职管理 │ │ │ ├── Communication.vue # 交流管理 │ │ │ └── Question.vue # 反馈管理 │ │ ├── App.vue # 根组件 │ │ └── main.js # 入口文件 │ ├── package.json │ └── vue.config.js # Vue配置 │ ├── express/ # 后端服务（Express + MySQL） │ ├── bin/ │ │ └── www # 启动入口 │ ├── config/ │ │ ├── db.js # 数据库配置 │ │ └── index.js # 全局配置 │ ├── public/ │ │ └── images/ # 上传图片存储 │ │ ├── avatar/ # 用户头像 │ │ ├── communication/ # 交流图片 │ │ ├── job/ # 兼职图片 │ │ ├── lost/ # 失物图片 │ │ └── secondhand/ # 二手商品图片 │ ├── routes/ │ │ ├── admin/ # 管理端API │ │ │ ├── user.js # 用户接口 │ │ │ ├── news.js # 新闻接口 │ │ │ ├── lost.js # 失物接口 │ │ │ ├── secondhand.js # 二手接口 │ │ │ ├── job.js # 兼职接口 │ │ │ ├── communication.js # 交流接口 │ │ │ ├── comment.js # 评论接口 │ │ │ └── question.js # 反馈接口 │ │ ├── web/ # 小程序端API │ │ │ ├── user.js # 用户接口 │ │ │ ├── news.js # 新闻接口 │ │ │ ├── lost.js # 失物接口 │ │ │ ├── secondhand.js # 二手接口 │ │ │ ├── job.js # 兼职接口 │ │ │ ├── communication.js # 交流接口 │ │ │ ├── comment.js # 评论接口 │ │ │ └── question.js # 反馈接口 │ │ ├── index.js # 路由入口 │ │ └── upload.js # 文件上传 │ ├── util/ │ │ ├── index.js # 工具函数 │ │ └── wechat.js # 微信相关工具 │ ├── app.js # Express应用配置 │ └── package.json │ ├── min/ # 微信小程序 │ ├── components/ # 自定义组件 │ │ ├── weekCalendar/ # 日历组件 │ │ └── wxParse/ # 富文本解析组件 │ ├── images/ # 图片资源 │ │ └── tabbar/ # TabBar图标 │ ├── pages/ # 页面目录 │ │ ├── index/ # 首页 │ │ ├── newsList/ # 新闻列表 │ │ ├── newsDetail/ # 新闻详情 │ │ ├── lost/ # 失物列表 │ │ ├── lostDetail/ # 失物详情 │ │ ├── myLost/ # 我的失物 │ │ ├── myLostUpdateAdd/ # 失物编辑 │ │ ├── secondhand/ # 二手列表 │ │ ├── secondhandDetail/ # 二手详情 │ │ ├── mySecondhand/ # 我的二手 │ │ ├── mySecondhandUpdateAdd/ # 二手编辑 │ │ ├── job/ # 兼职列表 │ │ ├── jobDetail/ # 兼职详情 │ │ ├── communication/ # 交流广场 │ │ ├── communicationAdd/ # 发布动态 │ │ ├── comment/ # 评论页 │ │ ├── my/ # 个人中心 │ │ ├── userInfo/ # 用户信息 │ │ └── question/ # 问题反馈 │ ├── utils/ │ │ ├── api.js # API接口封装 │ │ ├── request.js # 请求封装 │ │ ├── feedback.js # 反馈工具 │ │ ├── date.js # 日期工具 │ │ └── util.js # 工具函数 │ ├── app.js # 小程序入口 │ ├── app.json # 小程序配置 │ ├── app.wxss # 全局样式 │ └── project.config.json # 项目配置 │ ├── 截图/ # 项目截图 ├── campusLife.sql # 数据库SQL文件 ├── mysql.sh # MySQL脚本 ├── mysql操作手册.md # MySQL操作说明 ├── 数据库创建方法.md # 数据库创建说明 ├── 运行必读（完整）.docx # 运行说明文档 ├── 校园生活小程序.xmind # 项目思维导图 ├── 校园生活-小程序.mp4 # 小程序演示视频 └── 校园生活-admin.mp4 # 管理后台演示视频

数据模型

用户表 (users)

{id:int,// 用户IDphone:varchar(255),// 手机号password:varchar(255),// 密码username:varchar(255),// 用户名sex:varchar(255),// 性别nickname:varchar(255),// 昵称active:varchar(255),// 激活状态openId:varchar(1100),// 微信OpenIDavatar:varchar(255),// 头像role:int// 角色 (0普通用户, 99管理员)}

校园新闻表 (news)

{id:int,// 新闻IDtitle:varchar(255),// 新闻标题content:longtext,// 新闻内容（富文本）shop_id:int,// 关联IDcreate_time:timestamp,// 创建时间update_time:timestamp// 更新时间}

失物招领表 (lost)

{id:int,// 失物IDuser_id:int,// 用户IDtitle:varchar(255),// 失物标题cover:varchar(1000),// 失物图片content:varchar(1000),// 失物描述contact:varchar(255),// 联系方式create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}

二手交易表 (secondhand)

{id:int,// 商品IDuser_id:int,// 用户IDtitle:varchar(255),// 商品标题price:varchar(100),// 价格cover:varchar(1000),// 商品图片content:varchar(1000),// 商品描述contact:varchar(255),// 联系方式create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}

兼职信息表 (job)

{id:int,// 兼职IDtitle:varchar(255),// 兼职标题cover:varchar(1000),// 兼职图片content:varchar(1000),// 兼职详情contact:varchar(255),// 联系方式create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}

校园交流表 (communication)

{id:int,// 动态IDuser_id:int,// 用户IDcontent:varchar(100),// 动态内容cover:varchar(10000),// 动态图片create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}

评论表 (comment)

{id:int,// 评论IDuser_id:int,// 用户IDcommunication_id:int,// 动态IDcontent:varchar(1000),// 评论内容create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}

问题反馈表 (question)

{id:int,// 反馈IDuser_id:int,// 用户IDcover:varchar(2000),// 图片remark:varchar(1000),// 反馈内容email:varchar(100),// 邮箱reply:varchar(1000),// 回复内容create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}

运行环境要求

后端环境

• Node.js 14.0+
• MySQL 5.7+
• npm 或 yarn

管理后台

• Node.js 14.0+
• npm 或 yarn
• 现代浏览器（Chrome、Firefox、Edge等）

小程序端

• 微信开发者工具（最新稳定版）
• 基础库版本 2.19.0+
• 需要有效的AppID

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATEDATABASEcampusLifeCHARACTERSETutf8mb4COLLATEutf8mb4_general_ci;

2. 导入数据库文件

mysql-uroot-pcampusLife<campusLife.sql

3. 修改数据库配置
   编辑express/config/db.js：

vardb=mysql.createConnection({database:'campusLife',// 数据库名称port:'3306',// 端口号host:'localhost',// 主机地址user:'root',// 用户名password:'root',// 密码（修改为你的密码）});

2. 启动后端服务

# 进入后端目录cdexpress# 安装依赖npminstall# 启动服务（开发模式）npmrun dev

后端服务默认运行在http://localhost:3564

3. 启动管理后台

# 进入管理后台目录cdadmin# 安装依赖npminstall# 启动开发服务器npmrun dev

管理后台默认运行在http://localhost:8080

4. 运行小程序

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择min目录
4. 填入AppID（可使用测试号）
5. 点击"导入"

5. 配置小程序API地址

编辑min/utils/request.js，修改API基础地址：

constbaseUrl='http://localhost:3564';// 修改为你的后端地址

默认账号

管理后台

• 手机号：1871502XXXX
• 密码：123456

小程序端

• 支持微信授权登录
• 或使用手机号登录

界面预览

项目包含演示视频文件：

• 校园生活-小程序.mp4- 小程序端完整功能演示
• 校园生活-admin.mp4- 管理后台完整功能演示

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 课程表功能：添加课程表管理和提醒
2. 校园地图：集成地图显示校园建筑位置
3. 活动报名：校园活动发布和在线报名
4. 成绩查询：学生成绩查询功能
5. 图书借阅：图书馆图书借阅查询
6. 快递代取：校园快递代取服务
7. 表白墙：匿名表白功能
8. 跑腿服务：校园跑腿服务平台
9. 社团管理：社团信息和活动管理
10. 消息通知：系统消息推送功能

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. 生产环境部署需要配置HTTPS
3. 小程序上线需要完成微信认证
4. 建议定期备份数据库数据
5. 用户发布内容需要进行审核管理

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确

Q: 小程序无法请求后端？

A: 检查request.js中的baseUrl配置，开发时需在微信开发者工具中关闭"不校验合法域名"

Q: 管理后台登录失败？

A: 确认数据库中users表有管理员账号（role=99）

Q: 富文本内容无法显示？

A: 检查wxParse组件是否正确引入，富文本内容是否正确编码

许可证

本项目仅供学习交流使用，请勿用于商业用途。