目录

一、环境准备

1、db

2、html

打开前端开发工具HBuilder X，把准备好的前端spboot移进去：

接着查看电脑的mvn版本，选中项目右键：

npm -version

npm i​

3、java

 在弹出的窗口中选择你需要导入的项目，点击ok，选择maven

然后去修改maven配置：

再去检查一下application.yml文件和jdbc.properties，看数据库配置是否正确：

最后要注意修改generatorConfig.xml：

二、后台接口定义及测试

开始自动生成代码：

BookMapper类上加@Repository

由于考虑到MySQL数据库里的id有可能是自增的，所以：

 BookMapper ：

 BookService :

（把类上的注解@Repository去掉，以及除了查询和增加的其他方法都可以去掉）

BookServiceImpl ：

（在类上要添加注解@Service）

BookController :

三、前端页面效果实现

action.js：

接着去访问ElementUI官网：

 复制到BookList.vue再稍作调整： 

查询全部：

模糊查询：​

增加运行效果：

---

一、环境准备

1、db

 将以上sql脚本文件放在MySQL中去运行：

 2、html

打开前端开发工具HBuilder X，把准备好的前端spboot移进去：

接着查看电脑的mvn版本，选中项目右键：

( 这里我使用的是内置终端)

npm -version

npm i

 

 

 

前端搭建完毕！

 紧接着是搭建后端环境：

3、java

 在弹出的窗口中选择你需要导入的项目，点击ok，选择maven

 

 

去寻找一下电脑中的maven所在地：

 输入mvn -version

然后去修改maven配置：

再去检查一下application.yml文件和jdbc.properties，看数据库配置是否正确：

最后要注意修改generatorConfig.xml：

 

以及下面的：

 这样后端环境也搭建完毕！

二、后台接口定义及测试

开始自动生成代码：

 

 生成完毕！

开始编码：

BookMapper类上加@Repository

package com.zking.spboot.mapper;

import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;

@Repository
public interface BookMapper {
    int deleteByPrimaryKey(Integer id);

    int insert(Book record);

    int insertSelective(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Book record);

    int updateByPrimaryKey(Book record);
}

由于考虑到MySQL数据库里的id有可能是自增的，所以：

 

 BookMapper ：

package com.zking.spboot.mapper;

import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface BookMapper {


    int deleteByPrimaryKey(Integer id);

    /**
     * 根据书本名称模糊查询书本信息
     * @param book
     * @return
     */
    List<Book> query(Book book);

    /**
     * 新增书本
     * @param record
     * @return
     */
    int insert(Book record);

    int insertSelective(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Book record);

    int updateByPrimaryKey(Book record);
}

 

然后service层：

 BookService :

（把类上的注解@Repository去掉，以及除了查询和增加的其他方法都可以去掉）

package com.zking.spboot.service;

import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;

import java.util.List;


public interface BookService {


    /**
     * 根据书本名称模糊查询书本信息
     * @param book
     * @return
     */
    List<Book> query(Book book);

    /**
     * 新增书本
     * @param record
     * @return
     */
    int insert(Book record);

}

去实现接口：

 

BookServiceImpl ：

（在类上要添加注解@Service）

package com.zking.spboot.service.impl;

import com.zking.spboot.mapper.BookMapper;
import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author 杨总
 * @create 2022-11-18 1:24
 */
@Service
public class BookServiceImpl implements BookService {

    @Autowired
    private BookMapper bookMapper;

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

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

BookController :

package com.zking.spboot.controller;

import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author 杨总
 * @create 2022-11-18 1:27
 */
@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private BookService bookService;

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

    @RequestMapping("/add")
    public JsonResponseBody<?> add(Book book){
        bookService.insert(book);
        return new JsonResponseBody<>();
    }

    @Data
    @AllArgsConstructor //有参的构造方法
    @NoArgsConstructor //无参的构造方法
    class JsonResponseBody<T>{
        private int code=200;
        private String msg="OK";
        private T data;
    }


}

测试： 

 

三、前端页面效果实现

回到前端HBuilder X：

action.js：

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

 

接着去访问ElementUI官网：

 

 复制到BookList.vue再稍作调整： 

目前页面效果：

 再去官网扩一个表格：

 复制到BookList.vue:

 

目前页面效果：

查询全部：

 模糊查询：

 

接着弄新增，

加一个新增按钮：

 

再去官网扩一份新增的对话框：

 

          

 复制到BookList.vue稍作调整：

 目前点击增加的页面效果：

 

 OK，我们再去官网扩一个做校验的代码：

 

 

 

 

 

增加运行效果：

 

 

 

 

 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" 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">
			</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="book" :rules="rules" ref="book">
				<el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
					<el-input v-model="book.bookname" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
					<el-input v-model="book.price" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
					<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,
				formLabelWidth: '100px',
				book: {
					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['book'].resetFields();
			},
			save: function() {
				this.$refs['book'].validate((valid) => {
					if (valid) {
						let url = this.axios.urls.ADD;
						this.axios.post(url, this.book).then(resp => {
							let rs = resp.data;
							if(rs.code==200){
								//关闭对话框
								this.dialogFormVisible=false;
								//刷新列表
								this.query();
							}else{
								
							}
						}).catch(erro => {
							
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			open: function() {
				this.dialogFormVisible = true;
			},
			query: function() {
				// 1、查询参数
				let params = {
					bookname: this.bookname
				}
				//2、请求路径
				let url = this.axios.urls.ALL; // ALL一定注意与action.js对应
				//3、发起请求
				this.axios.post(url, params).then(resp => {
					let rs = resp.data;
					console.log(rs);
					this.tableData = rs.data;
				}).catch(erro => {

				})
			}
		}
	}
</script>

<style>
</style>

今日内容就到这啦！拜拜~