我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

搭建SpringBoot+Vue框架_基于springboot和vue框架

作者：我家小花儿 | 2024-03-28 05:13:02

踩

基于springboot和vue框架

一、SpringBoot框架搭建

首先先检查自己的软件版本：

开始新建框架

报这个错主要是第二张图片Type选错了，应该选择Maven，切记java版本不要选错了

删了上述的还需要删除test
未配置数据库，直接运行出错

新建一个数据库，需要选择这些

然后修改配置文件

代码如下
端口8080
数据库是zd_study 用户名：root 密码：123456


server:
  port: 8080
 
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/zd_study?serverTimezone=GMT%2b8
    username: root
    password: 123456

只是配置好了数据能正常启动，但是不能进入端口，因为还没有配置启动类，配置如下：

代码如下：


@RestController
@SpringBootApplication
public class SpringbootApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(SpringbootApplication.class, args);
    }
 
    @GetMapping("/")
    public String index(){
        return "OK";
    }
 
}

试了下 @GetMapping 不加 ("/") 这个也已运行，目前不知道什么原因，代码：


@RestController
@SpringBootApplication
public class SpringbootApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(SpringbootApplication.class, args);
    }
 
    @GetMapping
    public String index(){
        return "OK";
    }
 
}

二、在IDEA中使用Git 上传到git远程仓库

首先在终端运行git init 命令

运行之后即会出现下图的 git 箭头

然后就是按照git使用方法上传到远程仓库
具体方法可参考如下链接：
idea 上传本地springboot 项目到github_idea的本地springboot项目上传到git 和别人一起开发-CSDN博客

三、前端框架

首先在终端cmd进入一个文件夹里，就是在这个文件夹创建前端项目

然后运行第一条命令，创建名字是 vue 的前端项目
```
vue  create vue  
```
进行选择 Manually select features ，回车

然后用IDEA打开这个vue，可以先单独打开

在IDEA终端运行 npm run serve 命令

运行成功之后：

输入地址，查看是否成功

还有一个在IDEA加serve 启动按钮没整好
好像只是前端项目并没有启动按钮，搜一下有：
idea中启动vue项目_idea 如何启动两个vue项目-CSDN博客
正好之后运行俩个地址都可以
http://localhost:8080/
http://localhost:8081/

已经解决，原因是运行了俩次，
npm run serve 运行端口是8080
点击按钮前未关，运行端口为8081

3.1 前端项目和后端项目整合在一起

直接拖动前端项目到后端项目里即可

此时项目里没有serve启动按钮，需要设置一下，需要注意以下几点
也可以参考这个博客：idea中启动vue项目_idea 如何启动两个vue项目-CSDN博客

可以先运行一下程序，如果正确然后上传到远程仓库

首先在后端的application.yml配置文件里修改后端端口为9090，防止俩个端口冲突

然后运行前后端都是正常的，即可推送到远程仓库

选择修改的内容，进行推送

这一步圈画错了，应该是Push
这样推送只是上传了 application.yml 配置文件，但是vue并没有上传，需要继续推送，应该是第一次没有配置vue的远程仓库，未选择，vue是Define remote，所以还需要继续配置一下

这样推送也不可以，显示vue: push to origin/master was rejected ，被拒绝了

3.2查了很多，整了一个多小时，没整出来

最后把一开始创建的vue项目删除了，又重新在后端项目里创建了vue项目，然后运行没错误，但是git的时候显示
The directory <Project>\vue is registered as a Git root, but no Git repositories were found there.
参考下面的博客，解决了
就是把红色的vue项目删了，就可以了

导入Git项目报错：is registered as a Git root, but no Git repositories were found there_Cignus的博客-CSDN博客

这样推送上去，git显示的vue是个模块，不是文件夹，打不开，然后又在git里删除了vue模块，在IDEA重新拉去了一下，vue的文件变红色，又重新推送一下，结果成功了

然后分别修改前后端项目代码，重新上传都可以，至此git 整成功了

四、Vue2集成ElementUI 框架

1、安装ElementUI：`npm i element-ui -S`

Element - The world's most popular Vue UI frameworkElementUI官方地址： Element - The world's most popular Vue UI framework
在vue路径下运行上述命令

git 上传到远程仓库，俩个文件发生了变化，安装成功，可以查看版本号

2、引入Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
完整引入
在 main.js 中写入以下内容：

main.js


import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
 
Vue.use(ElementUI, {size: "small"});
 
Vue.config.productionTip = false
 
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

修改了文件的名字

在router 的index.js文件里修改以下内容

改造Home.vue 和 APP.vue

五、Vue后台主体、整体布局搭建

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

找了 Element的一个实例，进行修改的

Home.vue主要代码如下：


<template>
    <el-container style="min-height: 100vh">
        <el-aside :width="sideWidth + 'px'"
                  style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
            <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
                     background-color="rgb(48, 65, 86)"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     :collapse-transition="false"
                     :collapse="isCollapse"
            >
                <div style="height: 60px; line-height: 60px; text-align: center">
                    <img src="../assets/logo.png" alt=""
                         style="width: 20px; position: relative; top: 5px; margin-right: 5px">
                    <b style="color: white" v-show="logoTextShow">ERP管理系统</b>
                </div>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-house"></i>
                        <span slot="title">主页</span>
                    </template>
                </el-submenu>
                <el-submenu>
                    <template slot="title"><i class="el-icon-menu"></i><span slot="title">系统管理</span></template>
                    <el-menu-item index="2-1">用户管理</el-menu-item>
                    <el-menu-item index="2-2">角色管理</el-menu-item>
                    <el-menu-item index="2-3">菜单管理</el-menu-item>
                    <el-menu-item index="2-3">文件管理</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i><span slot="title">生产管理</span></template>
                    <el-menu-item index="3-1">选项1</el-menu-item>
                    <el-menu-item index="3-2">选项2</el-menu-item>
                    <el-menu-item index="3-3">选项3</el-menu-item>
                    <el-menu-item index="3-3">选项3</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
 
        <el-container>
            <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
                <div style="flex: 1; font-size: 20px">
                    <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
                </div>
                <el-dropdown style="width: 70px; cursor: pointer">
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item>个人信息</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>
 
            <el-main>
 
                <div style="margin-bottom: 30px">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
 
                <div style="margin: 10px 0">
                    <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
                    <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message"
                              class="ml-5"></el-input>
                    <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position"
                              class="ml-5"></el-input>
                    <el-button class="ml-5" type="primary">搜索</el-button>
                </div>
 
                <div style="margin: 10px 0">
                    <el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
                    <el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
                    <el-button type="primary">导入 <i class="el-icon-bottom"></i></el-button>
                    <el-button type="primary">导出 <i class="el-icon-top"></i></el-button>
                </div>
 
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button type="success">编辑 <i class="el-icon-edit"></i></el-button>
                            <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
 
                <div style="padding: 10px 0">
                    <el-pagination
 
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="400">
                    </el-pagination>
                </div>
            </el-main>
 
        </el-container>
    </el-container>
</template>
 
<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
 
    export default {
        name: 'Home',
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(10).fill(item),
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                logoTextShow: true,
                headerBg: 'headerBg'
            }
        },
        methods: {
            collapse() {  // 点击收缩按钮触发
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) {  // 收缩
                    this.sideWidth = 64
                    this.collapseBtnClass = 'el-icon-s-unfold'
                    this.logoTextShow = false
                } else {   // 展开
                    this.sideWidth = 200
                    this.collapseBtnClass = 'el-icon-s-fold'
                    this.logoTextShow = true
                }
            }
        }
    }
</script>
 
<style>
    .headerBg {
        background: #eee!important;
    }
</style>

实现了如下图所示的页面：

六、SpringBoot集成Mybatis 实现增删改查，分页查询

1、实现一个小小的查询全部数据

在zd_study数据库中新建sys_user表：


CREATE TABLE `sys_user` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'id',
  `username` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '用户名',
  `password` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
  `nickname` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '昵称',
  `role` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',
  `email` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮件',
  `phone` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '手机',
  `address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地址',
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '创建时间',
  `avatar_val` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

2.在springboot项目里新建 entiy，controller，mapper 文件夹，分别创建了 User实体类、UserController类和UserMapper接口。


User:
 
@Data
public class User {
    private Integer id;  //id
    private String username;  //名字
    private String password;//密码
    private String nickname;//昵称
    private String role;  //角色
    private String email;   //邮件
    private String phone;   //手机号
    private String address;   //地址
    private Date createTime;   //创建时间
    private String avatarVal;   //头像
}
 
UserController:
 
@RestController
//https://www.cnblogs.com/fishpro/p/spring-boot-study-restcontroller.html
//解释注解的文章
public class UserController {
    @Resource
    private UserMapper userMapper;
    //查询所有的数据
    @GetMapping("/")
    public List<User> findAll() {
        List<User> users = userMapper.findAll();
        return users;
    }
}
 
UserMapper:
 
@Mapper
public interface UserMapper {
    @Select("select * from sys_user")
    List<User> findAll();
}

运行结果如下图，但是创建时间没有查出来：（貌似就是查不出来的，跟着视频学的人家也查不出来）

2、实现增删改查

Controller 调用 service 接口封装的mapper里的方法，serviceImpl是实现类，mapper的sql查询语句在mapper.xml文件里写。
Entity就是实体层，Mapper层与DAO等价，是用于直接操作数据库的层。

Service层就是对DAO层进行封装，相当于做好的工具，让用户直接用就好了。

xml文件需要进行的配置如下: namespace="com.zd.springboot.mapper.UserMapper" 表示指定的mapper文件


<?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.zd.springboot.mapper.UserMapper">
 
</mapper>

配置yml文件，不配置会出现错误，因为SpringBoor并不知道去哪找xml文件，需要配置路径，如下代码
```
mybatis:
  mapper-locations: classpath:mapper/*.xml  #扫描所有mybatis的xml文件
```
以下是几个文件的代码：


//UserController：
 
@RestController
@RequestMapping("/user")
public class UserController {
 
    @Resource
    private UserMapper userMapper;
 
    @Resource
    private IUserService userService;
 
    /**
     * 查询所有的数据
     * @return
     */
    @GetMapping
    public List<User> findAll() {
        List<User> users = userMapper.findAll();
        return users;
    }
 
    /**
     * 更新或者增加
     * @param user
     * @return
     */
    @PostMapping
    public Integer save(@RequestBody User user){
        int save = userService.save(user);
        return save;
    }
 
    @DeleteMapping("/{id}")
    public Integer delete(@PathVariable Integer id){
        // @PathVariable 必须要有这个注解，使得"/{id}"与Integer id保持一致
        int save = userService.deleteById(id);
        return save;
    }
 
}
 
//IUserService ：：：：
 
public interface IUserService {
 
    int save(User user);
 
    int deleteById(Integer id);
}
 
//IUserServiceImpl ：
 
@Service
public class IUserServiceImpl implements IUserService {
 
    @Resource
    private UserMapper userMapper;
 
 
    @Override
    public int save(User user) {
        if (user.getId() == null) {
            return userMapper.insert(user);
        }else {
            return userMapper.update(user);
        }
    }
 
    @Override
    public int deleteById(Integer id) {
 
        return userMapper.deleteById(id);
    }
}
 
//UserMapper 
 
@Mapper
public interface UserMapper {
 
    @Select("select * from sys_user")
    List<User> findAll();
 
    int insert(User user);
 
    int update(User user);
 
    int deleteById(Integer id);
}
 
 
//UserMapper .xml
 
<?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.zd.springboot.mapper.UserMapper">
 
    <update id="update">
        update sys_user
        <set>
            <if test="username != null">
                username = #{username},
            </if>
            <!--            <if test="password != null">-->
            <!--                password = #{password}-->
            <!--            </if>-->
            <if test="nickname != null">
                nickname = #{nickname},
            </if>
            <if test="email != null">
                email = #{email},
            </if>
            <if test="phone != null">
                phone = #{phone},
            </if>
            <if test="address != null">
                address = #{address}
            </if>
        </set>
        <where>
            id = #{id}
        </where>
    </update>
 
    <insert id="insert" parameterType="com.zd.springboot.entity.User">
        INSERT INTO  sys_user(
	        username, password,nickname,email,phone,address
	         )VALUES (#{username}, #{password},#{nickname}, #{email},#{phone}, #{address})
    </insert>
 
    <delete id="deleteById">
        delete from sys_user where id = #{id}
    </delete>
 
</mapper>

3、分页查询

两个不同的端口进行数据交互需要设置跨域请求，前端后端的端口分别为8080和9090，所以首先要设置跨域请求

分页思路：


SELECT * from sys_user limit 0,2;  --第一页
-- (2 -1) * 2 = 2
SELECT * from sys_user limit 2,2;  --第二页
-- （3-1）* 2 = 4
SELECT * from sys_user limit 4,2;  --第三页
-- 结论： limit第一个参数 = (pageNum - 1) * pageSize

各个代码：UserController： /** * 分页查询 * 接口路径：/user/page?pageNum=1&pageSize=10 * @RequestParam接受 * @param pageNum * @param pageSize * @param username * @return */ @GetMapping("/page") public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize, @RequestParam String username) { pageNum = (pageNum - 1) * pageSize; username = "%" + username + "%"; List<User> data = userService.selectPage(pageNum, pageSize,username); Integer total = userService.selectTotal(username); Map<String, Object> res = new HashMap<>(); res.put("data", data); res.put("total", total); return res; } CorsConfig ： @Configuration public class CorsConfig { // 当前跨域请求最大有效时长。这里默认1天 private static final long MAX_AGE = 24 * 60 * 60; @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址 corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头 corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法 corsConfiguration.setMaxAge(MAX_AGE); source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置 return new CorsFilter(source); } } IUserService: //分页查询 List<User> selectPage(Integer pageNum, Integer pageSize, String username); //通过名字模糊查询个数 Integer selectTotal(String username); IUserServiceImpl: @Override public List<User> selectPage(Integer pageNum, Integer pageSize, String username) { return userMapper.selectPage(pageNum, pageSize, username); } @Override public Integer selectTotal(String username) { return userMapper.selectTotal(username); } Usermapper： List<User> selectPage(Integer pageNum, Integer pageSize, String username); Integer selectTotal(String username); Usermapper.xml <select id="selectPage" resultType="com.zd.springboot.entity.User"> select * from sys_user where username like #{username} limit #{pageNum}, # {pageSize} </select> <select id="selectTotal" resultType="integer"> select count(*) from sys_user where username like concat('%', #{username}, '%') </select> Home.vue <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></el-input> <el-button class="ml-5" type="primary" @click="load">搜索</el-button> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> data() { return { tableData: [], total: 0, pageNum: 1, pageSize: 2, username:"", collapseBtnClass: 'el-icon-s-fold', isCollapse: false, sideWidth: 200, logoTextShow: true, headerBg: 'headerBg' } }, created() { //请求分页数据 this.load() }, load() { fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize=" + this.pageSize + "&username=" + this.username) .then(res => res.json()).then(res => { this.tableData = res.data this.total = res.total }) }, handleSizeChange(pageSize) { this.pageSize = pageSize this.load() }, handleCurrentChange(pageNum) { this.pageNum = pageNum this.load() }

七、SpringBoot集成Mybatis-Plus 和 SwaggerUI

添加 Mybatis-Plus的依赖，配置MybatisPlusConfig.java ，还需要在

application.yml文件里添加配置


添加依赖：
<!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
 
配置MybatisPlusConfig.java ：
 
@Configuration
@MapperScan("com.zd.springboot.mapper")
public class MybatisPlusConfig {
 
    // 最新版
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
 
}
 
 
配置 application.yml:
 
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

添加SwaggerUI 的依赖，并进行配置SwaggerConfig.java


添加依赖：
 
<!--swag-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
 
配置SwaggerConfig.java  ：
 
@EnableSwagger2
@Configuration
public class SwaggerConfig {
    /**
     * 创建API应用
     * apiInfo() 增加API相关信息
     * 通过select()函数返回一个ApiSelectorBuilder实例,用来控制哪些接口暴露给Swagger来展现，
     * 本例采用指定扫描的包路径来定义指定要建立API的目录。
     *
     * @return
     */
    @Bean
    public Docket restApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .groupName("标准接口")
                .apiInfo(apiInfo("Spring Boot中使用Swagger2构建RESTful APIs", "1.0"))
                .useDefaultResponseMessages(true)
                .forCodeGeneration(false)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.zd.springboot.controller"))
                .paths(PathSelectors.any())
                .build();
    }
 
    /**
     * 创建该API的基本信息（这些基本信息会展现在文档页面中）
     * 访问地址：http://ip:port/swagger-ui.html
     *
     * @return
     */
    private ApiInfo apiInfo(String title, String version) {
        return new ApiInfoBuilder()
                .title(title)
                .description("更多请关注: https://blog.csdn.net/xqnode")
                .termsOfServiceUrl("https://blog.csdn.net/xqnode")
                .contact(new Contact("xqnode", "https://blog.csdn.net/xqnode", "xiaqingweb@163.com"))
                .version(version)
                .build();
    }
}

运行地址是：http://localhost:9090/swagger-ui.html#/

修改以前没使用Mybatis-Plus的增删改查语句和分页查询，使用Mybatis-Plus，需把相同方法相同名字的原方法注释一下，mapper，service，.xml都需要注释一下，运行成功在Postman能够查看到数据并显示，但是在前端并没显示数据，（可能是还未进行修改前端代码）
mapper接口需继承 extends BaseMapper<User>，@Mapper 已经在MybatisPlusConfig.java进行配置，注解：@MapperScan("com.zd.springboot.mapper")，所以这里无需@Mapper
```
//@Mapper
public interface UserMapper extends BaseMapper<User> {
}
```

IUserService接口需继承 extends IService<User>


public interface IUserService extends IService<User> {
}

IUserServiceImpl 实现类IUserServiceImpl extends ServiceImpl<UserMapper,User>


@Service
public class IUserServiceImpl extends ServiceImpl<UserMapper,User> implements IUserService {
}

控制层UserController进行修改了一些修改以前没使用Mybatis-Plus的增删改查语句和分页查询，使用Mybatis-Plus进行查询，实现了用Mybatis-Plus的增删改查和分页查询，但是用PostMan进行分页查询是可以查看到数据的，在前端显示有数据，但是看不到


@RestController
@RequestMapping("/user")
public class UserController {
 
 
    @Resource
    private IUserService userService;
 
    /**
     * 查询所有的数据
     *
     * @return
     */
    @GetMapping
    public List<User> findAll() {
        return userService.list();
    }
 
    /**
     * 更新或者增加
     *
     * @param user
     * @return
     */
    @PostMapping
    public Boolean save(@RequestBody User user) {
 
        return userService.saveOrUpdate(user);
    }
 
    /**
     * 通过id删除
     *
     * @param id
     * @return
     */
    @DeleteMapping("/{id}")
    public boolean delete(@PathVariable Integer id) {
        // @PathVariable 必须要有这个注解，使得"/{id}"与Integer id保持一致
        return userService.removeById(id);
    }
 
 
    /**
     * Mybatis-Plus的分页查询
     * 接口路径：/user/page?pageNum=1&pageSize=10
     *                       @RequestParam接受
     * @param pageNum
     * @param pageSize
     * @param username
     * @return
     */
    @GetMapping("/page")
    public IPage<User> findPage(@RequestParam Integer pageNum,
                                @RequestParam Integer pageSize,
                                @RequestParam(defaultValue = "") String username,
                                @RequestParam(defaultValue = "") String nickname,
                                @RequestParam(defaultValue = "") String address) {
        IPage<User> page = new Page<>(pageNum, pageSize);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        if (!"".equals(username)) {
            queryWrapper.like("username", username);
        }
        if (!"".equals(nickname)) {
            queryWrapper.like("nickname", nickname);
        }
        if (!"".equals(address)) {
            queryWrapper.like("address", address);
        }
        return userService.page(page,queryWrapper);
    }
 
}

八、Vue实现增删改查

1、增删改查

前端请求后台的工具axios，vue安装axios：npm i axios -S

request.js封装 axios，


import axios from 'axios'
 
const request = axios.create({
    baseURL: 'http://localhost:9090',   //以后就不用在方法里写这个请求头了，直接/user这样就可以
    timeout: 5000
})
 
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
 
    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});
 
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
 
 
export default request

实现各个功能代码


UserController：
 
//批量删除
    @PostMapping("/del/batch")
    public boolean deleteBath(@RequestBody List<Integer> ids) {
        return userService.removeByIds(ids);
    }
 
 
Home.vue
 
save() {
                request.post("/user", this.form).then(res => {
                    if (res) {
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error("保存失败")
                    }
                })
            },
            handleAdd() {
                this.dialogFormVisible = true
                this.form = {}
            },
            handleEdit(row) {
                this.form = row   //把列表的数据赋予row，row是表单scop
                this.dialogFormVisible = true
            },
            del(id) {
                request.delete("/user/" + id).then(res => {
                    if (res) {
                        this.$message.success("删除成功")
                        this.load()
                    } else {
                        this.$message.error("删除失败")
                    }
                })
            },
            delBatch() {
                let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
                request.post("/user/del/batch", ids).then(res => {
                    if (res) {
                        this.$message.success("批量删除成功")
                        this.load()
                    } else {
                        this.$message.error("批量删除失败")
                    }
                })
            },
            reset() {
                this.username = ""
                this.email = ""
                this.address = ""
                this.load()
            },
            handleSelectionChange(val) {  //批量删除时选择那些存到val里
                console.log(val)
                this.multipleSelection = val
            },

2、SpringBoot代码生成器

导入Mybatis-Plus生成器的依赖


<!-- 代码生成器 -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.5.1</version>
</dependency>
<dependency>
    <groupId>org.apache.velocity</groupId>
    <artifactId>velocity</artifactId>
    <version>1.7</version>
</dependency>

配置 CodeGenerator


/**
 * mp代码生成器
 * by 青哥哥
 * @since 2022-01-26
 */
public class CodeGenerator {
 
    public static void main(String[] args) {
        generate();
    }
 
    private static void generate() {
        FastAutoGenerator.create("jdbc:mysql://localhost:3306/zd_study?serverTimezone=GMT%2b8", "root", "123456")
                .globalConfig(builder -> {
                    builder.author("郑迪") // 设置作者
                            .enableSwagger() // 开启 swagger 模式
                            .fileOverride() // 覆盖已生成文件
                            .outputDir("D:\\IDEAcode\\郑迪学习框架\\springboot\\src\\main\\java\\"); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent("com.zd.springboot") // 设置父包名
                            .moduleName(null) // 设置父包模块名
                            .pathInfo(Collections.singletonMap(OutputFile.mapperXml, "D:\\IDEAcode\\郑迪学习框架\\springboot\\src\\main\\resources\\mapper\\")); // 设置mapperXml生成路径
                })
                .strategyConfig(builder -> {
                    builder.entityBuilder().enableLombok();
//                    builder.mapperBuilder().enableMapperAnnotation().build();
                    builder.controllerBuilder().enableHyphenStyle()  // 开启驼峰转连字符
                            .enableRestStyle();  // 开启生成@RestController 控制器
                    builder.addInclude("sys_user") // 设置需要生成的表名
                            .addTablePrefix("t_", "sys_"); // 设置过滤表前缀
                })
//                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
                .execute();
 
    }
}

3、编写生成配置


package ${package.Controller};
 
 
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 
import ${package.Service}.${table.serviceName};
import ${package.Entity}.${entity};
 
#if(${restControllerStyle})
import org.springframework.web.bind.annotation.RestController;
#else
import org.springframework.stereotype.Controller;
#end
#if(${superControllerClassPackage})
import ${superControllerClassPackage};
#end
 
/**
 * <p>
 * $!{table.comment} 前端控制器
 * </p>
 *
 * @author ${author}
 * @since ${date}
 */
#if(${restControllerStyle})
@RestController
#else
@Controller
#end
@RequestMapping("#if(${package.ModuleName})/${package.ModuleName}#end/#if(${controllerMappingHyphenStyle})${controllerMappingHyphen}#else${table.entityPath}#end")
#if(${kotlin})
class ${table.controllerName}#if(${superControllerClass}) : ${superControllerClass}()#end
 
#else
    #if(${superControllerClass})
    public class ${table.controllerName} extends ${superControllerClass} {
    #else
    public class ${table.controllerName} {
    #end
 
@Resource
private ${table.serviceName} ${table.entityPath}Service;
 
// 新增或者更新
@PostMapping
public Result save(@RequestBody ${entity} ${table.entityPath}) {
        ${table.entityPath}Service.saveOrUpdate(${table.entityPath});
        return Result.success();
        }
 
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id) {
        ${table.entityPath}Service.removeById(id);
        return Result.success();
        }
 
@PostMapping("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids) {
        ${table.entityPath}Service.removeByIds(ids);
        return Result.success();
        }
 
@GetMapping
public Result findAll() {
        return Result.success(${table.entityPath}Service.list());
        }
 
@GetMapping("/{id}")
public Result findOne(@PathVariable Integer id) {
        return Result.success(${table.entityPath}Service.getById(id));
        }
 
@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize) {
        QueryWrapper<${entity}> queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("id");
        return Result.success(${table.entityPath}Service.page(new Page<>(pageNum, pageSize), queryWrapper));
        }
 
        }
 
#end

九、Vue使用路由

怎么整目前都整不对，具体显示如下图：

十、SpringBoot和Vue实现导入导出

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/328578