《Web应用技术》第九次课后作业

Glorysunfan

已于 2024-05-25 11:44:48 修改

阅读量435

点赞数 5

文章标签：前端 gitee vue.js 后端 mybatis intellij-idea spring boot

于 2024-05-25 11:34:18 首次发布

本文链接：https://blog.csdn.net/2201_76124361/article/details/139194597

版权

主要内容：

完善第八次课后作业代码，采用xml映射文件专门存储sql语句，实现新增功能，并将之前的单条件（姓名）查询补充为多条件查询（姓名+风格），同时借助element官网组件美化界面，练习gitee的使用。

目录结构

这里仅对修改过后的文件以代码展示，没有修改过的代码参考《Web应用技术》第八次课后作业-CSDN博客

或登录git官网sunfan/Web

同时，具体的准备工作，包括xml文件创建的要求，参照Springboot+Element_分页+显示+搜索+完整版-CSDN博客中xml部分或b站视频讲解。

Poetmapper

package com.example.sun.mapper;

import com.example.sun.pojo.Poet;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface Poetmapper {
    //@Select("select count(*) from information")
    public int count();

    //@Select("select * from information limit #{start},#{pageSize}")
    public List<Poet> select(Integer start, Integer pageSize);
    /*@Select("select * from information")
    public List<Poet> list();*/
    //带条件的查询
    //@Select("select * from information where name like concat('%',#{name},'%') ")
    public List<Poet> list(String name,String style);

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

    //@Select("select * from information where id=#{id}")
    public Poet poetfindById(Integer id);

    //@Update("update information set name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title} ,style=#{style} where id=#{id} ")
    public  boolean update(Poet poet);
    //@Insert("insert into information values (#{name},#{gender},#{dynasty},#{title},#{style})")
    public int insert(Poet poet);




}

Poetmapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.sun.mapper.Poetmapper">

    <select id="count" resultType="int">
        select count(*) from information
    </select>

    <select id="select" resultType="com.example.sun.pojo.Poet">
        select * from information limit #{start},#{pageSize}
    </select>

    <select id="list" resultType="com.example.sun.pojo.Poet">
        select * from information where name like concat('%',#{name},'%') and style like concat('%',#{style},'%')
    </select>

    <delete id="deletePeot" parameterType="int">
        delete from information where id=#{id}
    </delete>

    <select id="poetfindById" resultType="com.example.sun.pojo.Poet">
        select * from information where id=#{id}
    </select>

    <update id="update" parameterType="com.example.sun.pojo.Poet">
        update information set name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title} ,style=#{style} where id=#{id}
    </update>

    <insert id="insert" parameterType="com.example.sun.pojo.Poet">
        insert into information(id,name,gender,dynasty,title,style) values (#{id},#{name},#{gender},#{dynasty},#{title},#{style})
    </insert>


</mapper>

PoetserviceA

package com.example.sun.service;

import com.example.sun.pojo.Poet;
import com.example.sun.pojo.Poetbean;

public interface PoetserviceA {
     public Poetbean page(Integer page, Integer pageSize,String name,String style);
     public Poetbean page(Integer page, Integer pageSize);
     public int delete(Integer id);
     public boolean update(Poet poet);
     public Poet poetfindById(Integer id);
     public boolean insert(Poet poet);

}

Poetservice.java

package com.example.sun.service;

import com.example.sun.pojo.Poet;
import com.example.sun.mapper.Poetmapper;
import com.example.sun.pojo.Poetbean;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class Poetservice implements PoetserviceA {
    @Autowired
    private Poetmapper poetmapper;
    @Override
    public Poetbean page(Integer page, Integer pageSize,String name,String style) {
        /*int total=poetmapper.count();
        int start=(page-1)*pageSize;
        List<Poet> poetList=poetmapper.select(start, pageSize,name,style);
        Poetbean poetbean=new Poetbean(total,poetList);
        return poetbean;*/
        // 设置分页参数
        PageHelper.startPage(page, pageSize);
        // 执行分页查询
        List<Poet> poetList = poetmapper.list(name,style);
        //System.out.println(poetList);
        // 获取分页结果
         //Page<Poet> p = (Page<Poet>) poetList;
        PageInfo<Poet> p = new PageInfo<Poet>(poetList);
        //封装PageBean
         //Poetbean poetbean = new Poetbean(p.getTotal(), p.getResult());
        Poetbean poetbean = new Poetbean(p.getTotal(), p.getList());
        return poetbean;
    }

    @Override
    public Poetbean page(Integer page, Integer pageSize) {
        int total=poetmapper.count();
        int start=(page-1)*pageSize;
        List<Poet> poetList=poetmapper.select(start, pageSize);
        Poetbean poetbean=new Poetbean(total,poetList);
        return poetbean;
    }

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

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

    @Override
    public Poet poetfindById(Integer id) {
        return poetmapper.poetfindById(id);
    }

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

poetcontroller

package com.example.sun.controller;


import com.example.sun.pojo.Poet;
import com.example.sun.pojo.Result;
import com.example.sun.service.PoetserviceA;
import com.example.sun.pojo.Poetbean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;


@RestController
public class poetcontroller {
    @Autowired
    private PoetserviceA poetserviceA;
    @GetMapping("/poet1/{page}/{pageSize}")
    /*@GetMapping("/poet")*/
    public Result select(@PathVariable Integer page,
                         @PathVariable Integer pageSize,
                         String name,String style) {
        Poetbean poetbean=poetserviceA.page(page,pageSize,name,style);
        return Result.success(poetbean);
    }
    @GetMapping("/poet/{page}/{pageSize}")
    /*@GetMapping("/poet")*/
    public Result select(  @PathVariable Integer page,
                           @PathVariable Integer pageSize) {
        Poetbean poetbean=poetserviceA.page(page,pageSize);
        return Result.success(poetbean);
    }

    @RequestMapping("/deletePoet")
    public int deletePoet(Integer id){
       return poetserviceA.delete(id);
    }

    @RequestMapping("/poetupdate")
    public  Result updatePoet(@RequestBody Poet poet){
        boolean r = poetserviceA.update(poet);

        if(r) {
            // 成功  code==1
            return Result.success();
        } else {
            // 失败  code==0
            return Result.error("更新失败");
        }
    }

    @RequestMapping("/poetfindById/{id}")
    public Result poetfindById(@PathVariable("id") Integer id) {
        return  Result.success(poetserviceA.poetfindById(id));
    }

    @RequestMapping("/poetinsert")
    public  Result insert( @RequestBody Poet poet){
        boolean result = poetserviceA.insert(poet);
        if(result) {
            // 成功  code==1
            return Result.success();
        } else {
            // 失败  code==0
            return Result.error("添加失败");

        }


    }


}

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>id</td>
            <td><input type="text" v-model="poet.id"> </td>
        </tr>
        <tr>
            <td>姓名</td>
            <td><input type="text" v-model="poet.name"> </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></td>
            <td><input type="button" @click="addpoet" value="增加"> </td>
        </tr>
    </table>

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

        },
        methods: {

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

    })
</script>

</html>

show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询出所有并分页控件显示</title>
    <link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">

<div id="app" style="width: 80%;align:center">
    <h1 align="center">诗人信息</h1>
    <p align="center">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="formInline.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="风格">
                <el-input v-model="formInline.style" placeholder="风格"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                <!--<el-button type="primary" @click="onSubmit">查询</el-button>-->
            </el-form-item>
        </el-form>
    </p>
    <p align="right">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="insert">添加</el-button>

        </el-form-item>
        </el-form>
    </p>
    <el-table
            :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%;align:center;font-size: 20px">
        <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
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button size="mini"
                @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <p align="center">
        <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
    </p>
</div>

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


<script>
    new Vue({
        el:"#app",
        data: {
            search: '',
            currentPage: 1,
            pageSize: 3,
            total: null,
            tableData: [],
            formInline: {
                name: '',
                style: ''
            }
        },
        methods: {
            insert(){
                window.open('http://localhost:8080/poet_insert.html')
            },
            handleEdit(id) {

                window.open('http://localhost:8080/poet_edit.html?id='+id)

                console.log(index, row);
            },
            handleDelete(id) {
                var _thisd = this;
                if (window.confirm("确定要删除该条数据吗？？？")) {
                    axios.post('/deletePoet?id=' + id)
                        .then(function (response) {
                            alert("删除成功")
                            _thisd.findAll();
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
                console.log(index, row);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.findAll();
                console.log(`每页 ${val} 条`);

            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.findAll();
                console.log(`当前页: ${val}`);

            },
            onSubmit() {

                var url = `/poet1/${this.currentPage}/${this.pageSize}?name=${encodeURIComponent(this.formInline.name)}&style=${encodeURIComponent(this.formInline.style)}`

                console.log(this.formInline.name);
                console.log(this.formInline.style);


                axios.get(url)
                    .then(res =>{
                        this.tableData = res.data.data.rows;
                        this.total=res.data.data.total;
                        console.log(this.tableData);
                        console.log(this.total);
                    })
                    .catch(error=>{
                        console.error(error);
                    })

            },

            /*deleteId:function (id) {
                var _thisd = this;
                if (window.confirm("确定要删除该条数据吗？？？")) {
                    axios.post('/deletePoet?id=' + id)
                        .then(function (response) {
                            alert("删除成功")
                            _thisd.findAll();
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },*/
            findAll() {

                var url = `/poet/${this.currentPage}/${this.pageSize}`

                axios.get(url)
                    .then(res =>{
                        this.tableData = res.data.data.rows;
                        this.total=res.data.data.total;
                        console.log(this.tableData);
                        console.log(this.total);
                    })
                    .catch(error=>{
                        console.error(error);
                    })

            }

        },
        created(){
            this.findAll();
        }

    })



</script>

</body>
</html>