项目整合 - 课程管理模块和课程内容管理模块
前后端分离架构
前后端分离已成为互联网项目开发的业界标准使用方式，将前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、微服务架构、多端化服务（各种客户端，比如浏览器、车载终端、安卓、IOS等）打下坚实的基础。
前后端分离的核心思想就是前端HTML页面通过AJAX调用后端的API接口，并通过JSON数据进行交互。
接口文档
什么是接口文档
在我们的项目中使用的是前后端分离开发方式，需要由前后端工程师共同定义接口，编写接口文档，之后大家都根据这个接口文档进行开发，到项目结束前都要一直进行接口文档的维护。
一个接口的描述至少包括下面几项:
-
名称: findCourseList
-
描述: 根据条件查询课程信息
-
请求方式: GET
-
请求参数
methodName:"findCourseList";
- 响应结果
{
"status": "0",
"msg": "success"
}
-
-
JSP页面必须要在支持Java的WEB服务器上运行（如Tomcat、Jetty等），无法使用Nginx等（官方宣称单实例HTTP并发高达5W），性能提升不上来。
-
-
-
前后端分离可以减少后端服务器的并发/负载压力。除了接口以外的其他所有HTTP请求全部转移到前端Nginx上，接口的请求则转发调用Tomcat.
-
前后端分离的模式下，即使后端服务器暂时超时或宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
-
| 前端技术 | |
|---|---|
| Vue.js | 是一套用于构建用户界面的渐进式JavaScript框架 |
| Element UI库 | element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，<br>方便程序员进行页面快速布局和构建 |
| node.js | 简单的说 Node.js 就是运行在服务端的 JavaScript 运行环境 . |
| axios | 对ajax的封装, 简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装， |
| 后端技术 | 说明 |
|---|---|
| Web层 | a) Servlet：前端控制器<br />b) Filter：过滤器 <br />c) BeanUtils：数据封装 |
| Service层 | a) 业务处理 |
| dao层 | a) Mysql：数据库<br />b) Druid：数据库连接池<br />c) DBUtils: 操作数据库 |
-
-
远程仓库: 需要联网才可以使用的仓库，阿里提供了一个免费的maven 远程仓库。
-
中央仓库: 在 maven 软件中内置一个远程仓库地址 http://repo1.maven.org/maven2
1) 打开 settings.xml,找到 <mirrors> 标签 , 下面的内容复制到 <mirrors> 中 即可
<mirror> <id>alimaven</id> <name>aliyun maven</name> <url> http://maven.aliyun.com/nexus/content/groups/public/ </url> <mirrorOf>central</mirrorOf> </mirror>
2)一个Maven工程就是由groupId，artifactId和 version 作为唯一标识, 我们在引用其他第三方库的时候，也是通过这3个变量确定。
-
坐标的概念
-
在maven中坐标就是为了定位一个唯一确定的jar包。
-
maven世界拥有大量构建，我们需要找一个用来唯一标识一个构建的统一规范，拥有了统一规范，就可以把查找工作交给机器
-
-
Maven坐标主要组成(GAV) - 确定一个jar在互联网位置
| 标签 | 含义 |
|---|---|
| groupId | |
| artifactId | 定义实际项目名称 |
| version | 定义当前项目的当前版本 |
| packaging | 打包类型<br />jar：执行 package 会打成 jar 包 war：执行 package 会打成 war 包 |
| dependency | 使用 <dependency>声明一个依赖后，Maven就会自动下载这个依赖包 |
3)maven 的依赖管理, 是对项目所依赖的 jar 包进行统一管理。
| 标签 | |
|---|---|
| dependencies | 表示依赖关系 |
| dependency | 使用 <dependency>声明一个依赖后，Maven就会自动下载这个依赖包 |
<!-- properties 是全局设置,可以设置整个maven项目的编译器 JDK版本 --> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <!-- 重点 --> <maven.compiler.source>11</maven.compiler.source> <maven.compiler.target>11</maven.compiler.target> </properties> <!-- 在build中 我们需要指定一下项目的JDK编译版本,maven默认使用1.5版本进行编译 注意 build 与 dependencies是平级关系,标签不要写错位置 --> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.1</version> <configuration> <release>11</release> </configuration> </plugin> </plugins> </build>
maven 通过执行一些简单命令即可实现上边生命周期的各个过程
| 命令 | |
|---|---|
| mvn compile | 完成编译操作 , 执行完毕后，会生成target目录，该目录中存放了编译后的字节码文件。 |
| mvn clean | 执行完毕后，会将target目录删除. |
| mvn test | 执行完毕后，会在target目录中生成三个文件夹：<br />surefire、surefire-reports（测试报告）、test-classes（测试的字节码文件） |
| mvn package | 完成打包操作, 执行完毕后，会在target目录中生成一个文件，该文件可能是 jar、war |
| mvn install | 执行 mvn install命令，完成将打好的jar包安装到本地仓库的操作 ,<br /> 执行完毕后，会在本地仓库中出现安装后的jar包，方便其他工程引用 |
1.根据pom.xml文件重新导入所有Maven项目和依赖,刷新
2.创建源码（重新编译）并更新目录
3.下载源码或文档
4.添加Maven项目
5.执行生命周期中的阶段，选中lifecycle选项中生命周期中的一个阶段（phase），才能点击执行。
6.运行Maven生命周期或插件
7.切换离线模式，就是关闭和远程仓库的链接，从本地仓库中获取，也不能将jar包提交到远程仓库
8.是否跳过测试，点击选中就可以跳过测试，在点击选择取消跳过测试
9.展示当前选中的maven项目jar包的依赖，并且可以直接在图形化依赖图上进行排除依赖操作
10.收起下面展开的视图
11.跳转到maven的Setting页面
A 依赖 B，需要在 A 的 pom.xml 文件中添加 B 的坐标，添加坐标时需要指定依赖范围，依赖范围包 括：
| 依赖范围 | |
|---|---|
| compile | 编译范围，指 A在编译时依赖 B，此范围为默认依赖范围。编译范围的依赖会用在 编译、测试、运行，由于运行时需要所以编译范围的依赖会被打包。 |
| provided | provided 依赖只有在当 JDK 或者一个容器已提供该依赖之后才使用， provided 依 赖在编译和测试时需要，在运行时不需要，比如：servlet api 被 tomcat 容器提供。 |
| runtime | runtime 依赖在运行和测试系统的时候需要，但在编译的时候不需要。比如：jdbc 的驱动包。由于运行时需要所以 runtime 范围的依赖会被打包。 |
| test | test 范围依赖 在编译和运行时都不需要，它们只有在测试编译和测试运行阶段可用， 比如：junit。由于运行时不需要所以test范围依赖不会被打包。 |
| system | system 范围依赖与 provided 类似，但是你必须显式的提供一个对于本地系统中 JAR 文件的路径，需要指定 systemPath 磁盘路径，system依赖不推荐使用。 |
Lombok常用注解
-
-
@ToString : 作用于类，覆盖默认的toString()方法 ,可以通过of属性限定显示某些字段，通过exclude属性排除某些字段
-
@AllArgsConstructor：生成全参构造器
-
@NoArgsConstructor：生成无参构造器
-
@Data: 该注解使用在类上，该注解会提供
getter、setter、equals、hashCode、toString方法。
-
-
JSON采用完全独立于语言的文本格式，就是说不同的编程语言JSON数据是一致的。
-
XML与JSON的区别
-
XML : 可扩展标记语言，是一种用于标记电子文件使其具有结构性的标记语言。
-
JSON: (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
-
相同点:
-
它们都可以作为一种数据交换格式。
-
-
二者区别:
-
XML是重量级的，JSON是轻量级的,XML在传输过程中比较占带宽，JSON占带宽少，易于压缩。
-
XML和json都用在项目交互下，XML多用于做配置文件，JSON用于数据交互
-
JSON独立于编程语言存在,任何编程语言都可以去解析json
-
-
-
数据以"键：值"对的形式出现（其中键多以字符串形式出现，值可取字符串，数值，甚至其他json对象）
-
每两个"键：值"对以逗号分隔（最后一个"键：值"对省略逗号
4. 参数值如果是string类型，就必须加引号，如果是数字类型，引号可加可不加
遵守上面4点，便可以形成一个json对象。
-
-
FastJson特点如下：
-
能够支持将java bean序列化成JSON字符串，也能够将JSON字符串反序列化成Java bean。
-
顾名思义，FastJson操作JSON的速度是非常快的。
-
-
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.3</version> </dependency> <dependency> <groupId>com.colobu</groupId> <artifactId>fastjson-jaxrs-json-provider</artifactId> <version>0.3.1</version> </dependency>
-
指定name属性, 字段的名称
-
使用 ordinal属性, 指定字段的顺序
-
-
-
可以使用 JSON.parseObject() 将 JSON 字符串转换为 Java 对象。
-
注意反序列化时为对象时，必须要有默认无参的构造函数，否则会报异常
-
-
JSON.parseArray()
-
可以使用 JSON.parseArray() 将 JSON 字符串转换为 集合对象。
-
总结一
https://static.app.yinxiang.com/embedded-web/profile/#/join?guid=4164390e-85f8-4191-b5de-81c4dff77cec&channel=copylink&shardId=s71&ownerId=33307020
逻辑删除
-
逻辑删除的本质是修改操作
物理删除
-
物理删除就是真正的从数据库中做删除操作了。
我们在做的是一个前后端分离项目、需要通过接口文档对接的项目. 所以开发过程中要仔细查看前端所需的api接口和参数字段
| 2、post请求时有三种数据格式，可以提交form表单数据 和 Json数据（ContentType=application/json），文件等多部件类型（multipart/form-data）三种数据格式 . jsonl类型的数据 Servlet中使用 fastjson进行解析 |
| 3、响应结果统一格式为json |
| 1、get 请求时，采用key/value格式请求，Servlet中可以使用 getParameter() 获取。 |
| 2、post请求时有三种数据格式<br />第一种: Json数据 ,jsonl类型的数据 Servlet中使用 fastjson进行解析<br />第二种: 提交form表单数据<br />第三种: 文件等多部件类型（multipart/form-data） |
| 3、响应结果统一格式为json |
为什么使用JSON?
数据格式比较简单, 易于读写, JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护
本项目使用的是 JSON解析工具为阿里巴巴的fastjson, maven工程导入下面的依赖即可.
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.1.37</version> </dependency> <dependency> <groupId>com.colobu</groupId> <artifactId>fastjson-jaxrs-json-provider</artifactId> <version>0.3.1</version> </dependency>
文件上传的实质：文件的拷贝
-
文件上传：从本地将文件拷贝到服务器磁盘上
-
客户端: 需要编写文件上传表单
-
服务端: 需要编写代码接受上传的 文件
-
文件上传三要素:
-
-
2.表单的enctype属性:必须设置为 multipart/form-data.
-
enctype就是encodetype就是编码类型的意思.
-
multipart/form-data是多部件文件上传 , 指表单数据有多部分构成，既有文本数据，又有文件等二进制数据的意思。
-
-
3.表单必须有文件上传项: file ,必须要有name属性和值
注意: 默认情况下，表单的enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <%-- 表单提交必须是POST , 表单的enctype属性:必须设置为 multipart/form-data. input的type类型必须指定为: file, 一定要有name属性 --%> <form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data"> <input type="file" name="upload"> <br> <input type="text" name="name"> <input type="text" name="password"> <input type="submit" value="文件上传"> </form> </body> </html>
-
-
解析请求体 多部件上传的特点是,每个input都是一个表单项.
根据分隔符将请求中所有的内容,切割成数组,数组中的每一个元素 都是一个表单项
-
遍历数组,分清楚那个是普通的表单项, 哪个是 文件上传项
如何区分? 判断是否有 filename
-
获取到普通表单项中的内容,通过属性name获取
-
获取文件上传项内容
文件名: filname = aaa.txt
文件内容:
-
FileUpload包可以很容易地将文件上传到你的Web应用程序.
<dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.1</version> </dependency>
| 类名 | 介绍 |
|---|---|
| DiskFileItemFactory | 磁盘文件项工厂, 读取文件时相关的配置,比如: 缓存的大小 , 临时目录的位置 |
| ServletFileUplaod | 文件上传的一个核心类 |
| FileItem |
| 方法 | |
|---|---|
| isMultipartContent(request); | 判断是否是一个文件上传的表单 |
| parseRequest(request); | 解析request获得表单项的集合 |
| setHeaderEncoding("UTF-8"); | 设置上传的文件名的编码方式 |
FileItem
| 方法 | 说明 |
|---|---|
| isFormField() | 判断是否是普通表单项 |
| getFieldName() | 获得表单的name属性值 |
| item.getString() | 获得表单的value值 |
| getName() | 获得上传文件的名称 |
| getInputStream() | 获得上传文件 |
| delete() | 删除临时文件 |
1、创建磁盘文件项工厂
2、创建文件上传的核心类
3、解析request---获得文件项集合
4、遍历文件项集合
5、判断普通表单项/文件上传项
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { try { //1.创建磁盘文件项工厂 DiskFileItemFactory factory = new DiskFileItemFactory(); //2.创建文件上传核心类 ServletFileUpload upload = new ServletFileUpload(factory); //2.1 设置上传文件名的编码 upload.setHeaderEncoding("utf-8"); //2.2 判断表单是否是文件上传表单 boolean multipartContent = upload.isMultipartContent(req); //2.3 是文件上传表单 if(multipartContent){ //3. 解析request ,获取文件项集合 List<FileItem> list = upload.parseRequest(req); if(list != null){ //4.遍历获取表单项 for (FileItem item : list) { //5. 判断是不是一个普通表单项 boolean formField = item.isFormField(); if(formField){ //普通表单项, 当 enctype="multipart/form-data"时, request的getParameter()方法 无法获取参数 String fieldName = item.getFieldName(); String value = item.getString("utf-8");//设置编码 System.out.println(fieldName + "=" + value); }else{ //文件上传项 //文件名 String fileName = item.getName(); //避免图片名重复 拼接UUID String newFileName = UUIDUtils.getUUID()+"_"+ fileName; //获取上传文件的内容 InputStream in = item.getInputStream(); String path = this.getServletContext().getRealPath("/"); //获取到 webapps路径 String webappsPath = path.substring(0, path.indexOf("lagou_edu_home")); OutputStream out = new FileOutputStream(webappsPath+"/upload/"+newFileName); //拷贝文件到服务器 IOUtils.copy(in,out); out.close(); in.close(); } } } } } catch (FileUploadException e) { e.printStackTrace(); } }
<dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> <version>1.8.3</version> </dependency>
BeanUtils 对象常用方法
| 方法 | 描述 |
|---|---|
| populate(Object bean, Map properties) | 将Map数据封装到指定Javabean中，<br />一般用于将表单的所有数据封装到javabean |
| setProperty(Object obj,String name,Object value) | 设置属性值 |
| getProperty(Object obj,String name) | 获得属性值 |
传统的网页如果需要更新内容，必须重载整个网页页面。每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。这种方式的缺点是:
-
性能会有所降低 (一点内容，刷新整个页面！)
-
什么是Ajax
Ajax是客户端与服务器进行交互时，可以【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术
Ajax 的作用
-
-
无刷新更新页面，减少用户的实际和心理的等待时间。
-
只更新部分页面，有效利用带宽
-
异步与同步
-
-
同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作
-
异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作
-
使用ajax发请求，使用ajax接收响应，使用JS进行页面刷新。
-
缺点:
-
若使用JS的AJAX技术，为了实现简单功能，就需要书写大量复杂代码。
-
JS的AJAX代码，浏览器兼容性比较差。
-
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>new jsp</title> <script> function run() { //1.创建 核心对象 var xmlhttp; //2.判断浏览器类型 if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //3.建立连接 /** * 三个参数: * 1.请求方式 get post * 2.请求资源的路径 * 3.是否为异步 是 or 否 */ xmlhttp.open("GET","/login?username=tom",true); //4.发送请求 xmlhttp.send(); //5.获取响应结果 /** * 什么时候获取响应数据? * 在服务器响应成功后获取 */ //监听readyState状态改变 xmlhttp.onreadystatechange=function() { //readyState==4 响应已经就绪, 200 访问成功 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //获取响应数据 var text = xmlhttp.responseText; alert(text); } } } </script> </head> <body> <input type="button" value="发送异步请求" onclick="run()"><br> 局部刷新 <input type="text"> </body> </html>
与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种：POST GET AJAX
$.get(url,data,callback,type)
-
参数1:
url请求路径 -
参数2:
data请求时携带的数据 格式:key=value或者 {username=’baby’,pwd:666} -
参数3:
callback响应成功后的回调函数 -
参数4:
type
//JQuery get方式发送异步请求 function run2() { //1.参数1 url var url = "/login"; //2.参数2 数据 var data = {username:"jack"}; //3.发送get请求 $.get(url,data,function (param) { //data响应回来的内容体 alert("响应成功! 响应数据: " + param); },"text"); }
Post请求方式语法
$.post(url,data,callback,type) 里面的四个参数和get方式是一样, 不一样的是请求方式的不同
//JQuery post方式发送异步请求 function run3() { //1.参数1 url var url = "/login"; //2.参数2 数据 var data = {username:"lucy"}; //3.发送get请求 $.post(url,data,function (param) { //data响应回来的内容体 alert("响应成功! 响应数据: " + param); },"text"); }
ajax请求方式语法:
-
方式1: jQuery.ajax({[settings]})
-
方式2: $.ajax({})
settings是一个js字面量形式的对象，格式是键值对{name:value,name:value }，常用的name属性名如下：
//Ajax方式 发送请求 function run4() { $.ajax({ url:"/login", async:true, //是否异步 data:{username:"tom"}, type:"POST", //请求方式 dataType:"text", //返回数据的数据类型 success:function (param) { alert("响应成功!! " + param) }, error:function () { alert("响应失败!!") } }); }
