Spring Boot+Vue3前后端分离实战wiki知识库系统之电子书管理功能开发

最新推荐文章于 2024-05-26 14:35:15 发布
最新推荐文章于 2024-05-26 14:35:15 发布
阅读量1k 收藏 2
点赞数 3
分类专栏： SpringBoot+Vue3前后端分离实战wiki知识库 文章标签： spring boot vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbsssss/article/details/127720368
版权

在这里插入图片描述

增加电子书管理界面

在这里插入图片描述

增加电子书界面

在views下新建一个admin包，表示只有管理员才能访问，创建admin-ebook.vue:
在这里插入图片描述
在这里插入图片描述

在index.ts中增加路由，先导入vue:
在这里插入图片描述
在这里插入图片描述

增加电子书菜单、 增加电子书路由

我们在the-header组件中新建菜单选项，并通过router-link标签进行跳转：
在这里插入图片描述
运行我们的项目，实现了电子书管理的跳转：
在这里插入图片描述
在这里插入图片描述

电子书表格展示

Ant Design Vue表格组件介绍

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

增加电子书表格展示

我们先将home.vue的模板代码复制到admin-ebook.vue：
在这里插入图片描述
但是我们电子书表格的页面不需要侧边栏，所以可以将sider删掉：
在这里插入图片描述
实现效果：
在这里插入图片描述
我们最后实现的效果：
在这里插入图片描述
在这里插入图片描述
首先我们要定义列：
在这里插入图片描述
在这里插入图片描述
每一行我们要给一个key:
在这里插入图片描述
数据来源是ebooks:
在这里插入图片描述
loading为等待框，为true或者false，true代表有等待效果，change为点击分页的时候会执行这个方法
在这里插入图片描述
下面我们定义了两个渲染，cover为我们的封面渲染，对应的就是我们放的img的标签：
在这里插入图片描述
下面使我们的按钮，我们放两个按钮，两个按钮之间有空格，所以我们用a-space包裹起来：
在这里插入图片描述
下面来看我们的js代码。我们定义了数据源ebooks，定义了分页，current是当前页，pagesize是每页条数。loading变量初始是false在这里插入图片描述
定义了一个columns，列的变量，cover渲染就是我们前面定义的,会显示成图片 ：
在这里插入图片描述
在这里插入图片描述
action就渲染为action，就是两个按钮：
在这里插入图片描述
下面定义一个数据查询方法，用axios去调后端接口得到值后为ebooks赋值，还要重置分页按钮：
在这里插入图片描述
表格点击页码触发函数，初始化的时候我们要先查一次：
在这里插入图片描述
最后我们要把所有参数return：
在这里插入图片描述
但不是所有方法都要返回，比如说我们的handleQuery方法只在内部调用，没有再html里面调用，所以我们不需要返回出去。

使用PageHelper实现后端分页

在这里插入图片描述

集成PageHelper

在这里插入图片描述

修改电子书列表接口、支持分页（假分页数据）

加入依赖后我们就可以直接使用了，使用PageHelper.startPage后我们的接口就已经支持分页了：
在这里插入图片描述
我们在配置文件中新增打印所有sql:(trace是最低等级）
在这里插入图片描述
就能看到其实pagehelper帮我们加了一个limit：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
pagehelper插件分页第一页是从1开始不是从0开始，我们 现在写的这一个startpage只对我们写的第一个sql起作用：
在这里插入图片描述
测试后我们发现第一条sql语句查了三条数据，而第二条语句查了五条数据，没有了分页的效果了。
在这里插入图片描述
除了pagehelper外我们还有另外一个类pageInfo，我们可以通过toal获取总行数,pages获取总页数：
在这里插入图片描述

我们可以通过log输出这些信息：

在这里插入图片描述
在这里插入图片描述
看一下打印信息：
在这里插入图片描述
在这里插入图片描述

封装分页请求参数和返回参数

请求参数封装，pageReq

我们将我们之前提到的四个参数封装成两个类
在req包中新建PageReq类，这个类里面有两个参数，一个是页码，一个是每页条数：

public class PageReq {
    @NotNull(message = "【页码】不能为空")
    private int page;

    @NotNull(message = "【每页条数】不能为空")
    @Max(value = 1000, message = "【每页条数】不能超过1000")
    private int size;

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    @Override
    public String toString() {
        final StringBuffer sb = new StringBuffer("PageReq{");
        sb.append("page=").append(page);
        sb.append(", size=").append(size);
        sb.append('}');
        return sb.toString();
    }
}

我们将原本写的EbookReq集成PageReq，很多功能都可能会用到PageReq，所以需要分页的都可以集成 ：
在这里插入图片描述
修改我们的pagehelper(原本是写死的数据）：
在这里插入图片描述
测试一下代码：
在这里插入图片描述

返回结果封装,pageResp

我们目前只是把查询到的列表返回出来 ，没有把总数返回出来，总数没有的话，前端分页组价就没法使用。
新建PageResp:
在这里插入图片描述

public class PageResp<T> {
    private long total;

    private List<T> list;

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    @Override
    public String toString() {
        final StringBuffer sb = new StringBuffer("PageResp{");
        sb.append("total=").append(total);
        sb.append(", list=").append(list);
        sb.append('}');
        return sb.toString();
    }
}

修改service层的返回数据：
原本：
在这里插入图片描述
现在：
在这里插入图片描述
在这里插入图片描述
接下来我们改造controller:
在这里插入图片描述
测试一下接口：
在这里插入图片描述

前后端分页功能整合

前端修改列表查询分页参数

页面初识化的时候我们应该查找第一页，所以onMounted中我们要传入第一页的参数。我们前面有修改过查询分页的请求参数，一个参数是页码，一个参数是每页条数，所以我们第一次请求要页码要是第一页。我们使用以及定义好的pagination作为参数：
在这里插入图片描述
在这里插入图片描述
所以我们初始化的查询方法要这么写：
在这里插入图片描述
这里的两个参数要和后端的请求参数对应起来，这样请求的时候才会自动映射：
在这里插入图片描述在这里插入图片描述

前端修改接收列表查询结果

同时我们要修改前端查询结果，因为之前我们已经修改过查询的返回结构了。
在这里插入图片描述

电子书管理页面和首页都需修改

首页查询，这里为了简便一次把所有数据全部查出来：
在这里插入图片描述
首页查询效果：
在这里插入图片描述
电子书管理效果：
在这里插入图片描述
在这里插入图片描述
如果开发周期不紧张可以单独给首页写一个查询所有的接口：
在这里插入图片描述

制作电子书表单

在这里插入图片描述

点击每一行编辑按钮，弹出编辑框

在这里插入图片描述
我们将a-model标签放在teremplate下，也可以放到a-layout下面：
在这里插入图片描述
同时我们设置编辑的点击事件：
在这里插入图片描述
还要编写表单的变量、编辑的点击事件以及处理完的事件：
在这里插入图片描述

编辑框显示电子书表单

在这里插入图片描述
在deit我们带上参数，就是当前电子书的参数：
在这里插入图片描述
按钮的渲染有两个参数，record就是对应一整行的 数据：
在这里插入图片描述
我们在a-model下添加表单：
在这里插入图片描述
我们定义一个响应式变量ebook:
在这里插入图片描述
编辑的函数我们加了一个数据就是我们上面说的record,将我们的响应式变量赋值给ebook:
在这里插入图片描述
最后记得 将ebook返回给html。
实现效果：
在这里插入图片描述

完成电子书编辑功能：

在这里插入图片描述

增加后端保存接口

我们将请求参数EbookReq重命名为EbbookQueryReq，意思为查询的请求参数。
保存接口我们编写一个EbokSaveReq,就跟我们domain中的Ebook是一样的。我们在service中新增一个保存的方法，保存要用update，是因为我们数据库原本已经存在了，有primarykey,我们可以根据是否有id来判断，有id是更新，没有Id是新增：
在这里插入图片描述
编写接口：
在这里插入图片描述
如果是用form表单就不用加requestBody注解，我们上面是用json的形式提交:
在这里插入图片描述

点击保存时，调用保存接口，保存成功刷新列表

编写点击保存的时候的函数：
在这里插入图片描述
这时候我们去前端测试，编辑电子书，成功后刷新页面，测试成功。在这里插入图片描述

雪花算法与新增功能

在这里插入图片描述

时间戳概念在这里插入图片描述

时间戳就是跟1970一月一号八点（北京时间）的差值，以毫秒为单位，我们可以在实际项目中不以1970年的时间作为起始时间。

雪花算法工具类

/**
 * Twitter的分布式自增ID雪花算法
 **/
@Component
public class SnowFlake {

    /**
     * 起始的时间戳
     */
    private final static long START_STMP = 1609459200000L; // 2021-01-01 00:00:00

    /**
     * 每一部分占用的位数
     */
    private final static long SEQUENCE_BIT = 12; //序列号占用的位数
    private final static long MACHINE_BIT = 5;   //机器标识占用的位数
    private final static long DATACENTER_BIT = 5;//数据中心占用的位数

    /**
     * 每一部分的最大值
     */
    private final static long MAX_DATACENTER_NUM = -1L ^ (-1L << DATACENTER_BIT);
    private final static long MAX_MACHINE_NUM = -1L ^ (-1L << MACHINE_BIT);
    private final static long MAX_SEQUENCE = -1L ^ (-1L << SEQUENCE_BIT);

    /**
     * 每一部分向左的位移
     */
    private final static long MACHINE_LEFT = SEQUENCE_BIT;
    private final static long DATACENTER_LEFT = SEQUENCE_BIT + MACHINE_BIT;
    private final static long TIMESTMP_LEFT = DATACENTER_LEFT + DATACENTER_BIT;

    private long datacenterId = 1;  //数据中心
    private long machineId = 1;     //机器标识
    private long sequence = 0L; //序列号
    private long lastStmp = -1L;//上一次时间戳

    public SnowFlake() {
    }

    public SnowFlake(long datacenterId, long machineId) {
        if (datacenterId > MAX_DATACENTER_NUM || datacenterId < 0) {
            throw new IllegalArgumentException("datacenterId can't be greater than MAX_DATACENTER_NUM or less than 0");
        }
        if (machineId > MAX_MACHINE_NUM || machineId < 0) {
            throw new IllegalArgumentException("machineId can't be greater than MAX_MACHINE_NUM or less than 0");
        }
        this.datacenterId = datacenterId;
        this.machineId = machineId;
    }

    /**
     * 产生下一个ID
     *
     * @return
     */
    public synchronized long nextId() {
        long currStmp = getNewstmp();
        if (currStmp < lastStmp) {
            throw new RuntimeException("Clock moved backwards.  Refusing to generate id");
        }

        if (currStmp == lastStmp) {
            //相同毫秒内，序列号自增
            sequence = (sequence + 1) & MAX_SEQUENCE;
            //同一毫秒的序列数已经达到最大
            if (sequence == 0L) {
                currStmp = getNextMill();
            }
        } else {
            //不同毫秒内，序列号置为0
            sequence = 0L;
        }

        lastStmp = currStmp;

        return (currStmp - START_STMP) << TIMESTMP_LEFT //时间戳部分
                | datacenterId << DATACENTER_LEFT       //数据中心部分
                | machineId << MACHINE_LEFT             //机器标识部分
                | sequence;                             //序列号部分
    }

    private long getNextMill() {
        long mill = getNewstmp();
        while (mill <= lastStmp) {
            mill = getNewstmp();
        }
        return mill;
    }

    private long getNewstmp() {
        return System.currentTimeMillis();
    }

    public static void main(String[] args) throws ParseException {
        // 时间戳
        // System.out.println(System.currentTimeMillis());
        // System.out.println(new Date().getTime());
        //
        // String dateTime = "2021-01-01 08:00:00";
        // SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        // System.out.println(sdf.parse(dateTime).getTime());

        SnowFlake snowFlake = new SnowFlake(1, 1);

        long start = System.currentTimeMillis();
        for (int i = 0; i < 10; i++) {
            System.out.println(snowFlake.nextId());
            System.out.println(System.currentTimeMillis() - start);
        }
    }
}

完成新增功能

注入雪花算法工具类：
在这里插入图片描述
新增一个新增按钮：
在这里插入图片描述
新增一个add方法：
在这里插入图片描述
修改我们的服务层代码：
在这里插入图片描述
这样我们就实现了新增的功能。

增加删除电子书功能

在这里插入图片描述
同样我们是写咋EbookController中：
在这里插入图片描述
编写service层代码：
在这里插入图片描述
现在来编写前端代码，找到删除的按钮，添加点击事件：
在这里插入图片描述
处理删除的函数：

      const handleDelete = (id: number) => {
        axios.delete("/ebook/delete/" + id).then((response) => {
          const data = response.data; // data = commonResp
          if (data.success) {
            // 重新加载列表
            handleQuery({
              page: pagination.value.current,
              size: pagination.value.pageSize,
            });
          } else {
            message.error(data.message);
          }
        });
      };

写完函数后记得return出去
在这里插入图片描述
在这里插入图片描述
我们直接将删除按钮用一个popconfirm包裹起来就可以实现确认框效果：
在这里插入图片描述

集成Validation做参数校验

在这里插入图片描述
添加依赖：
在这里插入图片描述
给请求参数添加一些校验规则，来到请求参数这里：
在这里插入图片描述

然后给写好的controller加上valid注解：
在这里插入图片描述
测试一下：
在这里插入图片描述
发现报错：
在这里插入图片描述
后端日志也会打印出来：
在这里插入图片描述
但是我们这时候在前端测试，会发现请求报错，但是loading会一直在，这种业务逻辑是不合适的，我们应该有个提示：
在这里插入图片描述
这时候我们要用到一个统一异常处理类：

/**
 * 统一异常处理、数据预处理等
 */
@ControllerAdvice
public class ControllerExceptionHandler {

    private static final Logger LOG = LoggerFactory.getLogger(ControllerExceptionHandler.class);

    /**
     * 校验异常统一处理
     * @param e
     * @return
     */
    @ExceptionHandler(value = BindException.class)
    @ResponseBody
    public CommonResp validExceptionHandler(BindException e) {
        CommonResp commonResp = new CommonResp();
        LOG.warn("参数校验失败：{}", e.getBindingResult().getAllErrors().get(0).getDefaultMessage());
        commonResp.setSuccess(false);
        commonResp.setMessage(e.getBindingResult().getAllErrors().get(0).getDefaultMessage());
        return commonResp;
    }

    /**
     * 校验异常统一处理
     * @param e
     * @return
     */
    @ExceptionHandler(value = BusinessException.class)
    @ResponseBody
    public CommonResp validExceptionHandler(BusinessException e) {
        CommonResp commonResp = new CommonResp();
        LOG.warn("业务异常：{}", e.getCode().getDesc());
        commonResp.setSuccess(false);
        commonResp.setMessage(e.getCode().getDesc());
        return commonResp;
    }

    /**
     * 校验异常统一处理
     * @param e
     * @return
     */
    @ExceptionHandler(value = Exception.class)
    @ResponseBody
    public CommonResp validExceptionHandler(Exception e) {
        CommonResp commonResp = new CommonResp();
        LOG.error("系统异常：", e);
        commonResp.setSuccess(false);
        commonResp.setMessage("系统出现异常，请联系管理员");
        return commonResp;
    }
}

我们只需要添加这个类，springboot框架会扫描这个注解的类，自动帮我们使用，这时我们发现报错就是：
在这里插入图片描述
在这里插入图片描述
后端写完了，我们现在来写前端：
先导入ant design vue的message组件：
在这里插入图片描述
我们拿到后端的response后，我们去做个判断，如果成功就做原本的逻辑，如果不成功就弹出错误提示框：
在这里插入图片描述
我们再将修改的代码加一下校验：
在这里插入图片描述

电子书管理功能优化

在这里插入图片描述

增加名字查询

在这里插入图片描述
原本我们的表单只有一个新增的功能，现在我们加一个查询的按钮和输入框：
在这里插入图片描述handleQuery使我们之前就写好的函数。
我们需要一个响应式的参数：

在这里插入图片描述
param是给form用的，name就是要搜索的电子书的名字：
在这里插入图片描述
在handleQuery里我们就需要把name取出来：
在这里插入图片描述
最后记得将参数和函数返回：
在这里插入图片描述

编辑时复制对象

我们使用响应式变量会有个问题，比如当我们编辑电子书表单的时候，即使我们没有点确定，但由于在编辑的时候修改了，还是会发生变化：
在这里插入图片描述
在这里插入图片描述
所以我们要用对象的复制来解决这个问题，我们编写一个工具类：
在这里插入图片描述
在vue中使用先导入：
在这里插入图片描述
使用复制的对象：
在这里插入图片描述
这样我们就做到了编辑时复制对象，修改表单时，不会影响列表数据了。

总结

在这里插入图片描述
在这里插入图片描述

gujunhe
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue3打造SSR网站应用，0到1实现服务端渲染（附电子书）
10-14
Vue3打造SSR网站应用，0到1实现服务端渲染（附电子书）
基于Java+SpringBoot+Vue的网上书城管理系统设计与实现（源码+LW+部署文档等）
weixin_54828627的博客
08-10 1097
网上书城管理系统采用java技术，基于springboot框架和vue框架，mysql数据库进行开发，实现了首页、个人中心、用户管理、图书类型管理、图书分类管理、图书信息管理、我的收藏管理、系统管理、订单管理等内容进行管理，本系统具有良好的兼容性和适应性，为用户提供更多的网上书城信息，也提供了良好的平台，从而提高系统的核心竞争力。
【wiki知识库】01.wiki知识库前后端项目搭建（SpringBoot+Vue3）
qq_61024956的博客
05-26 1270
带你打造个人wiki知识库---项目前期准备
vue3 电子书 pdf转图片 pdf实现翻页效果 pdfjs-dist、turn.js电子书翻页效果
weixin_50587417的博客
07-18 4316
【代码】vue3 电子书 pdf转图片 pdf实现翻页效果 pdfjs-dist、turn.js电子书翻页效果。
vue.js毕业设计，基于vue.js前后端分离在线小说电子书阅读系统（H5移动项目） 开题报告
杭州.黄老师
11-24 1921
vue.js毕业设计，基于vue.js前后端分离在线小说电子书阅读系统（H5移动项目） 开题报告
electron+vue3全家桶+vite项目搭建【16.1】electron多窗口,pinia状态同步，扩展store方法，主动同步pinia的状态【推荐】
个人网站：https://www.longzipeng.online
08-22 2014
electron多窗口,pinia状态同步，扩展store方法，主动同步pinia的状态【推荐】
Spring Boot + Vue3 前后端分离 实战wiki知识库系统.zip
04-04
毕业设计是高等教育阶段学生在完成学业前所进行的一项重要学术任务，旨在检验学生通过学习所获得的知识、技能以及对特定领域的深刻理解能力。这项任务通常要求学生运用所学专业知识，通过独立研究和创新，完成一个...
读书笔记：Spring Boot + Vue3 前后端分离 实战wiki知识库系统.zip
最新发布
07-22
读书笔记：Spring Boot + Vue3 前后端分离 实战wiki知识库系统
SpringBoot2.0+Vue3.0前后端分离wiki文件管理系统源码.zip
05-23
"SpringBoot2.0+Vue3.0前后端分离wiki文件管理系统源码"是一个综合性的项目，涵盖了Web开发的多个方面，包括但不限于：前后端分离架构、SpringBoot的RESTful服务、Vue3.0的组件化开发、文件管理功能实现、以及知识...
Spring Boot + Vue3 前后端分离wiki知识库系统.zip
12-31
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用...
Electron25集成Vue3新建多开窗口|vite4+electron窗体管理器
码农ICoding
05-31 3562
继上一次分享electron24+vite4整合构建桌面端窗口应用。这次在此基础上分享封装多开窗口管理器ElectronVite-MultiWin。electron快速迭代更新，vite的高效构建运行速度，二者搭配构建独立窗口，打开速度极快。以上就是electron最新版+vite4创建多窗口的一些分享，希望对大家有所帮助哈~~为了能多次重复调用，现封装BrowserWindow方法。electron主进程模块BrowserWindow用于创建一个简单的新窗体。新建一个vue页面实践下创建多窗口方法。
《循序渐进Vue.js前端开发实战》电子书学习-第一章-从前端基础到Vue.js 3
m0_46614929的博客
06-03 2055
JavaScript的语法也是比较简单的，入门是很容易的。主要的特点是不像某些强类型语言那样严格，语句格式和变量类型都比较灵活。JavaScript使用var或者let来进行变量的定义。两者的差别是变量的作用域的不一样，定义变量的时候，无需关心变量的类型。函数是程序的功能单元，在JavaScript中定义函数主要有两种方法，一种是利用function关键字进行定义，另一种是es6新增的利用箭头函数进行定义。这两种定义函数，在调用的时候方式都是一样的。
Java项目:在线小说阅读系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
常年被追砍的博客
07-06 1384
一、项目简述 本系统功能包括： 普通用户端登录注册，小说的分类，日榜，月榜，年榜， 小说的阅读，分章节，小说的评论，收藏，推荐等等，以 及后台小说的维护，上架，编辑等等。 二、项目运行 环境配置： Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX (Webstorm也 行)+ Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts都支 持)。 项目技术： Springboot + Maven + Mybatis + Vue + R...
Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统＜四＞--前后端交互整合
webor2006的博客
03-09 1339
Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统--前后端交互整合
基于springboot+vue3知识库系统开发
m0_51764537的博客
08-16 3537
基于springboot+Vue3的知识库系统开发实战
vue3+ts+vite+element plus中使用luckysheet（预览效果）
flhhly的博客
06-15 3015
简单使用luckysheet
vue3+ts+vite+electron搭建桌面应用
Bennett_G博客
04-04 1698
提示：开发桌面应用，就不得不提Electron ，之前使用vue+electron ,官方提供了Vue CLI Plugin Electron Builder,但是也只能使用了vue-cli(而且使用vue-cli-electron-builder构建，发现最新版本也才13,Electron最新版本都23了😅😅😅),随着vite的崛起以及ts,我们也需要与时俱进不是吗😃😃😃ts: ^4.9.3。
VUE3 史上最强VUE总结来了
start1018的博客
02-24 476
什么是VUE   Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 VUE.js的安装   先创建一个 .html 文件，然后通过如下方式引入 Vue： <script src="js/vue.js"></script
毕业设计So Easy：SpringBoot+Vue图书阅读和管理系统（前端+后端+小程序端）
不脱发的程序猿
03-09 1406
本项目基于SpringBoot+Vue实现的图书阅读和管理系统分为三个平台： 后台管理平台 (图书管理模块+读者管理模块+创作者管理模块+社区管理模块）； 前台阅读平台 (阅读模块+社区模块+创作者模块）； 小程序社区平台 (阅读模块+社区模块 ）。
spring boot+vue3前后端分离,实战wiki知识库系统
10-30
Spring Boot和Vue3是一种常用的前后端分离的技术组合，可以用于构建实战的Wiki知识库系统。 首先，采用Spring Boot作为后端框架可以快速搭建项目的基本框架和配置，并提供了许多有用的功能和便利的工具。Spring Boot具有自动配置的特点，可以减少开发人员的配置工作，提高开发效率。同时，Spring Boot还提供了丰富的插件和扩展库，可以集成和支持各种数据库、消息队列等常用的后端技术。 而Vue3是一种现代的JavaScript框架，用于构建用户界面。相较于Vue2，Vue3在性能和开发体验上都有了显著的提升。Vue3引入了响应式API、组合API等新特性，让开发者能够更容易地编写复杂的交互逻辑和可重用组件。同时，Vue3还优化了虚拟DOM和编译器，提高了渲染性能和项目的整体性能。 在实战Wiki知识库系统中，可以通过前后端分离的方式来实现系统的架构。后端使用Spring Boot提供数据管理和业务逻辑处理的接口，前端使用Vue3进行页面的展示和用户交互。前后端通过RESTful API进行通信，实现数据的请求和响应。 在后端，可以使用Spring Boot提供的JPA或MyBatis等持久层框架来操作数据库，并使用Spring Security来实现用户认证和权限控制。同时，可以使用Spring的缓存、事务管理等特性来提高系统的性能和安全性。 在前端，可以使用Vue3的组件化开发方式构建页面，并使用Vue Router进行页面之间的导航。可以使用Vue3的响应式API和组合API来管理页面的数据和交互逻辑。同时，可以使用Element Plus等常用的UI组件库，提供美观、易用的用户界面。 总而言之，通过使用Spring Boot和Vue3的前后端分离技术，可以构建一个功能强大、性能优越的Wiki知识库系统，实现数据管理、用户认证和权限控制等功能，为用户提供高效的知识管理平台。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gujunhe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值