JavaWeb回顾与小结(二)
Ajax
Ajax介绍
概念
Asynchronous JavaScript And XML,异步的JS和XML
作用
- 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术
原生Ajax
准备数据地址
- 创建XMLHttpRequest对象:用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应数据
Axios介绍&使用
介绍
Axios是对原生Ajax进行了封装,简化书写,快速开发
入门
引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>
使用Axios发送请求,并获取响应结果
axios.get("http://yapi.smart-xwork.cn/").then((result) => {
console.log(result.data);
});
axios.post("http://yapi.smart-xwork.cn/","id=1").then((result) => {
console.log(result.data);
});
前后端分离开发
介绍
弊端
- 沟通成本高
- 分工不明确
- 不便管理
- 不便维护扩展
接口文档
- 原型+需求
- 指的是后端程序对外暴露的一个可以访问的入口,一个接口包括:url地址,请求方式,请求参数,响应结果示例
开发流程
- 需求分析
- 接口定义(接口文档)
- 前后端并行开发(遵守规范)
- 测试(前后端联调)
Yapi
介绍
Yapi是高效,易用,功能强大的api管理平台,旨在为开发,产品,测试人员提供更优雅的接口管理服务
http://yapi.smart-xwork.cn/
步骤
- 添加项目
- 添加分类
- 添加接口
- 编辑接口
- 高级mock
- 编写模拟数据
前端工程化
介绍
在企业级开发中,把前端开发所需的工具,技术,流程,经验等进行规范化,标准化
- 模块化
- 组件化
- 规范化
- 自动化
src文件
assets---静态资源
components---可重用的组件
router---路由配置
views---视图组件(页面)
App.vue---入口页面(根组件)
main.js---入口js文件
环境准备
依赖NodeJS
npm的全称是(Node Package Manager),是随同NodeJS一起安装的包管理和分发工具,它很方便让js开发者下载,安装,上传以及管理已经安装的包
Vue-cli是官方提供的脚手架
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
Vue项目简介
项目创建
-
方式一:命令行
vue create vue-project01 -
方式二:图形化界面(推荐)
vue ui
标准目录结构
node_modules---整个项目的依赖包
public---存放项目的静态文件
src---存放项目的源代码
package.json---模块基本信息,项目开发所需模块,版本信息
vue.config.js---保存vue配置的文件,如代理,端口的配置等
启动
- 方式一:图形化界面
- 方式二:命令行
npm run serve
配置端口
vue.config.js文件中修改项目启动的端口号
devServer:{
port:7000,
})
Vue项目开发流程
Vue的组件文件以vue结尾,每个组件由三个部分组成:
<template>内部必须只有一个根元素<script>编写JS代码<style>定义CSS样式
使用组件的三个步骤
- 步骤3:在
<template>中以标签形式使用刚才注册的组件
直接做步骤3,工具会自动补全1,2 - 步骤1:在
<script>标签中使用import语法导入需要的组件 - 步骤2:在export default中使用components节点注册组件
Vue组件库Element
介绍
是饿了么团队研发的,一套为开发者,设计师和产品经理准备的基于Vue2.0的桌面端组件库
组件
组成网页的部件,如超链接,按钮,图片,表格,表单,分页条等等
快速入门
- 在当前工程的根目录下,安装ElementUI组件库,在命令行执行命令
npm install element-ui@2.15.3 - 在main.js中引入ElementUI组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
- 创建views/element/ElementView.vue组件,访问ElementUI官网,复制组件代码
- 修改App.vue,加载ElementView.vue组件
常见组件
- 表格Table
- 分页Pagination
- 对话框Dialog
- 表单Form
Vue路由
介绍
Vue Router是Vue的官方路由
组成
VueRouter:路由器,根据请求路径在路由表中匹配对应的组件渲染<router-link>:链接组件,浏览器会解析成<a><router-view>:动态视图组件,用来渲染展示与路由路径对应的组件
步骤
- 安装(创建Vue项目时已选择,不用操作)
- 定义路由表
import router from './router'
打包部署
介绍
Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用
部署
将打包好的dist目录下文件,复制到nginx安装目录的html目录下
启动
双击nginx.exe文件,Nginx服务器默认占用80端口号
若被占用,在nginx.conf中修改端口号
Maven
一款用于管理和构建java项目的工具,其作用如下
- 依赖管理:方便快捷的管理项目依赖的资源(jar包),避免版本冲突问题
- 统一项目结构:提供标准,统一的项目结构
- 项目构建:标准跨平台(Linux,Windows,MacOS)的自动化项目构建方式
概述
结构模型和仓库
项目对象模型(POM)---依赖管理模型(Dependency)
仓库:用于存储资源,管理各种jar包
- 本地仓库:自己计算机上的一个目录
- 中央仓库:由Maven团队维护的全球唯一仓库
安装步骤
- 解压apache-maven-3.6.1.zip(路径中不要有中文)
- 解压maven_repository.zip(本地仓库)
- 打开apache-maven-3.6.1/conf中的settings.xml文件,在
<localRepository>标签中配置本地仓库 - 将maven的bin目录加入到系统Path环境变量
IDEA集成Maven
配置Maven环境
当前工程
- 选择IDEA中的file---Settings---Build,Execution,Deployment---BuildTools---Maven
- 设置IDEA使用本地安装的Maven,并修改配置文件及本地仓库路径
创建Maven项目
步骤
- 创建模块,选择Maven,点击Next
- 填写模块名称,坐标信息,点击finish,创建完成
- 编写HelloWorld,并运行
Maven坐标
- Maven中的坐标是资源(项目或者jar包)的唯一标识,通过该坐标可以唯一定位资源位置
- 使用坐标来定义项目或引入项目中需要的jar包
- 坐标主要组成GAV
groupId
定义当前Maven项目隶属组织名称(通常是域名反写,例如:com.itheima)
artifactId
定义当前Maven项目名称(通常是模块名称,例如order-service,goods-service)
version
定义当前项目版本号
导入Maven项目
方式一:
在IDEA总,选择右侧Maven面板,点击+号,选中对应项目的pom.xml文件,点击ok
方式二:
选择file---project structure---modules---import module,选中对应项目的pom.xml文件,点击ok
依赖管理
依赖管理
指当前项目中所需要的jar包,一个项目中可以引入多个依赖
- 在pom.xml中编写
<dependencies>标签 - 在
<dependencies>标签中使用<dependency>引入坐标 - 定义坐标的三要素:groupId,artifactId,version
- 点击刷新按钮
注意
如果引入的依赖,在本地仓库不存在,将会连接远程仓库/中央仓库,然后下载依赖.(这个过程比较耗时,耐心等待)
依赖传递
依赖具有传递性
直接依赖
在当前项目中通过依赖配置建立的依赖关系
间接依赖
被依赖的资源如果依赖其他资源,当前项目间接依赖其他资源
排除依赖
指主动断开依赖的资源,被排除的资源无需指定版本
<exclusion>
依赖范围
定义
依赖的jar包,默认情况下,可以在任何地方使用,可以通过
scope值
compile(默认)
主程序范围有效(main文件夹范围内)
99%坐标都不用写scope,默认compile
test
测试程序范围有效(test文件夹范围内)
provided
是否参与打包
生命周期
Maven构建项目生命周期描述的是一次构建过程经历经历了多少个事件/阶段
Maven中有3套互相独立的生命周期
- clean:清理工作
- clean
- default:核心工作如编译,测试,打包,安装,部署等
- compile,test,package,install
- site:生成报告,发布站点等
执行指定生命周期的两种方式
- 方式一:在idea中,右侧的maven工具栏,选中对应的生命周期,双击执行
- 方式二:在命令行中,通过命令执行
springboot
编写步骤
- 创建springboot工程,填写模块信息,并勾选web开发相关依赖
- 创建请求处理类,添加请求处理方法,并添加注解
- 运行启动类,打开浏览器测试
HTTP协议
概述
Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则
特点
- 基于TCP协议:面向连接,安全
- 基于请求-响应模型的:一次请求对应一次响应
- HTTP协议是无状态的协议:对于事务处理没有记忆能力,每次请求-响应都是独立的
缺点:多次请求间不能共享数据
优点:速度快
请求数据
格式
- 请求行:请求数据的第一行
- 请求头:从请求数据第二行开始,key/value键值对格式
- 请求体:POST请求才有,保存POST请求参数
携带参数
- GET请求参数在地址栏后面使用问号拼接
- POST请求参数在请求体中携带
响应数据
格式
- 响应行:响应数据第一行
- 响应头:从响应数据第二行开始,key.value键值对格式
- 响应体:响应正文
状态码
- 200:客户端请求成功,服务器也响应成功了
- 404:请求资源不存在,一般是客户端URL路径错了
- 500:服务器java代码发生了异常
Web服务器-Tomcat
简介
- Web服务器是一个软件程序,对HTTP协议的操作进行封装,使得程序员不必直接对协议进行操作,让Web开发更加便捷.主要功能是"提供网上信息浏览服务"
- tomcat,一个轻量级的web服务器,支持servlet,jsp等少量javaEE规范,Web项目部署到tomcat服务器中才可以被用户访问到
基本使用
- 绿色版解压使用,卸载可直接删除目录
- 启动tomcat
双击 bin\startup.bat - 关闭tomcat
直接关掉运行窗口(强制关闭)
bin\shutdown.bat(正常关闭)
Ctrl+C(正常关闭) - tomcat部署项目
将项目放置到webapps目录下,即部署完成 - 端口号冲突
- 方案一:任务管理器--详细信息--搜索java--全部结束掉
- 方案二:修改tomcat端口号(conf/server.xml)
springboot内置tomcat
起步依赖
- spring-boot-starter-web:包含了web应用开发所需要的常见依赖
- spring-boot-starter-test:包含了单元测试所需要的常见依赖
- 官方提供有starter
切换web服务器
springboot内嵌web容器有三种:tomcat,jetty,undertow
浙公网安备 33010602011771号