SSM+VUE的增删改查

后端代码

mapper.xml

javascript 复制代码

  <!--模糊查询-->
  <select id="selectLike" parameterType="com.zking.spboot.model.Book" resultMap="BaseResultMap">
    select * from t_book
    <where>
      <if test="bookname != null and bookname != ''">
        and bookname like CONCAT('%',#{bookname,jdbcType=VARCHAR},'%')
      </if>
    </where>
  </select>

controller

javascript 复制代码

package com.zking.spboot.controller;

import com.zking.spboot.model.Book;
import com.zking.spboot.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

/**
 * @author是辉辉啦
 * @create 2023-12-02-16:14
 */
@RestController
@RequestMapping("/book")
public class BookController {
    @Autowired
    private IBookService bookService;

    /**
     * 查询（模糊查询）
     * @param record
     * @return
     */
    @RequestMapping("/list")
    public Map list(Book record){
        Map map = new HashMap();
        map.put("data",bookService.selectLike(record));
        map.put("code",200);
        return map;
    }

    /**
     * 新增
     * @param record
     * @return
     */
    @RequestMapping("/add")
    public Map add(Book record){
        Map map = new HashMap();
        bookService.insert(record);
        map.put("msg","新增成功");
        map.put("code",200);
        return map;
    }


}

后端测试

#查询
http://localhost:8080/spboot/book/list?bookname=红
#新增
http://localhost:8080/spboot/book/add?bookname=111&price=111&booktype=1

前端代码

api》action.js

javascript 复制代码

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	//服务器
	'SERVER': 'http://localhost:8080/spboot',
  'LIST': '/book/list',
  'ADD': '/book/add',
	//获得请求的完整地址，用于mockjs测试时使用
	'getFullPath': k => {
		return this.SERVER + this[k];
	}
}

views

javascript 复制代码

<template>
  <div>
    <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
    <!-- 1.模糊查询的搜索框-->
    <el-form :inline="true">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="请输入书本名称"></el-input>
      </el-form-item>
      <!-- ①查询按钮 -->
      <el-form-item>
        <el-button type="primary" @click="select">查询</el-button>
      </el-form-item>
      <!-- ②新增按钮 -->
      <el-form-item>
        <el-button type="primary" @click="openadd">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 2.显示的表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="bookname" label="书本名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="书本价格" width="180">
      </el-table-column>
      <el-table-column prop="booktype" label="书本类别">
      </el-table-column>
    </el-table>
    <!-- 3.新增弹出的对话框-->
    <el-dialog title="新增书本" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="书本名称" :label-width="formLabelWidth" prop="bookname">
          <el-input v-model="form.bookname"></el-input>
        </el-form-item>
        <el-form-item label="书本价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="书本类别" :label-width="formLabelWidth" prop="booktype">
          <el-select v-model="form.booktype" placeholder="请选择书本类别">
            <el-option label="神话" value="神话"></el-option>
            <el-option label="爱情" value="爱情"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        ts: new Date().getTime(),
        //定义表格的显示数据
        tableData: [],
        //模糊查询
        bookname: '',
        //控制新增的对话框是否显示
        dialogFormVisible: false,
        //对话框中的表单项的宽度
        formLabelWidth: '120px',
        //新增的表单
        form: {
          bookname: '',
          price: '',
          booktype: ''
        },
        //新增的表单验证
        rules: {
          bookname: [{
              required: true,
              message: '请输入书本名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          price: [{
            required: true,
            message: '请输入书本价格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请选择书本类别',
            trigger: 'change' // 这里可以改为 'change' 触发验证
          }]
        }
      };
    },
    methods: {
      //查询(数据的显示)
      list(param) {
        let url = this.axios.urls.LIST;
        this.axios.post(url, param).then(res => {
          console.log(res.data.data)
          this.tableData = res.data.data;
        }).catch(e => {

        })
      },
      //模糊查询
      select() {
        //传递的参数（书本名称）
        let param = {
          bookname: this.bookname
        }
        //调用模糊查询的方法（传入书本名称）
        this.list(param);
      },
      openadd() {
        //打开新增的弹出层对话框
        this.dialogFormVisible = true;
      },
      //新增

      add() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            let url = this.axios.urls.ADD;
            this.axios.post(url, this.form).then(res => {
              console.log(res.data.code);
              if (res.data.code === 200) {
                //新增成功之后关闭新增的弹出层对话框
                this.dialogFormVisible = false;
                //刷新数据
                this.list({});
              }
            }).catch(e => {
              // 在请求失败时的处理逻辑，例如给出错误提示
              console.error('请求失败', e);
            });
          } else {
            return false;
          }
        });
      },
      },
          created() {
            //初始化数据的查询
            this.list({})

          }
      }
</script>

<style>
</style>