Vue+Element之SpingBoot书本管理系统

目录

前后端分离

        1.1后端

        1.1.1配置generatorConfig.xml中的mysql文件目录,自动生成代码

        1.1.2mapper层

        1.1.3BookService-->将BookMapper复制到Service

        1.1.4BookServiceImpl（业务逻辑层）

        1.1.5BookController层

        1.2前端

        1.2.1在cmd中下载依赖npm i(install)

        1.2.2在api中action.js配置请求路径

        1.2.3前端views写前端页面功能代码

        1.2.4在cmd中跑起来npm run dev

---

前后端分离

        1.1后端

        1.1.1配置generatorConfig.xml中的mysql文件目录,自动生成代码

 <!--指定数据库jdbc驱动jar包的位置-->
    <classPathEntry location="F:\repository\mvn\mysql\mysql-connector-java\5.1.44\mysql-connector-java-5.1.44.jar"/>

        1.1.2mapper层

       mapper.xml中查询所有的SQL：select <include refid="Base_Column_List"/> from t_book where 1=1 <if test="bookname!=null"> and bookname like concat('%',#{bookname},'%') </if>

package com.zking.spboot.mapper;

import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Repository
public interface BookMapper {

    /**
     * 根据书本名称查询所有书籍
     * @param book
     * @return
     */
    List<Book> queryAll(Book book);


    int insert(Book record);


}

        1.1.3BookService-->将BookMapper复制到Service

package com.zking.spboot.service;

import com.zking.spboot.model.Book;

import java.util.List;

public interface BookService {

    /**
     * 根据书本名称查询所有书籍
     * @param book
     * @return
     */
    List<Book> queryAll(Book book);

    int insert(Book record);
}

        1.1.4BookServiceImpl（业务逻辑层）

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;

@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);
    }
}

        1.1.5BookController层

package com.zking.spboot.controller;

import com.zking.spboot.mapper.BookMapper;
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;


@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;
    }


}

        1.2前端

        1.2.1在cmd中下载依赖npm i(install)

        1.2.2在api中action.js配置请求路径

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

        1.2.3前端views写前端页面功能代码

<template>
	<div>
		<!-- <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1> -->
		<!--搜索框-->
		<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>

		<!--数据表格-->
		<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>

		<!--弹出框-->
		<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-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: {
			close: function() {
				//清空表单数据
				this.book = {
					bookname: '',
					price: '',
					booktype: ''
				};
				//清空表单验证
				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 data = resp.data;
							if (data.code == 200) {
								//关闭弹出框
								this.dialogFormVisible = false;
								//再次查询列表方法
								this.query();
							} else {
								this.$message.error('新增失败！');
							}
						}).catch(err => {

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//查询方法
			query: function() {
				//1.定义查询参数
				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);
					this.tableData = data.data;
				}).catch(err => {

				})
			},
			//打开弹出框的方法
			open: function() {
				this.dialogFormVisible = true;
			}
		}

	}
</script>

<style>
</style>

        1.2.4在cmd中跑起来npm run dev