20230420前端实现修改操作,前后端实现模糊查询 2023年4月20日
java项目组

流程图

vue代码

<template>
  <div>
    <el-button type="primary" @click="addBtn()">添加</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row.id)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formOk()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import { listNotice,delNotice,addNotice,getNotice,updateNotice } from "@/api/student/student";
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible : false,
      openStatus : false,
      form : {}
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询公告列表 */
    getList() {
      listNotice().then(response => {
        this.tableData = response.data;
      });
    },
    /** 点击删除按钮 */
    handleDelete(id){
      this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项？').then(function() {
        return delNotice(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 点击确定按钮事件 */
    formOk(){
      if(this.openStatus){
        updateNotice(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.dialogFormVisible = false;
          this.getList();
        });
      }else {
        addNotice(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.dialogFormVisible = false;
          this.getList();
        });
      }

    },
    /** 点击添加事件 */
    addBtn(){
      this.openStatus = false;
      this.form = {};
      this.dialogFormVisible = true
    },
    /** 点击修改按钮 */
    handleUpdate(id){
      this.openStatus = true;
      getNotice(id).then(response => {
        this.form = response.data[0];
        this.dialogFormVisible = true;
      });
    }
  }
}
</script>
<style>
</style>

js代码

import request from '@/utils/request'
// 查询列表
export function listNotice(query) {
  return request({
    url: '/student/student/list',
    method: 'get',
    params: query
  })
}
// 删除学生
export function delNotice(id) {
  return request({
    url: '/student/student/delete?id=' + id,
    method: 'get'
  })
}
// 新增学生
export function addNotice(data) {
  return request({
    url: '/student/student/add',
    method: 'post',
    data: data
  })
}
// 根据id查询
export function getNotice(id) {
  return request({
    url: '/student/student/selectById?id=' + id,
    method: 'get'
  })
}
// 修改学生数据
export function updateNotice(data) {
  return request({
    url: '/student/student/update',
    method: 'post',
    data: data
  })
}

模糊查询前端代码

<template>
  <div>
    <el-button type="primary" @click="addBtn()">添加</el-button>
    <div style="width: 200px">
      <h1>学生姓名:</h1> <el-input v-model="input.name" placeholder="请输入内容"></el-input>
      <h1>学生年龄:</h1> <el-input v-model="input.age" placeholder="请输入内容"></el-input>
    </div>
    <el-button type="success" @click="inputSelect()">搜索</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row.id)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formOk()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import { listNotice,delNotice,addNotice,getNotice,updateNotice } from "@/api/student/student";
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible : false,
      openStatus : false,
      form : {},
      input : {},
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询公告列表 */
    getList() {
      listNotice(this.input).then(response => {
        this.tableData = response.data;
      });
    },
    /** 点击删除按钮 */
    handleDelete(id){
      this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项？').then(function() {
        return delNotice(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 点击确定按钮事件 */
    formOk(){
      if(this.openStatus){
        updateNotice(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.dialogFormVisible = false;
          this.getList();
        });
      }else {
        addNotice(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.dialogFormVisible = false;
          this.getList();
        });
      }

    },
    /** 点击添加事件 */
    addBtn(){
      this.openStatus = false;
      this.form = {};
      this.dialogFormVisible = true
    },
    /** 点击修改按钮 */
    handleUpdate(id){
      this.openStatus = true;
      getNotice(id).then(response => {
        this.form = response.data[0];
        this.dialogFormVisible = true;
      });
    },
    /** 点模糊查询搜索按钮 */
    inputSelect(){
      this.getList()
    }
  }
}
</script>
<style>
</style>

js代码

import request from '@/utils/request'
// 查询列表
export function listNotice(query) {
  return request({
    url: '/student/student/list',
    method: 'get',
    params: query
  })
}

// 删除学生
export function delNotice(id) {
  return request({
    url: '/student/student/delete?id=' + id,
    method: 'get'
  })
}
// 新增学生
export function addNotice(data) {
  return request({
    url: '/student/student/add',
    method: 'post',
    data: data
  })
}
// 根据id查询
export function getNotice(id) {
  return request({
    url: '/student/student/selectById?id=' + id,
    method: 'get'
  })
}
// 修改学生数据
export function updateNotice(data) {
  return request({
    url: '/student/student/update',
    method: 'post',
    data: data
  })
}

后端代码

controller

@GetMapping("list")
/**
 * alt+回车找到对应的包
 */
public Map<String,Object> list(Student student){
    List<Student> lst = studentService.list(student);
    Map<String,Object> map = new HashMap<>();
    map.put("data",lst);
    return map;
}

xml

<select id="list" resultMap="SysUserResult">
    SELECT * FROM `student`
    <where>
        <if test="name != null and name != ''">
            AND `name` like concat('%', #{name}, '%')
        </if>
        <if test="age != null and age != ''">
            AND age = #{age}
        </if>
    </where>
</select>

其他文件自行补充实体