SpringBoot + Vue入门指北(一)

简介: SpringBoot + Vue入门指北(一)

Maven

Maven是一个项目管理工具,可以对Java项目进行自动化的构建和依赖管理

Maven的作用

  • 项目构建:提供标准的,跨平台的自动化构建项目的方式
  • 依赖管理:方便快捷的管理项目依赖的资源(jar包),避免资源间的版本冲突等问题
  • 统一开发结构:提供标准的,统一的项目开发结构,如下图所示

运行 Maven 的时候,Maven 所需要的任何构件都是直接从本地仓库获取的。如果本地仓库没有,它会首先尝试从远程仓库下载构件至本地仓库。

本地仓库配置

修改maven安装包中的conf/settings.xml文件,指定本地仓库位置。

远程仓库配置

maven默认连接的远程仓库位置并不在国内,因此有时候下载速度非常慢,我们可以配置一个国内站点镜像,可用于加速下载资源。

与IDEA集成

SpringBoot快速上手

SpringBoot介绍

  • Spring Boot是由Pivotal团队提供的基于Spring的全新框架,旨在简化Spring应用的初始搭建和开发过程。
  • Spring Boot是所有基于Spring开发项目的起点。
  • Spring Boot就是尽可能地简化应用开发的门槛,让应用开发、测试、部署变得更加简单。

SpringBoot特点

  • 遵循“约定优于配置”的原则,只需要很少的配置或使用默认的配置。
  • 能够使用内嵌的Tomcat、Jetty服务器,不需要部署war文件。
  • 提供定制化的启动器Starters,简化Maven配置,开箱即用。
  • 纯Java配置,没有代码生成,也不需要XML配置。
  • 提供了生产级的服务监控方案,如安全监控、应用监控、健康检测等。

快速创建SpringBoot应用

开发环境热部署

  • 在实际的项目开发调试过程中会频繁地修改后台类文件,导致需要重新编译、重新启动,整个过程非常麻烦,影响开发效率。
  • Spring Boot提供了spring-boot-devtools组件,使得无须手动重启Spring Boot应用即可重新编译、启动项目,大大缩短编译启动的时间。
  • devtools会监听classpath下的文件变动,触发Restart类加载器重新加载该类,从而实现类文件和属性文件的热部署。
  • 并不是所有的更改都需要重启应用(如静态资源、视图模板),可以通过设置spring.devtools.restart.exclude属性来指定一些文件或目录的修改不用重启应用

步骤

  • 在pom.xml配置文件中添加dev-tools依赖。
  • 使用optional=true表示依赖不会传递,即该项目依赖devtools;其他项目如果引入此项目生成的JAR包,则不会包含devtools


  • 在application.properties中配置devtools。

Optional

  • 如果使用了Eclipse,那么在修改完代码并保存之后,项目将自动编译并触发重启,而如果使用了IntelliJ IDEA,还需要配置项目自动编译。
  • 打开Settings页面,在左边的菜单栏依次找到Build,Execution,Deployment→Compile,勾选Build project automatically
  • 按Ctrl+Shift+Alt+/快捷键调出Maintenance页面,单击Registry,勾选compiler.automake.allow.when.app.running复选框。

Finally

  • 做完这两步配置之后,若开发者再次在IntelliJ IDEA中修改代码,则项目会自动重启。
  • 项目创建成功后会默认在resources目录下生成application.properties文件。该文件包含Spring Boot项目的全局配置。
  • 配置格式如下:

系统配置


Web开发基础

Web入门

  • Spring Boot将传统Web开发的mvc、json、tomcat等框架整合,提供了spring-boot-starter-web组件,简化了Web应用配置。
  • 创建SpringBoot项目勾选Spring Web选项后,会自动将spring-boot-starter-web组件加入到项目中。
  • spring-boot-starter-web启动器主要包括web、webmvc、json、tomcat等基础依赖组件,作用是提供Web开发场景所需的所有底层依赖。
  • webmvc为Web开发的基础框架,json为JSON数据解析组件,tomcat为自带的容器依赖。

控制器

  • Spring Boot提供了@Controller和@RestController两种注解来标识此类负责接收和处理HTTP请求。
  • 如果请求的是页面和数据,使用@Controller注解即可;如果只是请求数据,则可以使用@RestController注解。

@Controller的用法

  • 示例中返回了hello页面和name的数据,在前端页面中可以通过${name}参数获取后台返回的数据并显示。
  • @Controller通常与Thymeleaf模板引擎结合使用。

@RestController的用法

@RestController和@Controller的区别


路由映射

  • @RequestMapping注解主要负责URL的路由映射。它可以添加在Controller类或者具体的方法上。
  • 如果添加在Controller类上,则这个Controller中的所有路由映射都将会加上此映射规则,如果添加在方法上,则只对当前方法生效。
  • @RequestMapping注解包含很多属性参数来定义HTTP的请求映射规则。常用的属性参数如下:
  • value: 请求URL的路径,支持URL模板、正则表达式
  • method: HTTP请求方法
  • consumes: 请求的媒体类型(Content-Type),如application/json
  • produces: 响应的媒体类型
  • params,headers: 请求的参数及请求头的值
  • @RequestMapping的value属性用于匹配URL映射,value支持简单表达式@RequestMapping("/user")
  • @RequestMapping支持使用通配符匹配URL,用于统一映射某些URL规则类似的请求:@RequestMapping("/getJson/*.json"),当在浏览器中请求/getJson/a.json或者/getJson/b.json时都会匹配到后台的Json方法
  • @RequestMapping的通配符匹配非常简单实用,支持“*”“?”“**”等通配符
  • 符号“*”匹配任意字符,符号“**”匹配任意路径,符号“?”匹配单个字符。
  • 有通配符的优先级低于没有通配符的,比如/user/add.json比/user/*.json优先匹配。
  • 有“**”通配符的优先级低于有“*”通配符的
  • Method匹配

RequestMapping分别和GetMapping、PostMapping的区别

GetMapping和PostMapping可以用RequestMapping表示,例如

  1. 以get的方式请求

@RequestMapping(value="/login", method=RequestMethod.GET)等价于@GetMapping("/login")

  1. 以post的方式请求

@RequestMapping(value="/login", method=RequestMethod.POST)等价于@PostMapping("/login")

参数传递

  • @RequestParam将请求参数绑定到控制器的方法参数上,接收的参数来自HTTP请求体或请求url的QueryString,当请求的参数名称与Controller的业务方法参数名称一致时,@RequestParam可以省略
  • @PathVaraible:用来处理动态的URL,URL的值可以作为控制器中处理方法的参数
  • @RequestBody接收的参数是来自requestBody中,即请求体。一般用于处理非 Content-Type: application/x-www-form-urlencoded编码格式的数据,比如:`application/json`、`application/xml`等类型的数据
目录
相关文章
|
3月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
200 1
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
131 62
|
22天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
107 13
|
30天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
124 2
|
2月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
3月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第8天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建并配置 Spring Boot 项目,实现后端 API 和安全配置。接着,使用 Ant Design Pro Vue 脚手架创建前端项目,配置动态路由和菜单,并创建相应的页面组件。最后,通过具体实践心得,分享了版本兼容性、安全性、性能调优等注意事项,帮助读者快速搭建高效且易维护的应用框架。
68 3
|
3月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
3月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第7天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建 Spring Boot 项目并配置 Spring Security。接着,实现后端 API 以提供菜单数据。在前端部分,使用 Ant Design Pro Vue 脚手架创建项目,并配置动态路由和菜单。最后,启动前后端服务,实现高效、美观且功能强大的应用框架。
76 2
|
3月前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
69 1