Web 开发入门教程(Vue + Spring Boot)

前言

这是一套面向 Java Web 技术栈新手的入门实战教程。
网上相关教程很多,但要么只是做了一个 DEMO ,要么对许多关键问题一笔带过。我的目标是根据这个教程,可以把一个完整的项目还原出来。当然,每个人的理解方式不同,可能有些细节没讲到位,欢迎大家在评论区提问,也可以通过邮箱 ([email protected]) 联系我,我一定会认真解答。

专栏目录(持续更新)

第一部分

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 项目实战(十五):动态加载后台菜单

这个项目我把它命名为 “白卷”,因为它是从 0 开始逐渐开发的。系统里的内容也需要逐步添加,象征着知识的从无到有,从有到多。另外我还给它起了一个英文名字,叫 White Jotter(白色笔记本),纯粹是为了谐音。
目前讲到的知识点大致如下:

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

主要参考内容

1.How2J.cn - Java 全栈学习网站
2.Vue.js - 渐进式 JavaScript 框架
3.Element - 网站快速成型工具

二、总体计划

因为项目只能利用业余时间开发,而且有些东西我也是刚刚接触,所以时间跨度会稍微长一点,希望不至于成为有生之年系列。

这个项目的迭代,我想大概分成如下几个阶段:

  • 第一阶段,简单的图书管理系统
  • 第二阶段,实现用户权限管理,成为较为完善的后台内容管理系统
  • 第三阶段,考虑实际应用场景,开发前台,把项目改造为互联网应用
  • 第四阶段,上线运营,处理可能遇到的各种问题

虽然我想最终把项目上线,但并不期望它有什么商业价值,所以有些设计并不是很贴合实际,只是为了对应知识点,希望大家可以理解。此外受个人技术水平所限,难免有诸多漏洞,欢迎各位批评指正。

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

项目效果图:

首页:

图书馆:

登录:

后台管理:

原文地址:https://www.cnblogs.com/Evan-Gao/p/11929027.html

时间: 2024-10-06 15:40:55

Web 开发入门教程(Vue + Spring Boot)的相关文章

Web开发入门教程:Pycharm轻松创建Flask项目

Web开发入门教程:Pycharm轻松创建Flask项目 打开Pycharm的file,选择创建新的项目,然后弹出对话框,我们可以看到里面有很多的案例,Flask.Django等等,我们选择生成Flask的demo程序 选择创建之后一个简易的Flask项目就出现在我们眼前,第一个是入口程序,还有一个static的静态目录,templates是模板存放的位置 我们可以手动来启动这个Flask项目,但是这不是很理智的,在Pycharm上面有个run,我们可以选择run来启动Flask的服务,默认打开

java web开发入门四(spring)基于intellig idea

spring 1.spring简介 Spring框架,可以解决对象创建以及对象之间依赖关系的一种框架. 且可以和其他框架一起使用:Spring与Struts,  Spring与hibernate (起到整合(粘合)作用的一个框架) Spring提供了一站式解决方案: 1) Spring Core  spring的核心功能: IOC容器, 解决对象创建及依赖关系 2) Spring Web  Spring对web模块的支持. -à 可以与struts整合,让struts的action创建交给spr

java web开发入门六(spring mvc)基于intellig idea

spring mvc ssm=spring mvc+spring +mybatis spring mvc工作流程 1A)客户端发出http请求,只要请求形式符合web.xml文件中配置的*.action的话,就由DispatcherServlet来处理. 1B)DispatcherServlet再将http请求委托给映射器的对象来将http请求交给对应的Action来处理 2)映射器根据客户的http请求,再对比<bean name="/hello.action如果匹配正确,再将http请

Django web 开发入门教程 (三)

reference: https://docs.djangoproject.com/en/1.8/intro/tutorial02/ This tutorial begins where Tutorial 1 left off. We’re continuing the Web-poll application and will focus on Django’s automatically-generated admin site. Philosophy Generating admin si

Django web 开发入门教程 (二)

创建 models 每一个通过Django编写的应用都包含一个遵循特定约定 Python包. Django 包含一个自动生成基本目录结构的工具, 所有你不必创建目录,只需关注编写代码. Projects vs. apps What’s the difference between a project and an app? An app is a Web application that does something – e.g., a Weblog system, a database of

Vue + Spring Boot 项目实战(一):项目简介 &#619178;

原文: http://blog.gqylpy.com/gqy/489 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

微信公众平台开发入门教程

在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/JS等基础. 我们将使用微信公众账号方倍工作室作为讲解的例子,二维码见底部. 本系列教程将引导你完成如下任务: 创建新浪云计算平台应用 启用微信公众平台开发模式 基础接口消息及事件 微信公众平台PHP SDK 微信公众平台开发模式原理 开发天气预报功能 第一章 申请服务器资源 创建新浪云计算应用 申请账号 我们使用SAE新浪云计算平台作为服务器资源,并且申请PHP环境+M

微名汇-微信公众平台开发入门教程

在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/JS等基础. 本系列教程将引导你完成如下任务: 创建新浪云计算平台应用 启用微信公众平台开发模式 基础接口消息及事件 微信公众平台PHP SDK 微信公众平台开发模式原理 开发天气预报功能 第一章 申请服务器资源 创建新浪云计算应用 申请账号 我们使用SAE新浪云计算平台作为服务器资源,并且申请PHP环境+MySQL数据库作为程序运行环境.申请地址:http://sae.

AE开发 入门教程

AE开发 入门教程 此过程说明适合那些使用.NET建立和部署应用的开发者,它描述了使用ArcGIS控件建立和部署应用的方法和步骤. 你可以在下面的目录下找到相应的样例程序: <安装目录>/DeveloperKit/Samples/Developer_Guide_Scenarios/ ArcGIS_Engine/Building_an_ArcGIS_Control_Application/Map_Viewer 注:ArcGIS样例程序不包含在ArcGIS Engine开发工具包“典型”安装方式中