Recientemente, un pequeño socio le pidió a Xiaomeng que desarrollara un pequeño proyecto de programa para la educación en línea.
1. Introducción a los pequeños programas
WeChat Mini Program, su abreviatura es Mini Program, y su nombre en inglés es Mini Program, que es una aplicación ligera H5 que se puede usar de inmediato en la plataforma WeChat sin descargarla en la tienda de aplicaciones móviles. Los usuarios solo necesitan escanear el código QR o buscar el subprograma a través de WeChat para experimentar la función del subprograma.
El propósito principal de la tecnología de desarrollo de programas pequeños es permitir que los desarrolladores desarrollen servicios con software de aplicación nativo basado en la plataforma WeChat de la manera más concisa. El sistema de marco de applet se divide en una capa de vista y una capa lógica.La capa de vista proporciona sus propios lenguajes de descripción únicos WXML y WXSS para la capa de vista, y el marco de la capa lógica se basa en JavaScript. Se proporciona un sistema de eventos y transmisión de datos entre la capa de vista (Vista) y la capa lógica (Servicio de APP) del marco de aplicación para mantener los datos y la vista sincronizados. Es conveniente para los desarrolladores recopilar datos y lógica.
2. Introducción a las herramientas para desarrolladores de WeChat
Wechat Developer Work es una herramienta de desarrollo para el subprograma Wechat proporcionado por Wechat, que concentra las funciones de desarrollo, depuración, vista previa, carga, etc. El equipo de WeChat ha lanzado WeChat Mini Program Developer Tools, WeChat Mini Program Development Documents y WeChat Mini Program Design Guidelines, una nueva herramienta para desarrolladores que integra funciones como depuración de desarrollo, edición de código y publicación de programas, lo que ayuda a los desarrolladores a desarrollar de manera fácil y eficiente. Subprograma WeChat. Al iniciar la herramienta, el desarrollador debe usar la cuenta de WeChat que se ha vinculado con éxito en segundo plano para escanear el código QR para iniciar sesión. Todas las operaciones posteriores se basarán en esta cuenta de WeChat. Hay tres áreas funcionales principales para la depuración del programa : simulador, herramienta de depuración y subprograma Área de operación: el simulador simula el rendimiento lógico real del subprograma WeChat en el lado del cliente y puede presentar el estado correcto en el simulador para la mayoría de las API. La herramienta de depuración se divide en 6 módulos funcionales: Wxml, Console, Sources, Network, Appdata, Storage y WxmlPannel. El área de operación del subprograma WeChat ayuda a los desarrolladores a simular algunas operaciones del entorno del lado del cliente. Por ejemplo, cuando el usuario regresa a la ventana de chat desde el subprograma de WeChat, se establece un subprograma de WeChat como API de fondo.
3. Pila de tecnología del sistema e introducción de funciones
El back-end del sistema se desarrolla con SpringBoot, la base de datos se desarrolla con Mysql, el applet se usa en el lado móvil y el Vue en el front-end del lado web para el desarrollo.
Las funciones del sistema se presentan a continuación:
4. Demostración del sistema
A continuación se muestra un video de demostración del sistema:
¡Un applet de educación y aprendizaje en línea! ¡Agrio!
Cinco, el código central del sistema
@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;
}
}
Seis, núcleo de base de datos 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;
El marco utilizado en este sistema es SpringBoot, que es un marco completamente nuevo. El propósito es simplificar el proceso inicial de construcción y desarrollo de aplicaciones Spring. El marco utiliza una forma específica (iniciador integrado, convención sobre configuración) para configurar, de modo que los desarrolladores no necesitan definir una configuración repetitiva. SpringBoot proporciona un nuevo paradigma de programación que puede desarrollar proyectos de Spring de forma más rápida y sencilla.Durante el proceso de desarrollo, puede concentrarse en el desarrollo funcional de la aplicación en sí sin dedicar demasiado tiempo a la configuración de Spring. SpringBoot está diseñado en base a Sring4 y hereda los excelentes genes del framework Spring original. SpringBoot no es un marco, sino una colección de bibliotecas de clases. Puede usar SpringBoot importando las dependencias correspondientes en proyectos maven o gradle sin administrar las versiones de estas bibliotecas usted mismo.
Soy Xiaomeng, un programador. Por favor, dale me gusta y sígueme. Habrá más de 500 me gusta en el futuro. Si necesitas más amigos, abriré el código fuente para que todos lo aprendan.