Java Web DAY3（黑马）

2024/9/22

DAY3：前后端分离开发认识

属于前端内容，看懂即可

手册网站：w3school 在线教程

一、Ajax

认识Ajax：

·概念：

Asynchronous JavaScript And XML，异步的JavaScript和XML

·作用：

·数据交换：

通过Ajax可以给服务器发送请求，并获取服务器响应的数据

·异步交互：

可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联系、用户名是否可以用的校验

·同步与异步：

·原生Ajax：【繁琐】

·准备数据地址

·创建XMLHttpRequest对象：用于和服务器交换数据

·向服务器发送请求

·获取服务器响应数据

（一）Axios

1.介绍

Axios对原声的Ajax进行了封装，简化书写，快速开发

官网：https：//www.axios-http.cn

2.Axios入门

·在script中，引入Axios的js文件

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

3.请求方式别名

·axios.get(url[,config])
`axios.delet(url[,config])
`axios.post(url[,data[,config]])
`axios.put(url[,data[,config]])

实例：

（二）案例

二、前后端分离开发

（一）介绍

·介绍：

YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

·地址：

http://yapi.smart-xwork.cn/

(API接口管理、Mock服务)

（二）YAPI

1.添加项目

2.添加分类

3.添加接口

三、前端工程化

实际的前端开发：

在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验、等进行规范化、标准化

·模块化（JS、CSS）

·组件化（UI结构、样式、行为）

·规范化（目录结构、编码、接口）

·自动化（构建、部署、测试）

（一）环境准备

1.介绍：

Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板

2.Vue-cli提供的功能：

·统一的目录结构

·本地调试

·热部署

·单元测试

·集成打包上线

3.依赖环境：NodeJS

（二）Vue项目简介

Vue项目--创建 

--目录结构

·基于Vue脚手架创建出来的工程，有标准的目录结构

  

--启动

·方式一：图形化界面。。。。。方式二：命令行

  

--配置端口

（三）Vue项目开发流程

Vue文件必须以.vue结尾，每个组件由三个部分组成：<template>、<script>、<style>

<import>入口文件（main.js）--><export>默认首页（index.html）

四、Vue组件库Element

认识Eliment：

·Element：是饿了么团队研发，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库

·组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等

·官网：https://element.eleme.cn/#/zh-CNListener

（一）快速入门

·安装ElimentUI组件库（在当前工程目录下），在命令行执行指令

npm install element-ui@2.15.3

·引入ElementUI组件库

·访问官网，复制组件代码，调整

（二）常见组件

1.表格

·table表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

2.分页

·Pagination分页：当数据量过多时，使用分页分解数据

3.对话框

·Dialog对话框：在保留当前页面状态的情况下，告知用户并承载相关操作

4.表单

·Form表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

（三）案例

不对前端过多展示，需求请移步：

五、Vue路由

·介绍：

Vue Router是Vue的官方路由

·组成：

·VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

·<router-link>：请求链接组件，浏览器会解析成<a>

·<router-view>：动态视图组件，用来渲染展示与路由路径相对应的组件

六、打包部署

（一）打包

实例：

（二）部署

1.Nginx

·介绍：

Nginx是一款轻量级的Web服务器 / 反向代理服务器及电子组件（IMAP / POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用

·官网：

https://nginx.org/

2.部署

将打包好的dist目录下的文件，复制到nginx安装目录的html目录下

3.启动

双击nginx.exe文件即可，Nginx服务器默认占用80端口号

（注意）Nginx若80端口号被占用，可在nginx.conf中修改端口号（netstat-ano | findStr 80）