Javaweb第七次作业

最新推荐文章于 2024-06-16 09:46:44 发布

花荣04

最新推荐文章于 2024-06-16 09:46:44 发布

阅读量129

点赞数 4

文章标签： java windows 开发语言前端 spring boot

本文链接：https://blog.csdn.net/2301_79689379/article/details/138977332

版权

完成对poet的增删改查：

poetController

package com.itheima.controller;

import com.itheima.pojo.Poet;
import com.itheima.pojo.Result;
import com.itheima.service.PoetService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;


@Slf4j
@RestController

public class PoetController {
    @Autowired
    private PoetService poetService;

    @GetMapping("/poet1")
    public Result list(){
        log.info("查询所有诗人信息");
        return Result.success(poetService.list());
    }

    @DeleteMapping("/poet1/{id}")
    public Result delete(@PathVariable Integer id){
        log.info("删除这条信息id={}",id);
        poetService.deleteById(id);
        return Result.success();
    }

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

    /**
     * 查询诗人信息
     */
    @GetMapping("/poet3/{id}")
   public Result getById(@PathVariable Integer id){
        log.info("查询员工信息，id={}",id);
        Poet poet = poetService.getById(id);
        return Result.success(poet);

    }
    @PutMapping("/poetUpdate")
    public Result update(Poet poet){
        log.info("修改员工信息",poet);
        poetService.update(poet);
        return Result.success();
    }
}

poetServicej接口

package com.itheima.service;

import com.itheima.pojo.Poet;

import java.util.List;

public interface PoetService {
    List<Poet> list();


    //根据id删除信息
    void deleteById(Integer id);

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

    //查询员工信息
    Poet getById(Integer id);

    //修改员工信息
   void update(Poet poet);
}

poet Service实体类

package com.itheima.service.impl;

import com.itheima.mapper.PoetMapper;
import com.itheima.pojo.Poet;
import com.itheima.service.PoetService;
import org.springframework.beans.MutablePropertyValues;
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();

    }

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

    @Override
    public void add(Poet poet) {
        poetMapper.insert(poet);
    }

    @Override
    public Poet getById(Integer id) {
       return poetMapper.getById(id);

    }

    @Override
    public void update(Poet poet) {
        poetMapper.update(poet);
    }

}

poetMapper

package com.itheima.mapper;

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

import java.util.List;

@Mapper
public interface PoetMapper {

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

    @Delete("delete from poet where id = #{id}")
     void deleteById(Integer id);

    @Insert("insert into poet(name, gender, dynasty, title, style) values(#{name},#{gender},#{dynasty},#{title},#{style})")
    void insert(Poet poet);

    @Select("select * from poet where id = #{id}")
    Poet getById(Integer id);

    @Update("update poet set name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where id=#{id}")
    void update(Poet poet);


}

poet.html

采用restful风格

<!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>
<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>

<body>
<h1 align="center">诗人信息列表展示</h1>
<a href="poetInsert.html" align="center">新增</a>
<div id="app">
    <el-table :data="tableData" style="width: 100%"  stripe border >
        <el-table-column prop="id" label="编号" align="center" ></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" ></el-table-column>
        <el-table-column prop="gender" label="性别" align="center" ></el-table-column>
        <el-table-column prop="dynasty" label="朝代" align="center" ></el-table-column>
        <el-table-column prop="title"  label="头衔"  align="center" ></el-table-column>
        <el-table-column prop="style"  label="风格"  align="center" width="400px" ></el-table-column>
        <el-table-column label="操作" align="center" width="400px">
            <template slot-scope="scope">
                <button type="button" @click="deleteById(scope.row.id)">删除</button>
                <button>
                    <a :href="'poetUpdate.html?id=' + scope.row.id" target="_blank">修改</a>   <!-- 假设修改页面需要id作为参数 -->
                </button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>




<style>
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: []
            }
        },
        created() {
            // 获得参数id值
            // this.id = location.href.split("?id=")[1]
            // 通过id查询详情
            this.findAll();
        },
        mounted(){
                axios.get('/poet1').then(res=>{
                    if(res.data.code){
                        this.tableData = res.data.data;
                    }

  })},


        methods: {

            findAll() {
                var _this = this;
                axios.post('/poet1', {})
                    .then(function (response) {
                        _this.tableData = response.data.data;//响应数据给tableData赋值
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            deleteById(id) {
                if (window.confirm("确定要删除该条数据吗？")) {
                    axios.delete(`/poet1/${id}`).then(response => {
                        this.findAll(); // 删除后重新加载数据
                        alert("删除成功");
                    }).catch(error => {
                        console.error(error);
                        alert("删除失败");
                    });
                }
            },





        }
        })


</script>
</html>

poetInsert.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>
<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>

<body>
<div id="app">
    <el-form :model="poet" ref="poetForm" label-width="80px">
        <el-form-item label="姓名">
            <el-input v-model="poet.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="poet.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="朝代">
            <el-input v-model="poet.dynasty"></el-input>
        </el-form-item>
        <el-form-item label="头衔">
            <el-input v-model="poet.title"></el-input>
        </el-form-item>
        <el-form-item label="风格">
            <el-input v-model="poet.style"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="addPoet">增加</el-button>
        </el-form-item>
    </el-form>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            poet: {
                "name":"",
                "gender":"",
                "dynasty":"",
                "title":"",
                "style":""
            }

        },
        methods: {

            addPoet() {
                var url = 'poet2'
                axios.post(url,this.poet)
                    .then(res => {
                        var baseResult = res.data
                        if(baseResult.code == 1) {
                            // 成功
                            location.href = 'poet.html'
                        } else {
                            // 失败
                            alert(baseResult.message)
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            }
        },

    })
</script>

</html>

poetUpdate.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>
<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>

<body>
<div id="app">
    <el-form :model="poet" ref="poetForm" label-width="80px">
        <el-form-item label="姓名">
            <el-input v-model="poet.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="poet.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="朝代">
            <el-input v-model="poet.dynasty"></el-input>
        </el-form-item>
        <el-form-item label="头衔">
            <el-input v-model="poet.title"></el-input>
        </el-form-item>
        <el-form-item label="风格">
            <el-input v-model="poet.style"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="updatePoet()">确定</el-button>
        </el-form-item>
    </el-form>
    {{poet}}

</div>


</body>
<script>
    new Vue({
        el: '#app',
        data: {
            id: '',
            poet: {},        //详情
        },
        methods: {
            selectById() {
                //${this.id}
                var url = `poet3/${this.id}`  //注意这里是反引号
                //反引号（backticks，也称为模板字符串或模板字面量）是ES6（ECMAScript 2015）中引入的一种新字符串字面量功能，
                // 它允许您在字符串中嵌入表达式。反引号用`（键盘上通常位于Tab键上方）来界定字符串的开始和结束。
                axios.get(url)
                    .then(response => {
                        var baseResult = response.data
                        if(baseResult.code == 1) {
                            this.poet = baseResult.data
                        }
                    })
                    .catch( error => {})
            },
            updatePoet() {
                var url = 'poetUpdate'
                axios.put(url,this.peot)
                    .then(res => {
                        var baseResult = res.data
                        if(baseResult.code == 1) {
                            // 成功
                            location.href = 'poet.html'
                        } else {
                            // 失败
                            alert(baseResult.message)
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },


        },
        created() {
            // 获得参数id值
            this.id = location.href.split("?id=")[1]
            // 通过id查询详情
            this.selectById()
        },

    })



</script>

</html>