uniapp+springboot实现知识点显示

简介: 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>
相关文章
|
1天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
12 3
|
1天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
12 3
|
1天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
9 2
|
1天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
12 2
|
1天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
9 1
|
1天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
11 2
|
1天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
11 1
|
11天前
|
Java Linux
Springboot 解决linux服务器下获取不到项目Resources下资源
Springboot 解决linux服务器下获取不到项目Resources下资源
|
19天前
|
Java API Spring
SpringBoot项目调用HTTP接口5种方式你了解多少?
SpringBoot项目调用HTTP接口5种方式你了解多少?
65 2
|
19天前
|
前端开发 JavaScript Java
6个SpringBoot 项目拿来就可以学习项目经验接私活
6个SpringBoot 项目拿来就可以学习项目经验接私活
29 0