第六次作业-实现查询功能

Perfect_wwang

已于 2024-05-11 13:11:29 修改

阅读量246

点赞数 9

文章标签： java 开发语言

于 2024-05-11 12:42:35 首次发布

本文链接：https://blog.csdn.net/w_peifang/article/details/138709762

版权

1、准备工作

1.1、创建新的工程、创建文件包、导入js文件，编写实体类Poet 和 Result

Poet.java 实体类代码

package com.wust.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@Data
public class Poet {
    private Integer id;
    private String name;
    private Integer gender;
    private String dynasty;
    private String title;
    private String style;
}

Result 实体类代码

package com.wust.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    private Integer code;
    private String message;
    private Object data;

    public static Result success(Object data){
        return new Result(1,"success",data);
    }
    public static Result success(){
        return new Result(1,"success",null);
    }
    public static Result error(String mas){
        return new Result(0,"mes",null);
    }
}

2、Mapper层

编写mapper接口实现对数据的查询操作

package com.wust.mapper;
import com.wust.pojo.Poet;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface PoetMapper {
    @Select("select * from poet")
    public List<Poet> findAll11();
}

mapper层方法的测试

package com.wust;
import com.wust.mapper.PoetMapper;
import com.wust.pojo.Poet;
import com.wust.service.impl.PoetServiceA;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import java.util.List;
@SpringBootTest
class SpringbootMybatisVueApplicationTests {
    @Autowired
    private PoetMapper poetMapper;
    @Test
    public void testMapper(){
        List<Poet> allPoet = poetMapper.findAll11();
        allPoet.stream().forEach(poet -> {
            System.out.println(poet);
        });
    }
}

测试结果

3、Service层

编写service接口以及接口的实现

package com.wust.service;
import com.wust.pojo.Poet;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public interface PoetService {
    public List<Poet> findAll22();
}

package com.wust.service.impl;
import com.wust.mapper.PoetMapper;
import com.wust.pojo.Poet;
import com.wust.service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class PoetServiceA implements PoetService {
    @Autowired
    private PoetMapper poetMapper;
    @Override
    public List<Poet> findAll22() {
        List<Poet> allPoet = poetMapper.findAll11();
        return allPoet;
    }
}

service测试

package com.wust;
import com.wust.mapper.PoetMapper;
import com.wust.pojo.Poet;
import com.wust.service.impl.PoetServiceA;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import java.util.List;
@SpringBootTest
class SpringbootMybatisVueApplicationTests {
    @Autowired
    private PoetServiceA poetServiceA;
    @Test
    public void testService(){
        List<Poet> allPoet = poetServiceA.findAll22();
        allPoet.stream().forEach(poet -> {
            System.out.println(poet);
        });
    }
}

测试结果

4、controller层

package com.wust.controller;
import com.wust.pojo.Poet;
import com.wust.pojo.Result;
import com.wust.service.impl.PoetServiceA;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class PoetController {
    @Autowired
    private PoetServiceA poetService;
    @RequestMapping("/poetFindAll")
    public Result findAll33(){
        List<Poet> allPoet = poetService.findAll22();
        return Result.success(allPoet);
//        return allPoet;
    }
}

5、前端HTML页面

使用vue插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>poetFindAll</title>
</head>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<script src="./element-ui/index.js"></script>
<body>
<h1 align="center">诗人信息FindAll1111</h1>
<div id="app">
<!--    <el-table : data="rawTableData" style="width: 100%" stripe border>-->
<!--        <el-table-column type="index" label="编号"></el-table-column>-->
<!--        <el-table-column prop="name" label="姓名"></el-table-column>-->
<!--        <el-table-column prop="gender" label="性别"></el-table-column>-->
<!--        <el-table-column prop="dynasty" label="朝代"></el-table-column>-->
<!--        <el-table-column prop="title" label="头衔"></el-table-column>-->
<!--        <el-table-column prop="style" label="风格"></el-table-column>-->
<!--        <el-table-column type="button" label="button"></el-table-column>-->
<!--    </el-table>-->

    <table border="1px" cellspacing="0" align="center">
        <tr align="center">
            <td>id</td>
            <td>name</td>
            <td>gender</td>
            <td>dynasty</td>
            <td>title</td>
            <td>style</td>
            <td>操作</td>
        </tr>
        <tr v-for="poet in allPoet" align="center">
            <td>{{poet.id}}</td>
            <td>{{poet.name}}</td>
            <td>{{poet.gender}}</td>
            <td>{{poet.dynasty}}</td>
            <td>{{poet.title}}</td>
            <td>{{poet.style}}</td>
            <td>
                删除 修改
                <button type="button">删除</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                allPoet:[]
            }
        },
        mounted(){
            axios.get("/poetFindAll").then(res=> {
                if (res.data.code) {
                    this.allPoet = res.data.data;
                    // return res.data;
                }
            });
            },
        methods:{
        }
    });
</script>

运行结果

使用Apifox请求处理成功返回请求数据

测试是否成功

更改axios中异步请求的访问地址

返回apifox中随机生成的数据

Perfect_wwang

关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
第六次作业-实现查询功能

1.1、创建新的工程、创建文件包、导入js文件，编写实体类Poet 和 Result。编写mapper接口实现对数据的查询操作。编写service接口以及接口的实现。Poet.java 实体类代码。Result 实体类代码。mapper层方法的测试。使用vue插值表达式。
复制链接

扫一扫