Springboot+VUE實作增删改查Demo

①Vue的路由問題

建立在views包下面的vue元件都需要在index.js中進行配置，否則無法使用；文法：直接引入即可，注意引完之後可以按ctrl點進去直接檢視。

import UserManage from '../views/UserManage.vue'
import AddUser from '../views/AddUser.vue'
import UserUpdate from '../views/UserUpdate.vue'
           

下面所定義的數組中包含了具體的路由資訊，在位址欄輸入的路徑，名字群組件等資訊；

{
        path: '/',
        name: '使用者管理',
        redirect: '/UserManage',
        component: Index,
        show:true,
        children: [
            {
                path: '/UserManage',
                name: '查詢使用者',
                component: UserManage
            },
            {
                path: '/AddUser',
                name: '添加使用者',
                component: AddUser
            }
        ]
    }
           

實作效果：（樣式是采用了element-ui）需要什麼樣式直接從官網複制然後再修改就行了。

②背景拿資料在前台進行展示；

vue裡面的插件axios對AJAX進行了封裝，是以可以直接通過它拿資料；另外想要已進入頁面就展示資料，需要将其放在created方法中

axios.get("http://localhost:8181/user/findByPage/1/6").then(function (resp) {    

    });
           

這是分頁查詢，加載頁面時直接加載第一頁的6條資料；因為是前後端分離的，是以要将Spingboot項目和vue項目的接口分隔開，是以拿資料會出現不同接口調用的問題，也就是跨域；

我是直接在後端寫一個CrosConfig配置類，然後進行跨域。實作一個WebMvcConfigurer接口，然後重寫裡面的方法即可。

後端與資料庫互動才用的是JPA，十分友善裡面有許多已經寫好的方法，是以在控制器可以直接調用即可；養成好習慣也可以寫相應的測試用例，造一點假資料然後進資料庫看是否有效果；

//查詢所有
@GetMapping("/findAll")
    public List<User> findAll(){
        return userRepository.findAll();
    }
           

//按頁查詢
    @GetMapping("/findByPage/{page}/{size}")
    public Page<User> findByPage(@PathVariable("page")Integer page,@PathVariable("size") Integer size){
        Pageable pageable=PageRequest.of(page-1,size);
        return userRepository.findAll(pageable);
    }
           

③其他問題

插入資料時，ID是自增的别忘加加相應注解，否則會報錯；

@GeneratedValue(strategy = GenerationType.IDENTITY)

控制器中使用了什麼注解，axios中調用的方法就是啥；

JPA中的方法findById傳回的是一個optional對象是以多了一步get方法。修改的本質其實也是save方法，是以可以互相對照下具體是要幹嘛；報404的時候記得檢查路徑是否正确，在浏覽器調試的時候如果确定了是後端的問題，就需要仔細校對後端控制器當中的路徑是否準确無誤，少一個/是最常見的，另外傳參之前需要先确定是否拿到參，寫一步測一步，比較容易發現問題代碼。