《web应用技术》第六次课后作业

1.编写后端程序，在postman中运行接口得到json数据。

PoetController代码：

ackage com.javaweb.Controller;

import com.javaweb.pojo.Poet;
import com.javaweb.pojo.Result;
import com.javaweb.service.PoetService;
import lombok.extern.slf4j.Slf4j;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@Slf4j
@RestController
public class PoetController {

   //private static Logger log = (Logger) LoggerFactory.getLogger(PoetController.class);

    @Autowired
    private PoetService poetService;

   // @RequestMapping(value = "/poetfindAll",method = RequestMethod.GET)
   @ GetMapping("/poetfindAll")
    public Result list(){
        log.info("查询全部诗人数据");

        //调用service查询诗人数据
       List<Poet>  poetList = poetService.list();

        return Result.success(poetList);
    }
}

PoetMapper代码：

package com.javaweb.mapper;

import com.javaweb.pojo.Poet;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface PoetMapper {

    @Select("select * from poet")
    List<Poet> list();

}

Pojo.Poet代码：

package com.javaweb.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor

public class Poet {

    private Integer id;
    private String author;
    private String gender;
    private String dynasty;
    private String title;
    private String style;
}

Pojo.Result代码：

package com.javaweb.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private Integer code;
    private String msg;
    private Object data;
    public static Result success(){
        return new Result(1,"success",null);
    }
    public static Result success(Object data){
        return new Result(1,"success",data);
    }
    public static Result error(String msg){
        return new Result(0,msg,null);
    }
}

PoetServiceImpl代码：

package com.javaweb.service.impl;

import com.javaweb.mapper.PoetMapper;
import com.javaweb.pojo.Poet;
import com.javaweb.service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PoetServiceImpl implements PoetService {

    @Autowired
    private PoetMapper poetMapper;

    @Override
    public List<Poet> list() {
        return poetMapper.list();
    }
}

PoetService代码：

package com.javaweb.service;

import com.javaweb.pojo.Poet;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public interface PoetService {
    //查询全部部门数据
    List<Poet> list();
}

运行代码并在postman中运行接口：

得到json数据：

{
    "code": 1,
    "msg": "success",
    "data": [
        {
            "id": 1,
            "author": "陶渊明",
            "gender": "男",
            "dynasty": "东晋末至南朝宋初期",
            "title": "诗人和辞赋家",
            "style": "古今隐逸诗人之宗"
        },
        {
            "id": 2,
            "author": "王维",
            "gender": "男",
            "dynasty": "唐代",
            "title": "诗佛",
            "style": "空灵、寂静"
        },
        {
            "id": 3,
            "author": "李白",
            "gender": "男",
            "dynasty": "唐代",
            "title": "诗仙",
            "style": "豪放飘逸的诗风和丰富的想象力"
        },
        {
            "id": 4,
            "author": "李商隐",
            "gender": "男",
            "dynasty": "唐代",
            "title": "诗坛鬼才",
            "style": "无"
        },
        {
            "id": 5,
            "author": "李煜",
            "gender": "男",
            "dynasty": "唐代",
            "title": "千古词帝",
            "style": "语言明快、形象生动、用情真挚，风格鲜明"
        },
        {
            "id": 6,
            "author": "杜甫",
            "gender": "男",
            "dynasty": "唐代",
            "title": "诗圣",
            "style": "反映社会现实和人民疾苦"
        },
        {
            "id": 7,
            "author": "苏轼",
            "gender": "男",
            "dynasty": "北宋",
            "title": "文学家、书画家，诗神",
            "style": "清新豪健的诗风和独特的艺术表现力"
        },
        {
            "id": 8,
            "author": "李清照",
            "gender": "女",
            "dynasty": "宋代",
            "title": "女词人",
            "style": "婉约风格"
        }
    ]
}

2.加入前端页面测试接口

<!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>诗人信息</title>

</head>

<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>

<body>

<h1 align="center">诗人信息列表展示</h1>

<div id="app" align="center">
    <table border="1" cellspacing="0" width="60%">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>朝代</th>
            <th>头衔</th>
            <th>风格</th>
            <th>操作</th>
        </tr>
        <tr align="center" v-for="(poet,index) in tableData">
            <td>{{poet.id}}</td>
            <td>{{poet.author}}</td>
            <td>{{poet.gender}}</td>
            <td>{{poet.dynasty}}</td>
            <td>{{poet.title}}</td>
            <td>{{poet.style}}</td>
            <td class="text-center">
                <!--a :href="'poet_edit.html?id='+peot.id"-->
                <!--button type="button" @click="deleteId(poet.id)-->
                修改
                删除
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: []
            }
        },
        mounted(){
            axios.get('/poetfindAll').then(res=>{
                this.tableData = res.data.data;
            });
        },
    });
</script>
</html>

运行结果如下：