百度360必应搜狗淘宝本站头条
框架图cad怎么画框架grpc框架flask框架scrapy框架
当前位置：网站首页 > 技术文章 > 正文

快速了解Vue & SpringBoot2.0开发架构

ccwgpt 2024-10-11 11:14 28 浏览 0 评论

分享&成长

vboot是一个 Vue 和 SpringBoot2.0的组合基础工程。如果你喜欢使用这两个框架做前后台开发，而又不知道如何让它们很好的组合，那么这个项目可能会是你入手学习的一个很好选择。

VBoot主要依赖四大框架.

Vue 2.x

SpringBoot 2.x

AdminLTE 2.x

vx-easyui

前端插件的使用

vue-select

bootstrapvalidator

Qs

vue-snotify

axios

font-awesome

lodash

pretty-checkbox-vue

vue-cropper

项目结构说明

项目后台构建使用gradle，前端构建使用webpack。项目目录结构是这两者的综合体，config、static和 wbuild 是 webpack 构建的配置。前后台代码都在 src 目录下，front目录表示所有的前端代码，main 保留了原始的标准 java 项目结构。

前端依赖配置为package.json 后台依赖配置为build.gradle

初始化项目前端依赖

npm install

or

yarn install

导入开发工具，建议使用idea

一般 idea 导入 gradle 项目都会进行自动构建和下载依赖，如果没有，在 idea 的右边栏有 gradle 的工具类，点击刷新按钮即可。首次初始化，可能会需要比较长时间的下载，需要耐心等待。

数据库和数据源配置

基础数据在 vboot.sql中，自行创建好数据库导入数据即可。

数据源的修改则在application.yml中对应配置即可，对于熟悉springboot的你，这都不是问题。

运行项目

后台启动项配置：

前台启动项配置：

前端编译：

启动说明：

后台服务端口配置在application.yml的server.port默认配置8088，如果是开发模式下，只需启动服务即可，不需要使用浏览器访问。如果是准备发布，则需先执行如上配置的 front-build，再启动项目访问即可。

开发模式需要同时启动 front 服务和 boot 项目。 front 前端端口为8081。启动 front 服务后，访问 http://localhost:8081/,开发时所有的数据请求都会被代理到后台 boot 端进行处理。build 发布后自动能够无缝切换环境。

front 目录结构说明

如果你熟悉 vue 开发，那么这个结构你应该不会太陌生。

api 数据接口的配置和接口访问规则定义

assets 不需要经常改变的静态资源

components 自定义的全局组件

directive 自定义指令，注意是定义了权限控制指令

filters 全局的过滤器，这个暂时没用到，功能少，预留的标准结构。

router 前端的路由配置

store 全局数据状态管理

styles 样式，app.scss 为全局样式

utils 工具包

views 所有的页面都在此处了

App.vue vue 程序的主界面

bootstrap.js 一些全局的加载项和配置项

main.js 前端入口 js

mixins.js vue组件的全局配置。

相关推荐

Spring WebFlux vs. Spring MVC（springboot是什么）

背景随着异步I/O和Netty等框架的流行，响应式编程逐渐走入大众的视野。但是，响应式编程本身并不是太新的概念，这个术语最早出现在1985年DavidHarel和AmirPnue...

深度解析微服务高并发:适配SpringMVC框架适配模块及实现原理

适配主流框架如果不借助Sentinel提供的适配主流框架的模块，则在使用Sentinel时需要借助try-catchfinally将要保护的资源（方法或代码块）包起来，在目标方法或代码块执行之前，调...

Spring MVC 底层原理深度解析:从请求到响应的全链路拆解

一、Servlet容器与DispatcherServlet的启动博弈1.Tomcat初始化阶段java//Tomcat初始化流程StandardContext#startInterna...

改造总结之传统SpringMVC架构转换为SpringBoot再到集群

改造出发点，是基于现在服务都在向上云的目标前进，传统SpringMVC难以满足项目持续构建、服务节点任意扩展的需求，所以开始了历史项目的改造。项目改造考虑的主要是兼容以前的业务代码，以及session...

SpringBoot3 整合 Spring MVC 全解析:开启高效 Web 开发之旅

在当今的JavaWeb开发领域，Spring框架家族无疑占据着重要的地位。其中，SpringBoot3和SpringMVC更是开发者们构建强大、高效Web应用的得力工具。今天，...

一文读懂SpringMVC（一文读懂!残疾人低保边缘家庭能领的超实用福利政策）

1.SpringMVC定义1.1.MVC定义Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据View（视图）：是应用程序中处理数据显示的部分。通常...

69 个Spring mvc 全部注解:真实业务使用案例说明(必须收藏)

SpringMVC框架的注解为Web开发提供了一种简洁而强大的声明式方法。从控制器的定义、请求映射、参数绑定到异常处理和响应构建，这些注解涵盖了Web应用程序开发的各个方面。它们不仅简化了编码工作，...

Spring MVC工作原理:像拼积木一样构建Web应用

SpringMVC工作原理：像拼积木一样构建Web应用在Java的Web开发领域，SpringMVC无疑是一个让人又爱又恨的存在。它像一位神通广大的积木搭建大师，将一个个分散的功能模块巧妙地拼接在...

5千字的SpringMVC总结，我觉得你会需要

思维导图文章已收录到我的Github精选，欢迎Star：https://github.com/yehongzhi/learningSummary概述SpringMVC再熟悉不过的框架了，因为现在最火的...

SpringMVC工作原理与优化指南（springmvc工作原理和工作流程）

SpringMVC工作原理与优化指南在现代Java开发中，SpringMVC无疑是构建Web应用程序的首选框架之一。它以其优雅的设计和强大的功能吸引了无数开发者。那么，SpringMVC究竟是如何工作...

Spring MVC框架源码深度剖析:从入门到精通

SpringMVC框架源码深度剖析：从入门到精通SpringMVC框架简介SpringMVC作为Spring框架的一部分，为构建Web应用程序提供了强大且灵活的支持。它遵循MVC（Model-V...

3000字搞明白SpringMVC工作流程、DispatcherServlet类、拦截器!

SpringMVC基础虽然SpringBoot近几年发展迅猛，但是SpringMVC在Web开发领域仍然占有重要的地位。本章主要讲解SpringMVC的核心：DispatcherServlet类...

多年经验大佬用2000字透彻解析SpringMVC的常用注解及相关示例

SpringMVC注解SpringMVC框架提供了大量的注解，如请求注解、参数注解、响应注解及跨域注解等。这些注解提供了解决HTTP请求的方案。本节主要讲解SpringMVC的常用注解及相关示例...

知乎热议:如何成为前端架构师，赚百万年薪?

作者|慕课网精英讲师双越最近有一条知乎热议：从一个前端工程师，如何根据目标，制定计划，才能快速进阶成为前端架构师？不久之前我参与了一次直播，讲到了自己对于Web前端架构师的理解。架构师这个角色...

学习笔记-前端开发架构设计（前端架构设计方案）

前端开发的技术选项主要包含以下几点，下面对一些名词概念的解释做了笔记：1、分层架构：把功能相似，抽象级别相近的实现进行分层隔离优势：松散耦合（易维护，易复用，易扩展）常见分层方式：MVC，MVVM2、...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表