web应用技术-第七次课后作业

爱生活的土豆

已于 2024-05-31 18:44:24 修改

阅读量149

点赞数 1

分类专栏： Java-web练习文章标签：前端 java 服务器

于 2024-05-24 00:00:01 首次发布

本文链接：https://blog.csdn.net/2302_80868896/article/details/139160288

版权

Java-web练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

完成对poet表的增删改查操作

①查询并展示页面

PoetController

package edu.wust.controller;


import edu.wust.pojo.Poet;
import edu.wust.pojo.Result;
import edu.wust.service.PoetService;
import lombok.extern.slf4j.Slf4j;
import org.slf4j.LoggerFactory;

import java.util.List;
import java.util.logging.Logger;
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;


@Slf4j
@RestController
public class PoetController {
    @Autowired
    private PoetService poetService;

    //private static Logger log = (Logger) LoggerFactory.getLogger(PoetController.class);
    //定义日志记录对象 = @Slf4j

    //@RequestMapping(value = "/listPoet",method = RequestMethod.GET)  //通过value属性指定请求路径,注解中method指定请求方式
    //@GetMapping("/listPoet")  //衍生注解，限定请求方式为get
    @RequestMapping("/listPoet")
    public Result findAllJson(){
        log.info("查询全部诗人信息");

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

        return Result.success(poetList);
    }
}

PoetMapper（仅查询）

package edu.wust.mapper;


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

import java.util.List;

@Mapper
public interface PoetMapper {

    //查询全部诗人信息
    @Select("select * from poet;")
    public List<Poet> list();
}

pojo.poet

package edu.wust.pojo;


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

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Poet {
    private Integer id;
    private String writer;
    private char gender;
    private String dynasty;
    private String title;
    private String style;
}

pojo.Result

package edu.wust.pojo;


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

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    private Integer code;
    private String msg;
    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 msg){
        return new Result(0, msg, null);
    }
}

PoetService

package edu.wust.service;


import edu.wust.pojo.Poet;
import org.springframework.stereotype.Service;

import java.util.List;

@Service //规则
public interface PoetService {

    /*查询全部诗人信息
    * @return*/
    List<Poet> list();
    }

PoetServiceImpl

package edu.wust.service.impl;


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

import java.util.List;


@Slf4j
@Service  //实现类
public class PoetServiceImpl implements PoetService {
    @Autowired
    private PoetMapper poetMapper;

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

页面展示

②新增诗人信息

PoetController

@PostMapping("/addPoet")
    public Result add(@RequestBody Poet poet){
        log.info("新增诗人：{}",poet);
        //调用service新增部门
        poetService.add(poet);
        return Result.success();
    }

PoetMapper

//新增诗人信息
    @Insert("insert into poet values(null,#{writer},#{gender},#{dynasty},#{title},#{style});")
    public void insert(Poet poet);

PoetService

/*
    * 新增诗人信息*/
    void add(Poet poet);

PoetServiceImpl

@Override
    public void add(Poet poet){
        //1补充属性
        //2插入值
        poetMapper.insert(poet);
    }

Postman调试

③删除诗人信息

PoetController

    @DeleteMapping("/deletePoet/{id}") //接收请求参数id  指定delete请求
    public Result delete(@PathVariable Integer id){  //获取路径变量上的id（{id}中的id）绑定给这个id参数
        log.info("根据id删除诗人：{}",id);  //参数占位符{}
        //调用service删除信息
        poetService.delete(id);
        return Result.success();
    }

PoetMapper

    //删除诗人信息
    @Delete("delete from poet where id = #{id}")
    public void delete(Integer id);

PoetService

    /*
    * 删除诗人信息
    * @Param id*/
    void delete(Integer id);
    }

PoetServiceImpl

    @Override
    public void delete(Integer id){
        poetMapper.delete(id);
    }

Postman调试

④修改诗人信息

PoetController

//先根据id查询 后修改数据
    @GetMapping("/poet/{id}")
    public Result getById(@PathVariable Integer id){
        log.info("根据id查询诗人：{}",id);
        Poet poet = poetService.getById(id);
        return Result.success(poet);
    }
    @PutMapping("/updatePoet")
    public Result update(@RequestBody Poet poet){  //json格式数据封装到实体类中注解
        log.info("更新诗人信息：{}",poet);
        poetService.update(poet);
        return Result.success();
    }

PoetMapper

//根据id查询诗人信息
    @Select("select * from poet where id= #{id};")
    public Poet getById(Integer id);
    //更新
    @Update("update poet set writer = #{writer} where id = #{id}")
    public void update(Poet poet);

PoetService

/*
    * 根据id查询员工*/
    Poet getById(Integer id);
    /*
    * 更新诗人信息*/
    void update(Poet poet);

PoetServiceImpl

 @Override
    public Poet getById(Integer id){
        return poetMapper.getById(id);
    }
    @Override
    public void update(Poet poet){
        //先补充基础数据 在调用
        poetMapper.update(poet);
    }

Postman调试

⑤前端代码

poetOnclass.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>诗人信息列表展示</title>
    <link rel="stylesheet" href="./js/element.css">

    <!--导入组件库-->
    <script src="./js/vue.js"></script>
    <script src="./element-ui/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/element.js"></script>


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

<div id="aa">
  <!--  <el-button type="primary" >新增</el-button>-->
    <div class="el-row">
        <button type="button" class="el-button el-button--primary el-button--medium">
            <span>
                <a href="poet_insert.html">+ 新增诗人信息</a>
            </span>
        </button>
    </div>

    <el-table
            :data="tableData.filter(data => !search || data.writer.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">   <!--搜索功能的实现：用 JavaScript 的数组 filter 方法来过滤 tableData 数组，以便根据 search 字符串的值来显示特定的行-->
        <el-table-column
                label="序号"
                prop="id">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="writer">
        </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
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"></el-input>   <!--搜索功能的实现-->
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteId(scope.row.id)">删除</el-button>
                <el-button
                        size="mini">
                    <a :href="'poet_update.html?id='+scope.row.id">修改</a>
                    <!--scope.row.id访问当前行数据对象的id属性！！！-->
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>



<script>
    new Vue({
        el:"#aa",

        data(){
            return{
                tableData: [],
                search: '',  /*搜索功能的实现：方法*/
            }
        },
        methods: {
            listPoet() {
                axios.post('/listPoet', {
                })
                    .then((response) => {
                        this.tableData = response.data.data;//响应数据给tableData赋值

                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            deleteId(id) {
                if (window.confirm("确定要删除该条数据吗？？？")){
                    axios.delete('/deletePoet/'+id)
                        .then(function (response) {
                            alert("删除成功")
                            location.href = 'poetOnclass.html'
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
        },   /*方法*/
        created(){

        },
        mounted(){
            axios.get('/listPoet').then(res=>{
                if(res.data.code){
                    this.tableData = res.data.data;
                }
            });
        },
    })
</script>

</body>
</html>

poet_insert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加诗人信息</title>

    <link rel="stylesheet" href="./js/element.css">
    <link rel="stylesheet" href="./element-ui/index.css">

  <!--导入组件库-->
    <script src="./js/vue.js"></script>
    <script src="./element-ui/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/element.js"></script>

</head>
<body>

<div id="aa">
    <h1>添加诗人信息</h1>

        <table>
            <tr>
                <td>姓名</td>
                <td><el-input v-model="poet.writer" placeholder="请输入诗人姓名"></el-input></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <el-radio v-model="poet.gender" label="男">男</el-radio>
                    <el-radio v-model="poet.gender" label="女">女</el-radio>
                </td>
            </tr>
            <tr>
                <td>朝代</td>
                <td>
                    <el-input v-model="poet.dynasty" placeholder="请输入诗人所在朝代"></el-input>
                </td>
            </tr>
            <tr>
                <td>头衔</td>
                <td>
                    <el-input v-model="poet.title" placeholder="请输入诗人头衔"></el-input>
                </td>
            </tr>
            <tr>
                <td>风格</td>
                <td>
                    <el-input v-model="poet.style" placeholder="请输入诗人风格"></el-input>
                </td>
            </tr>
        </table>
    <span slot="extra">
        <el-button type="primary" @click="addPoet">添加</el-button>
    </span>
</div>


</body>

<script>
    new Vue({
        el:'#aa',
        data:{
            poet:{
                "writer":"",
                "gender":"",
                "dynasty":"",
                "title":"",
                "style":""
            }
        },
        methods:{
            addPoet() {
                var url = '/addPoet'
                axios.post(url,this.poet)
                    .then(res => {
                        var baseResult = res.data
                        if(baseResult.code === 1) {
                            // 成功
                            location.href = 'poetOnclass.html'
                        } else {
                            // 失败
                            alert(baseResult.message)
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            }

        }
    })
</script>
</html>

poet_update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改诗人信息</title>

  <link rel="stylesheet" href="./js/element.css">

  <!--导入组件库-->
  <script src="./js/vue.js"></script>
  <script src="./element-ui/index.js"></script>
  <script src="./js/axios-0.18.0.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/element.js"></script>

</head>
<body>

<div id="aa">
  <h1>修改诗人信息</h1>

  <table>
    <tr>
      <td>姓名</td>
      <td><el-input v-model="poet.writer" placeholder="请输入诗人姓名"></el-input></td>
    </tr>
    <tr>
      <td>性别</td>
      <td>
        <el-radio v-model="poet.gender" label="男">男</el-radio>
        <el-radio v-model="poet.gender" label="女">女</el-radio>
      </td>
    </tr>
    <tr>
      <td>朝代</td>
      <td>
        <el-input v-model="poet.dynasty" placeholder="请输入诗人所在朝代"></el-input>
      </td>
    </tr>
    <tr>
      <td>头衔</td>
      <td>
        <el-input v-model="poet.title" placeholder="请输入诗人头衔"></el-input>
      </td>
    </tr>
    <tr>
      <td>风格</td>
      <td>
        <el-input v-model="poet.style" placeholder="请输入诗人风格"></el-input>
      </td>
    </tr>
  </table>
  <span slot="extra">
        <el-button type="primary" @click="updatePoet">修改</el-button>
    </span>
</div>
<script>
  new Vue({
    el:'#aa',
    data:{
      id:'',
      poet:{}
    },
    methods:{
      selectById(){
        var url = `/poet/${this.id}` /*模板字符串（使用反引号）是ES6引入的一个特性*/
        axios.get(url)
                .then(response =>{
                  var baseResult = response.data
                  if(baseResult.code === 1){
                    this.poet = baseResult.data
                  }
                })
                .catch(error => {
                  console.error(error)
                })
      },
      updatePoet() {
        var url = '/updatePoet'
        axios.put(url, this.poet)
                .then(response => {
                  var baseResult = response.data
                  if (baseResult.code === 1) {
                    //成功
                    location.href = 'poetOnclass.html'
                  } else {
                    //失败
                    alert(baseResult.message)
                  }
                })
                .catch(err => {
                  console.error(err);
                })
      }
    },
    created(){

      //从查询参数中获取id
      /*const queryParams = new URLSearchParams(window.location.search);
      const idParam = queryParams.get('id');*/

      this.id = location.href.split("?id=")[1]

      if(this.id){
        this.id = parseInt(this.id,10);   //尝试将id转换为整数
        if (isNaN(this.id)){
          //id不是一个有效的数字
          console.error('Invalid id');
        }else{
          this.selectById();
        }
      }else{
        //没有找到id参数
        console.error('id parameter not found')
      }


     /* this.selectById()*/
    }
  })
</script>

</body>
</html>