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

Posted evan-gao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web 开发入门教程(Vue + Spring Boot)相关的知识,希望对你有一定的参考价值。

前言

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

专栏目录(持续更新)

第一部分

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

项目效果图:

首页:

技术图片

图书馆:
技术图片

登录:

技术图片

后台管理:

技术图片

以上是关于Web 开发入门教程(Vue + Spring Boot)的主要内容,如果未能解决你的问题,请参考以下文章

spring boot + vue + element-ui全栈开发入门——spring boot后端开发

流行的Spring Boot + Vue架构整合开发的网易云,附源码!

Spring Boot + Vue 如此强大……

前后端分离 Spring Boot + Vue 开发网易云&QQ音乐(附源码)!

spring boot + vue + element-ui全栈开发入门——前端列表页面开发

[web开发] Vue + spring boot + echart 微博爬虫展示平台