Vue Cli3+SpringBoot踩坑历程（2）

今天用vue + router + vuex 做了路由登陆拦截。参考文章vue拦截器
上代码 首先得有vuex 进行配置：
使用vuex仓库。一个简单的值和一个方法。

接下来是main.js：
设置访问该路由前的生命钩子 进行判断。
接下来修改登陆的组件：

最后是路由添加一个属性
今天踩的坑就是如此。我设置的路由拦截器 必须登陆 不会缓存。如果有想了解更多，向这一位大佬学习！
紧接着做了上传文章进入后端数据库，只是简单版的，能实现添加
后端中使用jpa实现了增删查改。基础的。

首先是BookController：

package com.example.demo.controller;


import com.example.demo.pojo.Book;
import com.example.demo.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
//此层主要进行对页面的处理，包括跳转或者传参等等。
@RestController
public class BookController {
    @Autowired
    BookService bookService;
//按标题查找文章
//    跨域注解
    @CrossOrigin
    @GetMapping("/FindTitle")
    public List<Book> list() throws Exception {
        return bookService.list();
    }
//获取数据库所有信息
    @CrossOrigin
    @GetMapping("/FindAll")
    public List<Book> list_1() throws Exception{
        return  bookService.getAll();
    }

//    从前端获取数据添加到数据库
    @CrossOrigin
    @PostMapping("/AddOrUpdate")
    public Book addOrUpdate(@RequestBody Book book) throws Exception{
        bookService.addOrUpdate(book);
        return book;
    }
//    从前端获取数据删除数据库对应id的数据
    @CrossOrigin
    @PostMapping("/DeleteById")
    public void deleteTable(@RequestBody Book book) throws Exception{
        bookService.deleteTable(book.getId());
    }

}

接下来是BookDao:

package com.example.demo.dao;

import com.example.demo.pojo.Book;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;
//此层为对数据的基本处理层，用来编写直接对数据库进行操作的代码。
public interface BookDao extends JpaRepository<Book,Integer> {
    List<Book> findByTextTitle(String name);
}

接下来是BookServer:

package com.example.demo.service;

import com.example.demo.dao.BookDao;
import com.example.demo.pojo.Book;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

//service层主要用于处理逻辑，是业务逻辑层。
@Service
public class BookService {
    @Autowired
    BookDao bookDao;
//    按标题查找表
    public List<Book> list(){
        return bookDao.findByTextTitle("hello");
//        return  bookDao.findById(1);
    }
//    获取数据库所有信息
    public List<Book> getAll(){
        return bookDao.findAll();
    }
//从前端获取数据加入数据库
    public Book addOrUpdate(Book book){
        return bookDao.save(book);
    }
//    从前端获取id删除信息
    public void deleteTable(int id){
        bookDao.deleteById(id);
    }
}

基本上就完成了。