type
status
date
slug
summary
tags
category
icon
password
参考课程:
【黑马程序员 JavaWeb开发教程】
@ZZHow(ZZHow1024)
Ajax
- 概念：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML。
- 作用：
- 数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
- 同步与异步
- 原生 Ajax 请求
- 准备数据地址
- 创建 XMLHttpRequest 对象：用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应数据
Axios
- 介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发。
- Axios 入门
- 引入 Axios 的 JS 文件
- 使用Axios发送请求，并获取响应结果
- 请求方式别名
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
前后端分离开发模式
- 前后端混合开发模式的弊端
- 沟通成本高
- 分工不明确
- 不便管理
- 不便维护扩展
- 当前最为主流的开发模式：前后端分离
- 开发流程
需求分析 → 接口定义（API接口文档） → 前后端并行开发（遵守规范） → 测试（前端、后端） → 前后端联调测试
YApi
- 介绍：YApi 是高效、易用、功能强大的 API 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
- 地址：
- 操作
- 添加项目
- 添加分类
- 添加接口
前端工程化
- 前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
- 模块化 ——— JS、CSS
- 组件化 ——— UI 结构、样式、行为
- 规范化 ——— 目录结构、编码、接口
- 自动化 ——— 构建、部署、测试
- 环境准备 ——— vue-cli（Vue 官方提供的脚手架）
- 介绍：Vue-cli 是 Vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
- Vue-cli 提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部譽
- 单元测试
- 集成打包上线
- 依赖环境：Node.js
- 准备过程
- 安装 Node.js
- 安装 vue-cli
- Vue 项目-创建
- 命令行
- 图形化界面
- 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 中添加一项配置
- Vue 项目开发流程
- Vue 的组件文件以 .vue 结尾，每个组件由三个部分组成：<template>、<script>、<style>。
- <template> ——— 模板部分，由它生成 HTML 代码
- <script> ——— 控制模板的数据来源和行为
- <style> ——— CSS 样式部分
Element
- Element 简介
- Element：由饿了么团队研发，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
- 组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。
- 官网：
- 快速入门
- 安装 ElementUI 组件库（在当前工程的目录下），在命令行执行指令：
- 在 main.js 中引入 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：路由器类，根据路由请求在路由视图中动态渲染选中的组件
- <router-link>：请求链接组件，浏览器会解析成 <a>
- <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
- 使用：
- 安装（若创建 Vue 项目时已选择则不用安装）
- 定义路由
- router 文件夹下的 index.js
打包部署
- 打包
- 打包错误：
- 报错 [BABEL] Note: The code generator has deoptimised the styling of ... as it exceeds the max of 500KB.
- 打包后的 index.html 是一片空白
项目会打包到 dist 文件夹中
在 babel.config.js 中添加一项配置：
compact: false在 vue.config.js 中添加一项配置：
publicPath: './'- 部署（部署到 Nginx 服务器）
- 介绍：Nginx 是一款轻量级的 Web 服务器 / 反向代理服务器及电子邮件(IMAP / POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
- 官网：
- 目录介绍：
- 文件夹 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