Javaweb第八次作业

花荣04

已于 2024-05-28 00:24:50 修改

阅读量396

点赞数 4

文章标签： vue.js

于 2024-05-24 19:48:41 首次发布

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

版权

1.课程设计：我的小组长是：，我们的主题是：宠物店综合管理系统，我认领的功能模块是：用户端：宠物商店、宠物领养

2.设计对于宠物领养的管理。

以下是对宠物领养管理的分页操作

1）创建表格

2）创建新项目，配置好Lombok，springweb，mysqdriver，mybatisframework。

连接好数据库

application.properties


spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.datasource.url=jdbc:mysql://localhost:3306/Mybatis

spring.datasource.username=root

spring.datasource.password=123

mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

mybatis.configuration.map-underscore-to-camel-case=true

pom.xml中插入分页依赖

  <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.2</version>
        </dependency>

3）pojo

pagebean

package com.itheima.pojo;

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

import java.util.List;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean {
    private Long total;
    private List rows;
}

pet

package com.itheima.pojo;

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

@Data
@AllArgsConstructor
@NoArgsConstructor
public class PetAdoption {
    private Integer id;
    private String name;
    private String gender;
    private String age;
    private String kind;
    private String picture;
    private String characteristics;
}

result

package com.itheima.pojo;

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

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private Integer code;//响应码，1 代表成功; 0 代表失败
    private String msg;  //响应信息 描述字符串
    private Object data; //返回的数据

    //增删改 成功响应
    public static Result success(){
        return new Result(1,"success",null);
    }
    //查询 成功响应
    public static Result success(Object data){
        return new Result(1,"success",data);
    }
    //失败响应
    public static Result error(String msg){
        return new Result(0,msg,null);
    }
}

4）mapper

package com.itheima.mapper;

import com.itheima.pojo.PetAdoption;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface PetAdoptionMapper {
    @Select("select * from petadoption")
    public List<PetAdoption> list();

}

5）service

package com.itheima.service;

import com.itheima.controller.PetAdoption;
import com.itheima.pojo.PageBean;

import java.util.List;

public interface PetAdoptionService  {
   // public List<PetAdoption> list1();
    public PageBean list(Integer page, Integer pageSize);
}

import com.itheima.pojo.PageBean;
import com.itheima.pojo.PetAdoption;
import com.itheima.service.PetAdoptionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PetAdoptionServiceImpl implements PetAdoptionService {
    @Autowired
    private PetAdoptionMapper petAdoptionMapper;

    @Override

    public PageBean list(Integer page, Integer pageSize) {
        //设置分页参数6
        //PageHelper.startPage是全部查出数据在进行分页
        PageHelper.startPage(page, pageSize);

        //执行分页查询
        List<PetAdoption> petAdoptionList = petAdoptionMapper.list();
        PageInfo<PetAdoption> p = new PageInfo<>(petAdoptionList);
        //封装PageBean
        PageBean pageBean = new PageBean(p.getTotal(),p.getList());
        return pageBean;
    }

//    @Override
//    public List<PetAdoption> list1() {
//        return petAdoptionMapper.list();
//    }
}

6）controller

package com.itheima.controller;

import com.itheima.pojo.PageBean;
import com.itheima.pojo.Result;
import com.itheima.service.PetAdoptionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController

public class PetAdoption {
    @Autowired
   PetAdoptionService petAdoptionService;



    @GetMapping("/petAdoption/{page}/{pageSize}")
    public Result findAll(@PathVariable Integer page, @PathVariable Integer  pageSize){
        PageBean pageBean = petAdoptionService.list(page,pageSize);
        return Result.success(pageBean);
    }


}

7）html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pet</title>
    <link rel="stylesheet" href="js/element.css">

</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>
<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: []
        },

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