javaweb

盛旭猿

已于 2024-07-17 10:34:11 修改

阅读量308

点赞数 5

文章标签：前端

于 2024-03-24 00:47:07 首次发布

本文链接：https://blog.csdn.net/jiuxiandd/article/details/136971715

版权

web：全球广域网，也成为万维网，能够通过浏览器访问的网站

JSON

（1）概念：JavaScript Object Notation，JavaScript对象标记法，和js的对象类似，JSON所有的key均用双引号包起来

（2）基础语法

//JSON字符串转化为JS对象
var jsonstr = '{"key1": value1, "key2": value2}';    //定义一个JSON字符串
var jsonobject = JSON.parse(jsonstr);    //将字符串转换为js对象

//JS对象转化为JSON字符串
var jsonstr = JSON.stringify(jsobject);

BOM

（1）window对象

（2）location对象

DOM

获取Element元素对象

Vue

（1）框架概念：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发、更加快捷、更加高效

（2）vue：一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于MVVM思想，实现数据的双向绑定，将变成的关注点放在数据上

（3）vue快速入门

（4）vue常用指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义

（5）vue的生命周期

JS执行机制

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环

window对象

locatiion对象

（1）location.hash

hash属性获取地址中的哈希值，符号 # 后面

（2）location.reload

reload方法用来刷新页面，reload后传入参数true表示强制刷新

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

userAgent：检测浏览器的版本及平台

histroy对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应

本地存储

（1）介绍：

（2）分类

① localStorage

语法

// 存储数据
localStorage.setitem(ket, value)    //如果key已存在，则替换内容

// 获取数据
localStorage.getItem(key)

// 删除数据
localStorage.remove(key)

② sessionStorage

（3）存储复杂数据类型

① 本地存储只能存储字符串，无法存储复杂数据类型

② 存储方法：使用JSON.stringify方法将对象转换成JSON字符串格式

补充知识

Ajax

（1）介绍

（2）属性

（3）Axios

① 介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发

② 使用Axios

前后端分离开发

后端：负责处理、存储数据
前端：负责显示数据
前端和后端开发人员通过接口进行数据的交换。

vue

1. 创建

通过命令行：vue create vue_project 或者通过图形化界面：vue ui创建

2. 目录结构

（1）项目文件目录结构

（2）src文件目录结构

3. 启动vue项目

通过命令run npm serve启动，或者通过左下角npm脚本快速启动

4. vue内文件

（1）入口文件main.js

5. vue组件库Element

（1）介绍：Element是一套基于Vue2.0的桌面端组件库，官网地址：组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation

（2）组件：组成网页的各个部件，例如超链接、按钮、图片等等

（3）快速入门

（4）常见组件：表格Table、页面Pagination、对话框Dialog、表单Form

（5）vue路由

① 前端路由：URL中的hash（#号）与组件之间的对应关系

② vue router

（6）打包部署：通过打包好的dist文件，使用nginx进行部署

Maven

1. maven：apache旗下的一个开源项目，用于管理和构建java项目的工具，它基于项目对象模型（POM）的概念，通过一小段描述信息来管理项目的构建

2. 作用

① 依赖管理：方便快捷的管理项目依赖的资源（jar包），避免版本冲突问题

② 统一项目结构：提供标准、统一的项目结构

③ 项目构建：标准跨平台的自动化项目构建方式

3. 依赖配置

（1）依赖：指当前项目运行所需要的djar包，一个项目中可以引入多个依赖

（2）配置：

4. 依赖传递：依赖具有传递性

5. 排除依赖

6. 依赖范围

7. maven的生命周期

（1）Maven的生命周期：为了对所有的Maven项目构建过程进行抽象和统一

（2）Maven中有3套独立的生命周期

主要五阶段生命周期的职责

HTTP协议

（1）概念：Hyper Text Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则

（2）特点

① 基于TCP协议：面向连接、安全

② 基于请求-响应模型的：一次请求对应一次响应

③ HTTP协议是无状态的协议：对于事物处理没有记忆能力。每次请求-响应都是独立的。速度快，但是多次请求间不能共享数据。

（3）请求协议（请求数据格式）

① 请求行：请求数据第一行（请求方式、资源路径、协议以及协议版本）

② 请求头：第二行开始，格式key: value，常见的请求头

③ 请求体：一般出现于POST请求、存放请求参数

请求方式-GET：请求参数在请求行中，没有请求体，GET请求大小是有限制的
请求方式-POST：请求参数在请求体中，POST请求体大小是没有限制的

（4）响应协议（响应数据格式）

① 响应行：响应数据第一行（协议、状态码、描述）
（状态码）

② 响应头：第二行开始，格式key: value

③ 响应体：最后一部分，存放响应数据

Web服务器

Web服务器是一个软件程序，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让Web开发更加便捷。主要功能是“提供网上信息浏览服务”。

Tomcat

概念：一个开源免费的轻量级Web服务器，支持Servlet/JSP少量javaEE规范，也被称为web容器

部署程序：将项目放置到tomcat内的webapps目录下，即部署完成

postman

一款功能强大的网页调试与发送网页HTTP请求的Chrome插件，常用于进行接口调试

请求参数

① 简单参数

原始方式：在原始的web程序中，获取请求参数，需要通过HttpServletRequest对象手动获取

如果方法形参名称与请求参数名称不匹配，可以使用@RequestParam来映射

② 实体参数：请求参数名与形参对象属性名相同，定义POJO接收即可

③ 数组参数：请求参数名与形参数组名称相同且请求参数为多个，定义数组类型形参即可接收参数

④ 集合参数：请求参数名与形参数组名称相同且请求参数为多个，@RequestParam 绑定参数关系

⑤ 日期参数：使用 @DataTimeFormat 注解完成日期参数格式转换

⑥ JSON参数：JSON数据与形参对象属性名相同，定义POJO类型形参即可接收参数，需要使用 @RequestBody 标识

⑦ 路径参数：通过请求URL直接传递参数，使用{……}来标识该路径参数，需要使用 @PathVariable 获取路径参数

注解 @ResponseBody

统一响应结果Result(code, msg, data)

分层解耦

三层架构

controller：控制层，接收前端发送的请求，并对请求进行处理，并响应数据

service：业务逻辑层，处理具体的业务逻辑

dao：数据访问层（Data Access Object）（持久层），负责数据访问操作，包括数据的增删改查。

三层架构的优势：高内聚，低耦合

三层架构的缺点：会降低系统的性能，同时可能会导致级联的改变。

分层解耦

内聚：一个模块内各元素间结合的紧密程度（软件中各个功能软件模块之间的紧密程度）

耦合：衡量各个代码块键联系紧密程度的度量（模块之间联系越紧密，其耦合性就越强，模块的独立性则越差）

Bean对象

1. 定义：在 Spring 中，构成应用程序主干并由 Spring IoC 容器管理的对象称为 bean。bean 是由Spring IoC 容器实例化、组装和管理的对象。

2. bean的声明

3. 组件扫描：指定一个包路径，Spring会自动扫描改包及子包所有组件类，当发现组件类定义前有特定的注解标记时，就将该组件纳入到Spring容器。

4. 注意：bring容器中只可存在单独的bean对象，不能存在多个相同类型的bean对象

解决方案：

① 通过@Primary注解：在bean对象添加@Primary注解，改变bean对象的优先级
② 通过@Qualifier注解：在需要注入的对象上添加@Qualifer('类名')，改变注入的bean对象（与@Autowired同时使用）
③ 通过@Resource注解：在需要注入的对象上添加@Resoutce(name = '类名')，改变注入的bean对象（不与@Autowired同时使用）