一、SpringBoot框架搭建
-
首先先检查自己的软件版本 ：
- 开始新建框架
- 报这个错主要是第二张图片Type选错了，应该选择Maven，切记java版本不要选错了
- 删了上述的还需要删除test
- 未配置数据库，直接运行出错
- 新建一个数据库，需要选择这些
- 然后修改配置文件
- 代码如下
- 端口8080
- 数据库是zd_study 用户名：root 密码：123456
server:
port: 8080
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/zd_study?serverTimezone=GMT%2b8
username: root
password: 123456
只是配置好了数据能正常启动，但是不能进入端口，因为还没有配置启动类，配置如下：
代码如下：
@RestController
@SpringBootApplication
public class SpringbootApplication {
public static void main(String[] args) {
SpringApplication.run(SpringbootApplication.class, args);
}
@GetMapping("/")
public String index(){
return "OK";
}
}
试了下 @GetMapping 不加 ("/") 这个也已运行，目前不知道什么原因，代码：
@RestController
@SpringBootApplication
public class SpringbootApplication {
public static void main(String[] args) {
SpringApplication.run(SpringbootApplication.class, args);
}
@GetMapping
public String index(){
return "OK";
}
}二、在IDEA中使用Git 上传到git远程仓库
- 首先在终端运行git init 命令
- 运行之后即会出现下图的 git 箭头
- 然后就是按照git使用方法上传到远程仓库
- 具体方法可参考如下链接：
- idea 上传本地springboot 项目到github_idea的本地springboot项目 上传到git 和别人一起开发-优快云博客
三、前端框架
-
首先在终端cmd进入一个文件夹里，就是在这个文件夹创建前端项目
- 然后运行第一条命令，创建名字是 vue 的前端项目
-
vue create vue - 进行选择 Manually select features ，回车
- 然后用IDEA打开这个vue，可以先单独打开
- 在IDEA终端运行 npm run serve 命令
- 运行成功之后：
- 输入地址，查看是否成功
- 还有一个在IDEA加serve 启动按钮没整好
- 好像只是前端项目并没有启动按钮，搜一下有：
- idea中启动vue项目_idea 如何启动两个vue项目-优快云博客
- 正好之后运行俩个地址都可以
- http://localhost:8080/
- http://localhost:8081/
- 已经解决，原因是运行了俩次，
- npm run serve 运行端口是8080
- 点击按钮前未关，运行端口为8081
3.1 前端项目和后端项目整合在一起
- 直接拖动前端项目到后端项目里即可
- 此时项目里没有serve启动按钮，需要设置一下，需要注意以下几点
- 也可以参考这个博客：idea中启动vue项目_idea 如何启动两个vue项目-优快云博客
- 可以先运行一下程序，如果正确然后上传到远程仓库
- 首先在后端的application.yml配置文件里修改后端端口为9090，防止俩个端口冲突
- 然后运行前后端都是正常的，即可推送到远程仓库
- 选择修改的内容，进行推送
- 这一步圈画错了，应该是Push
- 这样推送只是上传了 application.yml 配置文件，但是vue并没有上传，需要继续推送，应该是第一次没有配置vue的远程仓库，未选择，vue是Define remote，所以还需要继续配置一下
这样推送也不可以，显示vue: push to origin/master was rejected ，被拒绝了
3.2查了很多，整了一个多小时，没整出来
- 最后把一开始创建的vue项目删除了，又重新在后端项目里创建了vue项目，然后运行没错误，但是git的时候显示
- The directory <Project>\vue is registered as a Git root, but no Git repositories were found there.
- 参考下面的博客，解决了
- 就是把红色的vue项目删了，就可以了
导入Git项目报错：is registered as a Git root, but no Git repositories were found there_Cignus的博客-优快云博客
- 这样推送上去，git显示的vue是个模块，不是文件夹，打不开，然后又在git里删除了vue模块，在IDEA重新拉去了一下，vue的文件变红色，又重新推送一下，结果成功了
- 然后分别修改前后端项目代码，重新上传都可以，至此git 整成功了
四、Vue2集成ElementUI 框架
1、安装ElementUI：npm i element-ui -S
- Element - The world's most popular Vue UI frameworkElementUI官方地址： Element - The world's most popular Vue UI framework
- 在vue路径下运行上述命令
- git 上传到远程仓库，俩个文件发生了变化，安装成功，可以查看版本号
2、引入Element
- 你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
-
完整引入
- 在 main.js 中写入以下内容：
main.js
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
Vue.use(ElementUI, {size: "small"});
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')- 修改了文件的名字
- 在router 的index.js文件里修改以下内容
改造Home.vue 和 APP.vue
五、Vue后台主体、整体布局搭建
Container 布局容器
- 用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。<el-header>：顶栏容器。<el-aside>：侧边栏容器。<el-main>：主要区域容器。<el-footer>：底栏容器。- 以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，
<el-container>的子元素只能是后四者，后四者的父元素也只能是<el-container>。
- 找了 Element的一个实例，进行修改的
- Home.vue主要代码如下：
<template>
<el-container style="min-height: 100vh">
<el-aside :width="sideWidth + 'px'"
style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48, 65, 86)"
text-color="#fff"
active-text-color="#ffd04b"
:collapse-transition="false"
:collapse="isCollapse"
>
<div style="height: 60px; line-height: 60px; text-align: center">
<img src="../assets/logo.png" alt=""
style="width: 20px; position: relative; top: 5px; margin-right: 5px">
<b style="color: white" v-show="logoTextShow">ERP管理系统</b>
</div>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-house"></i>
<span slot="title">主页</span>
</template>
</el-submenu>
<el-submenu>
<template slot="title"><i class="el-icon-menu"></i><span slot="title">系统管理</span></template>
<el-menu-item index="2-1">用户管理</el-menu-item>
<el-menu-item index="2-2">角色管理</el-menu-item>
<el-menu-item index="2-3">菜单管理</el-menu-item>
<el-menu-item index="2-3">文件管理</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i><span slot="title">生产管理</span></template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
<div style="flex: 1; font-size: 20px">
<span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
</div>
<el-dropdown style="width: 70px; cursor: pointer">
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<div style="margin-bottom: 30px">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div style="margin: 10px 0">
<el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
<el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message"
class="ml-5"></el-input>
<el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position"
class="ml-5"></el-input>
<el-button class="ml-5" type="primary">搜索</el-button>
</div>
<div style="margin: 10px 0">
<el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
<el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
<el-button type="primary">导入 <i class="el-icon-bottom"></i></el-button>
<el-button type="primary">导出 <i class="el-icon-top"></i></el-button>
</div>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button type="success">编辑 <i class="el-icon-edit"></i></el-button>
<el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
</template>
</el-table-column>
</el-table>
<div style="padding: 10px 0">
<el-pagination
:page-sizes="[5, 10, 15, 20]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(10).fill(item),
collapseBtnClass: 'el-icon-s-fold',
isCollapse: false,
sideWidth: 200,
logoTextShow: true,
headerBg: 'headerBg'
}
},
methods: {
collapse() { // 点击收缩按钮触发
this.isCollapse = !this.isCollapse
if (this.isCollapse) { // 收缩
this.sideWidth = 64
this.collapseBtnClass = 'el-icon-s-unfold'
this.logoTextShow = false
} else { // 展开
this.sideWidth = 200
this.collapseBtnClass = 'el-icon-s-fold'
this.logoTextShow = true
}
}
}
}
</script>
<style>
.headerBg {
background: #eee!important;
}
</style>
实现了如下图所示的页面：
六、SpringBoot集成Mybatis 实现 增删改查，分页查询
1、实现一个小小的查询全部数据
- 在zd_study数据库中新建sys_user表：
CREATE TABLE `sys_user` (
`id` int NOT NULL AUTO_INCREMENT COMMENT 'id',
`username` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '用户名',
`password` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
`nickname` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '昵称',
`role` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',
`email` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮件',
`phone` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '手机',
`address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地址',
`create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '创建时间',
`avatar_val` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;2.在springboot项目里新建 entiy，controller，mapper 文件夹，分别创建了 User实体类、UserController类和UserMapper接口。
User:
@Data
public class User {
private Integer id; //id
private String username; //名字
private String password;//密码
private String nickname;//昵称
private String role; //角色
private String email; //邮件
private String phone; //手机号
private String address; //地址
private Date createTime; //创建时间
private String avatarVal; //头像
}
UserController:
@RestController
//https://www.cnblogs.com/fishpro/p/spring-boot-study-restcontroller.html
//解释注解的文章
public class UserController {
@Resource
private UserMapper userMapper;
//查询所有的数据
@GetMapping("/")
public List<User> findAll() {
List<User> users = userMapper.findAll();
return users;
}
}
UserMapper:
@Mapper
public interface UserMapper {
@Select("select * from sys_user")
List<User> findAll();
}
- 运行结果如下图，但是创建时间没有查出来：（貌似就是查不出来的，跟着视频学的人家也查不出来）
2、实现增删改查
- Controller 调用 service 接口封装的mapper里的方法，serviceImpl是实现类，mapper的sql查询语句在mapper.xml文件里写。
-
Entity就是实体层，Mapper层与DAO等价，是用于直接操作数据库的层。
Service层就是对DAO层进行封装，相当于做好的工具，让用户直接用就好了。
-
-
xml文件需要进行的配置如下: namespace="com.zd.springboot.mapper.UserMapper" 表示指定的mapper文件
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.zd.springboot.mapper.UserMapper"> </mapper> -
配置yml文件，不配置会出现错误，因为SpringBoor并不知道去哪找xml文件，需要配置路径，如下代码
mybatis: mapper-locations: classpath:mapper/*.xml #扫描所有mybatis的xml文件
-
以下是几个文件的代码：
//UserController：
@RestController
@RequestMapping("/user")
public class UserController {
@Resource
private UserMapper userMapper;
@Resource
private IUserService userService;
/**
* 查询所有的数据
* @return
*/
@GetMapping
public List<User> findAll() {
List<User> users = userMapper.findAll();
return users;
}
/**
* 更新或者增加
* @param user
* @return
*/
@PostMapping
public Integer save(@RequestBody User user){
int save = userService.save(user);
return save;
}
@DeleteMapping("/{id}")
public Integer delete(@PathVariable Integer id){
// @PathVariable 必须要有这个注解，使得"/{id}"与Integer id保持一致
int save = userService.deleteById(id);
return save;
}
}
//IUserService ：：：：
public interface IUserService {
int save(User user);
int deleteById(Integer id);
}
//IUserServiceImpl ：
@Service
public class IUserServiceImpl implements IUserService {
@Resource
private UserMapper userMapper;
@Override
public int save(User user) {
if (user.getId() == null) {
return userMapper.insert(user);
}else {
return userMapper.update(user);
}
}
@Override
public int deleteById(Integer id) {
return userMapper.deleteById(id);
}
}
//UserMapper
@Mapper
public interface UserMapper {
@Select("select * from sys_user")
List<User> findAll();
int insert(User user);
int update(User user);
int deleteById(Integer id);
}
//UserMapper .xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zd.springboot.mapper.UserMapper">
<update id="update">
update sys_user
<set>
<if test="username != null">
username = #{username},
</if>
<!-- <if test="password != null">-->
<!-- password = #{password}-->
<!-- </if>-->
<if test="nickname != null">
nickname = #{nickname},
</if>
<if test="email != null">
email = #{email},
</if>
<if test="phone != null">
phone = #{phone},
</if>
<if test="address != null">
address = #{address}
</if>
</set>
<where>
id = #{id}
</where>
</update>
<insert id="insert" parameterType="com.zd.springboot.entity.User">
INSERT INTO sys_user(
username, password,nickname,email,phone,address
)VALUES (#{username}, #{password},#{nickname}, #{email},#{phone}, #{address})
</insert>
<delete id="deleteById">
delete from sys_user where id = #{id}
</delete>
</mapper>3、分页查询
- 两个不同的端口进行数据交互需要设置跨域请求，前端后端的端口分别为8080和9090，所以首先要设置跨域请求
- 分页思路：
SELECT * from sys_user limit 0,2; --第一页 -- (2 -1) * 2 = 2 SELECT * from sys_user limit 2,2; --第二页 -- （3-1）* 2 = 4 SELECT * from sys_user limit 4,2; --第三页 -- 结论： limit第一个参数 = (pageNum - 1) * pageSize - 各个代码：UserController： /** * 分页查询 * 接口路径：/user/page?pageNum=1&pageSize=10 * @RequestParam接受 * @param pageNum * @param pageSize * @param username * @return */ @GetMapping("/page") public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize, @RequestParam String username) { pageNum = (pageNum - 1) * pageSize; username = "%" + username + "%"; List<User> data = userService.selectPage(pageNum, pageSize,username); Integer total = userService.selectTotal(username); Map<String, Object> res = new HashMap<>(); res.put("data", data); res.put("total", total); return res; } CorsConfig ： @Configuration public class CorsConfig { // 当前跨域请求最大有效时长。这里默认1天 private static final long MAX_AGE = 24 * 60 * 60; @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址 corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头 corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法 corsConfiguration.setMaxAge(MAX_AGE); source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置 return new CorsFilter(source); } } IUserService: //分页查询 List<User> selectPage(Integer pageNum, Integer pageSize, String username); //通过名字模糊查询个数 Integer selectTotal(String username); IUserServiceImpl: @Override public List<User> selectPage(Integer pageNum, Integer pageSize, String username) { return userMapper.selectPage(pageNum, pageSize, username); } @Override public Integer selectTotal(String username) { return userMapper.selectTotal(username); } Usermapper： List<User> selectPage(Integer pageNum, Integer pageSize, String username); Integer selectTotal(String username); Usermapper.xml <select id="selectPage" resultType="com.zd.springboot.entity.User"> select * from sys_user where username like #{username} limit #{pageNum}, # {pageSize} </select> <select id="selectTotal" resultType="integer"> select count(*) from sys_user where username like concat('%', #{username}, '%') </select> Home.vue <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></el-input> <el-button class="ml-5" type="primary" @click="load">搜索</el-button> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> data() { return { tableData: [], total: 0, pageNum: 1, pageSize: 2, username:"", collapseBtnClass: 'el-icon-s-fold', isCollapse: false, sideWidth: 200, logoTextShow: true, headerBg: 'headerBg' } }, created() { //请求分页数据 this.load() }, load() { fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize=" + this.pageSize + "&username=" + this.username) .then(res => res.json()).then(res => { this.tableData = res.data this.total = res.total }) }, handleSizeChange(pageSize) { this.pageSize = pageSize this.load() }, handleCurrentChange(pageNum) { this.pageNum = pageNum this.load() }
七、SpringBoot集成Mybatis-Plus 和 SwaggerUI
- 添加 Mybatis-Plus的依赖，配置MybatisPlusConfig.java ，还需要在
application.yml文件里添加配置
添加依赖： <!-- mybatis-plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.1</version> </dependency> 配置MybatisPlusConfig.java ： @Configuration @MapperScan("com.zd.springboot.mapper") public class MybatisPlusConfig { // 最新版 @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } } 配置 application.yml: mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl -
添加SwaggerUI 的依赖，并进行配置SwaggerConfig.java
添加依赖： <!--swag--> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.9.2</version> </dependency> 配置SwaggerConfig.java ： @EnableSwagger2 @Configuration public class SwaggerConfig { /** * 创建API应用 * apiInfo() 增加API相关信息 * 通过select()函数返回一个ApiSelectorBuilder实例,用来控制哪些接口暴露给Swagger来展现， * 本例采用指定扫描的包路径来定义指定要建立API的目录。 * * @return */ @Bean public Docket restApi() { return new Docket(DocumentationType.SWAGGER_2) .groupName("标准接口") .apiInfo(apiInfo("Spring Boot中使用Swagger2构建RESTful APIs", "1.0")) .useDefaultResponseMessages(true) .forCodeGeneration(false) .select() .apis(RequestHandlerSelectors.basePackage("com.zd.springboot.controller")) .paths(PathSelectors.any()) .build(); } /** * 创建该API的基本信息（这些基本信息会展现在文档页面中） * 访问地址：http://ip:port/swagger-ui.html * * @return */ private ApiInfo apiInfo(String title, String version) { return new ApiInfoBuilder() .title(title) .description("更多请关注: https://blog.youkuaiyun.com/xqnode") .termsOfServiceUrl("https://blog.youkuaiyun.com/xqnode") .contact(new Contact("xqnode", "https://blog.youkuaiyun.com/xqnode", "xiaqingweb@163.com")) .version(version) .build(); } } -
修改以前没使用Mybatis-Plus的增删改查语句和分页查询，使用Mybatis-Plus，需把相同方法相同名字的原方法注释一下，mapper，service，.xml都需要注释一下，运行成功在Postman能够查看到数据并显示，但是在前端并没显示数据，（可能是还未进行修改前端代码）
-
mapper接口需继承 extends BaseMapper<User>，@Mapper 已经在MybatisPlusConfig.java进行配置，注解：@MapperScan("com.zd.springboot.mapper")，所以这里无需@Mapper
//@Mapper public interface UserMapper extends BaseMapper<User> { } -
IUserService接口需继承 extends IService<User>
public interface IUserService extends IService<User> { } -
IUserServiceImpl 实现类IUserServiceImpl extends ServiceImpl<UserMapper,User>
@Service public class IUserServiceImpl extends ServiceImpl<UserMapper,User> implements IUserService { } -
控制层UserController进行修改了一些修改以前没使用Mybatis-Plus的增删改查语句和分页查询，使用Mybatis-Plus进行查询，实现了用Mybatis-Plus的增删改查和分页查询，但是用PostMan进行分页查询是可以查看到数据的，在前端显示有数据，但是看不到
@RestController @RequestMapping("/user") public class UserController { @Resource private IUserService userService; /** * 查询所有的数据 * * @return */ @GetMapping public List<User> findAll() { return userService.list(); } /** * 更新或者增加 * * @param user * @return */ @PostMapping public Boolean save(@RequestBody User user) { return userService.saveOrUpdate(user); } /** * 通过id删除 * * @param id * @return */ @DeleteMapping("/{id}") public boolean delete(@PathVariable Integer id) { // @PathVariable 必须要有这个注解，使得"/{id}"与Integer id保持一致 return userService.removeById(id); } /** * Mybatis-Plus的分页查询 * 接口路径：/user/page?pageNum=1&pageSize=10 * @RequestParam接受 * @param pageNum * @param pageSize * @param username * @return */ @GetMapping("/page") public IPage<User> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize, @RequestParam(defaultValue = "") String username, @RequestParam(defaultValue = "") String nickname, @RequestParam(defaultValue = "") String address) { IPage<User> page = new Page<>(pageNum, pageSize); QueryWrapper<User> queryWrapper = new QueryWrapper<>(); if (!"".equals(username)) { queryWrapper.like("username", username); } if (!"".equals(nickname)) { queryWrapper.like("nickname", nickname); } if (!"".equals(address)) { queryWrapper.like("address", address); } return userService.page(page,queryWrapper); } }
八、Vue实现增删改查
1、增删改查
- 前端请求后台的工具axios，vue安装axios：npm i axios -S
- request.js封装 axios，
import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:9090', //以后就不用在方法里写这个请求头了，直接/user这样就可以 timeout: 5000 }) // request 拦截器 // 可以自请求发送前对请求做一些处理 // 比如统一加token，对请求参数统一加密 request.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=utf-8'; // config.headers['token'] = user.token; // 设置请求头 return config }, error => { return Promise.reject(error) }); // response 拦截器 // 可以在接口响应后统一处理结果 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('err' + error) // for debug return Promise.reject(error) } ) export default request - 实现各个功能代码
UserController： //批量删除 @PostMapping("/del/batch") public boolean deleteBath(@RequestBody List<Integer> ids) { return userService.removeByIds(ids); } Home.vue save() { request.post("/user", this.form).then(res => { if (res) { this.$message.success("保存成功") this.dialogFormVisible = false this.load() } else { this.$message.error("保存失败") } }) }, handleAdd() { this.dialogFormVisible = true this.form = {} }, handleEdit(row) { this.form = row //把列表的数据赋予row，row是表单scop this.dialogFormVisible = true }, del(id) { request.delete("/user/" + id).then(res => { if (res) { this.$message.success("删除成功") this.load() } else { this.$message.error("删除失败") } }) }, delBatch() { let ids = this.multipleSelection.map(v => v.id) // [{}, {}, {}] => [1,2,3] request.post("/user/del/batch", ids).then(res => { if (res) { this.$message.success("批量删除成功") this.load() } else { this.$message.error("批量删除失败") } }) }, reset() { this.username = "" this.email = "" this.address = "" this.load() }, handleSelectionChange(val) { //批量删除时选择那些存到val里 console.log(val) this.multipleSelection = val },
2、SpringBoot代码生成器
- 导入Mybatis-Plus生成器的依赖
<!-- 代码生成器 --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-generator</artifactId> <version>3.5.1</version> </dependency> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity</artifactId> <version>1.7</version> </dependency> - 配置 CodeGenerator
3、编写生成配置/** * mp代码生成器 * by 青哥哥 * @since 2022-01-26 */ public class CodeGenerator { public static void main(String[] args) { generate(); } private static void generate() { FastAutoGenerator.create("jdbc:mysql://localhost:3306/zd_study?serverTimezone=GMT%2b8", "root", "123456") .globalConfig(builder -> { builder.author("郑迪") // 设置作者 .enableSwagger() // 开启 swagger 模式 .fileOverride() // 覆盖已生成文件 .outputDir("D:\\IDEAcode\\郑迪学习框架\\springboot\\src\\main\\java\\"); // 指定输出目录 }) .packageConfig(builder -> { builder.parent("com.zd.springboot") // 设置父包名 .moduleName(null) // 设置父包模块名 .pathInfo(Collections.singletonMap(OutputFile.mapperXml, "D:\\IDEAcode\\郑迪学习框架\\springboot\\src\\main\\resources\\mapper\\")); // 设置mapperXml生成路径 }) .strategyConfig(builder -> { builder.entityBuilder().enableLombok(); // builder.mapperBuilder().enableMapperAnnotation().build(); builder.controllerBuilder().enableHyphenStyle() // 开启驼峰转连字符 .enableRestStyle(); // 开启生成@RestController 控制器 builder.addInclude("sys_user") // 设置需要生成的表名 .addTablePrefix("t_", "sys_"); // 设置过滤表前缀 }) // .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板 .execute(); } }package ${package.Controller}; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; import java.util.List; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import ${package.Service}.${table.serviceName}; import ${package.Entity}.${entity}; #if(${restControllerStyle}) import org.springframework.web.bind.annotation.RestController; #else import org.springframework.stereotype.Controller; #end #if(${superControllerClassPackage}) import ${superControllerClassPackage}; #end /** * <p> * $!{table.comment} 前端控制器 * </p> * * @author ${author} * @since ${date} */ #if(${restControllerStyle}) @RestController #else @Controller #end @RequestMapping("#if(${package.ModuleName})/${package.ModuleName}#end/#if(${controllerMappingHyphenStyle})${controllerMappingHyphen}#else${table.entityPath}#end") #if(${kotlin}) class ${table.controllerName}#if(${superControllerClass}) : ${superControllerClass}()#end #else #if(${superControllerClass}) public class ${table.controllerName} extends ${superControllerClass} { #else public class ${table.controllerName} { #end @Resource private ${table.serviceName} ${table.entityPath}Service; // 新增或者更新 @PostMapping public Result save(@RequestBody ${entity} ${table.entityPath}) { ${table.entityPath}Service.saveOrUpdate(${table.entityPath}); return Result.success(); } @DeleteMapping("/{id}") public Result delete(@PathVariable Integer id) { ${table.entityPath}Service.removeById(id); return Result.success(); } @PostMapping("/del/batch") public Result deleteBatch(@RequestBody List<Integer> ids) { ${table.entityPath}Service.removeByIds(ids); return Result.success(); } @GetMapping public Result findAll() { return Result.success(${table.entityPath}Service.list()); } @GetMapping("/{id}") public Result findOne(@PathVariable Integer id) { return Result.success(${table.entityPath}Service.getById(id)); } @GetMapping("/page") public Result findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize) { QueryWrapper<${entity}> queryWrapper = new QueryWrapper<>(); queryWrapper.orderByDesc("id"); return Result.success(${table.entityPath}Service.page(new Page<>(pageNum, pageSize), queryWrapper)); } } #end
九、Vue使用路由
怎么整目前都整不对，具体显示如下图：
十、SpringBoot和Vue实现导入导出
扫一扫
1969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
