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

扫码：



 

PS:从eclipse刚转到IDEA，对于这个陌生的工具我表示无言，但听说很好用，也就试试，结果我几乎花了一晚上的时间才搭起来maven web项目，觉得在此给各位一个搭建maven web项目的教程，指出我踩过的各种坑！

步骤一：首先先创建一个project,在这里就是创建一个maven的工作空间



步骤二：按照下面的步骤操作就可以了，最后next

首先，选择左边的maven

然后在右边Creater from archetype选项前面打个勾，

最后选择maven-archetype-webapp（这里不知道是我IDEA的问题还是什么原因，我打webapp搜索它只给出第一个，所以在这个坑上耗了几乎1个小时，都选择了第一个）



步骤三：就简单了，填写你的GroupId跟ArtifictId（瞎写都没问题，当然不建议哈，这里GroupId一般写公司名，ArtifictId一般我写项目名）



步骤四：配置自己的maven，然后next



 

步骤五：直接finish，没什么坑哈



 

步骤六：喝杯咖啡，泡杯茶稍安勿躁，等一等（此时目录结构还没出来，我好几次这里没等就百度乱整，直接整坏了）

ps:由于有些idea设置问题可能不会自动导入jar包，这个时候点击右下角的提示Import Changes就可以导包拉



 

步骤七：等出结果，如果目录结构还不出来直接按图操作一波



步骤八：项目的基本目录结构出来后我们最后还需要为项目配置下编译路径还有artifact，按图操作把



出现下图（如果Modules里面已经生成web项目，且之后得Artifacts里面也不是空的，则直接到步骤九）



接着设置Artifacts



选择我们的项目



到了这里再配置tomcat跑下基本就ok了！

步骤九：配置Tomcat，上面目录结构都出来了基本就没有坑了，现在我们给它配置个tomcat---按图操作吧



出现这个画面，然后按图再操作一波



接着出现这个画面，继续看图操作



然后你选择右边第二个选项，Deployment，还是看图操作。。。



最后点击ok完成Tomcat配置，现在就可以启动tomcat跑跑我们的helloWorld了！

 

步骤十：启动tomcat，看效果



启动完idea一般会自动通过默认浏览器打开http://localhost:80/,如果没有就直接在直接的浏览器打这个地址，注意我这里tomcat自己设置了80端口



 

ps:我第二次搞的时候遇到端口被占用的情况也顺带贴出来，自己看图操作把

1.调出系统cmd窗口

2.通过netstat -ano|findstr 1099查询是哪个pid占用了端口

3.通过taskkill /f /t /im 13120直接结束掉占用端口的进程，搞定...



"有用打个赏吧"



 

 

    在weblogic中部署项目通常有三种方式：第一，在控制台中安装部署；第二，将部署包放在domain域中autodeploy目录下部署；第三，使用域中配置文件config.xml 进行项目的部署。

 

控制台部署

 

1  启动weblogic服务，登录到weblogic控制台页面，输入用户名和密码，登录到控制台里面



 

2  点击左侧的部署



 

3  在右侧点击安装按钮，准备进行项目安装



 

4  看到路径输入框，可以在下面选择要部署的项目的位置



 

5  也可以直接输入要部署的包的位置，敲回车



 

6  点击下一步即可



 

7  继续下一步



 

8  点击完成按钮



 

9   保存前面各步的设置



 

10  保存完成后，会看到激活更改的提示，且不需要重启。



 

11  这时便可以进行测试了，输入项目名称，看到了项目的欢迎页面，即项目部署成功。



 

如果前面的步骤操作完成了，但依然无法访问项目的话，可以参考下面的补充步骤

补充步骤

补1  点击部署，勾选上项目，点击启动



 

补2  待启动后，项目状态为活动，健康状况为OK时，继续测试。



 

autodeploy自动部署

 

自动部署时不需要登录控制台，在domain域的主目录下面有个autodeploy目录，直接将项目包拷贝到autodeploy目录下面就可以了。

autodeploy目录里面有个readme.txt 文档，打开看一下，这里摘第一段出来

 

This autodeploy directory provides a quick way to deploy applications
to a development server. When the WebLogic Server instance is running
in development mode, applications and modules in this directory are 
automatically deployed.



主要说什么呢，就是开发模式下面，当weblogic启动时，会自动部署autodeploy目录下面的项目。

 

将部署包servletDemo.war 丢到autodeploy目录下面，启动startWeblogic.cmd ，进行servletDemo的访问，依然可以看到



欢迎页面。

 

config.xml配置文件部署

 

config.xml文件在domain域的config目录下面，config.xml主要配置了domain域的一些相关信息

我们要部署项目，该在哪里配置呢

 

<?xml version='1.0' encoding='UTF-8'?>
<domain xmlns="http://xmlns.oracle.com/weblogic/domain" xmlns:sec="http://xmlns.oracle.com/weblogic/security" xmlns:wls="http://xmlns.oracle.com/weblogic/security/wls" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.oracle.com/weblogic/security/xacml http://xmlns.oracle.com/weblogic/security/xacml/1.0/xacml.xsd http://xmlns.oracle.com/weblogic/security/providers/passwordvalidator http://xmlns.oracle.com/weblogic/security/providers/passwordvalidator/1.0/passwordvalidator.xsd http://xmlns.oracle.com/weblogic/domain http://xmlns.oracle.com/weblogic/1.0/domain.xsd http://xmlns.oracle.com/weblogic/security http://xmlns.oracle.com/weblogic/1.0/security.xsd http://xmlns.oracle.com/weblogic/security/wls http://xmlns.oracle.com/weblogic/security/wls/1.0/wls.xsd">
  <name>base_domain</name>
  <domain-version>12.1.3.0.0</domain-version>
  <security-configuration>
    <name>base_domain</name>
    <realm>
      <sec:authentication-provider xsi:type="wls:default-authenticatorType">
        <sec:name>DefaultAuthenticator</sec:name>
      </sec:authentication-provider>
      <sec:password-validator xmlns:pas="http://xmlns.oracle.com/weblogic/security/providers/passwordvalidator" xsi:type="pas:system-password-validatorType">
        <sec:name>SystemPasswordValidator</sec:name>
        <pas:min-password-length>8</pas:min-password-length>
        <pas:min-numeric-or-special-characters>1</pas:min-numeric-or-special-characters>
      </sec:password-validator>
    </realm>
    <default-realm>myrealm</default-realm>
    <credential-encrypted>{AES}xLPXh4gcT6JErTB+toxRZ1pQpAS+MGMuqnnXzu/OsxWMQTB8152ggdbUlhkSXUGC9f959oL7tIzyZiu9XdeajlkK9vAu9cQlCKLLUaUMyl5Ty4C0uuJA99b14eR7oIu4</credential-encrypted>
    <node-manager-username>weblogic</node-manager-username>
    <node-manager-password-encrypted>{AES}n3LLdgmAsocPRoYUrFfR2waWOlEz6KDFsp7+gByNeo8=</node-manager-password-encrypted>
  </security-configuration>
  <server>
    <name>AdminServer</name>
    <listen-address></listen-address>
  </server>
  <embedded-ldap>
    <name>base_domain</name>
    <credential-encrypted>{AES}21z8vCiCbuaYqsSj5t5+y6qvEY8dE3NdNr0zDG+K3EdwWEubzk9Vmx79Di43oxqX</credential-encrypted>
  </embedded-ldap>
  <configuration-version>12.1.3.0.0</configuration-version>
  <admin-server-name>AdminServer</admin-server-name>
</domain>



我们的项目部署信息添加在configuration-version 和 admin-server-name 之间

 

 

<configuration-version>12.1.3.0.0</configuration-version>
  <app-deployment>  
	<name>servletDemo</name>  
	<target>AdminServer</target>  
	<module-type>war</module-type>  
	<source-path>C:\Users\ZhangQi\Desktop\servletDemo</source-path>  
	<security-dd-model>DDOnly</security-dd-model>  
  </app-deployment>
  <admin-server-name>AdminServer</admin-server-name>

 

刚开始进行config.xml 配置文件部署的时候，出现了404，修改了下配置就可以了

将部署的war包解压为文件夹的形式，然后

将 <module-type>war</module-type> 里面的war 修改为 dir 即可

 

<app-deployment>  
	<name>servletDemo</name>  
	<target>AdminServer</target>  
	<module-type>dir</module-type>  
	<source-path>C:\Users\ZhangQi\Desktop\servletDemo</source-path>
	<security-dd-model>DDOnly</security-dd-model>
	<staging-mode>nostage</staging-mode>
  </app-deployment>

 

 

 

然后启动weblogic服务即可。

 

 

 

 

三种部署方式都能达到部署项目的目的，至于三种部署方式的利弊，明天再说说吧。

今天太晚了，睡觉了，晚安！

 

 

文章整理与2015年，当时的方法都是亲测可行的。最近看到有很多同学发现文章中方法无效，可能有几点原因：1、本人当时未遇到与您相似的问题；2、weblogic技术升级导致。整理博文是希望可以帮到有类似问题的您，如果未能帮到您，别喷。2021-1-14 15:03:24