javaweb第九次作业-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_79689379/article/details/139353279
采用XML映射文件的形式来映射sql语句；

controller层
service层
mapper
xml文件采用动态sql语句的方式，实现条件查询的分页

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>pet</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>
<div id="app">
    <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.kind" placeholder="种类"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="formInline.gender" placeholder="雄：1，雌：2"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </p>
<el-table
        :data="tableData.filter(data => !search || data.kind.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="age">
    </el-table-column>
    <el-table-column
            label="种类"
            prop="kind">
    </el-table-column>
    <el-table-column
            label="图片"
            prop="picture">
        <template slot-scope="scope">
            <img :src="scope.row.picture" width="100px" height="70px">
        </template>

    </el-table-column>
    <el-table-column
            label="性格"
            prop="characteristics">
    </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.$index, scope.row)">编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</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>
    new Vue({
        el:"#app",
        data: {
            search: '',
            currentPage: 1,
            pageSize: 10,
            total: null,
            tableData: [],
            formInline:{
                kind:'',
                gender:''
            }
        },

        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                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 = `/petAdoption/${this.currentPage}/${this.pageSize}?kind=${encodeURIComponent(this.formInline.kind)}&gender=${encodeURIComponent(this.formInline.gender)}`

                console.log(this.formInline.kind);
                console.log(this.formInline.gender);


                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);
                    })

            },
            findAll() {

                var url = `/petAdoption/${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>
运行结果
将项目共享到gitee上