<input id="0qass"><u id="0qass"></u></input>
  • <input id="0qass"><u id="0qass"></u></input>
  • <menu id="0qass"><u id="0qass"></u></menu>

    Vue + Spring Boot 項目實戰(一):項目簡介

    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 項目


    有興趣聽我扯技術之外的故事的同學可以關注我的公眾號。不定期更新,權當和大家聊聊天,圖個樂子。
    heihei

    已標記關鍵詞 清除標記
    ??2020 CSDN 皮膚主題: 大白 設計師:CSDN官方博客 返回首頁
    多乐彩