前后台打通之springboot后台要点记录

接着之前的vue前端项目搭建成功,在实现了一些基本的页面功能之后,现在再搭建一下基础的后台,从而实现前后台打通,以下是整个打通过程中的一些关键点及感悟记录:

springboot的后台项目搭建比较简单,如果单纯的实现接口的话,实际上没什么好说的,但是为了看起来不那么单调,就先暂时集成了一些非常基础的组件,例如logback、mybatis、lombok等。

mybatis关联查询和特定标签使用

springboot操作mysql实际有更简单的方案,例如jpa,但是考虑到这个项目是为了巩固工作中的技术,并期望在实现的过程中发现更多知识盲点,所以还是选用mybatis-plus。
mybatis-plus基本和mybatis是一样的,常规操作也都差不多,并且目前涉及的业务也都不是太复杂,所以这里也仅是对关联查询进行一个记录。
例如系统需要查询博客列表,而博客列表除了博客本身信息外,还需要基本的用户信息以及访问量等信息,所以这里其实就涉及到了另外两个信息的关联查询,除非选择在后台代码中循环遍历查询,这肯定是不可取的。
对于关联查询,主要是返回结果的关联映射,时间长了不写可能就忘记细节,关键在于association 标签的使用,如下:

<resultMap id="blogResultMap"
		type="com.tzx.blog.entity.BlogInfo">
		<result column="id" jdbcType="VARCHAR" property="id" />
		<result column="title" jdbcType="VARCHAR" property="title" />
		<result column="desc" jdbcType="VARCHAR" property="desc" />
		<result column="content" jdbcType="VARCHAR" property="content" />
		<result column="type" jdbcType="VARCHAR" property="type" />
		<result column="cate_id" jdbcType="VARCHAR" property="cateId" />
		<result column="create_time" jdbcType="TIMESTAMP" property="createTime" />
		<result column="update_time" jdbcType="TIMESTAMP" property="updateTime" />
		<association property="userInfo" javaType="com.tzx.blog.entity.UserInfo">
            		<result property="id" jdbcType="VARCHAR" column="id"/>
            		<result property="name" jdbcType="VARCHAR" column="name"/>
            		<result property="img" jdbcType="VARCHAR" column="img"/>
        	</association>
       		<association property="blogDetailInfo" javaType="com.tzx.blog.entity.BlogDetailInfo">
            		<result property="id" jdbcType="VARCHAR" column="id"/>
            		<result property="blogId" jdbcType="VARCHAR" column="blog_id"/>
            		<result property="fabulousCount" jdbcType="VARCHAR" column="fabulous_count"/>
           		 <result property="readCount" jdbcType="VARCHAR" column="read_count"/>
            		<result property="commentCount" jdbcType="VARCHAR" column="comment_count"/>
           		<result property="forwardCount" jdbcType="VARCHAR" column="forward_count"/>
            		<result property="cateType" jdbcType="VARCHAR" column="cate_type"/>
            		<result property="power" jdbcType="VARCHAR" column="power"/>
            		<result property="blogType" jdbcType="VARCHAR" column="blog_type"/>
        	</association>
</resultMap>

跨域问题

使用vue和springboot前后端分离模式,前后台都要独立部署,这也就必然不可能在一台机器上使用一样的端口号,所以我后台使用8089,前台vue使用8088。
这样一来,当我前台访问后台接口时会抛出异常:

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

实际上就是跨域访问的问题,对于springboot项目,目前我了解到的解决方式有两种,一种是注解方式,一种是配置方式。
注解方式又分为类注解和方法注解,类注解的意思就是在controller类上边加注解,例如:

@CrossOrigin(value = "http://localhost:8088")
@RequestMapping("/tzxblog/blog")
public class BlogController {

方法注解就是在要访问的接口方法上加注解,例如:

@CrossOrigin(value = "http://localhost:8088")
@GetMapping("/category-list")
public TzxResVO<List<CategoryInfo>> findCategories

使用方法就如上边所示,使用@CrossOrigin注解,然后填上允许跨域的域名、端口。
那么上边用法的弊端就是哪里需要跨域,那里就要加注解,可能会需要加很多。
所以也可以使用下边配置的方式,在一个地方进行统一的管理,代码示例如下:

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
	@Override
	public void addCorsMappings(CorsRegistry registry) {
	registry.addMapping("/**").allowedOrigins("http://localhost:8088").allowedMethods("*").allowedHeaders("*");
	}
}

上边这个配置类,能解决跨域的问题,同时还能解决静态资源访问,例如图片访问的问题。

图片资源访问

常规来说,博客有作者,作者有头像,加载博客列表可能就同时加载了作者昵称和头像。
对于头像获取的实现方式可能是是多样化的,有的直接以流的方式提供,有的可能以ftp的方式提供,有的可能就像我这里一样直接使用静态资源,只是需要进行一定的配置进行映射,从而实现网络路径和本地文件路径的对接。
这个功能实现起来也不难,只需在上边配置类中增加一个重写方法即可:

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/static/**").addResourceLocations("file:///" + imgConfig.getFilepath());
	}

上边代码的意思,就是当网络访问/static/下的资源时,系统访问本地某个文件路径的内容,就是一层虚拟服务的映射。
上边文件路径使用配置的方式,没有在代码中写死,所以就又用到了spring属性配置的内容。

自定义属性配置

一般系统开发可能是在windows系统中,这个文件系统是以各种盘符开头,而后期的使用则很可能是部署在linux环境,盘符则又是一种规则,所以代码中写死肯定是不明智的。
因此,我直接把路径配在了springboog的配置文件application-dev.yml中,例如:

imgs:
  filepath: E:/img/

然后在代码中使用@Value获取时,会发现启动都报错,实际上是还需要引入一定的依赖:

<dependency>
	<groupId> org.springframework.boot </groupId>
	<artifactId> spring-boot-configuration-processor </artifactId>
	<optional> true </optional>
</dependency>

然后注入配置属性的代码指定配置内容,就可以在代码中读取自定义配置了:

@Component
@ConfigurationProperties(prefix = "imgs")
@Data
public class ImgConfig {
	// 上传路径
	private String filepath;
}

关于lombok

在上边的自定义配置映射类中,有一个@Data注解,这个注解是lombok的功能,lombok可以简化开发工作,替代自己写的get、set以及toString等方法。
除了@Data注解,我们目前常用的还有@Slf4j,用来代替常规的自定义log变量方式。
但是lombok也有一定的弊端存在,例如有父子继承关系的对象的equals方法就有一定的问题,同时,一旦使用了lombok,那么所有用这个项目的人也都必须安装lombok插件,实际上是很不友好的。

项目地址

项目代码和文档均以github托管,地址如下:
https://github.com/tuzongxun/tzxblog

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 代码科技 设计师: Amelia_0503
应支付0元
点击重新获取
扫码支付

支付成功即可阅读