基于springboot+vue+element UI+mybatis-plus的简单分页

基于springboot+vue+element UI+mybatis-plus的简单分页

@author chajintao

1.前端（vue+element)

1.1 工具（HBuilderX，node.js）

1.1.1 下载和安装

下载HBuilderX，官网地址为https://www.dcloud.io/hbuilderx.html
下载node.js，官网为http://nodejs.cn/
安装HBuilderX和node.js，傻瓜式安装，一路确认即可。

1.1.2 验证

首先WIN+R，输入CMD，打开命令行
输入node -v，成功则显示版本号
输入npm -v，同上

1.2 创建前端工程

1.2.1 项目创建

1.2.2 项目架构

项目创建完成，接下来就开始配置。

1.3 具体配置

1.3.1 插件

首先我们确认需要什么插件，axois，router，vuex，element-ui
接下来右键，点击使用命令行窗口打开所在目录，使用npm安装
安装成功后，结构如下：

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "core-js": "^2.6.5",
    "element-ui": "^2.15.8",
    "vue": "^2.6.10",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}

1.3.2 vue.config.js

这边是连接spring boot 后台地址配置，直接网上拿来用

module.exports={
	devServer:{
		proxy:{
			"":{
				target:"http://localhost:8080",//访问的域名地址
				changeOrigin:true,
				//开启代理，在本地会创建一个虚拟服务端，然后发送请求的数据，
				//并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
			pathRewrite:{
				'^':''
				//用''代替target里的地址
			}
			}
		}
	}
}

1.3.3 main.js

安装了插件，就要声明使用

import Vue from 'vue'
import App from './App.vue'

//导入路由
import router from './router/router.js'


//导入element ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

//导入axios并实例化
import axios from 'axios'
Vue.prototype.$axios = axios

//引入全局数据控制


//声明使用ui
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
	el:'#app',
	//配置路由
	router:router,
	render: h => h(App),
	components:{App},
	template:'<App/>'
}).$mount('#app')

1.3.4 创建news.vue

该分页vue的实现是十分简单的，在中写前端格式，直接一个表格加分页，在

<div style="padding: 10px">
	    <el-table
	        v-loading="loading"
	        :data="tableData"
	        border
	        stripe
	        style="width: 100%">
	      <el-table-column
	          prop="id"
	          label="ID"
	          sortable
	      >
	      </el-table-column>
	      <el-table-column
	          prop="title"
	          label="标题">
	      </el-table-column>
	      <el-table-column
	          prop="author"
	          label="作者">
	      </el-table-column>
	      <el-table-column
	          prop="time"
	          label="时间">
	      </el-table-column>
	      <el-table-column label="操作">
	        <template #default="scope">
	          <el-button icon="el-icon-message" size="mini" @click="details(scope.row)" title="详情"></el-button>
	          <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)" title="编辑"></el-button>
			  
	          <el-button size="mini" icon="el-icon-delete" type="danger"></el-button>   
	        </template>
	      </el-table-column>
	    </el-table>
	
	    <div style="margin: 10px 0">
	      <el-pagination
	          @size-change="handleSizeChange"
	          @current-change="handleCurrentChange"
	          :current-page="this.currentPage"
	          :page-sizes="[10, 20, 50, 100]"
	          :page-size="this.pageSize"
	          layout="total, sizes, prev, pager, next, jumper"
	          :total="total">
	      </el-pagination>
	    </div>
	  </div>

script如下：一个是load方法，是刷新获取数据，handleSizeChange是改变页数大小，handleCurrentChange是切换当前页

export default {
   
		name:"news",
		data(){
   
			return{
   
				loading:true,
				form:{
   },
				dialogVisible:false,
				currentPage:1,
				pageSize:10,
				total:0,
				tableData:[],
				vis:false,
				detail:{
   },
			}
		},
		created() {
   
			this.load()
		},
		methods:{
   
			//获取某行数据
			load(){
   
				this.loading = true
				this.$axios({
   
					url:'/vue/news',
					method:'get',
					params:{
   
						currentPage:this.currentPage,
						pageSize:this.pageSize,
					}
				})
				.then(res =>{
   
					console.log(res)
					this.loading = false
					this.$data.tableData = res.data.data.records
					this.total = res.data.data.total
				})
			},