目录
后端代码
mapper.xml
controller
前端代码
api》action.js
后端代码
mapper.xml
<!--模糊查询--><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
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 {@Autowiredprivate 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
/*** 对后台请求的地址的封装，URL格式如下：* 模块名_实体名_操作*/
export default {//服务器'SERVER': 'http://localhost:8080/spboot','LIST': '/book/list','ADD': '/book/add',//获得请求的完整地址，用于mockjs测试时使用'getFullPath': k => {return this.SERVER + this[k];}
}
views
<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>
)
