手把手,从 0 到 1,带你做 Java 前后端分离项目 !
🏃 搞事情
大家好,我是小哈~
最近酝酿着搞点事情,正式开始运营自己的知识星球。关于星球内容的定位,小哈决定着手于项目实战,我的设想是,会在星球内部,出一系列从 0 到 1 的实战项目,贴合真实的企业级项目开发规范,全程手写后端 + 前端完整代码,通过专栏的形式,把每个功能点的开发的步骤,手摸手,通过丰富的图片 + 文字,保姆级教学(PS: 同时按小节进度提供代码,不至于一上来代码量太多,不知道从哪入手)。
目前,我已经给自己的网站:犬小哈教程 新开发了专栏模块,方便小伙伴们方便的、成体系的完成一个独立项目。
能够让小伙伴们只需跟着实战专栏,按照章节顺序教学来,上手敲,即可搞定每个功能点的开发。另外,在跟随小节内容上手的过程中,若遇到问题,可在星球内发起 1v1 提问,小哈亲自解答。
星球说不清楚的,项目进度因为某一块搞不定的,微信发我源码,帮忙看问题出在哪:
陪伴式写项目,到最终部署到云服务器上,能够通过域名来访问,完成项目上线。
💡 TIP : 后期也会尝试分享一些适合程序员的技术副业,比如开发一些小工具网站,进行推广运营,有了一定用户量,能够挣点零花钱啥的。当然,这都是后话了,前提还需要你能够自行完整的开发一个独立应用,前期还是以项目实战为主。
既然小哈是准备出一系列的实战项目,我希望这些项目的难度是循序渐进的,能够让你真实的感受到自己的功力在慢慢增强。但是又不想写那种纯纯的 CRUD 型管理后台项目,太枯燥。那么,第一个项目小哈就定位在难度不大,易上手,有趣,并且非常有代表性,实际工作中也能够被频繁用到的。
脑瓜子一转,想到之前好多读者问我博客的事情,今年 4 月份的时候,又有读者微信问我: 你的博客有没有开源,感觉还挺好看,也想学习、部署一个。
于是乎,花了点时间整了个 —— 前后端分离的博客 Weblog。
💁 项目介绍
每个技术人都应该有属于自己的博客!相比较直接使用第三方博客平台,自行搭建博客更有成就感;另外就是没有平台限制,比如你想发个二维码引流啥的,平台基本都是不允许的,还有,你可以自由 div
定制自己想要的博客 css
样式,哪天 UI 看不爽了,咱就自己换;最后,面试的时候,如果简历贴上的是自己开发博客地址,也会很加分!
🔗 演示地址
目前 1.0 版本已经部署到了阿里云服务器上,可点击下面链接进行访问,查看实际效果:
http://118.31.41.16/[1]
管理后台登录账号/密码:
账号:test 密码:test
⚠️ 注意:该账号的角色为游客角色,仅支持查询操作,新增、修改、删除操作会提示不允许。
⚒️ 功能模块
💡 TIP : 以下只是 1.0 版本的功能,后续小哈将添加更多功能进去, 比如图库管理、知识库、在线人数统计、SSR(服务端渲染) 等等,能够想到的高逼格功能,咱都整上,附带超详细的实战图文笔记 ...
✏️ 技术栈
🎉 专栏目标
学完本项目,你将具备如下能力:
掌握独立开发全栈项目的能力(后端 + 前端); 掌握 Spring Boot 相关技术栈,以及构建后端项目能力,写出符合企业级的代码规范; 掌握 Vue 3.2 + Element Plus + Vite 4 技术构建前端工程的能力,并能够手动搭建 Admin 后台管理系统; 掌握前端页面响应式设计(同时适配不同屏幕),排版布局,能够根据自己需求, div
自己想要的前端效果;...
💡 专栏亮点
在技术选型上,小哈选择了目前主流热门的技术栈,对标企业级项目开发; 严格把控代码质量,数据库设计,写出令同事称道的代码; 熟悉后端工程的搭建,如一些通用的基础设施:参数校验、全局异常捕获、 API
统一出入参日志打印等等;能够独立完成整个网站的部署流程,从功能开发到服务器、域名选购,再到网站备案,最终公网可访问; 对象存储 Minio
的使用, 能够独立搭建个人图床;从 0 到 1 ,通过 Element Plus
纯手搭Admin
管理后台前端骨架;使用 Vue 3 setup
等语法糖新特性;博客前台页面在设计上美观大气; ...
📖 专栏大纲
整个实战专栏,小哈按功能点开发进度来做的目录,目前已经更新到了第第五章,目录大致如下:
💡 TIP : 如下目录不代表最终内容,只会更多,目前只是把已完成的部分详细的罗列了出来,其中大部分功能正在开发中,所属具体小节的标题也会陆续更新进来。
一、项目介绍
二、开发环境搭建
2.1 【后端】环境安装&工具准备 2.2 【前端】开发环境&工具安装 三、Spring Boot 后端工程搭建
3.1 搭建 Spring Boot 多模块工程 3.2 Spring Boot 多环境配置 3.3 配置 Lombok 3.4 Spring Boot 整合 Lockback 日志 3.5 Spring Boot 自定义注解,实现 API 请求日志切面 3.6 Spring Boot 通过 MDC 实现日志跟踪 3.7 Spring Boot 实现优雅的参数校验 3.8 Spring Boot 自定义响应工具类 3.9 Spring Boot 实现全局异常管理 3.10 全局异常处理器+参数校验(最佳实践) 3.11 整合 Knife4j:提升接口调试效率 3.12 自定义 Jackson 序列化、反序列化,支持 Java 8 日期新特性 3.13 小结 四、使用 Vue 3 + Vite 4 搭建前端工程
4.1 Vue 3 环境安装& Weblog 项目搭建 4.2 安装 VSCode 开发工具 4.3 添加 vue-router 路由管理器 4.4 Vite 配置路径别名:更方便的引用文件 4.5 整合 Tailwind CSS 4.6 整合 Tailwind CSS 组件库:Flowbite 4.7 整合饿了么 Element Plus 组件库 五、Spring Security + JWT 实现用户登录
5.1 登录页设计:支持响应式布局 5.2 登录页加点盐:通过 Animate.css 添加动画 5.3 整合 Mybatis Plus 5.4 p6spy 组件打印完整的 SQL 语句、执行耗时 5.5 整合 Spring Security 5.6 Spring Security 整合 JWT :实现身份认证 5.7 Spring Security 整合 JWT :实现接口鉴权 5.8 Vue 整合 Axios 实现登录功能 5.9 登录页表单验证 5.10 登录消息提示、回车键监听、按钮加载 Loading 5.11 存储 Token 到 Cookie 中
5.12 Axios 添加请求拦截器、响应拦截器
5.13 全局路由拦截:实现页面标题动态设置、后台路由跳转的登录判断
5.14 实现页面顶部加载 Loading 效果
六、Element Plus 手搭 Admin 管理后台骨架
6.1 搭建管理后台基本布局
七、实现 Admin 分类管理功能
八、实现分类列表页展示
九、实现 Admin 标签管理功能
十、实现标签列表页展示
十一、实现 Admin 文章管理功能
十二、实现博客首页、归档页展示
十三、实现文章详情页展示
十四、实现仪表盘功能
十五、实现博客基础信息设置功能
十六、部署上线
云服务器选购 相关环境安装(JDK、Docker、Nginx、Mysql) Nginx 配合 Spring Boot 部署 部署前端项目以及通过 IP 访问 域名选购 网站备案 域名映射,项目正式上线
TIP :目前星球内已经更新完毕了第五章内容,正在更新手动搭建
Admin
管理后台一章。
👨🏻💻 适用人群
在校学生,有一定基础,想做毕业设计,或者为找工作准备,需要实战项目加分;
💡 TIP: 小白也没关系,小哈将会告诉你学习路线是啥,哪里有免费的高质量学习视频可以白嫖,学完这些技术栈后再来做实战项目,或者学一点基础边实战边学习都可以。
已经参与工作,对前后端分离感兴趣,想学习 Vue 3 前端,对独立上线自己网站感兴趣的童鞋;
✊ 如何加入
小哈已经将网站的专栏模块接入了知识星球,想要查看专栏内容,需要订阅我星球后,在置顶帖获取专栏访问入口,浏览器打开,微信扫码授权登录后即可解锁所有内容。
因为目前也是刚开始运营,所以价格不会太高,星球官方定价最低必须是 50 元。小哈最终定价为 35 元, 一顿饭钱(附 15 元的优惠券,记得扫码领取下方优惠券加入哟),后续随着内容慢慢的更新迭代,会慢慢涨上去,所以早加入更具性价比哟~
星球支持 3 天无理由退费,感兴趣的小伙伴可先加入,看看内容质量如何,不合适退掉就行,觉得确实内容很干货,就留下来,无套路。
扫描下方二维码加入👇👇
扫描上方二维码加入👆👆
❓ 关于答疑
小伙伴们如果在跟着专栏学习,手敲项目的过程中遇到问题,碰到无法解决的问题,可在小哈的知识星球内部提问,我会统一来解答。