オンライン学習オンライン教育アプレット

最近、小規模なパートナーが Xiaomeng にオンライン教育のための小規模なプログラム プロジェクトの開発を依頼しました。

1. 小さなプログラムの紹介

WeChat Mini Program、略称は Mini Program、英語名は Mini Program で、モバイル アプリケーション ストアにダウンロードせずに WeChat プラットフォームですぐに使用できる H5 ライト アプリケーションです。ユーザーは、QR コードをスキャンするか、WeChat でアプレットを検索するだけで、アプレットの機能を体験できます。
小さなプログラム開発技術の主な目的は、開発者が WeChat プラットフォームに基づくネイティブ アプリケーション ソフトウェアを使用して、最も簡潔な方法でサービスを開発できるようにすることです。アプレットフレームワークのシステムはビュー層とロジック層に分かれており、ビュー層はビュー層に独自の記述言語WXMLとWXSSを提供し、ロジック層フレームワークはJavaScriptをベースにしています。アプレット フレームワークのビュー レイヤー (View) とロジック レイヤー (APP Service) の間にデータ転送とイベント システムが提供され、データとビューの同期が保たれます。開発者がデータとロジックを収集するのに便利です。

2. WeChat 開発者ツールの紹介

Wechat Developer Work は、Wechat が提供する Wechat アプレット用の開発ツールで、開発、デバッグ、プレビュー、アップロードなどの機能が集約されています。WeChat チームは、WeChat Mini Program Developer Tools、WeChat Mini Program Development Documents、および WeChat Mini Program Design Guidelines をリリースしました。これは、開発デバッグ、コード編集、プログラム公開などの機能を統合したまったく新しい開発者ツールであり、開発者が簡単かつ効率的に開発できるように支援します。 WeChat アプレット。ツールを起動するとき, 開発者は、バックグラウンドで正常にバインドされた WeChat アカウントを使用して QR コードをスキャンしてログインする必要があります. 以降のすべての操作は、この WeChat アカウントに基づいて行われます. プログラムのデバッグには、主に 3 つの機能領域があります。 : シミュレーター、デバッグ ツール、およびアプレット 操作領域: シミュレーターは、クライアント側で WeChat アプレットの実際のロジック パフォーマンスをシミュレートし、ほとんどの API についてシミュレーターで正しい状態を提示できます。デバッグ ツールは、Wxml、Console、Sources、Network、Appdata、Storage、および WxmlPannel の 6 つの機能モジュールに分かれています。WeChat アプレット操作領域は、開発者がクライアント側の環境操作をシミュレートするのに役立ちます。たとえば、ユーザーが WeChat アプレットからチャット ウィンドウに戻ると、WeChat アプレットがバックグラウンド API として設定されます。

3. システム技術スタックと機能紹介

システムのバックエンドはSpringBoot、データベースはMysql、モバイル側はアプレット、Web側のフロントエンドはVueで開発しています。

システムの機能は次のように紹介されています。

4. システムデモ

システムのビデオ デモンストレーションを以下に示します。

オンライン教育とオンライン学習アプレット！酸っぱい！

五、システムコアコード

@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;
    }

}

6、データベース コア 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;

このシステムで使用されているフレームワークは、Spring アプリケーションの初期構築および開発プロセスを簡素化することを目的とした、まったく新しいフレームワークである SpringBoot です。フレームワークは、特定の方法 (統合されたスターター、構成よりも規約) を使用して構成するため、開発者はボイラープレート構成を定義する必要がありません。SpringBoot は、Spring プロジェクトをより迅速かつ簡単に開発できる新しいプログラミング パラダイムを提供します. 開発プロセス中に、Spring の構成にあまり時間を費やすことなく、アプリケーション自体の機能開発に集中できます. SpringBoot は Sring4 をベースに設計されており、元の Spring フレームワークの優れた遺伝子を継承しています。SpringBoot はフレームワークではなく、クラス ライブラリのコレクションです。これらのライブラリのバージョンを自分で管理することなく、対応する依存関係を maven または gradle プロジェクトにインポートすることで、SpringBoot を使用できます。

私はプログラマーのシャオメンです. いいねとフォローをお願いします. 将来的には 500 件以上のいいね.