前后端分离项目简单实现增删改查

大家好，我是梦想皮皮，今天带来一篇关于springboot+vue+MySQL项目的粗浅的介绍，同时也用到了vue+element也集成了mybatis希望能帮助到大家。

该项目使用到springboot+vue+MySQL+mybatis同时还使用了element框架。element框架可以更快的开发前端界面不用花太多的时间在写前端上。前后端分离技术已成为互联网项目开发的业界标准使用方式。

首页界面

该界面使用到了表头固定和固定某列 这样可以方便我们查找信息

搜索功能：

 新增界面：

 更新界面：

 删除界面：

MySQL数据库的设计：

Controller层代码：

package com.example.demo.Controller;

import com.example.demo.mapper.BooksMapper;
import com.example.demo.pojo.books;
import com.example.demo.service.BooksServiceIMP;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Objects;

@RestController
public class Controller {
    @Autowired
    BooksServiceIMP booksServiceIMP;

    @Autowired
    BooksMapper booksMapper;

    @RequestMapping("/ShowAll")
    public List<books> ShowAll(){
        return booksServiceIMP.SelectAllBooks();
    }

    @RequestMapping  ("/ShowOne")
    public List<books> ShowOne(
            @RequestParam("Author") String b_Author,
            @RequestParam("Name") String b_Name
    ){
        return booksServiceIMP.SelectOneBook(b_Author,b_Name);
    }

    @RequestMapping("/UpDataOne")
    public int UpDataOne(
            @RequestParam("id") int id,
            @RequestParam("bName") String bName,
            @RequestParam("bAuthor") String bAuthor,
            @RequestParam("bPress") String bPress
//            @RequestParam("bPrice") BigDecimal bPrice,
//            @RequestParam("bookstore") String bookstore,
//            @RequestParam("bType") String bType,
//            @RequestParam("bStock") int bStock,
//            @RequestParam("bExplain") String bExplain,
//            @RequestParam("bImage") String bImage
    ){
        HashMap map = new HashMap();
        map.put("id",id);
        map.put("bName",bName);
        map.put("bAuthor",bAuthor);
        map.put("bPress",bPress);
        System.out.println(map);
        return booksServiceIMP.UpdateOneBook(map);
    }

    @RequestMapping("/InsertOne")
    public int InsertOne(books books){
        System.out.println(books);
        return booksServiceIMP.insert(books);
    }

    @RequestMapping("/DeleteById")
    public int DeleteById(
            @RequestParam("id") int id
    ){
        return booksMapper.deleteById(id);
    }
}

解决跨域请求问题在config层中添加如下代码：

import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CoreConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry){

        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .maxAge(3600);
    }
}

mybatis的xml文件代码：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.BooksMapper">
    <select id="SelectAllBooks" resultType="books">
        select * from books

    </select>
    <select id="SelectOneBook"  parameterType="Map" resultType="books">
        select
            *
        from books
        <where>
            <if test="b_Author !=null ">
            b_Author like "%"#{b_Author}"%"
            </if>
            <if test="b_Name !=null ">
            and b_Name like "%"#{b_Name}"%"
            </if>
        </where>
    </select>
    <update id="UpdateOneBook" parameterType="Map">
        update
            books
        set
            b_Name = #{bName},
            b_Author = #{bAuthor},
            b_Press = #{bPress}

        where
            id = #{id}
    </update>

</mapper>

vue主界面代码：

<template>
<div>
<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>
      <el-table 
      :data="tableData" 
      style="width: 100%"
      max-height="400"
      :row-style="{ height: '60px' }"
      :cell-style="{ padding: '5px' }"
      >
        <el-table-column type="selection" width="55" align="center" >
        </el-table-column>
        <el-table-column prop="id" label="ID"  width="100" align="center" fixed>
        </el-table-column>
        <el-table-column prop="bname" label="书名"  width="120" align="center">
        </el-table-column>
        <el-table-column prop="bauthor" label="作者" width="150" align="center">
        </el-table-column>
        <el-table-column prop="bpress" label="出版社" width="150" align="center">
        </el-table-column>
        <el-table-column prop="bprice" label="价格" width="150" align="center">
        </el-table-column>
        <el-table-column prop="bookstore" label="书店" width="150" align="center">
        </el-table-column>
        <el-table-column prop="btype" label="类型" width="150" align="center">
        </el-table-column>
        <el-table-column prop="bstock" label="库存" width="150" align="center">
        </el-table-column>
        <el-table-column align="right" fixed="right" width="250">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="searchData"
              @keyup.enter.native="search"
              size="mini"
              placeholder="输入关键字搜索">
            </el-input>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleInsert(scope)">Insert</el-button>
            <el-button
              size="mini"
              @click="handleUpdate(scope)">Update</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope)">Delete</el-button>
          </template>
        </el-table-column>
      
      </el-table>
    </el-main>
</div>
</template>

由于时间原因只发布了部分代码，需要源码的小伙伴可以私信俺欧