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


教程目录
第一部分
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）：


图书管理：



用户管理：



笔记本页面效果：
文章列表：



文章详情：


（三）第三部分
第三部分是在前面的基础上，分析项目存在的不足，并对其进行由点及面的优化。
当简单的优化无法达到我们想要的目的时，就需要从架构层面进行整体的升级改造，那就是下一套教程的事情了。
（四）开源精选
在做这个项目的过程中结识了一些小伙伴，他们凭借一腔热枕坚持为开源社区做贡献，开发出了许多优秀的项目。我打算在编写教程的同时穿插对这些项目的介绍，以便让更多朋友们了解这个群体，甚至加入到新兴项目的发展壮大过程中去。这样，也算是自己尽了一份绵薄之力吧！
此外，这个教程还有姐妹篇，也就是我正在更新的信息安全方面的教程。在攻防实践阶段，会把我们这个项目当作一号靶机，对黑客技术有兴趣的同学可以走一波关注：
【信息安全系列文章地址】

二、技术栈
参考技术架构图，项目使用的主要技术如下：
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
在开发过程中还会不断用到一些新的技术，有必要的我会增添上去。
三、主要参考内容

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

下一篇：Vue + Spring Boot 项目实战（二）：搭建 Vue.js 项目

有兴趣听我扯技术之外的故事的同学可以关注我的公众号。不定期更新，权当和大家聊聊天，图个乐子。

vue项目打包

一、终端运行命令 npm run build

二、打包成功的标志与项目的改变，如下图：





3、点击index.html，通过浏览器运行，出现以下报错，如图：



四、那么应该如何修改呢？

具体步骤如下：

1、查看package.js文件的scripts命令

2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件

3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。

4、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

五、温馨提示

更多博文，请关注：xssy5431 【小拾岁月】

扫码：



 

目录

1 问题

2 解决

2.1 创建项目避开ESlint

2.2 使用了别人模板，禁止Disable Eslient

2.3 使用了别人模板，卸载

2.4 其他办法

2.4.1 关闭软件webstorm 的ESlint

2.4.2 注释掉项目内的ESlint


温馨提示：ctrl+alt+L可以规范代码格式，比Eslient更是随性一定，适合非强迫症，让那个比教导主任还严的ESlint滚粗


1 问题

每次都红我缩进，

每次都要改，太麻烦了



 

2 解决

2.1 创建项目避开ESlint

最好的办法就是创建项目的时候不要ESlint



好了！特别清爽的感觉！



 

2.2 使用了别人模板，禁止Disable Eslient



                   

 



2.3 使用了别人模板，卸载

说实话，以前我觉得Eslient很烦，

后来要维护别人的代码的时候，才发现Eslient很棒

最后的最后发现，理解Eslient的人，没有它也写得工工整整，不理解的朋友，全部代码都红都不会看一眼，伤害的只有自己

npm uninstall eslint --save

2.4 其他办法

2.4.1 关闭软件webstorm 的ESlint

file->settings->搜索ESlint->取消Enable的勾选

 



2.4.2 注释掉项目内的ESlint

项目目录下build.js->webpack.base.conf.js文件里面有段代码  注释掉！！！



 

Vue ui 创建Vue前端工程
1.开启vue ui 服务
2.访问 vue ui 界面
3.创建项目
4. 添加 element-ui 插件
4.添加依赖
4.启动 Vue 项目
5.访问 Vue 项目

1.开启vue ui 服务
快捷键 win+r 打开 cmd 输入下面命令
vue ui

2.访问 vue ui 界面
打开浏览器,地址栏输入 localhost:8080
3.创建项目
点击创建



选择你要创建的项目目录,点击 在此创建新项目



输入项目名称,包管理器选择 npm, git 命令填写 init project , 点击下一步



选择手动


把format 去掉, 选中 router, 选中使用配置文件, 点击下一步



点击创建项目

点击创建项目,不保存预设

4. 添加 element-ui 插件
先点击左侧导航栏 插件,再点击右上角 添加插件



**搜索  element ,先选中 如图矩形框中的内容,版本不一致没关系, 再点击右下角 安装 **



**安装完成后点击  完成安装  **


4.添加依赖


添加 axios 依赖

点击左侧导航条 依赖

点击右上角 安装依赖



搜索框输入 axios ,选中内容如图所示, 再点击 右下角的 安装




安装 less-loader 依赖

如上图一样,搜索框中输入 less-loader,再点击右下角安装




3.安装 less 依赖

如上图一样,搜索框中输入 less,再点击右下角安装


到这里所有安装都结束了,接下来启动 Vue 项目
4.启动 Vue 项目
如图操作即可


5.访问 Vue 项目
浏览器地址栏输入  localhost:8080

如果界面和下图一样说明成功