uniapp+springboot实现知识点显示
简介
本文讲解结合uniapp,原生组件，制作一个知识点显示的系统，包含增删改查。
数据库
-- ---------------------------- -- Table structure for middle_school_chemistry_knowledge -- ---------------------------- DROP TABLE IF EXISTS `middle_school_chemistry_knowledge`; CREATE TABLE `middle_school_chemistry_knowledge` ( `id` int NOT NULL AUTO_INCREMENT, `knowledge_name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL, `knowledge_description` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL, PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 11 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = DYNAMIC; -- ---------------------------- -- Records of middle_school_chemistry_knowledge -- ---------------------------- INSERT INTO `middle_school_chemistry_knowledge` VALUES (1, '化学元素', '元素的定义、分类和性质，包括原子结构和周期律等'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (2, '化学反应', '化学反应的基本概念、类型及其表示方法'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (3, '离子反应', '酸碱中离子反应的原理和应用'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (4, '氧化还原反应', '氧化还原反应的原理、判定方法和应用'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (5, '化学键', '共价键、离子键、金属键等化学键的组成、性质及其在化学反应中的应用'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (6, '物质的结构与性质', '物质的结构对其性质的影响，如晶体的构造和性质等'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (7, '常见物质的性质与用途', '常见物质的物理性质、化学性质及其在生产和日常生活中的应用'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (8, '化学式与化合价', '离子化合物、分子化合物的化学式及其相应的化合价'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (9, '物质的变化与能量', '化学反应中能量的变化，如热化学反应等'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (10, '化学实验基本操作', '化学实验中常见的基本操作和实验室安全知识'); INSERT INTO `middle_school_chemistry_knowledge` VALUES (11, '物质的变化与能量', '化学反应中能量的变化，如热化学反应等');
后端代码
项目结构
Bean
Result
import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @NoArgsConstructor @AllArgsConstructor public class Result<T> { /** * 状态码，0表示成功，其他表示失败 */ private int code; /** * 提示信息 */ private String message; /** * 返回的数据 */ private T data; /** * 成功时的构造函数 * * @param data 数据 */ public Result(T data) { this.code = 0; this.message = "success"; this.data = data; } public Result(T data, Boolean success, String message) { if (success) { this.code = 0; this.message = "success"; } else { this.code = 1; this.message = message; } this.data = data; } /** * 失败时的构造函数 * * @param code 状态码 * @param message 提示信息 */ public Result(int code, String message) { this.code = code; this.message = message; this.data = null; } }
ChemistryKnowledge
import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; @Data @TableName("middle_school_chemistry_knowledge") public class ChemistryKnowledge { @TableId private Integer id; private String knowledgeName; private String knowledgeDescription; }
Mapper
ChemistryKnowledgeMapper
import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.ssmc.Bean.ChemistryKnowledge; import org.apache.ibatis.annotations.Mapper; @Mapper public interface ChemistryKnowledgeMapper extends BaseMapper<ChemistryKnowledge> { }
Service
ChemistryKnowledgeService
import com.baomidou.mybatisplus.extension.service.IService; import com.example.ssmc.Bean.ChemistryKnowledge; public interface ChemistryKnowledgeService extends IService<ChemistryKnowledge> { }
Impl
ChemistryKnowledgeServiceImpl
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.ssmc.Bean.ChemistryKnowledge; import com.example.ssmc.Mapper.ChemistryKnowledgeMapper; import com.example.ssmc.Service.ChemistryKnowledgeService; import org.springframework.stereotype.Service; @Service public class ChemistryKnowledgeServiceImpl extends ServiceImpl<ChemistryKnowledgeMapper, ChemistryKnowledge> implements ChemistryKnowledgeService { }
前端代码
项目结构
效果展示
制作了显示效果，删除效果，添加效果。
完整代码
<template> <view class="container"> <uni-card :is-shadow="false" is-full> <text class="uni-h6">知识点复习</text> </uni-card> <div v-for="(point, i) in points" :key="i"> </br> <uni-section :title="point.knowledgeName" type="line"> <uni-card :is-shadow="false"> <text class="uni-body">{{point.knowledgeDescription}}</text> </uni-card> <button class="mini-btn center" type="warn" size="mini" @click="deletePoint(point.id)">按钮</button> </uni-section> </div> <div style="display:flex;"> <v-btn fab class="floating-button" color="#2196F3" @click="$refs.inputDialog.open()"> <span class="btn-text">+</span> </v-btn> </div> <view> <!-- 输入框示例 --> <uni-popup ref="inputDialog" type="dialog"> <uni-popup-dialog ref="inputClose" mode="confirm" title="添加新的知识点" placeholder="请填写知识点名称和描述" @confirm="submitForm"> <input class="uni-input" focus placeholder="知识点名称" v-model="knowledgeName"></input> <br> <input class="uni-input" focus placeholder="知识点描述" v-model="knowledgeDescription"></input> </uni-popup-dialog> </uni-popup> </view> </view> </template> <script> import axios from 'axios'; export default { data() { return { points:[], formVisible: false, knowledgeName: '', knowledgeDescription: '' } }, methods: { submitForm() { const url = 'http://localhost:8081/knowledge/'; const data = { knowledgeName: this.knowledgeName, knowledgeDescription: this.knowledgeDescription }; axios({ method: 'post', url: url, data: data, }).then((response) => { console.log(response); this.$refs.inputClose.close(); // 刷新表格数据或者其他动作 location.reload(); }).catch((error) => { console.error(error); }); }, deletePoint(id){ axios.delete(`api/knowledge/${id}`).then((response) => { console.log(response) // 刷新表格数据或者其他动作 location.reload(); }).catch((error) => { console.error(error); }); } }, mounted(){ let _this = this; axios.get("api/knowledge/").then(res =>{ _this.points = res.data console.log(this.points) }) } } </script> <style> .warp { padding: 10px; } .button { margin-bottom: 10px; } .floating-button { border: 2px solid #2196F3; position: fixed; bottom: 24px; left: 24px; border-radius: 50%; width: 60px; height: 60px; } .btn-text { margin-top: 5%; display: flex; justify-content: center; align-items: center; font-size: 50px; line-height: 1; } .center { display: flex; justify-content: center; align-items: center; } </style>
