Spring+SpringMVC+Mybatis简单整合 图书管理项目 实现增删改查

Spring+SpringMVC+Mybatis项目

tomcat7插件配置

<build>
  <plugins>
    <plugin>
      <groupId>org.apache.tomcat.maven</groupId>
      <artifactId>tomcat7-maven-plugin</artifactId>
      <version>2.1</version>
      <configuration>
        <port>80</port>
        <path>/</path>
        <uriEncoding>UTF-8</uriEncoding>
      </configuration>
    </plugin>
  </plugins>
</build>

数据库表结构

Date: 2022-11-03 12:31:59
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------

-- Table structure for book

-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `type` varchar(255) DEFAULT NULL,
  `description` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8;

包结构

• com.ysh
  • config
  • controller
  • dao
  • domain
  • service

1.创建SpringMvcConfig类

导入坐标

<!--SpringMvc的坐标-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.10.RELEASE</version>
    </dependency>
	<dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope> 
    </dependency>
<!--json的坐标-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.9</version>
    </dependency>

package com.ysh.config;

import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;

@Configuration
@ComponentScan("com.ysh.controller")
@EnableWebMvc  //开启json对象自动转换功能
public class SpringMvcConfig {
}

2.创建MybatisConfig配置类

导入坐标

<!--Mybatis坐标-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>2.0.2</version>
    </dependency>
<!--Mysql坐标坐标-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.49</version>
    </dependency>
    <!--druid连接池坐标-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.17</version>
    </dependency>

resources文件夹下新建 jdbc.properties文件

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/test
jdbc.username=root
jdbc.password=root

准备工作结束 开始新建MybatisConfig配置类

package com.ysh.config;

import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.mapper.MapperScannerConfigurer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import javax.sql.DataSource;

@Configuration
public class MybatisConfig {

    @Bean
    public SqlSessionFactoryBean getSqlSessionFactoryBean(DataSource dataSource){
        SqlSessionFactoryBean factory = new SqlSessionFactoryBean();
        factory.setTypeAliasesPackage("com.ysh.domain");
        factory.setDataSource(dataSource);
        return factory;
    }

    @Bean
    public MapperScannerConfigurer mapperScannerConfigurer(){
        MapperScannerConfigurer mapperScannerConfigurer = new MapperScannerConfigurer();
        mapperScannerConfigurer.setBasePackage("com.ysh.dao");
        return mapperScannerConfigurer;
    }
}

3.创建JdbcConfig类

package com.ysh.config;

import com.alibaba.druid.pool.DruidDataSource;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;

import javax.sql.DataSource;

@Configuration
@PropertySource("classpath:jdbc.properties") //扫描配置文件
public class JdbcConfig {
    @Value("${jdbc.driver}")
    private String driver;

    @Value("${jdbc.url}")
    private String url;

    @Value("${jdbc.username}")
    private String username;

    @Value("${jdbc.password}")
    private String password;

    @Bean
    public DataSource dataSource(){
        DruidDataSource dataSource = new DruidDataSource();
        dataSource.setDriverClassName(driver);
        dataSource.setUrl(url);
        dataSource.setUsername(username);
        dataSource.setPassword(password);
        return dataSource;
    }
}

4.创建SpringConfig类

package com.ysh.config;

import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Import;

@Configuration
@ComponentScan({"com.ysh.dao","com.ysh.domain","com.ysh.service"})
@Import({MybatisConfig.class,JdbcConfig.class}) //导入Mybatis配置类
public class SpringConfig {
}

5.创建ServletContainersConfig类

package com.ysh.config;


import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class ServletContainersConfig extends AbstractAnnotationConfigDispatcherServletInitializer {

    //加载Spring配置类
    protected Class<?>[] getRootConfigClasses() {
        return new Class[]{SpringConfig.class};
    }

    //加载SpringMvc配置类
    protected Class<?>[] getServletConfigClasses() {
        return new Class[]{SpringMvcConfig.class};
    }

    protected String[] getServletMappings() {
        return new String[]{"/"};
    }
}

6.数据层

实体类 Book

• com.ysh
  • domain
    • Book

package com.ysh.domain;

public class Book {
    private Integer id;
    private String type;
    private String name;
    private String description;

    public Book() {
    }

    public Book(Integer id, String type, String name, String description) {
        this.id = id;
        this.type = type;
        this.name = name;
        this.description = description;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    @Override
    public String toString() {
        return "Book{" +
                "id=" + id +
                ", type='" + type + '\'' +
                ", name='" + name + '\'' +
                ", description='" + description + '\'' +
                '}';
    }
}

• com.ysh
  • dao
    • BookDao

package com.ysh.dao;

import com.ysh.domain.Book;
import org.apache.ibatis.annotations.*;

import java.util.List;

public interface BookDao {

    //查询所有
    @Select("select * from book")
    List<Book> selectAll();

    //id查询
    @Select("select * from book where id = #{id}")
    Book selectById(int id);

    //name模糊查询
    @Select("select * from book where name like #{name}")
    List<Book> selectByName(String name);

    //添加
    @Insert("insert into book values (null,#{name},#{type},#{description})")
    void add(Book book);

    //删除
    @Delete("delete from book where id = #{id}")
    void deleteById(int id);

    //修改
    @Update("update book set name=#{name},type=#{type},description=#{description}  where id = #{id}")
    void alterById(Book book);
}

7.service层

• com.ysh
  • service
    • BookService

package com.ysh.service;

import com.ysh.domain.Book;

import java.util.List;

public interface BookService {

    //查询所有
    List<Book> selectAll();

    //通过id查询
    Book selectById(int id);

    //name模糊查询
    List<Book> selectByName(String name);

    //添加
    void add(Book book);

    //删除
    void deleteById(int id);

    //修改
    void alter(Book book);
}

• com.ysh
  • service
    • impl
      • BookServiceImpl

package com.ysh.service.impl;

import com.ysh.dao.BookDao;
import com.ysh.domain.Book;
import com.ysh.service.BookService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;


@Service
public class BookServiceImpl implements BookService {

    @Resource
    private BookDao bookDao;

    public List<Book> selectAll() {
        List<Book> books = bookDao.selectAll();
        return books;
    }

    public Book selectById(int id) {
        return bookDao.selectById(id);
    }

    public List<Book> selectByName(String name) {
        return bookDao.selectByName(name);
    }

    public void add(Book book) {
        bookDao.add(book);
    }

    public void deleteById(int id) {
         bookDao.deleteById(id);
    }

    public void alter(Book book) {
        bookDao.alterById(book);
    }
}

8.Controller层

• com.ysh
  • controller
    • BookController

package com.ysh.controller;

import com.ysh.domain.Book;
import com.ysh.service.BookService;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/books")
public class BookController {

    @Resource
    BookService service;

    //查询所有
    @GetMapping
    public List<Book> selectAll(){
        System.out.println("查询所有"+service.selectAll());
        return service.selectAll();
    }

    //通过id查询
    @GetMapping("/{id}")
    public Book selectById(@PathVariable Integer id){
        System.out.println(id);
        return service.selectById(id);
    }

    //通过name查询
    @GetMapping("/ByName/{name}")
    public List<Book> selectByName(@PathVariable String name){
        name = "%"+name+"%";
        System.out.println(service.selectByName(name));
        return service.selectByName(name);
    }

    //添加
    @PostMapping
    public String add(@RequestBody Book book){
        System.out.println("添加"+book);
        service.add(book);
        return "success";
    }

    //删除
    @DeleteMapping("/{id}")
    public String delete(@PathVariable Integer id){
        System.out.println(id);
        service.deleteById(id);
        return "success";
    }

    //修改
    @PutMapping
    public String alter(@RequestBody Book book){
        System.out.println(book);
        service.alter(book);
        return "success";
    }

}

后端接口

查询所有 【GET】 http://localhost/books 返回json数据

通过id查询 【GET】http://localhost/books/{id} 路径带参 返回json数据

通过name查询 【GET】http://localhost/books/ByName/{name} 带参 返回json数据

添加书籍 【POST】http://localhost/books/ 请求体带参 返回success

删除数据 【DELETE】http://localhost/books 路径带参 返回success

修改书籍 【PUT】http://localhost/books 请求体带参 返回success

解决静态资源加载问题

创建SpringMvcSupport类 加载静态文件

package com.ysh.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Configuration
public class SpringMvcSupport extends WebMvcConfigurationSupport {
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
        registry.addResourceHandler("/element-ui/**").addResourceLocations("/element-ui/");
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
    }
}

web目录结构

• webapp
  • element-ui （饿了么的组件）
  • js
    • axios.js
    • vue.js
  • pages
    • index.html

index.html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link rel="stylesheet" type="text/css" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <el-container id="app">
        <!--头部-->
        <el-header>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-button type="primary" @click="dialogVisible = true">新增图书</el-button>
                <el-form-item label="图书名称">
                    <el-input v-model="formInline.name" placeholder="图书名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
        </el-header>

        <!--内容-->
        <el-main>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        align="center"
                        label="序号"
                        type="index"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="name"
                        label="书名"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="type"
                        label="类型"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="description"
                        label="描述">
                </el-table-column>

                <el-table-column
                        align="center"
                        width="300"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" @click="alter(scope.row)">修改</el-button>
                        <el-button type="danger" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

        <!--底部栏目-->
        <el-footer></el-footer>

        <!--新增对话框-->
        <el-dialog
                title="添加图书"
                :visible.sync="dialogVisible"
                width="30%"
                >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="图书名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="图书类型">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>
                <el-form-item label="描述信息">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="add">立即创建</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--修改对话框-->
        <el-dialog
                title="修改图书"
                :visible.sync="dialogVisible1"
                width="30%"
        >
            <el-form ref="form1" :model="form1" label-width="80px">
                <el-form-item label="图书名称">
                    <el-input v-model="form1.name"></el-input>
                </el-form-item>
                <el-form-item label="图书类型">
                    <el-input v-model="form1.type"></el-input>
                </el-form-item>
                <el-form-item label="描述信息">
                    <el-input type="textarea" v-model="form1.description"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="subAlter">修改</el-button>
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-container>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios.js"></script>
<script>
    new Vue({
        el:"#app",
        created(){
            this.selectAll();
        },
        data() {
            return {
                //表格数据
                tableData: [],
                //新增对话窗口 打开/关闭标记
                dialogVisible: false,
                dialogVisible1: false,
                //表单数据
                form: {
                    name: '',
                    type: '',
                    description: ''
                },
                form1: {
                    id : '',
                    name: '',
                    type: '',
                    description: ''
                },

                //查询表单数据
                formInline: {
                    name: '',
                },
            }
        },
        methods: {
            //查询所有
            selectAll(){
                axios.get("/books").then(resp=>{
                    this.tableData = resp.data;
                });
            },
            //通过id查询
            selectById(id){
                axios.get("/books/"+id).then(resp=>{
                    //console.log(resp.data);
                });
            },
            //name模糊查询
            query(){
                axios.get("/books/ByName/"+this.formInline.name).then(resp=>{
                    this.tableData = resp.data;
                });
            },

            //表单添加
            add(){
                axios.post("/books",this.form).then(resp=>{
                    //console.log(this.form);
                    if (resp.data == "success"){
                        this.$message({
                            showClose: true,
                            message: '添加图书成功！！',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                        this.form = {
                            name: '',
                            type: '',
                            description: ''
                        };
                        this.selectAll();
                    }else {
                        this.$message({
                            showClose: true,
                            message: '错了哦，服务器开小差了',
                            type: 'error'
                        });
                    }
                });
            },
            //删除
            del(row){
                //console.log(row);
                axios.delete("/books/"+row.id+"").then(resp=>{
                    if (resp.data == "success"){
                        this.$message({
                            showClose: true,
                            message: '删除数据成功！！',
                            type: 'success'
                        });
                        this.selectAll();
                    }else {
                        this.$message({
                            showClose: true,
                            message: '错了哦，服务器开小差了',
                            type: 'error'
                        });
                    }
                });
            },
            //修改
            alter(row){
                //console.log(row.id);
                axios.get("/books/"+row.id).then(resp=>{
                    this.form1 = resp.data;
                });
                this.dialogVisible1 = true;
            },
            subAlter(){
                axios.put("/books",this.form1).then(resp=>{
                    if (resp.data == "success"){
                        this.$message({
                            showClose: true,
                            message: '修改数据成功！！',
                            type: 'success'
                        });
                        this.dialogVisible1 = false;
                        this.selectAll();
                    }else {
                        this.$message({
                            showClose: true,
                            message: '错了哦，服务器开小差了',
                            type: 'error'
                        });
                    }
                });
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        },
    })
</script>

最终效果页面

添加

查询

修改

补充1：平台事务管理器

【创建事务管理器】在JdbcConfig类中添加一个方法，定义成bean

@Bean
public DataSourceTransactionManager transactionManager(DataSource dataSource){
    DataSourceTransactionManager manager = new DataSourceTransactionManager(dataSource);
    return manager;
}

【开启事务功能】在SpringConfig中添加@EnableTransactionManagement注解

package com.ysh.config;

import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Import;
import org.springframework.context.annotation.PropertySource;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@Configuration
@ComponentScan({"com.ysh.dao","com.ysh.domain","com.ysh.service"})
@PropertySource("classpath:jdbc.properties") //扫描配置文件
@Import({MybatisConfig.class,JdbcConfig.class})
@EnableTransactionManagement
public class SpringConfig {
}

【指定一个接口开启事务】 @Transactional 可以直接配在service接口上

package com.ysh.service;

import com.ysh.domain.Book;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Transactional
public interface BookService {

    //查询所有
    List<Book> selectAll();

    //通过id查询
    Book selectById(int id);

    //name模糊查询
    List<Book> selectByName(String name);

    //添加
    void add(Book book);

    //删除
    void deleteById(int id);

    //修改
    void alter(Book book);
}

补充2：提交表单中文乱码处理

//表单中文乱码处理
@Override
protected Filter[] getServletFilters() {
    CharacterEncodingFilter encodingFilter = new CharacterEncodingFilter();
    encodingFilter.setEncoding("UTF-8");
    return new Filter[]{encodingFilter};
}

补充3：封装响应数据 规范化

controller包下创建 Reustl类

package com.ysh.controller;

public class Result {
    private Integer code;
    private Object data;
    private String msg;

    public Result() {
    }

    public Result(Integer code, Object data) {
        this.code = code;
        this.data = data;
    }

    public Result(Integer code, Object data, String msg) {
        this.code = code;
        this.data = data;
        this.msg = msg;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}

创建Code类 封装响应代码

package com.ysh.controller;

public class Code {
    public static final Integer ADD_OK = 2011;
    public static final Integer DELETE_OK = 2012;
    public static final Integer UPDATE_OK = 2013;
    public static final Integer GET_OK = 2014;

    public static final Integer ADD_ERR = 2001;
    public static final Integer DELETE_ERR = 2002;
    public static final Integer UPDATE_ERR = 2003;
    public static final Integer GET_ERR = 2004;
}

改造后的BookController

package com.ysh.controller;

import com.ysh.domain.Book;
import com.ysh.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
@RequestMapping("/books")
public class BookController {

    @Autowired
    BookService service;

    //查询所有
    @GetMapping
    public Result selectAll(){
        //System.out.println("查询所有"+service.selectAll());
        List<Book> data = service.selectAll();
        Integer code = data != null ? Code.GET_OK:Code.GET_ERR;
        String msg = data !=null ? "":"查询出错，请重试";
        return new Result(code,data,msg);
    }

    //通过id查询
    @GetMapping("/{id}")
    public Result selectById(@PathVariable Integer id){
        //System.out.println(id);
        Book data = service.selectById(id);
        Integer code = data != null ? Code.GET_OK:Code.GET_ERR;
        String msg = data !=null ? "":"查询出错，请重试";
        return new Result(code,data,msg);
    }

    //通过name查询
    @GetMapping("/ByName/{name}")
    public Result selectByName(@PathVariable String name){
        //System.out.println(service.selectByName(name));
        name = "%"+name+"%";

        List<Book> data = service.selectByName(name);
        Integer code = data != null ? Code.GET_OK:Code.GET_ERR;
        String msg = data !=null ? "":"查询出错，请重试";
        return new Result(code,data,msg);
    }

    //添加
    @PostMapping
    public Result add(@RequestBody Book book){
        // System.out.println("添加"+book);
        boolean data = service.add(book);
        return new Result(data ? Code.ADD_OK:Code.ADD_ERR,data);
    }

    //删除
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Integer id){
        //System.out.println(id);
        boolean data = service.deleteById(id);
        //System.out.println(data);
        return new Result(data ? Code.DELETE_OK:Code.DELETE_ERR,data);
    }

    //修改
    @PutMapping
    public Result alter(@RequestBody Book book){
        //System.out.println(book);
        boolean data = service.alter(book);
        return new Result(data ? Code.UPDATE_OK:Code.UPDATE_ERR,data);
    }

}