uniapp+springboot实现知识点显示

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>