Vue + Spring Boot 项目实战(一):项目简介

Vue + Spring Boot 项目实战(一):项目简介白卷是一款使用Vue+SpringBoot开发的前后端分离项目,主要帮助web开发初学者通过实践方式打通各个环节的知识。

大家好,又见面了,我是你们的朋友全栈君。

logo


GitHub 地址:https://github.com/Antabot/White-Jotter
lisense

教程目录

第一部分

Vue + Spring Boot 项目实战(一):项目简介
Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目
Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发)
Vue + Spring Boot 项目实战(四):数据库的引入
Vue + Spring Boot 项目实战(五):使用 Element 辅助前端开发
Vue + Spring Boot 项目实战(六):前端路由与登录拦截器
Vue + Spring Boot 项目实战(七):导航栏与图书页面设计
Vue + Spring Boot 项目实战(八):数据库设计与增删改查
Vue + Spring Boot 项目实战(九):核心功能的前端实现
Vue + Spring Boot 项目实战(十):图片上传与项目的打包部署

第二部分

Vue + Spring Boot 项目实战(十一):用户角色权限管理模块设计
Vue + Spring Boot 项目实战(十二):访问控制及其实现思路
Vue + Spring Boot 项目实战(十三):使用 Shiro 实现用户信息加密与登录认证
Vue + Spring Boot 项目实战(十四):用户认证方案与完善的访问拦截
Vue + Spring Boot 项目实战(十五):动态加载后台菜单
Vue + Spring Boot 项目实战(十六):功能级访问控制的实现
Vue + Spring Boot 项目实战(十七):后台角色、权限与菜单分配
Vue + Spring Boot 项目实战(十八):博客功能开发

第三部分

Vue + Spring Boot 项目实战(十九):Web 项目优化解决方案
Vue + Spring Boot 项目实战(二十):前端优化实战
Vue + Spring Boot 项目实战(二十一):缓存的应用

开源精选

Erupt Framework:开源神器,助你无需前端代码搞定企业级后台管理系统
AntdFront: React 纯 Hook 多标签微前端管理系统解决方案

前言

之前写了一些关于 Java EE 的文章,主要是理论性质的,目的是帮助大家快速了解 Java EE 的核心内容,早日爬出这个陈旧又绕不开的坑,进入 Java Web 开发的新天地。当然只有理论是不够的,有很多细节需要在实践中理解,所以我决定做一个实践教程。

这个项目十分简单,是一个纯粹为教程而生的原型,可以视为一个简陋的带后台的门户网站。所以学习时不用有什么压力,估计你们学的比我写的快很多。

我的目标是根据这个教程,可以帮助 新入行的或是刚开始学习相关技术 的小伙伴们把一个完整的项目还原出来,建立起对前后端分离式 Web 开发的整体认知。

一开始,我会尽量详细地描述开发的过程,帮助大家快速上手。随着项目进展,曾经讲到过的、比较容易搜索到的内容会适当省略。

当然,每个人的理解方式不同,可能有些重要的细节没讲到位,欢迎大家在评论区提问。受限于个人水平,一定有很多说的不对的地方,大家理解一下,友善白嫖哈。

一、项目概述

这个项目我把它命名为 “白卷”,估摸着很多同学会拿它做课程设计之类,建议你们尽量加点自己的东西在里面,直接交白卷,你的良心不会痛吗?(狗头保命)

开个玩笑,叫白卷是因为它随着教程进展逐渐完善,象征着知识的从无到有,从有到多。

另外我还给它起了一个英文名字,叫 White Jotter(白色笔记本),纯粹是为了谐音。

项目遵循敏捷开发原则,会根据大家反馈的意见整理出新的需求,动态扩展、调整、优化。初始阶段按照简单的分层架构设计,具体见下图:

  • 应用架构
    应用架构

  • 技术架构
    技术架构图

项目需要在前后端之间不断穿梭,但在做教程的时候,我会尽量模块化地去讲解。

此外,我把教程分为了几个阶段,是为了循序渐进、由易到难地讲解知识点。

各个阶段的主要内容如下(随教程进展更新):

(一)第一部分

这个项目的第一部分以图书信息管理为示例,主要帮助大家理解以下内容:

  • 如何从 0 开始搭建 Web 项目?
  • 什么是前后端分离?如何实现前后端分离?
  • 单页面应用有哪些特点?
  • 如何在 Web 项目中使用数据库并利用网页实现增删改查?
  • 在开发中如何利用各种辅助手段?
  • Vue.js 的基本概念与用法
  • 简单的前端页面设计
  • 如何部署 Web 应用?

各个页面的效果大致如下:

登录页面
登录页面
首页
首页
图书馆页面
图书馆

(二)第二部分

项目的第二部分是后台管理模块的开发,主要包括以下内容:

  • 后台管理模块的常见功能与布局(内容管理、用户\权限管理、运维监控)
  • 用户身份验证、授权、会话管理与信息加密存储
  • Shiro 框架的使用
  • 实现不同粒度的访问控制(动态菜单、功能控制、数据控制)
  • 结合内容管理,实现文章的编写与展示

后台基本结构如下:
在这里插入图片描述
后台页面效果:

Dashboard(from PanJiaChen / vue-element-admin)
dashboard

图书管理
图书管理
用户管理
在这里插入图片描述
笔记本页面效果:

文章列表:
笔记本
文章详情:
文章详情

(三)第三部分

第三部分是在前面的基础上,分析项目存在的不足,并对其进行由点及面的优化。

当简单的优化无法达到我们想要的目的时,就需要从架构层面进行整体的升级改造,那就是下一套教程的事情了。

(四)开源精选

在做这个项目的过程中结识了一些小伙伴,他们凭借一腔热枕坚持为开源社区做贡献,开发出了许多优秀的项目。我打算在编写教程的同时穿插对这些项目的介绍,以便让更多朋友们了解这个群体,甚至加入到新兴项目的发展壮大过程中去。

这里给读者们提供一个福利,如果你有拿的出手开源项目希望更多人知道,我可以无条件帮你推广,甚至文案也可以帮你修改,当然,前提是这个项目真的有价值。


二、技术栈

参考技术架构图,项目使用的主要技术如下:

1.前端技术栈

1.Vue.js
2.ElementUI
3.axios

2.后端技术栈

1.Spring Boot
2.Apache Shiro
3.Apache Log4j2
4.Spring Data JPA
5.Spring Data Redis

3.数据库

1.MySQL
2.Redis

在开发过程中还会不断用到一些新的技术,有必要的我会增添上去。

三、主要参考内容

下一篇:Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130042.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • bzero函数使用方法_bzero函数

    bzero函数使用方法_bzero函数bzero原型:externvoidbzero(void*s,intn);用法:#include

    2022年10月13日
  • python输出unicode编码_python gbk codec

    python输出unicode编码_python gbk codec解决Python报错–UnicodeDecodeError:‘gbk’codeccan’tdecodebyte0x80inposition658:illegalmultibytesequence今天在anaconda上新建一个python3.6环境后,使用时报错了:(base)C:\Users\peter>activatetf(tf)C:\Users\pe…

  • 超分辨率的数据增强Python(超分辨率重建是什么)

    python在图像超分辨率重建中的应用洪华秀[1];【期刊名称】《计算机产品与流通》【年(卷),期】2019(000)002【摘要】图像超分辨率重建技术是低分辨率图像经过一系列算法处理后转换成高分辨率图像的过程,随着图像数据的应用领域不断延伸,这一技术也逐渐成了图像处理研究热点之一。近几年Python语言在人工智能领域逐渐占领榜首,它的优越性在于强大的第三方数据处理工具的支持。本文在图像超分辨率重…

  • WERTC-在Ubuntu中搭建ICE服务器

    WERTC-在Ubuntu中搭建ICE服务器1.ICE服务器介绍最近一段时间在做关于webrtc语音视频通话,网上免费的公开的STUN服务器可以用于测试,使用起来响应时间非常的慢,用起来不爽。作为一个有情怀的技术人员的我,就需要自己搭建了coturn服务器,现在分享给大家。前提先介绍一下ICE服务器,ICE服务器包含了STUN和TURN两部分,实际上我们就需要TURN服务器就可以进行P2P穿墙。coturn服务器是在turnserver上增加了部分高级特性(感谢项目作者,为我们提供了很好的环境)。coturn支持cp,udp,

  • SpringBoot笔记(五)Linux系统与项目部署

    SpringBoot笔记(五)Linux系统与项目部署Linux操作系统与项目部署**注意:**本版块会涉及到操作系统相关知识。现在,几乎所有智能设备都有一个自己的操作系统,比如我们的家用个人电脑,基本都是预装Windows操作系统,我们的手机也有Android和iOS操作系统,还有程序员比较青睐的MacBook,预装MacOS操作系统,甚至连Macbook的Touchbar都有一个自己的小型操作系统。操作系统是管理计算机硬件与软件资源的计算机程序,操作系统可以对计算机系统的各项资源板块开展调度工作,运用计算机操作系统可以减少人工资源分配的工作强度。.

  • XSD文件结构详解「建议收藏」

    XSD文件结构详解「建议收藏」XSD(xmlSchemaDefinition)XmlSchema的用途1.  定义一个Xml文档中都有什么元素2.  定义一个Xml文档中都会有什么属性3.  定义某个节点的都有什么样的子节点,可以有多少个子节点,子节点出现的顺序4.  定义元素或者属性的数据类型5.  定义元素或者属性的默认值或者固定值XmlSchema的根元素:<?xmlversion="1.0"?>…

    2022年10月25日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号