基于Springboot+Element项目实战crud+分页：4_CURD程序

wyhwust

已于 2024-05-16 21:28:50 修改

阅读量310

点赞数 2

文章标签： spring boot vue.js elementui

于 2024-05-14 21:44:21 首次发布

本文链接：https://blog.csdn.net/wyhwust/article/details/138871539

版权

2023-2024（2）web应用技术专栏收录该内容

34 篇文章 2 订阅

订阅专栏

一、后端

1、mapper

package com.example.mapper;

import com.example.pojo.Peot;
import org.apache.ibatis.annotations.*;


import java.util.List;

@Mapper
public interface PeotMapper {

    @Select("select * from peom")
    public List<Peot> findAll();



    @Select("select * from peom where id=#{id}")
    public Peot peotfindById(Integer ID);





/*    //获取当前页的结果列表---用于分页
    @Select("select * from peom")
    public List<Peot> page(Integer start, Integer pageSize);*/

    //查询所有
    @Select("select * from peom")
    public List<Peot> list();

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

    @Update("update peom set author=#{author},gender=#{gender},dynasty=#{dynasty},title=#{title} ,style=#{style} where id=#{id} ")
    public  boolean updatePeot(Peot peot);

    @Insert("insert into peom(author, gender, dynasty, title, style) values (#{author}, #{gender}, #{dynasty}, #{title}, #{style})")
    public int insert(Peot peot);

//查询
    //select * from peom  where author like '%陶%'
    //@Select("select * from peom where author like %#{author}% and style like %#{style}%")
    @Select("SELECT * FROM peom WHERE author LIKE CONCAT('%', #{author}, '%') AND style LIKE CONCAT('%', #{style}, '%')")
    public List<Peot> peotSearch(String author, String style);

}

2、service

package com.example.service;

import com.example.pojo.PageBean;
import com.example.pojo.Peot;

public interface PeotService {
    public PageBean page(Integer page, Integer pageSize);

    public int deletePeot(Integer id);

    public Peot peotfindById(Integer id);

    public boolean updatePeot(Peot peot);

    public   boolean  insertUser(Peot peot);

    public PageBean pageSearch(Integer page, Integer pageSize,String author, String style);

}

package com.example.service.impl;

import com.example.mapper.PeotMapper;
import com.example.pojo.Peot;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.example.pojo.PageBean;
import com.example.service.PeotService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PeotServivceImpl implements PeotService {
    @Autowired
    private PeotMapper peotMapper;

    @Override
    public PageBean page(Integer page, Integer pageSize) {
        // 设置分页参数
        PageHelper.startPage(page, pageSize);
        // 执行分页查询
        List<Peot> peotList = peotMapper.list();
     //   System.out.println(peotList);

        // 获取分页结果
       // Page<Peot> p = (Page<Peot>) empList;
        PageInfo<Peot> p = new PageInfo<>(peotList);
        //封装PageBean
        // PageBean pageBean = new PageBean(p.getTotal(), p.getResult());
        PageBean pageBean = new PageBean(p.getTotal(), p.getList());
        return pageBean;
    }

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

    @Override
    public Peot peotfindById(Integer id) {
        return peotMapper.peotfindById(id);
    }

    @Override
    public boolean updatePeot(Peot peot) {
        return peotMapper.updatePeot(peot);
    }

    @Override
    public boolean  insertUser(Peot peot) {
        int result =  peotMapper.insert(peot);
        return result == 1;
    }

    public PageBean pageSearch(Integer page, Integer pageSize,String author, String style){
        // 设置分页参数
        PageHelper.startPage(page, pageSize);
        // 执行分页查询
        List<Peot> peotList = peotMapper.peotSearch(author,style);
        //   System.out.println(peotList);

        // 获取分页结果
        // Page<Peot> p = (Page<Peot>) empList;
        PageInfo<Peot> p = new PageInfo<>(peotList);
        //封装PageBean
        // PageBean pageBean = new PageBean(p.getTotal(), p.getResult());
        PageBean pageBean = new PageBean(p.getTotal(), p.getList());
        return pageBean;
    }

}

3、controller

//分页功能实现，list.html
//还没有完全实现所有的功能

package com.example.controller;

import com.example.pojo.PageBean;
import com.example.pojo.Result;
import com.example.pojo.Peot;
import com.example.service.PeotService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
//import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@Slf4j
@RestController

public class PeotController {

    @Autowired
    private PeotService peotService;
/*

    // 新增用户
    @PostMapping
    public Result add(@RequestBody Peot peot) {
        peotService.save(peot);
        return Result.success();
    }

    // 修改用户
    @PutMapping
    public Result update(@RequestBody Peot peot) {
        peotService.save(peot);
        return Result.success();
    }

    // 删除用户
    @DeleteMapping("/{id}")
    public void delete(@PathVariable("id") Long id) {
        peotService.delete(id);
    }

    // 根据id查询用户
    @GetMapping("/{id}")
    public Result findById(@PathVariable Long id) {
        return Result.success(peotService.findById(id));
    }

    // 查询所有用户
    @GetMapping
    public Result findAll() {
        return Result.success(peotService.findAll());
    }

*/


   // @RequestParam(defaultValue = "1")
    //@RequestParam(defaultValue = "3")
  // @GetMapping("/peot")  //juery方法这样可以
  @GetMapping("/peot/{page}/{pageSize}")    //axios方法，这样可以。
    public Result page(@PathVariable("page")   Integer page,
                       @PathVariable("pageSize")  Integer pageSize){
        log.info("分页查询, 参数: {},{}",page,pageSize);
        //调用service分页查询
        PageBean pageBean = peotService.page(page,pageSize);
        return Result.seccess(pageBean);
    }


    @RequestMapping("/deletePeot")
    public void deletePeot(Integer id){
        peotService.deletePeot(id);
    }

    @RequestMapping("/peotfindById/{id}")
    public Result peotfindById(@PathVariable("id") Integer id) {
        return  Result.seccess(peotService.peotfindById(id));
    }

    //@RequestMapping("/peotupdate")
    @PutMapping("/peotupdate")
    public  Result updatePeot(@RequestBody Peot peot){
        boolean r = peotService.updatePeot(peot);

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

    @RequestMapping("/peotinsert")
    public Result insertUser(@RequestBody Peot peot){
        boolean result =peotService.insertUser(peot);
        if(result) {
            // 成功  code==1
            return Result.success();
        } else {
            // 失败  code==0
            return Result.erro("添加失败");

        }

    }

   /* @GetMapping("/peotSearch")
    // @GetMapping("/peotSearch/{author}/{style}")    //axios方法，这样可以。
    public Result pageSearch(  @RequestParam(defaultValue = "1") Integer page,
                               @RequestParam(defaultValue = "3") Integer pageSize,
                               @RequestParam String author,
                               @RequestParam String style ){
        log.info("分页条件查询, 参数: {},{}",page,pageSize,author,style);
        //调用service分页查询
        PageBean pageBean = peotService.pageSearch(page,pageSize,author,style);
        return Result.seccess(pageBean);
    }*/




}

二、前端

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>通过axios获取数据</title>
  <link rel="stylesheet" href="js/element.css">
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto">
  <h2>诗人信息表</h2>
  <el-row>
    <el-col :span="6" style="margin-bottom: 10px">
      <el-button type="primary" @click="add">新增</el-button>

    </el-col>
  </el-row>

  <el-table
          :data="tableData.filter(data => !search || data.author.includes(search))"
          style="width: 100%">
    <el-table-column
            label="id"
            prop="id"
            style="width: 10%">
    </el-table-column>
    <el-table-column
            label="姓名"
            prop="author"
            style="width: 10%">
    </el-table-column>
    <el-table-column
            label="性别"
            prop="gender"
            style="width: 10%">
    </el-table-column>
    <el-table-column
            label="朝代1"
            prop="dynasty"
            style="width: 10%">
    </el-table-column>
    <el-table-column
            label="头衔1"
            prop="title"
            style="width: 20%">
    </el-table-column>
    <el-table-column
            label="风格1"
            prop="title"
            style="width: 20%">
    </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="edit(scope.row)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button>
      </template>

    </el-table-column>
  </el-table>
  <el-pagination
          layout="prev, pager, next"
          :current-page="pageNum"
          :page-size="pageSize"
          :total="totale"
          @current-change="findAll"
          @prev-click="findAll"
          @next-click="findAll">
  </el-pagination>


  <el-dialog
          title="诗人信息"
          :visible.sync="dialogVisible"
          width="30%">

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="诗人">
        <el-input v-model="form.author"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="form.gender" label="0">男</el-radio>
        <el-radio v-model="form.gender" label="1">女</el-radio>
      </el-form-item>
      <el-form-item label="朝代">
      <el-input v-model="form.dynasty"></el-input>
    </el-form-item>
    <el-form-item label="头衔">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="风格">
      <el-input v-model="form.style"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>

  </el-dialog>



</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: {
      pageNum: 1,
      pageSize: 3,
      search: '',
      tableData: [],
      totale:null,
      dialogVisible: false,
      form: {}
    },
    methods: {

      findAll(num) {
        this.pageNum = num;
        var url = `peot/${this.pageNum}/${this.pageSize}`
        axios.get(url)
                .then(res => {
                  this.tableData = res.data.data.rows;
                  this.totale=res.data.data.total;
                })
                .catch(error => {
                  // 在这里处理可能的错误
                  console.error("Error fetching data:", error);
                });
      },
      handleDelete(id) {
        var _thisd = this;
        if (window.confirm("确定要删除该条数据吗？？？")){
          axios.post('/deletePeot?id='+id)
                  .then(function (response) {
                    alert("删除成功")
                    _thisd.findAll(1);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
        }
      },
      edit(row) {
        this.form = row;
        this.dialogVisible = true;
      },
      add() {
        this.dialogVisible = true;
        this.form = {};
      },
      save() {
        let data = JSON.stringify(this.form);
        if (this.form.id) {
          // 编辑
          axios.put('/peotupdate', data, {
            headers: {
              'Content-Type': 'application/json' // 明确设置 Content-Type
            }
          })
                  .then(res => {
            this.dialogVisible = false;
            this.findAll(1);
          })
        } else {
          // 新增
          axios.put('/peotinsert', data, {
            headers: {
              'Content-Type': 'application/json' // 明确设置 Content-Type
            }
          })
                  .then(res => {
            this.dialogVisible = false;
            this.findAll(1);
          })
        }
      }

    },

    created() {
      this.findAll(this.pageNum);
    }
  })
</script>
</body>
</html>