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 【小拾岁月】
 
扫码：
 
 
 

 
 
 
       今日，bug君就为大家带来一篇，在eclipse中如何快速通过导入web项目及Tomcat 部署，超级详细；
 具有很好的参考价值，一起跟我往下看吧，好好看好好学，学不废请顺着网线来抡我，话给你撂这儿了。
                                               全网独家，帝王级硬货！强烈建议点赞收藏！
        如果最后觉得文章对你有所帮助，请不要吝啬你的赞，直接pia的点亮就完啦 up up up！！！
 
 
【01】打开eclipse，单击左上角的File,File–>Import
 
 【02】打开General–>Existing projects into Workspace–>Browse（选择需要打开的项目）
 注意：记得勾选下方【copy project into project】
 目的：为了复制一份项目到工作区间，这样就不会造成原项目被修改，如果直接开发那就不需要，直接操作源文件即可。
 提醒：如果是超大项目，复制项目则会耗时较长！
 
 【03】所有不是在自己电脑上开发的web项目，都需要重新配置一下，单击项目右键，打开Projects【快捷键：alt+enter】
 
 【04】打开Java Bulid Path–>Libralies–>选择JRE System Library [jre 1.8]–>Edit–>选择中间这个Alternate JRE–>选择本地配置的jre版本
 【05】继续在Project页面，找到Java compiler 直接选择apply–>Compiler compliance level 选择你自己的版本，我Windows系统安装的jdk1.8，你们按系统来，是什么版本就选什么版本；
 
 
 【06】单击Project Facts -->如下图，java选择自己的jdk版本；
 直接点击ok，右下角会有进度条编译项目，稍等片刻
 
 【06-1】如果是web项目，必须把【Dynamic Web Module 】勾选上，要不然下方无法选择servers服务！
 
 【07】如果项目包上还有问题，项目上有个红xx，有可能是因为你的Tomcat里的severlt的包没有识别；怎么解决呢？就是在你项目单击右键，打开Project–>选择Java Bulid Path–>打开Libralies -->选择Add External JARs 打开
 
 【07-1】找到你安装tomecat解压的那个文件夹，打开子目录下的lib文件夹，找到servlet-api.jar 直接选择打开即可；
 
 【07-2】选择打开之后，你能看到jar包已经导进来了！
 
 点击Apply，最后点击ok，项目就成功导入了！
 
【08】调试阶段，针对不同的项目可能会在不同版本的Tomcat下运行，所以如果报诸如的tomcat无法运行的错误，是由于引入了tomcat不匹配本地tomcat版本的servlet.api.jar报错，引用中的是表示当前环境没有配置tomcat8，所以还需要把项目配置成本地安装的tomcat版本。
 
 
 
Description Resource Path Location Type Target runtime Apache Tomcat v8.0 is not defined. AttendanceManager Unknown Faceted Project Problem
 
 
【08-1】具体操作如下：选择本地的tomcat版本；
 
 【09】接着找到servers双击打开tomcat ，打开tomcat的配置项，这个一般都是自动配好的，选择本地服务器，修改以下两个配置项，Tomcat保持启动状态，localhost；记得Server Locations选第二个;最后点击ok，web项目就可以在自己的本地跑起来了。
 
 
 【09-1】如果发现没有 server 这个选项，你可以 Windows -->show View -->other -->搜索server ，如下图，最后点击 ok即可!
 
 【10】此时Eclipse将自动生成Servers工程，选择项目，最后点击Finish，大功告成！
 
 【11】等待tomcat启动完成就可以了，就可以在浏览器里输入url 地址，访问web。
 
 
 
 
为了帮助更多同学从零基础转型职场java开发工程师，特地从CSDN官方那讨来了一套 《Java 工程师学习成长知识图谱》！
 官方出品,必属精品！有兴趣的小伙伴可以了解一下！特价优惠，限时限量，抓紧时间哦~
 
 
 
 
 
 
❤  如果文章对您有所帮助，就请在文章末尾的左下角把大拇指点亮吧！(#.#)；<
 ❤  如果喜欢bug菌分享的文章，就请给bug菌个关注吧！(๑′ᴗ‵๑)づ╭❤～；
 ❤  对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】；
 ❤  鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复参与讨论(请勿发表攻击言论）；
 ———————————————————————————————-----------------------------------------
 版权声明：本文为CSDN博主「bug菌」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://luoyong.blog.csdn.net/article/details/84936379
 
 
 

 python项目练习一：即时标记
 python项目练习二：画幅好画
 python项目练习三：万能的XML
 python项目练习四：新闻聚合
 python项目练习五：虚拟茶话会
 python项目练习六：使用CGI进行远程编辑
 python项目练习七：自定义公告板
 python项目练习八：使用XML-RPC进行远程文件共享
 python项目练习九：文件共享2-GUI版本
 python项目练习十：DIY街机游戏