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

Posted 程序员springmeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手撸一个在线学习在线教育小程序相关的知识,希望对你有一定的参考价值。

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

一,小程序介绍

微信小程序,它的简称是小程序,其英文名称叫做Mini Program,是一种不需要在手机应用商店里面下载就可以在微信平台当中立即使用的H5轻应用。用户只需要通过微信扫描二维码或者搜索小程序就可以体验小程序功能。
小程序开发技术的最主要目的就是通过最简洁的方式让开发者基于微信平台开发具有原生应用软件的服务。小程序框架系统分为视图层和逻辑层,其中视图层提供自身的视图层独有的描述语言WXML和WXSS,逻辑层框架则基于javascript。小程序框架的视图层(View)与逻辑层(APP Service)之间提供了数据传输和事件系统,使得数据和视图保持同步。方便让开发者聚集在数据和逻辑当中。

二,微信开发者工具介绍

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

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

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

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

四,系统演示

系统的视频演示如下所示:

手撸一个在线教育、在线学习小程序!酸爽!







五,系统核心代码

@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 `以上是关于手撸一个在线学习在线教育小程序的主要内容,如果未能解决你的问题,请参考以下文章

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

看我如何用云函数实现一个PC小程序代码包在线解密工具

canvas菜鸟基于小程序实现图案在线定制功能

手撸ORM

程序员一般都会用啥网站学习课程啊?求推荐专业又平价的,感谢!

小程序开发的步骤都有哪些?