Spring Boot+Vue3前后端分离实战wiki知识库系统之后端架构完善与接口开发

数据库准备

在这里插入图片描述

本地数据库准备

在本地使用navicat 添加本地数据库连接:
在这里插入图片描述
创建一个wiki数据库:
在这里插入图片描述
创建一个专用的账户:
在这里插入图片描述
配置权限设置单个库的权限:
在这里插入图片描述
通过这个用户名创建数据库的连接:
在这里插入图片描述
然后就能操作数据库了

阿里云数据库准备

IDEA数据库插件配置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用IDEA右侧的Database创建连接:
在这里插入图片描述
输入账号密码测试连接(如果是首次连接可能需要下载驱动 看看报错有没有提示下载):
在这里插入图片描述
之后我们就可以直接操作数据库和查看数据库:
在这里插入图片描述
如果我们使用可视化界面来操作数据库,例如增加数据等,我们需要提交事物,否则数据库不会改变:
在这里插入图片描述

集成持久层框架Mybatis

在这里插入图片描述
Hibernate:全自动的框架,强大、复杂、笨重、学习成本较高。
Mybatis:半自动的框架(需要开发者了解数据库),必须要自己写SQL

集成Mybatis

添加依赖:

        <!-- 集成mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <!-- 集成mysql连接 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.22</version>
        </dependency>

此时我们运行代码会报错,是因为没有找到数据源,所以得我们自己去application.properties中配置数据源:
在这里插入图片描述

演示查询test表

我们在wiki目录下新增一个包domain(可以叫domain或entity或POJO,宗旨这一层实体类就是和数据库表一一映射)
我们在domain包中创建一个Test:
在这里插入图片描述
接下来我们创建持久层(Mapper层)即广为人知的Dao层,因为后需要用官方代码生成器,其生成的代码就是XXXMapper:
在这里插入图片描述
创建TestMapper接口返回一个Test的List:
在这里插入图片描述
我们在resource下创建一个mapper,以后所有的sql脚本全部放在该文件夹下:
在这里插入图片描述
编写一个对应刚刚的接口的xml文件TestMapper.xml,其中namespace要和接口文件对应,id对应接口中的方法名,resultType为返回的实体类:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.jiawa.wiki.mapper.TestMapper" >

    <select id="list" resultType="com.jiawa.wiki.domain.Test">
        select `id`, `name`, `password` from `test`
    </select>

</mapper>

这里推荐一款插件(能够快速从代码跳转到mapper及从mapper返回代码)::

在这里插入图片描述
在这里插入图片描述
那么项目怎么知道Mapper就是持久层呢,我们需要在启动类添加扫描注解(MapperScan):
在这里插入图片描述

整个项目怎么知道XML就是要执行的SQL 呢?
我们 需要在项目的配置文件(application.properties)配置mybatis所有Mapper.xml所在的路径:
在这里插入图片描述
接下来我们演示如何使用持久层:
我们创建一个service包,服务层中编写逻辑(注解不要漏,@service是提供给系统扫描的):

@Service
public class TestService {

    @Resource
    private TestMapper testMapper;

    public List<Test> list() {
        return testMapper.list();
    }
}

接下来我们在TestController里编写接口,先注入TestService:
在这里插入图片描述
再编写接口:
在这里插入图片描述
测试:
在这里插入图片描述

集成Mybatis官方代码生成器

在这里插入图片描述

集成MybatisGenerator

通过我们之前编写的查询test表的代码我们可以看出还是比较繁琐的,这时候我们就可以使用MybatisGenerator简化开发。

在配置文件中添加插件:

            <!-- mybatis generator 自动生成代码插件 -->
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.4.0</version>
                <configuration>
                    <configurationFile>src/main/resources/generator/generator-config.xml</configurationFile>
                    <overwrite>true</overwrite>
                    <verbose>true</verbose>
                </configuration>
                <dependencies>
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>8.0.22</version>
                    </dependency>
                </dependencies>
            </plugin>

创建generator-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    <context id="Mysql" targetRuntime="MyBatis3" defaultModelType="flat">

        <!-- 自动检查关键字,为关键字增加反引号 -->
        <property name="autoDelimitKeywords" value="true"/>
        <property name="beginningDelimiter" value="`"/>
        <property name="endingDelimiter" value="`"/>

        <!--覆盖生成XML文件-->
        <plugin type="org.mybatis.generator.plugins.UnmergeableXmlMappersPlugin" />
        <!-- 生成的实体类添加toString()方法 -->
        <plugin type="org.mybatis.generator.plugins.ToStringPlugin"/>

        <!-- 不生成注释 -->
        <commentGenerator>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>

        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                        connectionURL="jdbc:mysql://rm-uf6470s9615e13hc4no.mysql.rds.aliyuncs.com:3306/wikidev?serverTimezone=Asia/Shanghai"
                        userId="wikidev"
                        password="wikidevABC123">
        </jdbcConnection>

        <!-- domain类的位置 -->
        <javaModelGenerator targetProject="src\main\java"
                            targetPackage="com.jiawa.wiki.domain"/>

        <!-- mapper xml的位置 -->
        <sqlMapGenerator targetProject="src\main\resources"
                         targetPackage="mapper"/>

        <!-- mapper类的位置 -->
        <javaClientGenerator targetProject="src\main\java"
                             targetPackage="com.jiawa.wiki.mapper"
                             type="XMLMAPPER"/>

        <!--<table tableName="demo" domainObjectName="Demo"/>-->
        <!--<table tableName="ebook"/>-->
        <!--<table tableName="category"/>-->
        <!--<table tableName="doc"/>-->
        <!--<table tableName="content"/>-->
        <!--<table tableName="user"/>-->
        <table tableName="ebook_snapshot"/>
    </context>
</generatorConfiguration>

演示demo表列表查询

接下来我们添加一个configuration
在这里插入图片描述
选择maven:
在这里插入图片描述
然后运行我们就发现自动生成了一些文件我们就可以直接使用了:
在这里插入图片描述

编写服务层代码:

@Service
public class DemoService {

    @Resource
    private DemoMapper demoMapper;

    public List<Demo> list() {
        return demoMapper.selectByExample(null);
    }
}

编写接口:

@RestController
@RequestMapping("/demo")
public class DemoController {

    @Resource
    private DemoService demoService;

    @GetMapping("/list")
    public List<Demo> list() {
        return demoService.list();
    }
}

测试:
在这里插入图片描述
在这里插入图片描述

电子书列表查询接口开发

在这里插入图片描述

电子书表结构设计

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

使用代码生成器快速开发列表接口

在generator-config中添加table:
在这里插入图片描述
运行mybatis-generator,自动生成持久层代码。
在这里插入图片描述
编写服务层代码:
在这里插入图片描述
编写controller:
在这里插入图片描述
测试:
在这里插入图片描述
在这里插入图片描述
后端会有很多接口,为了让前端能够统一处理逻辑(登录校验、权限校验),需要统一后端的返回值。
新建resp包:
在这里插入图片描述
编写通用的返回类:

public class CommonResp<T> {

    /**
     * 业务上的成功或失败
     */
    private boolean success = true;

    /**
     * 返回信息
     */
    private String message;

    /**
     * 返回泛型数据,自定义类型
     */
    private T content;

    public boolean getSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getContent() {
        return content;
    }

    public void setContent(T content) {
        this.content = content;
    }

    @Override
    public String toString() {
        final StringBuffer sb = new StringBuffer("ResponseDto{");
        sb.append("success=").append(success);
        sb.append(", message='").append(message).append('\'');
        sb.append(", content=").append(content);
        sb.append('}');
        return sb.toString();
    }
}

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

在这里插入图片描述
实际工作中,有些项目会在CommonResp里加上其他通用的属性,比如接口版本号、返回码等。

封装请求参数和返回参数

在这里插入图片描述

根据名称模糊查询电子书

例如我们根据电子书名字模糊查询
在这里插入图片描述

修改service代码(使用插件给我们自动生成的Example类):
在这里插入图片描述

在这里插入图片描述
左匹配和右匹配,左右都加%,最后再把创建好的example用于查询。
测试:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

封装请求参数

我们通常不会直接使用name去查询,因为后续迭代可能有新的需求,所以我们一般将所有参数封装成一个类。
创建一个包req:
在这里插入图片描述
新建电子书查询请求的类:
在这里插入图片描述

修改controller和service:
在这里插入图片描述
在这里插入图片描述
热部署启动后我们使用刚刚编写的测试类,测试发现依旧能请求成功,我们虽然请求参数封装了,但Sprin会自动将参数映射到类属性,只要属性名和请求参数的时候的名字一样就行。

封装返回参数

我们当前接口编写的返回参数为整个Ebook,但是有时候我们的业务并不需要返回整个类,例如:
在这里插入图片描述
创建一个Ebook的返回参数类:

在这里插入图片描述

同样需要修改service层代码:
在这里插入图片描述
在这里插入图片描述
这样直接用set写比较麻烦,所以我们可以直接使用spring提供的工具类:
在这里插入图片描述
在这里插入图片描述
修改controller:
在这里插入图片描述

在这里插入图片描述
热部署项目,测试成功:
在这里插入图片描述

制作CopyUtil封装BeanUtils

就在之前我们使用Spring提供的BeanUtils简化了代码,但还是有些繁琐,要写循环语句等:
在这里插入图片描述
所以我们一般会提取公用的东西封装工具类,创建一个工具类的包util:
在这里插入图片描述
编写CopyUtil:

public class CopyUtil {

    /**
     * 单体复制
     */
    public static <T> T copy(Object source, Class<T> clazz) {
        if (source == null) {
            return null;
        }
        T obj = null;
        try {
            obj = clazz.newInstance();
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
        BeanUtils.copyProperties(source, obj);
        return obj;
    }

    /**
     * 列表复制
     */
    public static <T> List<T> copyList(List source, Class<T> clazz) {
        List<T> target = new ArrayList<>();
        if (!CollectionUtils.isEmpty(source)){
            for (Object c: source) {
                T obj = copy(c, clazz);
                target.add(obj);
            }
        }
        return target;
    }
}

修改service层:
在这里插入图片描述
修改完后我们重新编译,发现报错,但是代码没问题,这时候我们可以clean一下,因为maven可能存在编译缓存:
在这里插入图片描述

在这里插入图片描述

总结

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

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Spring BootVue3是一种常用的前后端分离的技术组合,可以用于构建实战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 BootVue3的前后端分离技术,可以构建一个功能强大、性能优越的Wiki知识库系统,实现数据管理、用户认证和权限控制等功能,为用户提供高效的知识管理平台。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

gujunhe

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

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

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

打赏作者

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

抵扣说明:

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

余额充值