使用Taro小程序框架开发一个学习、刷题、论坛、聊天交流的微信小程序

本项目小程序端采用Taro技术框架,可将React代码编译为微信小程序、安卓APP、IOS程序、H5页面等,管理端采用React Hook + TypeScript来进行开发

项目介绍

当代大学生上课缺少积极性,学习缺乏效率。同为大学生的我深有体会。所以特别开发出这样一款学习类的微信小程序帮助学生进行学习、巩固知识,同时增加对战PK模块来加强学生们的学习积极性。这是一个为学生提供在线学习课程、题库练习、考试答题、做题PK、上课签到、资料查阅、成绩分析等功能的微信小程序!

目前因学业任务比较重,没有好好的完善,目前小程序端比较完善的只有习题,课程,论坛,聊天室。管理端也开始进行开发了,现在完成了题库管理,新增题库,修改题库以及登录的功能

希望大佬们走过路过可以给个star鼓励一下感激不尽

https://github.com/zhcxk1998/School-Partners

这个是小程序后台管理端的介绍文章
后台管理端介绍文章,使劲戳!

视频演示

http://cdn.algbb.cn/School-Partners%E6%BC%94%E7%A4%BA%E8%A7%86%E9%A2%91.mp4

技术选型

前端:Taro + 微信小程序 + Echarts

后端:Node.js + MySql + websocket

其他:七牛云存储

项目功能

小程序端

  1. 在线学习课程
  2. 专项题库练习
  3. 课程考试答题
  4. 知识趣味竞赛
  5. 上课签到系统
  6. 专业资料查阅
  7. 学生成绩分析
  8. 活动日程安排
  9. 学习分享论坛

管理端

  1. 登录注册
  2. 题库管理

运行截图

1. 主页

2. 个人中心

3. 课程详情

4. 做题练习

5. 学习交流群

6. 聊天室

7. 课程列表

8. 习题列表

9. 排行榜

10. 论坛

11. 活动任务管理

管理端

1. 登录界面

2. 题库管理

3. 修改题库

项目分析

项目采用前后端分离的技术,前端采用了Taro微信小程序框架,因为本人比较喜欢React,所以采用了Taro这款类React语法的框架,后端则采用了Node.js,koa2框架。聊天室页面采用websocket来进行连接

今天,我们首先来聊一聊聊天室使用的小技巧(并不)

首先我们的后端数据库采用的是mysql,我们建了一个聊天记录的表(萌新勿喷~)

1. 后端部分

  • 数据库部分

    我们将所有的聊天记录存放到一张表上方便管理,因为我们有多个聊天群组,我们该如何区分这些不同的聊天群组呢?答案是,通过room_name来区分,获取聊天记录的时候就直接查询这个群组名即可,这样就不用开很多的表,将不同的群聊记录存放到不同的表中啦!

同时因为我们的聊天记录内需要存储emoji等信息,所以,我们需要将数据库的字符集调整为utf8mb4 -- UTF-8 Unicode,排序规则选择utf8mb4_unicode_ci,这个可以通过自行百度,或者navicat中设置。

然后我们将数据表以及字段类型也设置为utf8mb4,便于存储emoji信息

  • 后端处理聊天记录的方法。
router.get('/chatlog/:to', async (ctx) => {
   
  const to = ctx.params.to
  const response = []
  const res = await query(`SELECT * FROM ch
  • 7
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值