若依框架springboot分离版开发笔记

最新推荐文章于 2024-07-17 15:39:32 发布

争取不出bug

最新推荐文章于 2024-07-17 15:39:32 发布

阅读量234

点赞数

分类专栏：若依框架开发文章标签： spring boot 笔记后端 springboot 学习 java

本文链接：https://blog.csdn.net/weixin_53689300/article/details/131988419

版权

若依框架开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码目录大纲

ruoyi-admin:这是启动和配置数据库的文件夹,后台服务
ruoyi-common:通用工具,如工具类、异常处理、过滤器等
ruoyi-framework:框架核心,如aop切面、系统配置、拦截器
ruoyi-generator:代码生成器,主要通过页面操作生成
ruoyi-quartz:定时任务
ruoyi-system:系统模块,系统代码
ruoyi-ui:后台管理系统的页面代码,采用Vue、Element UI

7.23

前后端项目跑起来

后端配置数据库，导入SQL，配置redis

运行ruoyi-admin

前端 npm run dev

任务

修改前端登录页面，更改图标以及样式

SQL 建立角色表添加表关联

7.26

登录的实现

SpringSecurity

进入首页后，前端发送captchaImage请求，后端根据流把图片回显到页面

把答案存储到redis里

//redis存储验证码答案，设置定时
redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);

把图片跟UUID（redis存储的key一部分，用于跟verifyKey）发送到前端页面

前端页面点击登录后,发送到后端

code: "9" 答案

password: "admin123"

UUID: ''

username: "admin"

后端首先进行验证码校验validateCaptcha，传入code跟UUID

// 拼接验证码cache key
String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + StringUtils.nvl(uuid, "");
String captcha = redisCache.getCacheObject(verifyKey);//根据拼接的key获取验证码
redisCache.deleteObject(verifyKey);//删除验证码
if (captcha == null){//如果等于空证明，验证码已经过期
}

然后进行账号验证码看是否规范登录前置校验

最后用户验证，并且修改最新登录信息

recordLoginInfo(loginUser.getUserId());//记录登录信息，包括登录时间，登录ip

// 生成token
return tokenService.createToken(loginUser);

/**
 * 从数据声明生成令牌
 *
 * @param claims 数据声明
 * @return 令牌
 */
private String createToken(Map<String, Object> claims)
{
    String token = Jwts.builder()
            .setClaims(claims)
            .signWith(SignatureAlgorithm.HS512, secret).compact();
    return token;
}

前端 user.js存储token，token有时间限制，过期需要重新登录

登录功能完成

获取用户和角色权限

getInfo

*：*：*

获取当前用户的角色权限信息。存储到vuex里边

getRouters

根据当前用户权限获取权限路由

代码生成轮播图表

使用代码生成新建表生成代码压缩包

1SQL运行

2.后端代码写到admin里边，resource里新建mapper文件夹放进去，后端

3.前端在目录views新建essential文件夹下新建banner轮播文件，放入生成的index.vue，api同理引入

4.菜单管理修改权限，普通用户可以访问

关键表结构分析

表名：sys_user 注释：用户信息表

spc 普通用户

ly 教练

表名：sys_role 注释：角色信息表

表名：sys_user_role 注释：用户角色关系表

把user_id跟role_id关联起来

表名：sys_menu 注释：菜单表

7.27

驾校首页设计

根据网上别的驾校网站进行临摹，寻找设计灵感

低代码平台guiplan

轮播图显示图片

使用springboot集成minio桶

难点：使用不熟练，未调试成功

解决方法：

根据网上教程，写一个demo,进行minio调试

本地部署minio

minio.exe server E:\minio

7.28

学习minio api文档写demo

用springboot集成，前端页面回显

前端回显到页面，实现轮播效果

从数据库查询banner表根据地图地址进行回显

具体代码实现

Copy
try {
  // 调用statObject()来判断对象是否存在。
  // 如果不存在, statObject()抛出异常,
  // 否则则代表对象存在。
  minioClient.statObject("mybucket", "myobject");
 
  // 获取"myobject"的输入流。
  InputStream stream = minioClient.getObject("mybucket", "myobject");
 
  // 读取输入流直到EOF并打印到控制台。
  byte[] buf = new byte[16384];
  int bytesRead;
  while ((bytesRead = stream.read(buf, 0, buf.length)) >= 0) {
    System.out.println(new String(buf, 0, bytesRead));
  }
 
  // 关闭流，此处为示例，流关闭最好放在finally块。
  stream.close();
} catch (MinioException e) {
  System.out.println("Error occurred: " + e);
}

/**
 * 获取文件流
 * @param objectName 文件名
 * @return
 */
public InputStream getFileInputStream(String objectName) {
   try {
      return minioClient.getObject(GetObjectArgs.builder().bucket("pcjiaxiao").object(objectName).build());
   } catch (Exception e) {
      e.printStackTrace();
   }
   return null;
}

前端实现

<template>
  <div>
    <div class="block">
      <span class="demonstration">Click 指示器触发</span>
      <el-carousel trigger="click" height="1000px">
        <el-carousel-item
          class="el-car-item"
          v-for="(list, index) in imgs"
          :key="index"
        >
        <img :src="hostURL + list.filename">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "FacilityFileModal",
  data() {
    return {
      hostURL: "http://localhost:8080/file/minio/view/",
      imgs: [], // 用于存放图片的数组
    };
  },
  created() {
    this.getImgs();
  },
  methods: {
    getImgs() {
      axios
        .get("/api/file/listFiles", {
          // 传递的参数
          params: {
            bucket: "pcjiaxiao",
          },
        })
        .then((res) => {
          this.imgs = res.data.data;
          console.log(this.imgs);
        });
    },
  },
  computed: {},
};
</script>

调试驾校项目

效果实现：

在这里插入图片描述

首页轮播难点完成，使用minio桶技术

难点：

访问后端401

解决办法

在ruoyi-framework下的config文件下SecurityConfig追加"/minio/info/**"

.antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**","/minio/info/**").permitAll()

前端访问图片自适应

 <el-carousel trigger="click" height="600px" width="600px">
        <el-carousel-item
          class="el-car-item"
          v-for="(list, index) in infoList"
          :key="index"
        >
        <img class="rightulliimg" :src="hostURL + list.bannerPoster">
        </el-carousel-item>
      </el-carousel>

img{
 /*设置图片宽度和浏览器宽度一致*/
  width:100%;
  height:inherit;
}