uniapp+springboot实现知识点显示

矫情吗；* 2024-03-16 10:38 28阅读 0赞

## 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, '物质的变化与能量', '化学反应中能量的变化，如热化学反应等');

### 后端代码 ###

项目结构  
![在这里插入图片描述][211a1ccf82694447b4c280c1c185b4cc.png]

#### 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 {
        
    }

### 前端代码 ###

**项目结构**  
![在这里插入图片描述][73d548f1c939480cb0a6a10ce111dd21.png]  
效果展示  
制作了显示效果，删除效果，添加效果。  
![在这里插入图片描述][1f24f2bc19db475cab1333a4c0a888b4.png]  
![在这里插入图片描述][41a9d34c0f924c6390ed545712345a13.png]

**完整代码**

<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>

[211a1ccf82694447b4c280c1c185b4cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8deefe7546d5443cbf17c71c693f1931.png
[73d548f1c939480cb0a6a10ce111dd21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1479cb4d266f4bf2b8b4e8e24fc009e0.png
[1f24f2bc19db475cab1333a4c0a888b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fee9f6c237634ed3a5c3129ce4d2df84.png
[41a9d34c0f924c6390ed545712345a13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/12abb0d71c244155953fe471298cdb91.png