后端：

BookMapper：

<select id="selectBybookname" resultMap="BaseResultMap" parameterType="java.lang.String" >select<include refid="Base_Column_List" />from t_book<where><if test="bookname != null and bookname !=''">and bookname like CONCAT('%',#{bookname},'%')</if></where>
</select>

List<Book> selectBybookname(@Param("bookname") String book);

BookService：

package com.zking.ssm.service;import com.zking.ssm.model.Book;
import org.apache.ibatis.annotations.Param;import java.util.List;public interface BookService {int insertSelective(Book record);List<Book> selectBybookname(String bookname);
}

BookController：

package com.zking.ssm.controller;import com.zking.ssm.model.Book;
import com.zking.ssm.service.BookService;
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.List;
import java.util.Map;@RestController
@RequestMapping("/book")
public class BookController {@Autowiredprivate BookService bookService;@RequestMapping("/list")public Map list(Book book){List<Book> books = this.bookService.selectBybookname(book.getBookname());Map map = new HashMap();map.put("code",200);map.put("data",books);return map;}@RequestMapping("/save")public Map add(Book book){int i = this.bookService.insertSelective(book);Map map = new HashMap();map.put("code",200);map.put("data",i > 0 ? "成功" : "失败");return map;}}

BookServiceImpl：

package com.zking.ssm.service.impl;import com.zking.ssm.mapper.BookMapper;
import com.zking.ssm.model.Book;
import com.zking.ssm.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class BookServiceImpl implements BookService {@Autowiredprivate BookMapper bookMapper;@Overridepublic int insertSelective(Book record) {return bookMapper.insertSelective(record);}@Overridepublic List<Book> selectBybookname(String bookname) {return bookMapper.selectBybookname(bookname);}
}

前端：

<template><div><h1 align="center">SSM阶段机试，ts={{ts}}</h1><!-- 弹出层 --><el-dialog title="书籍新增" :visible.sync="dialogFormVisible"><el-form :model="form" :rules="rules" ref="form"><el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname"><el-input v-model="form.bookname" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price"><el-input v-model="form.price" autocomplete="off"></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><!-- 搜索框 --><el-form :inline="true" class="demo-form-inline"><el-form-item label="书籍名称"><el-input v-model="bookname" placeholder="请输入书籍名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button><el-button type="primary" @click="dialogFormVisible = true">新增</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="bookname" label="书籍名称" width="590"></el-table-column><el-table-column prop="price" label="书籍价格" width="590"></el-table-column><el-table-column prop="booktype" label="书籍类别"></el-table-column></el-table></div>
</template><script>export default {data: function() {return {ts: new Date().getTime(),tableData: [],dialogFormVisible: false,bookname: '',form: {bookname: '',price: '',booktype: ''},formLabelWidth: '120px',rules: {bookname: [{required: true,message: '请输入书籍名称',trigger: 'blur'}],price: [{required: true,message: '请输入书籍价格',trigger: 'blur'}],booktype: [{required: true,message: '请选择书籍类别',trigger: 'change'}]}};},methods: {list(param) {let url = this.axios.urls.LIST;this.axios.post(url, param).then(res => {this.tableData = res.data.data;});},onSubmit() {let param = {bookname: this.bookname};this.list(param);},add() {this.$refs['form'].validate((valid) => {if (valid) {let url = this.axios.urls.SAVE;this.axios.post(url, this.form).then(res => {let code = res.data.code;if (code == 200) {this.dialogFormVisible = false;this.list();} else {console.error('添加失败');}});} else {console.log('error submit!!');return false;}});}},created() {this.list();}};
</script>
<style>
</style>