Spring Boot+Vue前后端分离开发（图书的CRUD）

主要是动态路由导航栏的设计，所以整理出来了

spring+vue+elemenetui +动态路由+前后端分离添加数据

主页

添加图书

点击确定后跳转

点击修改，回显数据，带id过去

修改完成

删除，然后重新加载数据

   window.location.reload()

后端单独写数据，用json跟前端交互数据,遵守Api Restful风格

package com.jun.springboottest.controller;

import com.jun.springboottest.entity.Book;
import com.jun.springboottest.repository.BookRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.web.bind.annotation.*;

import java.util.Optional;

@RestController
@RequestMapping("/book")
public class BookController {
    @Autowired
    BookRepository bookRepository;

//    @GetMapping("findAll")
//    public List<Book> findAll(){
//        return  bookRepository.findAll();
//    }
@GetMapping("findAll/{page}/{size}")
public Page<Book> findAll(@PathVariable("page")Integer page,@PathVariable("size") Integer size){
    Pageable pageable = PageRequest.of(page-1,size);
    return  bookRepository.findAll(pageable);
}

@PostMapping("/save")
public String save(@RequestBody Book book){
    Book result =bookRepository.save(book);

    if(result!=null){
        return "success";
    }else{
        return "error";
    }

}

@GetMapping("findById/{id}")
    public Book findById(@PathVariable("id") Integer id){

    return bookRepository.findById(id).get();

}

@DeleteMapping("deleteById/{id}")
  public void deleteById(@PathVariable("id") Integer id)  {
      bookRepository.deleteById(id);
}
}

结构，数据单表的查询

还遇到一个跨域问题，写一个config

package com.jun.springboottest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

动态路由

import Vue from 'vue'
import VueRouter from 'vue-router'

import BookManage from '../views/BookManage.vue'
import AddBook from '../views/AddBook.vue'

import Index from '../views/index.vue'
import BookUpdate from '../views/BookUpdate.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: '图书管理',
    component: Index,
    redirect: "BookManage",
    show:true,
    children: [
      {
        path: '/BookManage',
        name: '查询图书',
        component: BookManage
      },
      {
        path: '/AddBook',
        name: '添加图书',
        component: AddBook
      },
    ]
  },
  {
    path: '/update',
    name:'修改图书',
    show:false,
    component:BookUpdate
  }

   
  
  

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu  router :default-openeds="['0', '1']">
          <el-submenu
            v-for="(item, index) in $router.options.routes"
            :index="index + ''"
            v-if="item.show"
          >
            <template slot="title"
              ><i class="el-icon-message"></i>{{ item.name }}</template
            >
            <el-menu-item
              v-for="(item2, index2) in item.children"
              :index="item2.path"
              :class="$route.path == item2.path ? 'is-acitve' : ''"
              >{{ item2.name }}</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>