《web应用技术》第7次课后作业-CSDN博客

本文链接：https://blog.csdn.net/m0_74399220/article/details/138977231

PoetMapper

package wust.edu.mapper;

import org.apache.ibatis.annotations.*;
import wust.edu.pojo.Poet;

import java.util.List;

@Mapper
public interface PoetMapper {
    @Select("select * from poem")
    public List<Poet> findAll();

    @Delete("delete from poem where id=#{id}")
    public int delete(Integer id);

    @Select("select *from poem where id=#{id}")
    public Poet findByID(Integer id);

    @Update("update poem set author=#{author},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where id=#{id} ")
    public boolean update(Poet poet);

    @Insert("insert into poem(author, gender, dynasty, title, style) values (#{author},#{gender},#{dynasty},#{title},#{style})")
    public int insert(Poet poet);
}

PoetService

package wust.edu.service;

import wust.edu.pojo.Poet;

import java.util.List;

public interface PoetService {
    public List<Poet> findAll();
    public int delete(Integer id);
    public Poet findByID(Integer id);
    public boolean update(Poet poet);
    public boolean insert(Poet poet);
}

PoetService_impl

package wust.edu.service.imple;

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

import java.util.List;

@Service
public class PoetService_impl implements PoetService {
    @Autowired
    private PoetMapper Poetmapper;
    @Override
    public List<Poet> findAll() {
        List<Poet> poetList=Poetmapper.findAll();
        poetList.stream().forEach(writer -> {
            String gender=writer.getGender();
            if("1".equals(gender)) writer.setGender("男");
            else if("2".equals(gender)) writer.setGender("女");
        });
       return poetList;
    }

    @Override
    public int delete(Integer id){
       return Poetmapper.delete(id);
    }

    @Override
    public Poet findByID(Integer id){
        Poet poet=Poetmapper.findByID(id);
        if(poet.getGender().equals("1")) poet.setGender("男");
        else if(poet.getGender().equals("2")) poet.setGender("女");
        return Poetmapper.findByID(id);
    }

    @Override
    public boolean update(Poet poet){
        return Poetmapper.update(poet);
    }

    @Override
    public boolean insert(Poet poet){
        return Poetmapper.insert(poet)==1;
    }
}

PoetController

package wust.edu.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import wust.edu.mapper.PoetMapper;
import wust.edu.pojo.Poet;
import wust.edu.pojo.Result;
import wust.edu.service.PoetService;

@RestController
public class PoetController {
    @Autowired
    private PoetService Poetservice;

    @RequestMapping("/findAllJson")
    public Result findAllJson(){
        return Result.success(Poetservice.findAll());
    }

    @RequestMapping("/deleteData")
    public void deleteData(Integer id){
        Poetservice.delete(id);
    }

   //@PathVariable用于从URL路径/users/123中提取值;@RequestParam用于从请求参数/greet?name=John提取值(在使用这两个注解时，你需要确保你的URL模板和参数名称与Controller方法中的参数名称匹配)
    @RequestMapping("PoetFindByID/{id}")
    public Result PoetFindByID(@PathVariable("id") Integer id){return Result.success(Poetservice.findByID(id));}

    //@RequestBody它用于将 HTTP 请求体中的数据绑定到方法的参数上。这通常用于处理 JSON、XML 或其他格式的数据，并将其转换为 Java 对象。
    @RequestMapping("/updateData")
    public Result updateData(@RequestBody Poet poet){
        boolean r=Poetservice.update(poet);
        if(r){
            return Result.success(poet);
        }else{
            return Result.error("更新失败");
        }
    }

    @RequestMapping("/insertData")
    public Result insertData(@RequestBody Poet poet){
        boolean r=Poetservice.insert(poet);
        if(r) return Result.success(poet);
        else return Result.error("添加失败");
    }
}

前端页面

poet_list.html——删除功能

<!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">
    <a href="poet_insert.html">新增</a>
    <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 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">
                <button type="button"><a :href="'poet_update.html?id='+poet.id">修改</a></button>
                <button type="button" @click="deleteById(poet.id)">删除</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: []
            }
        },
        mounted(){
            //peotfindAll
            axios.get('/findAllJson').then(res=>{
                if(res.data.code){
                    this.tableData = res.data.data;
                }
            });
        },
        methods:{
            findAll:function(){
                axios.get('/findAllJson').then(response=>{
                    this.tableData=response.data.data;
                })
                .catch(function(error){
                    console.log(error);
                })
            },
            deleteById:function (id) {
                //使用 window.confirm 方法弹出一个确认框询问用户是否确定要删除数据。如果用户点击了“确定”，则执行 axios.post 请求来删除数据。
                if(window.confirm("确定要删除该记录吗？")){
                    axios.post('/deleteData?id='+id).then(ans=>{
                        alert("删除成功");
                        this.findAll();
                    })
                    .catch(function(error){
                        console.log(error);
                    })
                }
            }
        }
    });
</script>
</html>

poet_update.html——修改功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>
</head>
<body>
  <div id="app">
    <table border="1">
      <tr>
        <td>编号</td>
        <td><input type="text" v-model="this.id"></td>
      </tr>
      <tr>
        <td>作者</td>
        <td><input type="text" v-model="poet.author"></td>
      </tr>
      <tr>
        <td>性别</td>
        <td><input type="text" v-model="poet.gender"></td>
      </tr>
      <tr>
        <td>朝代</td>
        <td><input type="text" v-model="poet.dynasty"></td>
      </tr>
      <tr>
        <td>头衔</td>
        <td><input type="text" v-model="poet.title"></td>
      </tr>
      <tr>
        <td>风格</td>
        <td><input type="text" v-model="poet.style"></td>
      </tr>
      <tr><td><input type="button" @click="updatePoet" value="更新"> </td></tr>
    </table>
  </div>
</body>

<script>
  new Vue({
    el:'#app',
    data:{
      id:'',
      poet:{}
    },
    methods:{
      selectByID:function(){
        var URL=`PoetFindByID/${this.id}`//反引号内可在字符串中插入表达式${},将this.id的值替代${this.id}
        axios.get(URL).then(response=>{
          if(response.data.code){
            this.poet=response.data.data;
          }
        }).catch(error=>{})
      },
      updatePoet:function(){
        var URL='updateData';
        //put请求用于更新资源.url 是你想要更新的资源的地址;this.poet是包含更新后数据的对象，这个对象将被发送到服务器以更新资源。
        axios.put(URL,this.poet).then(res=>{
          if(res.data.code){
            location.href='poet_list.html';
          }else{alert(res.data.message);}
        }).catch(error=>{})
      }
    },
    created(){
      this.id=location.href.split('?id=')[1];//href.split("") 是一个字符串操作，用于将 href 字符串在 "?id=" 子串处分割成两部分,前部分[0],后部分[1]
      this.selectByID();
    }
  })
</script>
</html>

poet_insert.html——新增功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>

</head>
<body>
<div id="app">
  <table border="1">

    <tr>
      <td>姓名</td>
      <td><input type="text" v-model="poet.author"> </td>
    </tr>
    <tr>
      <td>性别</td>
      <td>
        <input type="radio" name="gender" v-model="poet.gender" value="1"> 男
        <input type="radio" name="gender" v-model="poet.gender" value="2"> 女
      </td>
    </tr>
    <tr>
      <td>朝代</td>
      <td><input type="text" v-model="poet.dynasty"> </td>
    </tr>
    <tr>
      <td>头衔</td>
      <td><input type="text" v-model="poet.title"> </td>
    </tr>
    <tr>
      <td>风格</td>
      <td><input type="text" v-model="poet.style"> </td>
    </tr>

    <tr>
      <td></td>
      <td><input type="button" @click="addPoet" value="增加"> </td>

    </tr>
  </table>
</div>
</body>

<script>
  new Vue({
    el:"#app",
    data:{
      poet:{
        "author":"",
        "gender":"",
        "dynasty":"",
        "title":"",
        "style":""
      }
    },
    methods:{
      addPoet:function(){
        var URL='insertData';
        axios.post(URL,this.poet).then(res=>{
          if(res.data.code){
            location.href='poet_list.html';
          }else{alert("添加失败")}
        }).catch(err=>{console.error(err);})
  }
    }
  })
</script>
</html>