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`等类型的数据
目录
相关文章
|
11月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
685 7
|
10月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
992 1
|
6月前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
849 4
基于springboot+vue开发的会议预约管理系统
|
7月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
410 6
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
9月前
|
监控 数据可视化 JavaScript
springboot + vue的MES系统生产计划管理源码
MES系统(制造执行系统)的生产计划管理功能是其核心模块之一,涵盖生产计划制定与优化、调度排程、进度监控反馈、资源管理调配及可视化报告五大方面。系统基于SpringBoot + Vue-Element-Plus-Admin技术栈开发,支持多端应用(App、小程序、H5、后台)。通过实时数据采集与分析,MES助力企业优化生产流程,适用于现代化智能制造场景。
501 1
|
10月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
799 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
11月前
|
JavaScript 前端开发 Java
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
1152 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!

热门文章

最新文章