JavaWeb开发_Day03

ZZHow1024

已于 2025-08-11 23:57:56 修改

阅读量581

点赞数 16

CC 4.0 BY-SA版权

分类专栏： JavaWeb Java 笔记文章标签： java web 笔记

于 2025-08-11 23:57:41 首次发布

本文链接：https://blog.csdn.net/weixin_40483399/article/details/150237264

Java 同时被 3 个专栏收录

39 篇文章

订阅专栏

笔记

38 篇文章

订阅专栏

JavaWeb

16 篇文章

订阅专栏

参考课程:

【黑马程序员 JavaWeb开发教程】

[https://www.bilibili.com/video/BV1m84y1w7Tb]

@ZZHow(ZZHow1024)

Ajax

概念：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML。
作用：
- 数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
同步与异步

同步与异步

原生 Ajax 请求

准备数据地址
创建 XMLHttpRequest 对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

<body>
	<input type="button" value="获取数据" onclick="getData()">
	<div id="div1"></div>
</body>

<script>
	function getData() {
		//1. 创建XMLHttpRequest
		var xmlHttpRequest = new XMLHttpRequest();
		//2. 发送异步请求
		xmlHttpRequest.open('GET', 'http://xxx');
		xmlHttpRequest.send(); //发送请求
		//3. 获取服务响应数据
		xmlHttpRequest.onreadystatechange = function() {
			if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
				document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
			}
		}
	}
</script>

Axios

介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/

Axios 入门

引入 Axios 的 JS 文件

<script src="js/axios-0.18.0.js"></script>

使用Axios发送请求，并获取响应结果

//GET 请求
axios({
	method: "get",
	url: "http://xxx"
}).then((result) => {
	console.log(result.data);
});

//POST 请求
axios({
	method: "post",
	url: "http://xxx",
	data: "id=1"
}).then((result) => {
	console.log(result.data);
});

请求方式别名

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])

//GET 请求
axios.get("http://xxx").then((result) => {
	console.log(result.data);
});

//POST 请求
axios.post("http://xxx", "id=1").then((result) => {
	console.log(result.data);
});

前后端分离开发模式

前后端混合开发模式的弊端
- 沟通成本高
- 分工不明确
- 不便管理
- 不便维护扩展
当前最为主流的开发模式：前后端分离
- 开发流程
  
  需求分析 → 接口定义（API接口文档） → 前后端并行开发（遵守规范） → 测试（前端、后端） → 前后端联调测试

YApi

介绍：YApi 是高效、易用、功能强大的 API 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
地址：
操作
- 添加项目
- 添加分类
- 添加接口

前端工程化

前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
- 模块化 ——— JS、CSS
- 组件化 ——— UI 结构、样式、行为
- 规范化 ——— 目录结构、编码、接口
- 自动化 ——— 构建、部署、测试
环境准备 ——— vue-cli（Vue 官方提供的脚手架）
- 介绍：Vue-cli 是 Vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
- Vue-cli 提供了如下功能：
  - 统一的目录结构
  - 本地调试
  - 热部譽
  - 单元测试
  - 集成打包上线
- 依赖环境：Node.js
- 准备过程
  - 安装 Node.js
    
    Node.js — Run JavaScript Everywhere
```
#通过 Homebrew 安装（仅限 macOS）
brew install node@20

#通过查看版本号确认是否安装成功
node -v
```
  - 安装 vue-cli
```
#安装 vue-cli
npm install -g @vue/cli

#通过查看版本号确认是否安装成功
vue --version
```
Vue 项目-创建
- 命令行
```
vue create vue-project01
```
- 图形化界面
```
vue ui
```
Vue 项目-目录结构
- 基于 Vue 脚手架创建出来的工程，有标准的目录结构，如下：
  - 文件夹 node_modules → 整个项目的依赖包
  - 文件夹 public → 存放项目的静态文件
  - 文件夹 src → 存放项目的源代码
    - 文件夹 assets → 静态资源
    - 文件夹 components → 可重用的组件
    - 文件夹 router → 路由配置
    - 文件夹 views → 视图组件（页面）
    - 文件 App.vue → 入口页面（根组件）
    - main.js → 入口 JS 文件
  - 文件 package.json → 模块基本信息，项目开发所需要模块，版本信息
  - 文件 vue.config.js → 保存 Vue 配置的文件，如：代理、端口的配置等
Vue 项目-启动
- 方式一：图形化界面
- 方式二：命令行 npm run serve
Vue 项目-配置端口
- 在 vue.config.js 中添加一项配置
```
devServer: {
	port: 7000
}
```
Vue 项目开发流程
- Vue 的组件文件以 .vue 结尾，每个组件由三个部分组成：、

Element

Element 简介
- Element：由饿了么团队研发，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
- 组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。
- 官网：
  
  Element - The world’s most popular Vue UI framework
快速入门
- 安装 ElementUI 组件库（在当前工程的目录下），在命令行执行指令：
```
npm i element-ui -S
```
- 在 main.js 中引入 ElementUI 组件库
```
import ElementUI from 'element-ui';
import 'element-ui/1ib/theme-chalk/index.css';
Vue.use(ElementUI);
```
- 访问官网，复制组件代码，调整
常见组件
- 表格
  
  Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
- 分页
  
  Pagination 分页：当数据量过多时，使用分页分解数据。
- 对话框
  
  Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。
- 表单
  
  Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
案例 - 根据页面原型完成员工管理页面开发，并通过 Axios 完成数据异步加载
- 步骤：
  - 创建页面，完成页面的整体布局规划
  - 布局中各个部分的组件实现
  - 列表数据的异步加载，并渲染展示
- Vue 项目中使用 Axios：
  - 在项目目录下安装 Axios：npm install axios
  - 需要使用 Axios 时，导入 Axios：import axios from 'axios'

Vue 路由(Vue Router)

介绍：Vue Router 是 Vue 的官方路由。
组成：
- VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
- ：请求链接组件，浏览器会解析成
- ：动态视图组件，用来渲染展示与路由路径对应的组件
使用：
- 安装（若创建 Vue 项目时已选择则不用安装）
```
npm install vue-router
```
- 定义路由
  - router 文件夹下的 index.js

打包部署

打包
```
npm run build
```
项目会打包到 dist 文件夹中
- 打包错误：
  - 报错 [BABEL] Note: The code generator has deoptimised the styling of … as it exceeds the max of 500KB.
    
    在 babel.config.js 中添加一项配置：compact: false
  - 打包后的 index.html 是一片空白
    
    在 vue.config.js 中添加一项配置：publicPath: './'
部署（部署到 Nginx 服务器）
- 介绍：Nginx 是一款轻量级的 Web 服务器 / 反向代理服务器及电子邮件(IMAP / POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
- 官网：
  
  nginx
- 目录介绍：
  - 文件夹 conf ——— 配置文件目录
  - 文件夹 html ——— 静态资源文件目录
  - 文件夹 logs ——— 日志文件目录
  - 文件夹 temp ——— 临时文件目录
- 部署过程：
  - 拷贝：将打包好的 dist 目录下的文件，复制到 Nginx 安装目
    录的 html 目录下。
  - 启动：
    - Windows：双击 nginx.exe 文件即可，Nginx服务器默认占用
      80 端口号。
    - macOS / Linux：nginx
  - 停止：
    - nginx -s quit：此方式停止步骤是待 nginx 进程处理任务完毕进行停止。
    - nginx -s stop：此方式相当于先查出 nginx 进程 id 再使用 kill 命令强制杀掉进程。
  - 端口被占用：Nginx 默认占用 80 端口号，如果 80 端口号被占用
    - 寻找占用的程序
      - Windows：netstat -ano | findStr 80
      - macOS / Linux：lsof -i:80
    - 无法解决占用端口的程序，可以在 nginx.conf 中修改 Nginx 的端口号。
  - 访问：http://localhost:80