Recently, a small partner asked Xiaomeng to develop a small program project for online education.
1. Introduction to small programs
WeChat Mini Program, its abbreviation is Mini Program, and its English name is Mini Program, which is an H5 light application that can be used immediately on the WeChat platform without downloading it in the mobile application store. Users only need to scan the QR code or search for the applet through WeChat to experience the function of the applet.
The main purpose of small program development technology is to allow developers to develop services with native application software based on the WeChat platform in the most concise way. The applet framework system is divided into a view layer and a logic layer. The view layer provides its own unique description languages WXML and WXSS for the view layer, and the logic layer framework is based on JavaScript. A data transmission and event system is provided between the view layer (View) and the logic layer (APP Service) of the applet framework to keep the data and the view synchronized. It is convenient for developers to gather data and logic.
2. Introduction to WeChat Developer Tools
Wechat Developer Work is a development tool for Wechat applet provided by Wechat, which concentrates the functions of development, debugging, preview, upload and so on. The WeChat team has released WeChat Mini Program Developer Tools, WeChat Mini Program Development Documents and WeChat Mini Program Design Guidelines, a brand-new developer tool that integrates functions such as development debugging, code editing and program publishing, helping developers to develop easily and efficiently WeChat applet. When starting the tool, the developer needs to use the WeChat account that has been successfully bound in the background to scan the QR code to log in. All subsequent operations will be based on this WeChat account. There are three main functional areas for program debugging: simulator, debugging tool and applet Operation area: The simulator simulates the real logic performance of the WeChat applet on the client side, and can present the correct state on the simulator for most of the APIs. The debugging tool is divided into 6 functional modules: Wxml, Console, Sources, Network, Appdata, Storage and WxmlPannel. The WeChat applet operation area helps developers simulate some client-side environment operations. For example, when the user returns to the chat window from the WeChat applet, a WeChat applet is set as the background api.
3. System technology stack and function introduction
The back-end of the system is developed with SpringBoot, the database is developed with Mysql, the applet used on the mobile side, and the Vue on the front-end of the web side for development.
The functions of the system are introduced as follows:
4. System Demonstration
A video demonstration of the system is shown below:
An online education and online learning applet! Sour!
Five, the system core code
@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;
}
}
Six, database core 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;
The framework used in this system is SpringBoot, which is a brand-new framework. The purpose is to simplify the initial construction and development process of Spring applications. The framework uses a specific way (integrated starter, convention over configuration) to configure, so that developers do not need to define boilerplate configuration. SpringBoot provides a new programming paradigm that can develop Spring projects more quickly and easily. During the development process, you can focus on the functional development of the application itself without spending too much time on Spring configuration. SpringBoot is designed based on Sring4 and inherits the excellent genes of the original Spring framework. SpringBoot is not a framework, but a collection of class libraries. You can use SpringBoot by importing the corresponding dependencies in maven or gradle projects without managing the versions of these libraries yourself.
I'm Xiaomeng, a programmer. Please like and follow. There will be more than 500 likes in the future. If you need more friends, I will open source the source code for everyone to learn.