一、springboot项目搭建
前言-使用技术
- springboot
- mybatis-plus
- mysql
- druid
- lombok
1.2 创建springboot项目
(1) 选择新增:File->New->Project

(2) 选择Spring Initializr,指定JDK版本,直接下一步

(3) 填写项目相关信息,然后下一步

(4) 选择组件,勾选中间Spring Web,然后下一步

(5) 项目结构

1.2 集成mybatis-plus
(1)在pom.xml中引入SpringDataJPA相关依赖
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.9</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.1.2</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.18</version>
<scope>provided</scope>
</dependency>
(2) 配置数据源
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/vue_demo?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&serverTimezone=GMT%2B8
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
type: com.alibaba.druid.pool.DruidDataSource
initialSize: 5
minIdle: 5
maxActive: 20
maxWait: 60000
timeBetweenEvictionRunsMillis: 60000
minEvictableIdleTimeMillis: 300000
validationQuery: SELECT 1 FROM DUAL
testWhileIdle: true
testOnBorrow: false
testOnReturn: false
poolPreparedStatements: true
maxPoolPreparedStatementPerConnectionSize: 20
filters: stat,wall,log4j
connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
server:
port: 8888
servlet:
context-path: /vue-demo
(3) 增加mybatis-plus配置MybatisPlusConfig.java
package com.oyc.springbootvuedemo.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@Configuration
@EnableTransactionManagement
@MapperScan("com.oyc.springbootvuedemo.mapper")
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
return paginationInterceptor;
}
}
(4) 创建用户表并填入数据用于测试
create table user(
id bigint unsigned primary key comment '自增id',
user_name varchar(50) not null default '' comment '用户名称',
user_nickname varchar(200) not null default '' comment '用户昵称',
password varchar(200) not null default '' comment '密码',
sex tinyint not null default -1 comment '用户性别:-1-未知,0-男,1-女',
age tinyint not null default 0 comment '年龄',
create_by varchar(50) not null default '' comment '创建人',
create_time timestamp not null default current_timestamp comment '创建时间',
update_by varchar(50) not null default '' comment '更新人',
update_time timestamp not null default current_timestamp on update current_timestamp comment '更新时间',
delete_flag tinyint not null default 0 comment '删除状态:0-正常,1-已删除'
);
insert into user (user_name,user_nickname,password,sex,age)
values ('zhangsan','张三','123456',0,18),
('lisi','李四','123456',0,19),
('wangwu','王五','123456',0,19),
('zhaoliu','赵六','123456',0,22),
('linchong','林冲','123456',0,28),
('sunerniang','孙二娘','123456',0,18);
(5) 生成user相关的entity、controller、service、mapper代码
这里选择使用easyCode生成相关代码,也可以使用mabatis genarater等方式  选择要生成的package和勾选要生成的文件  生成代码结构 
1.3 设置跨域
(1) 配置类
package com.oyc.springbootvuedemo.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowCredentials(true)
.allowedMethods("*")
.allowedHeaders("*")
.maxAge(3600);
}
}
(2) 配置注解
在相关controller上加@CrossOrigin注解
(3) 前端设置proxy
1.4 启动测试接口
启动调试,启动成功界面如下图所示:  浏览器访问,返回结果,如下图所示: 
二、前端项目搭建
前言-使用技术
2.1 vue 2.2 element-ui 2.3 axios 2.4 router
2.1 创建vue项目
2.2 集成element-ui
2.3 集成axios
|