【无标题】springboot npm -v npm i

<select id="query" resultType="com.zking.spboot.model.Book">
  select * from t_book where 1=1
  <if test="null!=bookname and ''!=bookname">
    and bookname like concat('%',{#bookname},'%')
  </if>
</select>

int insert(Book record);

List<Book> query(Book book);

 BookController

@CrossOrigin
@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private BookService bookService;

    /**
     * 新增
     * @param book
     * @return
     */
    @RequestMapping("/add")
    public Json<?> add(Book book){
        bookService.insert(book);
            return new Json<>();
    }

    /**
     * 查询
     * @param book
     * @return
     */
    @RequestMapping("/query")
    public Json<?> query(Book book){
        List<Book> lst = bookService.query(book);
        return new Json<>(200,"OK",lst);
    }
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    class  Json<T>{
        //状态码
        private int code=200;
        //返回消息
        private String msg="OK";
        //返回结果
        private T data;
    }
}

booklist.vue 

<template>
    <div>
        <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
    <!-- 1.搜索栏 -->
    <el-form :inline="true">
  <el-form-item label="书本名称">
    <el-input v-model="bookname"></el-input>
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="query">查询</el-button>
  <el-button type="primary" @click="open">新增</el-button>
  </el-form-item>
</el-form>
    <!-- 2.数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id"label="编号"width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column prop="booktype" label="类型">
      </el-table-column>
    </el-table>
    <!-- 3.弹出框（新增） -->
    <el-dialog @close="close" title="新增" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules" ref="form" >
    <el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
      <el-input v-model="form.bookname" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
      <el-input v-model="form.price" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
      <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="outerVisible = 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(),
                bookname:'',
                tableData:[],
                dialogFormVisible:false,
                formLabelWidth:'100px',
                form:{
                    bookname:'',
                    price:'',
                    booktype:''
                },
                rules: {
                  bookname: [
                    { required: true, message: '请输入书本名称', trigger: 'blur' },
                  ],
                  price: [
                      { required: true, message: '请输入书本价格', trigger: 'blur' },
                  ],
                  booktype: [
                      { required: true, message: '请输入书本类型', trigger: 'change' },
                  ],
                  }
            };
        },
        methods:{
            close:function(){
                this.$refs['form'].resetFields();
            },
            add:function(){
                this.$refs['form'].validate((valid) => {
                  if (valid) {
                    //获取新增的地址
                    //2.请求地址
                    let url=this.axios.urls.ADD;
                    //3.发送请求
                    this.axios.post(url,this.form).then(resp=>{
                        let rs=resp.data;
                        console.log(rs);
                        if(rs.code==200){
                            //关闭对话框
                            this.dialogFormVisible=false;
                            //刷新列表
                            this.query();
                        }
                    }).catch(err=>{
                        
                    });
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
            },
            open:function(){
                this.dialogFormVisible=true;
            },
            query:function(){
                //1.查询参数
                let param={
                    bookname:this.bookname
                }
                //2.请求地址
                let url=this.axios.urls.QUERY;
                //3.发送请求
                this.axios.post(url,param).then(resp=>{
                    let rs=resp.data;
                    console.log(rs);
                    this.tableData=rs.data;
                }).catch(err=>{
                    
                });
            }
        }
    }
</script>

<style>
</style>

action.js 

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