java图书管理系统（前后端分离后）

学习java web基础的时候大家应该都知道，最传统的Java Web应用程序是采用JSP、Servlet、Javabean来实现的，这种模式实现了最基本的MVC分层，使的程序结构有负责前台展示的 JSP、负责流程逻辑控制的Servlet以及负责数据封装的Javabean，但是这种结构存在问题如JSP页面中需要使用符号嵌入很多的 Java代码，造成页面结构混乱，Servlet和Javabean负责了大量的跳转和运算工作，耦合紧密，程序复用度低等。

一、前后端分离

本项目源码Git地址：
前端应用：https://github.com/liuwen766/MyBookManagementVue.git
后端应用：https://github.com/liuwen766/MyBookManagementSpringboot.git
这是进行前后端分离的项目（解耦），用于了解java web前后端分离开发流程。
如果不用Git，项目源码csdn地址：https://download.csdn.net/download/qq_41822345/12225719

前后端分离简单来说就是把一个应用的前端代码和后端代码分开写，更多有关前后端分离详细请看：https://blog.csdn.net/qq_41822345/article/details/104403807

前端开发人员只需提前与后端开发人员约定好借口文档（URL、参数、数据类型、…），然后分别独立开发即可。前端人员使用mock模拟数据进行测试，完全不需要依赖后端，后端也只是仅仅是提供数据接口。从设计、编码、测试到部署，前后端都完全独立，这才是真正实现了前后端解耦，极大地提高了开发效率。

• 传统的单体应用→现在的前后端分离：前端应用+后端应用，前端应用负责提供展示与用户交互，后端应用提供数据接口，如下图所示：。

• 前后端分离的核心思想是前端HTML页面通过AJAX调用后端的Restful API接口并使用JSON数据进行交互。

二、实现技术

eg：Spring Boot+VUE。使用 springboot进行后端应用开发，使用VUE进行前端应用开发。
VUE框架是一个可以独立完成前后端分离式web项目开发的JavaScript框架。

1.vue安装与启动

npm uninstall vue-cli -g      // 卸载vue-cli旧版本（3.0以后的版本可以界面创建vue工程）
npm install -g @vue/cli      // 安装vue-cli4.22（最新版本）
vue -V                  // 查版本
vue ui                  //启动一个vue工程  （ctrl c可以终止命令）

启动之后如下图:

2.创建一个Vue工程

• step1：创建
  
• step2：选择手动配置
  
• step3:打开Router和Vuex，关闭Linter/Formatter
  
• step4:打开历史记录
  
• step5：创建项目，不保存预设
  
  正在创建项目ing…
  
  创建完毕，如图所示：
  
• step6：可以自己运行测试一下
  

3.IDEA启动Vue工程

• step1：import刚刚创建的Vue工程
  
• step2：安装Vue.js插件（安装该插件才可以在idea中进行Vue编程）
  
• step3：将JavaScript版本上调为6（Vue工程不支持版本6之前的版本）
• step4：命令行启动Vue工程

npm run serve

• 启动成功如图：Vue前端是一个单页面应用。至此，可以进行自己的项目开发了。
  

三.图书管理系统开发

• 1.前端应用开发
  
  step1：安装插件

npm run serve                  //启动本vue工程
npm install --save element-ui  //安装element-ui插件 （之前需要在vue的ui界面中添加该插件）
vue add axios                  //添加axios插件
npm install --save axios       //安装axios插件（这样才能使用ajax）

step2：根据element-ui文档写好前端页面布局

• 2.后端应用开发
  
  Spring Data JPA 可以大大简化后端CRUD的编码！
  分别启动两个前后端应用，结果如下：

总结：可以看出，前端后端两个应用在整个软件设计过程中：设计、编码、测试、部署，都是各自完全独立的，这就是前后端分离的结果。

有关前后端分离的理解请点击：
https://blog.csdn.net/qq_41822345/article/details/104403807