今天用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);
}
}
基本上就完成了。