Web第7次作业

李思颖 202205403031

已于 2024-05-25 13:02:42 修改

阅读量259

点赞数 2

文章标签：前端 tomcat java

于 2024-05-25 12:48:23 首次发布

本文链接：https://blog.csdn.net/2201_76100434/article/details/139184537

版权

1.对Poem表进行删除，插入，修改操作

①首先编写PoeterMapper接口定义相关操作

package com.itheima.mapper;

import com.itheima.pojo.Peot;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface PoeterMapper {
    @Select("select * from mybatis.poet")
    public List<Peot> findAll();
    @Insert("insert into poet values(#{id},#{name},#{gender},#{dynasty},#{title},#{style})")
    public boolean insert(Peot poet);
    @Select("select * from mybatis.poet where id=#{id}")
    public List<Peot> selectpart(short id);
    @Update("update mybatis.poet set name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where id=#{id}")
    public boolean update(Peot poet);
    @Delete("delete from mybatis.poet where id=#{id}")
    public boolean delete(short id);
}

②编写service接口

package com.itheima.service;

import com.itheima.pojo.Peot;


import java.util.List;

public interface PeotService {
    public List<Peot> findAll();
    public boolean Sinsert(Peot poet);
    public List<Peot> Sselectpart(short id);
    public boolean Supdate(Peot poet);
    public boolean Sdelete(short id);
}

③service具体实现类

package com.itheima.service.impl;

import com.itheima.mapper.PoeterMapper;
import com.itheima.pojo.Peot;

import com.itheima.service.PeotService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PeotServiceImpl  implements PeotService {
    @Autowired
    private PoeterMapper peotMapper;

    @Override
    public List<Peot> findAll() {
        return peotMapper.findAll();
    }

    @Override
    public boolean Sinsert(Peot poet) {
        boolean result = peotMapper.insert(poet);
        return result;

    }
    
    @Override
    public boolean Supdate(Peot poet) {
        return peotMapper.update(poet);
    }

    @Override
    public boolean Sdelete(short id) {
        return peotMapper.delete(id);
    }

    @Override
    public List<Peot> Sselectpart(short id) {
        return peotMapper.selectpart(id);
    }
}

④编写controller类

package com.itheima.controller;

import com.itheima.pojo.Peot;
import com.itheima.pojo.Result;
import com.itheima.service.PeotService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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 java.util.List;


@RestController
public class PoetController {

    @Autowired
    private PeotService peotService;
    //查询全部，返回的是Result类型的json数据。
    @RequestMapping("/poet111")
    public List<Peot> findAll() {
        return peotService.findAll();
        }

    @RequestMapping("/PoetInsert")
    public Result insert(@RequestBody Peot peot){
        boolean result =peotService.Sinsert(peot);
        if(result) {
            return Result.success();
        } else {
            return Result.error();
        }

    }
    @RequestMapping("/PoetUpdate")
    public Result update(@RequestBody Peot poet){
        boolean r=peotService.Supdate(poet);
        if(r){
            return Result.success();
        }
        else {
            return Result.error();
        }
    }
    @RequestMapping("/PoetDelete")
    public Result delete( short id){
        boolean r=peotService.Sdelete(id);
        if(r){
            return Result.success();
        }
        else{
            return Result.error();
        }
    }

    @RequestMapping("/PoetSelectpart/{id}")
    public Result selectpart(@PathVariable short id){
        return Result.success(peotService.Sselectpart(id));
    }

    }

⑤在Apifox中测试

⑥删除操作的前端代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
</head>
<body>

<h1 align="center">诗人信息列表展示</h1>
<div id="app">
<a href="peot-insert.html" style="text-align: center">新增信息</a>
<template>
  <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%">
    <el-table-column
            label="id"
            prop="id">
    </el-table-column>
    <el-table-column
            label="姓名"
            prop="name">
    </el-table-column>
    <el-table-column
            label="性别"
            prop="gender">
    </el-table-column>
    <el-table-column
            label="朝代"
            prop="dynasty">
    </el-table-column>
    <el-table-column
            label="头衔"
            prop="title">
    </el-table-column>
    <el-table-column
            label="风格"
            prop="style">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope" >
        <a :href="'peot-update.html?id='+scope.row.id">修改</a>
        <button type="button" v-on:click="deletee(scope.row.id)">删除</button>
      </template>
    </el-table-column>
  </el-table>
  </template>
</div>
</body>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        tableData: []
      }
    },
    methods:{
      selectall:function(){
        var this_=this;
        axios.post('/PoetSelect',{}).then(function(response){
          this_.poetList=response.data.data;
        })
                .catch(function(error){
                  console.log(error);
                })
      },
      deletee:function (id){
        var this_=this;
        if(window.confirm("您确定要删除这条数据吗？")){
          axios.post('/PoetDelete?id='+id).then(function(response){
            alert("删除成功！")
            this_.selectall();
          })
                  .catch(function(error){
                    console.error("删除失败",error);
                  })
        }
      }
    },
    mounted(){
      axios.get('/poet111').then(res=>{
        this.tableData = res.data;
      });
    },

  });
</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>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
</head>
<body>
<div id="app" style=" display: flex;
            justify-content: center;
            align-items: center">
  <table>
    <tr>
      <td>ID</td>
      <td>
        <input type="text" v-model="peot.id">
      </td>
    </tr>
    <tr>
      <td>
        姓名：
      </td>
      <td>
        <input type="text" v-model="peot.name">
      </td>
    </tr>
    <tr>
      <td>
        性别：
      </td>
      <td>
        <input type="radio" name="gender" v-model="peot.gender" value="1">男
        <input type="radio" name="gender" v-model="peot.gender" value="2">女
      </td>
    </tr>
    <tr>
      <td>
        朝代：
      </td>
      <td>
        <input type="text" v-model="peot.dynasty">
      </td>
    </tr>
    <tr>
      <td>
        头衔：
      </td>
      <td>
        <input type="text" v-model="peot.title">
      </td>
    </tr>
    <tr>
      <td>
        风格：
      </td>
      <td>
        <input type="text" v-model="peot.style">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" @click="addpeot" value="新增">
      </td>
    </tr>
  </table>
</div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      peot:{
        "id":"",
        "name":"",
        "gender":"",
        "dynasty":"",
        "title":"",
        "style":""
      }
    },
    methods:{
      addpeot:function (){
        axios.post('/PoetInsert',this.peot).then(r=>{
          if(r.data.code==1){
            location.href='peot.html';
          }
          else{
            alert(r.data.message);
          }
        }).catch(error=>{
          console.error(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>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
</head>
<body>
<div id="app" style=" display: flex;
            justify-content: center;
            align-items: center">
  <table>
    <tr>
      <td>ID</td>
      <td>
        <input type="text" v-model="this.id">
      </td>
    </tr>
    <tr>
      <td>
        姓名：
      </td>
      <td>
        <input type="text" v-model="peot.name">
      </td>
    </tr>
    <tr>
      <td>
        性别：
      </td>
      <td>
        <input type="radio" name="gender" v-model="peot.gender" value="1">男
        <input type="radio" name="gender" v-model="peot.gender" value="2">女
      </td>
    </tr>
    <tr>
      <td>
        朝代：
      </td>
      <td>
        <input type="text" v-model="peot.dynasty">
      </td>
    </tr>
    <tr>
      <td>
        头衔：
      </td>
      <td>
        <input type="text" v-model="peot.title">
      </td>
    </tr>
    <tr>
      <td>
        风格：
      </td>
      <td>
        <input type="text" v-model="peot.style">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" @click="updatepeot" value="修改">
      </td>
    </tr>
  </table>

</div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      peot:{},
      id:''
    },
    methods:{
      selectpart:function (){
        axios.get(`/PoetSelectpart/${this.id}`).then(r=>{
          if(r.data.code==1){
            if (Array.isArray(r.data.data) && r.data.data.length > 0) {
              this.peot = r.data.data[0];
            } else {
              this.peot = {};
            }
          }
          else{
            console.log(r.data.message);
          }
        }).catch(er=>{
          console.error(er);
        })
      },
      updatepeot:function (){
        axios({ method: 'put',
          url: '/PoetUpdate',
          data: JSON.stringify(this.peot),
          headers: {
            'Content-Type': 'application/json'
          } }).then(r=>{
          if(r.data.code==1){
            location.href='peot.html';
          }
          else{
            alert(r.data.message);
          }
        }).catch(e=>{
          console.error(e);

        })
      }
    },
    created(){
      this.id=location.href.split("?id=")[1]
      this.selectpart();
    }
  })
</script>
</html>