结业考试项目

BookMapper

@Repository
public interface BookMapper {

    List<Book> queryAll(Book book);

    int deleteByPrimaryKey(Integer id);

    int insert(Book record);

    int insertSelective(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Book record);

    int updateByPrimaryKey(Book record);
}

BookMapper.xml

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

BookService

public interface BookService {

    //查询
    List<Book> queryAll(Book book);


    int insert(Book record);

}

BookServiceImpl

@Service
public class BookServiceImpl implements BookService {
    @Autowired
    private BookMapper bookMapper;

    @Override
    public List<Book> queryAll(Book book) {
        return bookMapper.queryAll(book);
    }

    @Override
    public int insert(Book record) {
        return bookMapper.insert(record);
    }
}

BookConterroll

@RestController
@RequestMapping("/book")
public class BookController {
    @Autowired
    private BookService bookService;

    @RequestMapping("/addBook")
    public jsonResponseBody<?> addBook(Book book){
        bookService.insert(book);
        return new jsonResponseBody<>();
    }
    @RequestMapping("/queryAll")
    public jsonResponseBody<List<Book>> queryAll(Book book){
        List<Book> books =bookService.queryAll(book);
        return new jsonResponseBody<>(200,"OK",books);
    }

    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    class jsonResponseBody<T>{
        private int code=200;
        private String msg="OK";
        private T data;
    }
}

limobk组件

 <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

htnl页面

<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="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" align="center">
			</el-table-column>
			<el-table-column prop="bookname" label="书本名称" align="center">
			</el-table-column>
			<el-table-column prop="price" label="书本价格" align="center">
			</el-table-column>
			<el-table-column prop="booktype" label="书本类型" align="center">
			</el-table-column>
		</el-table>

		<!-- 3.弹出框 -->
		<!-- dialogFormVisible:显示隐藏 -->
		<el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close">
			<el-form :model="book" :rules="rules" ref="book">
				<el-form-item prop="bookname" label="书本名称" label-width="90px">
					<el-input v-model="book.bookname" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="price" label="书本价格" label-width="90px">
					<el-input v-model="book.price" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="booktype" label="书本类型" label-width="90px">
					<el-select style="width: 100%;" v-model="book.booktype" placeholder="请选择书本类型">
						<el-option label="文学" value="文学"></el-option>
						<el-option label="悬疑" value="悬疑"></el-option>
						<el-option label="小说" value="小说"></el-option>
						<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="save">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				ts: new Date().getTime(),
				bookname: '',
				tableData: [],
				dialogFormVisible: false,
				book: {
					bookname: '',
					price: '',
					booktype: ''
				},
				rules: {
					bookname: [{
						required: true,
						message: '请输入书本名称',
						trigger: 'blur'
					}, ],
					price: [{
						required: true,
						message: '请输入书本价格',
						trigger: 'blur'
					}, ],
					booktype: [{
						required: true,
						message: '请选择书本类型',
						trigger: 'change'
					}, ]
				}
			};
		},
		methods: {
			query: function() {
				//1.定义查询参数	第一个bookname是后台接收的实体属性名
				//第2个是获取你当前双向绑定的值
				let params = {
					bookname: this.bookname
				};
				//2.获取请求路径
				let url = this.axios.urls.ALL;
				//3.发起ajax请求
				this.axios.post(url, params).then(resp => {
					let data = resp.data;
					console.log(data);
					//{code:200,msg:'ok',data:[...]}
					//绑定数据 获取data中的data
					this.tableData = data.data;

				}).catch(err => {

				})

			},
			open: function() {
				//打开对话框
				this.dialogFormVisible = true;
			},
			close:function(){
				//对话框的关闭事件
				//清空表单数据
				this.book={
					bookname: '',
					price: '',
					booktype: ''
				};
				//清空表单验证
				this.$refs['book'].resetFields();
			},
			save: function() {
				//此处‘book’对应的是表单中的ref属性
				this.$refs['book'].validate((valid) => {
					if (valid) {
						//1.获取请求路径
						let url = this.axios.urls.ADD;
						//2.发起ajax请求
						this.axios.post(url,this.book).then(resp => {
							let data = resp.data;
							console.log(data);
							//获取结果码
							if(data.code==200){
								//关闭弹出框
								this.dialogFormVisible=false;
								//再次调用查询列表方法  刷新列表
								this.query();
							}else{
								this.$message.error('新增失败！');
							}
						}).catch(err => {

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}

	}
</script>

<style>
</style>

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */

export default {
    //服务器
    'SERVER': 'http://localhost:8080/spboot', 
    'ADD':'/book/addBook',
    'ALL':'/book/queryAll',
    //获得请求的完整地址，用于mockjs测试时使用
    'getFullPath': k => {
        return this.SERVER + this[k];
    }
}

 

依赖报错

npm cache clear --force