手撸一个在线学习在线教育小程序

简介: 最近有小伙伴找小孟开发了一个在线教育的小程序项目。

最近有小伙伴找小孟开发了一个在线教育的小程序项目。


一,小程序介绍


微信小程序,它的简称是小程序,其英文名称叫做Mini Program,是一种不需要在手机应用商店里面下载就可以在微信平台当中立即使用的H5轻应用。用户只需要通过微信扫描二维码或者搜索小程序就可以体验小程序功能。

小程序开发技术的最主要目的就是通过最简洁的方式让开发者基于微信平台开发具有原生应用软件的服务。小程序框架系统分为视图层和逻辑层,其中视图层提供自身的视图层独有的描述语言WXML和WXSS,逻辑层框架则基于JavaScript。小程序框架的视图层(View)与逻辑层(APP Service)之间提供了数据传输和事件系统,使得数据和视图保持同步。方便让开发者聚集在数据和逻辑当中。


二,微信开发者工具介绍


微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序。启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所有的操作都会基于这个微信的帐号,程序调试主要有三大功能区:模拟器、调试工具和小程序操作区:模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。调试工具分为 6 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage以及WxmlPannel。微信小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从微信小程序中回到聊天窗口,会触发一个微信小程序被设置为后台的api。


三,系统技术栈和功能介绍


系统的后端采用的SpringBoot进行开发,数据库采用Mysql,移动端采用的小程序,Web端前端采用的Vue进行开发。


系统的功能介绍如下所示:


微信图片_20221010093555.png


四,系统演示


微信图片_20221010093612.png


微信图片_20221010093617.png


微信图片_20221010093621.png

微信图片_20221010093624.png


微信图片_20221010093628.png


微信图片_20221010093631.png


五,系统核心代码


@RestController
@RequestMapping("/sys/chapter")
@CrossOrigin
public class ChapterController extends BaseController {
    @Resource
    private ChapterMapper chapterMapper;
    @Resource
    private HomeworkMapper homeworkMapper;
    @Resource
    private VideoMapper videoMapper;
    @RequestMapping(method= RequestMethod.POST,value="/page")
    public Result page(
        Integer pageNum,
        Integer pageSize,
        String coursesId) {
        Result result = new Result();
        Page<Chapter> page = new Page<Chapter>(pageNum, pageSize);
        Chapter parms = new Chapter();
        parms.setCoursesId(coursesId);
        QueryWrapper<Chapter> warpper = new QueryWrapper<Chapter>(parms);
        result.setdata(chapterMapper.selectPage(page, warpper));
        return result;
    }
    @RequestMapping(method= RequestMethod.POST,value="/save")
    public Result save(String chapterTitle,String coursesId) {
        Result result = new Result();
        Chapter chapter = new Chapter();
        chapter.setCoursesId(coursesId);
        chapter.setTitle(chapterTitle);
        if (chapterMapper.selectOne(new QueryWrapper<Chapter>(chapter)) == null) {
            chapterMapper.insert(chapter);
            result.success("添加成功");
        } else {
            result.fail("添加失败,该章节已存在");
        }
        return result;
    }
    @RequestMapping(method= RequestMethod.POST,value="/update")
    public Result update(String chapterTitle,String coursesId,String id) {
        Result result = new Result();
        Chapter haveChapter = new Chapter();
        haveChapter.setId(id);
        haveChapter.setCoursesId(coursesId);
        if (chapterMapper.selectOne(new QueryWrapper<Chapter>(haveChapter)) != null) {
            Chapter chapter = new Chapter();
            chapter.setId(id);
            chapter.setTitle(chapterTitle);
            chapter.setCoursesId(coursesId);
            chapterMapper.update(chapter,new QueryWrapper<Chapter>(haveChapter));
            Homework haveHomework = new Homework();
            haveHomework.setChapter(haveChapter.getTitle());
            haveHomework.setCourseId(coursesId);
            Homework homework = new Homework();
            homework.setChapter(chapter.getTitle());
            homework.setCourseId(coursesId);
            homeworkMapper.update(homework,new QueryWrapper<Homework>(haveHomework));
            result.success("修改成功");
        }
        return result;
    }
    @RequestMapping(method= RequestMethod.POST,value="/remove")
    public Result delete( String id,String chapterTitle,String coursesId) {
        Result result = new Result();
        chapterMapper.deleteById(id);
        Homework homework = new Homework();
        homework.setChapter(chapterTitle);
        homework.setCourseId(coursesId);
        homeworkMapper.delete(new QueryWrapper<Homework>(homework));
        Video video = new Video();
        video.setZhangjie(chapterTitle);
        video.setCoursesId(coursesId);
        videoMapper.delete(new QueryWrapper<Video>(video));
        return result;
    }
    @RequestMapping(method= RequestMethod.POST,value="/getChapter")
    public Result getChpater(@RequestBody String coursesId){
        Result result = new Result();
        Chapter chapter = new Chapter();
        chapter.setCoursesId(coursesId);
        result.setdata(chapterMapper.selectList(new QueryWrapper<Chapter>(chapter)));
        return result;
    }
}


/**
 * <p>
 *  前端控制器 chrime
 * </p>
 *
 * @author 小孟vx:jishulearn
 * @since 2022
 */
@RestController
@RequestMapping("/sys/comment")
@CrossOrigin
public class CommentController extends BaseController {
    @Autowired
    @Resource
    private CommentMapper commentMapper;
    @RequestMapping(method= RequestMethod.POST,value="/page")
    public Result page(
            Integer pageNum,
            Integer pageSize) {
        Result result = new Result();
        Page<Comment> page = new Page<Comment>(pageNum, pageSize);
        Comment parms = new Comment();
        QueryWrapper<Comment> warpper = new QueryWrapper<Comment>(parms);
        result.setdata(commentMapper.selectPage(page, warpper));
        return result;
    }
    @RequestMapping(method= RequestMethod.POST,value="/getCommentList")
    public Result list(@RequestBody Comment comment) {
        Result result = new Result();
        List<Comment> commentList = new ArrayList<>();
        commentList = commentMapper.selectList(new QueryWrapper<Comment>(comment));
        result.setdata(commentList);
        return result;
    }
    @RequestMapping(method= RequestMethod.POST,value="/save")
    public Result save(@RequestBody Comment entity) {
        Result result = new Result();
        if (entity.getId() == null) {
            String time= LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
            entity.setCreateTime(time);
            commentMapper.insert(entity);
            result.success("添加评论成功!");
        } else {
            commentMapper.updateById(entity);
        }
        return result;
    }
    @RequestMapping(method= RequestMethod.DELETE,value="/delete")
    public Result delete( String ids) {
        Result result = new Result();
        List<String> deleteIds = new ArrayList<String>();
        for (String id : ids.split(",")) {
            deleteIds.add(id);
        }
        commentMapper.deleteBatchIds(deleteIds);
        return result;
    }
}


/**
 * <p>
 *  前端控制器 chrimer
 * </p>
 *
 * @author 小孟vx:jishulearn
 * @since 2022-06-22
 */
@RestController
@RequestMapping("/sys/course")
@CrossOrigin
public class CourseController extends BaseController {
    @Autowired
    private CourseMapper courseMapper;
    @RequestMapping(method= RequestMethod.POST,value="/page")
    public Result page(
        Integer pageNum,
        Integer pageSize) {
        Result result = new Result();
        Page<Course> page = new Page<Course>(pageNum, pageSize);
        Course parms = new Course();
     QueryWrapper<Course> warpper = new QueryWrapper<Course>(parms);
//        Course course=new Course();
//        warpper.eq("url",course.getId());
//
//
//        List<Course> listur = courseMapper.selectList(warpper);
//        System.out.println("lis"+listur);
        result.setdata(courseMapper.selectPage(page, warpper));
        return result;
    }
    @RequestMapping(method= RequestMethod.POST,value="/save")
    public Result save(@RequestBody Course entity) {
        Result result = new Result();
        if (entity.getId() == null) {
            courseMapper.insert(entity);
        } else {
            courseMapper.updateById(entity);
        }
        return result;
    }
    @RequestMapping(method= RequestMethod.DELETE,value="/delete")
    public Result delete( String ids) {
        Result result = new Result();
        List<String> deleteIds = new ArrayList<String>();
        for (String id : ids.split(",")) {
            deleteIds.add(id);
        }
        courseMapper.deleteBatchIds(deleteIds);
        return result;
    }
}


六,数据库核心SQL


SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for chapter
-- ----------------------------
DROP TABLE IF EXISTS `chapter`;
CREATE TABLE `chapter`  (
  `id` varchar(150) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '章节ID',
  `courses_id` varchar(150) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '课程ID',
  `title` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '章节名称',
  `sort` int(10) UNSIGNED NULL DEFAULT 0 COMMENT '显示排序',
  `gmt_create` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `gmt_modified` datetime NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `idx_course_id`(`courses_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '课程' ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of chapter
-- ----------------------------
INSERT INTO `chapter` VALUES ('03ccb244cd36837f41928caddbe44be7', '63ee2f927b7cb73801b97519f4a397d0', '第一节', 0, NULL, NULL);
INSERT INTO `chapter` VALUES ('08103771cbd786fd25c08c7e228a1cf7', '7231d9979f93ee3828d2d4293ab43e22', '1-1 java123', 0, NULL, NULL);
INSERT INTO `chapter` VALUES ('1', '1', '第一章', 0, NULL, NULL);
INSERT INTO `chapter` VALUES ('1276061184981819394', '1276061153113497601', '1', 0, '2020-06-25 15:54:29', '2020-06-25 15:54:29');
INSERT INTO `chapter` VALUES ('15', '18', '第一章:Java入门', 1, '2019-01-01 12:27:40', '2019-01-01 12:27:40');
INSERT INTO `chapter` VALUES ('2', '1', '第二章', 0, NULL, NULL);
INSERT INTO `chapter` VALUES ('3', '14', '第二章:CSS', 2, '2019-01-01 12:55:35', '2019-01-01 12:27:40');
INSERT INTO `chapter` VALUES ('32', '18', '第二章:控制台输入和输出', 2, '2019-01-01 12:27:40', '2019-01-01 12:27:40');
INSERT INTO `chapter` VALUES ('44', '18', '第三章:控制流', 3, '2019-01-01 12:27:40', '2019-01-01 12:27:40');
INSERT INTO `chapter` VALUES ('46', '14', '第一章:HTML', 1, '2019-01-01 12:27:40', '2019-01-01 12:55:30');
INSERT INTO `chapter` VALUES ('48', '18', '第四章:类的定义', 4, '2019-01-01 12:27:40', '2019-01-01 12:27:40');
INSERT INTO `chapter` VALUES ('5cd4d656c4f5403a583da2efe3c39be6', '10', '第二章', 0, NULL, NULL);
INSERT INTO `chapter` VALUES ('63', '18', '第五章:数组', 5, '2019-01-01 12:27:40', '2019-01-01 12:27:40');
INSERT INTO `chapter` VALUES ('64', '18', '第六章:继承', 6, '2019-01-01 12:27:40', '2019-01-01 12:27:40');
INSERT INTO `chapter` VALUES ('65', '18', '第七章:多态性和抽象类', 7, '2019-01-01 12:27:40', '2019-01-01 12:27:40');
INSERT INTO `chapter` VALUES ('c236a2a2bc12a25c71c112eec9b2490b', '10', '第一章', 0, NULL, NULL);
-- ----------------------------
-- Table structure for comment
-- ----------------------------
DROP TABLE IF EXISTS `comment`;
CREATE TABLE `comment`  (
  `id` varchar(150) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `courses_id` varchar(150) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `user_id` varchar(150) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `username` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户名',
  `content_text` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '评价内容',
  `rate` int(10) UNSIGNED ZEROFILL NOT NULL COMMENT '评分1-5星',
  `like_num` int(10) UNSIGNED ZEROFILL NOT NULL COMMENT '点赞数',
  `create_time` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '评论时间',
  `header_img` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户头像url',
  `imgs` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '评论附图时的图片url',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of comment
-- ----------------------------
INSERT INTO `comment` VALUES ('1', '1', '001ab27d478d04cba95fedd4300cdb00', 'test', 'xxxxxxx', 0000000000, 0000000000, '2020-9-10', NULL, NULL);
INSERT INTO `comment` VALUES ('2', '2', '1234', '123', '123', 0000000000, 0000000000, '2020-9-10', NULL, NULL);
INSERT INTO `comment` VALUES ('3', '1', '4f814c9477ca3b8a00ce2966fe9dcad8', 'test1', 'xxxxxxxxxxx', 0000000003, 0000000000, '2020-9-10', NULL, NULL);
INSERT INTO `comment` VALUES ('52280b8a8554858f2deb96299f736d77', '1', '001ab27d478d04cba95fedd4300cdb00', 'test', '11', 0000000003, 0000000000, '2020-09-14 08:45:50', NULL, NULL);
-- ----------------------------
-- Table structure for course
-- ----------------------------
DROP TABLE IF EXISTS `course`;
CREATE TABLE `course`  (
  `id` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'id',
  `url` varchar(225) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '图片url',
  `name` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '课程名字',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = DYNAMIC;
-- ----------------------------
-- Records of course
-- ----------------------------
INSERT INTO `course` VALUES ('1', 'https://edu-image.nosdn.127.net/401b122428424831adc9991bd6904be5.png?imageView&quality=100&thumbnail=230y130&type=webp', 'c++设计');
INSERT INTO `course` VALUES ('2', '', 'spring boot');
-- ----------------------------
-- Table structure for courses
-- ----------------------------
DROP TABLE IF EXISTS `courses`;
CREATE TABLE `courses`  (
  `id` varchar(150) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'ID',
  `curriculumname` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '鍚嶅瓧',
  `URL` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT 'URL',
  `school_of_the_course` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '瀛︽牎',
  `opening_teacher` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '鏁欏笀濮撳悕',
  `curriculum_type` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '绫诲埆',
  `useful` int(11) NULL DEFAULT NULL COMMENT '鍙敤鎬?',
  `introduction` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '课程简介',
  `hour` int(11) NULL DEFAULT NULL COMMENT '璇炬椂',
  `start_time` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '寮€濮嬫椂闂?',
  `end_time` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '缁撴潫鏃堕棿',
  `price` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '0',
  `sales` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '0',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = DYNAMIC;


本系统采用的框架是SpringBoot是一种全新的框架,目的是为了简化Spring应用的初始搭建以及开发过程。该框架使用特定的方式(集成starter,约定优于配置)来进行配置,从而使开发人员不需要再定义样板化的配置。SpringBoot提供了一种新的编程范式,可以更加快速便捷地开发Spring项目,在开发过程当中可以专注于应用程序本身的功能开发,而无需在Spring配置上花太大的工夫。SpringBoot基于Sring4进行设计,继承了原有Spring框架的优秀基因。SpringBoot并不是一个框架,而是一些类库的集合。maven或者gradle项目导入相应依赖即可使用SpringBoot,而无需自行管理这些类库的版本。

目录
相关文章
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的学习自律养成小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的学习自律养成小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校学习助手小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校学习助手小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
63 5
|
5月前
|
小程序 前端开发 JavaScript
微信小程序|英语学习交流平台小程序
微信小程序|英语学习交流平台小程序
|
5月前
|
小程序 前端开发 安全
微信小程序|大学生党务学习平台的设计与实现
微信小程序|大学生党务学习平台的设计与实现
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的在线互动学习网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的在线互动学习网站附带文章源码部署视频讲解等
32 1