SpringBoot+vue+实战项目之第1集

Posted 2021-09-13 Panda_cv

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringBoot+vue+实战项目之第1集相关的知识，希望对你有一定的参考价值。

1. 项目功能

用户管理：用户注册，
首页功能实现：三级分类
商品详情：商品详情查询与显示，商品评价，商品评价脱敏实现
购物车：添加购物车，删除商品
收货地址：收获地址列表，新增收获地址，修改收获地址，删除收获地址
提交订单：订单支付，超时取消
用户中心：修改用户信息
订单管理：查询订单
评价管理：商品评价列表
中心首页数据显示：订单状态

2. 技术选型

项目架构：前后端分离
前端技术：vue(在jQuery上优化)，数据渲染能力，没有通信能力。因此需要axios（只做通信），组合使用。layui、bootstrap。
后端技术：SpringBoot + MyBatis、RESTful、swagger
服务器搭建：Linux 、nginx服务器

3. 项目架构的演进

单体架构：前后端部署在同一台服务器（Tomcat ）
前后端分离：概念及优点
集群与负载均衡：
分布式：基于redis实现分布锁、分布式数据库mycat

4. SpringBoot

4.1 概念：约定大于配置/习惯优于配置的理念快速搭建项目的开发环境。我们无需或者很少的相关spring配置就能快速的将项目运行起来。
4.2 优点：快速搭建项目、springboot内置了配置。

5. Usercontroller（实操注册用户）

超链接请求：响应同步请求 响应异步请求， 返回的是对象，需要加@ResponseBody, 
转成json格式对象才能返回。

5.1 @ResponseBody：返回json格式的数据

public class UserControlller{
	@Resource
	private UserService userService;

	@RequestMapping("/regist")
	@ResponseBody
	public User regist(User user){
		return userService.userRegist(user);
	}
}

6. Java配置方式

6.1 xml配置

对基础配置、引⽤的第三⽅依赖中的配置使⽤xml完成：例如数据源配置

6.2 注解配置

业务开发使⽤注解：例如controller、service （自定义类对象）

6.3 Java配置⽅式（第三方类对象）

	@Configuration
	public class SpringConfig{
 		@Bean
	 	public Date getDate(){
 			return new Date();
	    }
	}

7. SpringBoot自动配置（底层源码）

@SpringBootApplication

8.全局配置⽂件

8.1 SpringBoot针对不同的开发场景提供默认的属性配置，如果默认的配置不能满⾜开发的需要，我们需要对属性配置进⾏修改.
8.2 SpringBoot应⽤提供了⼀个全局配置⽂件 application.properties ⽤于进⾏⾃定义配置

8.3 全局配置⽂件⽀持2中语法配置：

①properties 键值对配置

# 配置数据源 （key必须按照SpringBoot的要求）
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/db_2010_mybatis?characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=admin123

# 配置映射⽂件路径及实体类的包名
mybatis.mapper-locations=classpath:mappers/*Mapper.xml
mybatis.type-aliases-package=com.qfedu.springboot.demo.entity

②yaml 语法的配置（企业偏多）

spring:
   datasource:
     url: jdbc:mysql://localhost:3306/db_2010_mybatis?characterEncoding=utf-8
     driver-class-name: com.mysql.jdbc.Driver
     username: root
     password: admin123
mybatis:
   mapper-locations: classpath:mappers/*Mapper.xml
   type-aliases-package: com.qfedu.springboot.demo.entity

9. SpringBoot整合JSP

概念：SpringBoot应⽤默认⽀持的动态⽹⻚技术是Thymeleaf，并不⽀持JSP；因此在SpringBoot应⽤想要使⽤JSP需要通过⼿动整合来实现

9.1 添加依赖

<dependency>
 	<groupId>org.apache.tomcat.embed</groupId>
 	<artifactId>tomcat-embed-jasper</artifactId>
 	<version>9.0.45</version>
</dependency>
<dependency>
 	<groupId>javax.servlet</groupId>
	 <artifactId>jstl</artifactId>
	 <version>1.2</version>
</dependency>

9.2 创建JSP页面

1. 修改pom⽂件打包⽅式为war
2. 在mian中创建webapp目录
3. 在webapp创建.jsp页面

9.3 将JSP⻚⾯放在WEB-INF中的访问

1 将JSP⽂件存放到WEB-INF⽬录
2 在application.yml⽂件配置SpringMVC视图解析⽅式：
		spring:
			mvc:
			   view:
 				  prefix: /WEB-INF/
 				  suffix: .jsp
3 创建PageController
	@Controller
	public class PageController {
		 @RequestMapping("/index.html")
	 	 public String index() {
	 		return "index";
 	}
}

10. 基于SpringBoot的SSM整合

10.1 创建Springboot项⽬

1 创建项⽬时添加依赖
	lombok
	spring web
	mysql driver
	mybatis framework
2 修改mysql驱动的版本（可选）
<!--pom.xml-->
<properties>
	 <java.version>1.8</java.version>
 	 <mysql.version>5.1.47</mysql.version>
</properties>

10.2 进行MyBatis所需的配置

1 将默认创建的application.properties后缀名修改为 yml (根据习惯可选)
2 完成MyBatis的⾃定义配置
	spring:
      datasource:
        driver-class-name: com.mysql.jdbc.Driver
        url: jdbc:mysql://localhost:3306/db_2010_mybatis?characterEncoding=utf-8
        username: root
        password: admin123
 
	mybatis:
      type-aliases-package: com.qfedu.springboot.ssm.beans
      mapper-locations: classpath:mappers/*Mapper.xml

10.3 在启动类配置DAO扫描

@MapperScan---- 扫描dao接口（service接口没有对应的mapper）

@SpringBootApplication
@MapperScan("com.qfedu.springboot.ssm.dao")
public class SpringbootSsmApplication {
 	public static void main(String[] args) {
 		SpringApplication.run(SpringbootSsmApplication.class, args);
	 }
}

11. 整合Druid连接池

在SpringBoot中整合MyBatis的时候，默认集成了Hikari连接池，Hikari的效率⽐Druid要⾼，但是得益于Druid提供了⽐较便捷的监控系统在企业开发中druid使⽤还是最多的。

11.1 添加druid的starter

<dependency>
 	<groupId>com.alibaba</groupId>
 	<artifactId>druid-spring-boot-starter</artifactId>
 	<version>1.1.10</version>
</dependency>

11.2 配置druid数据源

spring:
  datasource:
     druid:
       driver-class-name: com.mysql.jdbc.Driver
       url: jdbc:mysql://localhost:3306/db_2010_mybatis?characterEncoding=utf-8
       username: root
       password: admin123
       initial-size: 1
       min-idle: 1
       max-active: 20

12. Thymeleaf

12.1 Thymeleaf简介

Thymeleaf是⼀种类似于JSP的动态⽹⻚技术。

JSP 必须依赖Tomcat运⾏，不能直接运⾏在浏览器中。
HTML可以直接运⾏在浏览器中，但是不能接收控制器传递的数据。
Thymeleaf是⼀种既保留了HTML的后缀能够直接在浏览器运⾏的能⼒、
⼜实现了JSP显示动态数据的功能——静能查看⻚⾯效果、动则可以显示数据。

12.2 Thymeleaf的使用

SpringBoot应⽤对Thymeleaf提供了良好的⽀持

1 添加thymeleaf的starter

	<dependency>
		 <groupId>org.springframework.boot</groupId>
		 <artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
	
2 创建Thymeleaf模板	
	Thymeleaf模板就是HTML⽂件.
	SpringBoot应⽤中 resources\\templates ⽬录就是⽤来存放⻚⾯模板的.

重点说明：
    1. static ⽬录下的资源被定义静态资源，SpringBoot应⽤默认放⾏；
       如果将HTML⻚⾯创建static⽬录是可以直接访问
    2. templates ⽬录下的⽂件会被定义为动态⽹⻚模板，SpringBoot应⽤会拦截
       templates中定义的资源；如果将HTML⽂件定义在templates⽬录，
       则必须通过控制器跳转访问。
       
	补充：在templates创建HTML⻚⾯模板
	创建PageController，⽤于转发允许"直接访问"的⻚⾯请求
			@Controller
			@RequestMapping("/page")
			public class PageController {
				 @RequestMapping("/test.html")
 			     public String test(){
                     return "test";
                 }
            }

以上是关于SpringBoot+vue+实战项目之第1集的主要内容，如果未能解决你的问题，请参考以下文章

SpringBoot+vue+实战项目之第3集

SpringBoot+vue+实战项目之第4集

个人项目实战2，springboot集成（Html+vue.js）前端框架