SpringBoot+Vue分页实现，前后端分离

您所在的位置：网站首页 › springboot加vue前后端分离项目 › SpringBoot+Vue分页实现，前后端分离

SpringBoot+Vue分页实现，前后端分离

2023-11-12 06:23| 来源: 网络整理| 查看: 265

打开IDEA，创建一个maven项目，作为一个父项目，本人很懒，懒得切换工具（只用IDEA，不用切换vs code），也为以后分模块，以及最终的微服务架构做基础

注：不选WebApp，因为不需要，前后端分离

在这里插入图片描述

删除父项目的src，以及为父项目的pop.xml添加SpringBoot父项目

在这里插入图片描述

4.0.0 org.example Separate 1.0-SNAPSHOT org.springframework.boot spring-boot-starter-parent 2.5.3 8 8

添加后端模块，同步骤1的图，直接next

在这里插入图片描述

如图创建包，类，接口，以及添加依赖

在这里插入图片描述

Separate org.example 1.0-SNAPSHOT 4.0.0 DataGet org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-devtools true org.mybatis.spring.boot mybatis-spring-boot-starter 2.2.0 com.alibaba druid-spring-boot-starter 1.2.6 mysql mysql-connector-java 8.0.23 com.github.pagehelper pagehelper-spring-boot-starter 1.3.1 org.projectlombok lombok 8 8

数据库搭建，添加测试数据

drop database if exists bvtest; create database bvtest; use bvtest; drop table if exists users; create table users( userId int primary key auto_increment, userName varchar(50) comment '用户姓名', userSex bit default 0 comment '0:男，1:女', userBirthday date comment '生日', gmtCreate datetime comment '记录创建时间' )engine = InnoDB default charset = utf8; #测试数据 insert into users values (default,'张三1',0,'2000-1-1','2021-8-15 17:00:01'); insert into users values (default,'张三2',1,'2000-1-2','2021-8-15 17:00:02'); insert into users values (default,'张三3',0,'2000-1-3','2021-8-15 17:00:03'); insert into users values (default,'张三4',1,'2000-1-4','2021-8-15 17:00:04'); insert into users values (default,'张三5',0,'2000-1-5','2021-8-15 17:00:05'); insert into users values (default,'张三6',1,'2000-1-6','2021-8-15 17:00:06'); insert into users values (default,'张三7',0,'2000-1-7','2021-8-15 17:00:07'); insert into users values (default,'张三8',1,'2000-1-8','2021-8-15 17:00:08'); insert into users values (default,'张三9',0,'2000-1-9','2021-8-15 17:00:09'); insert into users values (default,'张三10',1,'2000-1-10','2021-8-15 17:00:10'); insert into users values (default,'张三11',0,'2000-1-11','2021-8-15 17:00:11'); insert into users values (default,'张三12',1,'2000-1-12','2021-8-15 17:00:12'); insert into users values (default,'张三13',0,'2000-1-13','2021-8-15 17:00:13'); insert into users values (default,'张三14',1,'2000-1-14','2021-8-15 17:00:14'); insert into users values (default,'张三15',0,'2000-1-15','2021-8-15 17:00:15');

搭建Vue前端模块，回车为确认

在这里插入图片描述

#脚手架创建项目 vue create vue-show

在这里插入图片描述注：按空格键选择，a键全部选择，i键反转选择。

在这里插入图片描述稍等，正在安装

Vue前端测试是否成功

cd vue-show npm run serve

在这里插入图片描述

前端构建

在这里插入图片描述

创建组件，导入所需包，在main.js进行配置

首先将views文件夹下的默认组件都删除，添加UsersList.vue组件

打开终端：依次输入以下命令，导包

#安装Element UI npm i element-ui -S #安装axios npm install axios

main.js配置

import Vue from "vue"; import App from "./App.vue"; import router from "./router"; //导入axios import axios from "axios"; //导入element-ui import ElementUi from "element-ui" import 'element-ui/lib/theme-chalk/index.css' //将axios配成vue原型属性 Vue.prototype.$axios = axios.create({//创建axios实例对象 baseURL:'http://localhost/', //配置axios每次发送的基础路径 headers:{'X-Requested-With':'XMLHttpRequest'},//配置请求头，告诉服务端当前是axios请求 withCredentials: true,//在跨域请求中允许使用凭证(允许cookie存储session) }); //核心配置文件 Vue.config.productionTip = false; //Vue使用ElmentUi Vue.use(ElementUi) new Vue({ router, render: (h) => h(App), }).$mount("#app");

环境搭建完毕

【本文地址】

SpringBoot+Vue分页实现，前后端分离

SpringBoot+Vue分页实现，前后端分离

今日新闻

推荐新闻