学习springboot+vue笔记五--页面增删改查以及可能遇见的坑

项目架构接上一篇文章

Vue+springboot+mybatis-pus增改删

解决上一篇遗留问题-分页查询的错误

上一篇笔记记录了springboot集成mybatis-plus，但是在分页查询的时候有点问题，所以需要在config中新建MybatisPlusConfig类，代码如下：

package com.zhuoaninfo.vueDemo.config;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor interceptor=new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
        return interceptor;
    }
}

分页查询可以正常使用。

在vue项目中安装axios，并封装request.js

我使用的还是vscode编辑器，使用ctrl+~键，打开终端窗口，输入npm install axios -s
安装成功后，在src文件下新建util文件夹，该文件名可以自定义起，为了见文知意，起名为util。在util下新建request.js,结构如下：

request.js的代码为：

import axios from "axios"; 
const request=axios.create({
    baseURL:'http://localhost:8181',
    timeout:5000
})
// request拦截器
// 可以自请求发送前对请求做一些处理
request.interceptors.request.use(config=>{
    config.headers['Content-Type']='application/json;charset=utf-8';
    return config
},error=>{
    return Promise.reject(error)
}
);
request.interceptors.response.use(
    response=>{
        let res=response.data;
        if(response.config.responseType=='blob'){
            return res
        }
        if(typeof res ==='string'){
            res=res?JSON.parse(res):res
        }
        return res;
    },error=>{
        console.log(error);
        return Promise.reject(error);
    }
)
export default request

然后在前端总入口main.js调用request.js.代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import request from './util/request';
import './assets/gloable.css'
Vue.config.productionTip = false

Vue.use(ElementUI,{size:"mini"})
Vue.prototype.Req=request;
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在vue前端项目中实现分页查询

然后优化前端代码，使用request,把table中的数据进行绑定 :data=“tableData”

<el-table :data="tableData"  :header-cell-class-name="rowbgclass" >
          <el-table-column prop="id" label="ID" width="140"></el-table-column>
        <el-table-column prop="name" label="姓名" width="140">
        </el-table-column>
        <el-table-column prop="realName" label="真实姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-button type="success" @click="handleEditUser(scope.row)"><i class="el-icon-edit mr" ></i> 编辑</el-button>
            <el-button class="ml" type="danger" ><i class="el-icon-delete mr"></i>删除</el-button></el-popconfirm>
           </template>
        </el-table-column>
      </el-table>

然后在data中增加tableData
查询代码为:

  data() {
      
      return {
        tableData: [],
      }
    },

然后在el-pagination绑定数据，代码如下：

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
       :total="totalSize">
    </el-pagination>

在data中增加数据项：

data() {
      
      return {
        tableData: [],
        totalSize:0,
        pageNum:1,
        pageSize:2
      }
    },

新建load()方法：

    load(){
        // fetch("http://localhost:8181/vueDemo/getPages?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&name="+this.username+"&real_name="+this.r