Ajax
介绍
概念: Asynchronous JavaScript And XML, 异步的JavaScript和XML
作用:
- 数据交换: 通过Ajax可以给服务器发送请求, 并获取服务器响应的数据
- 异步交互: 可以在不重新加载整个页面的情况下, 与服务器交换数据并更新部分网页的技术, 如: 搜索联想, 用户名是否可用的校验等等
同步与异步
Axios
介绍: Axios对原生的Ajax进行了封装, 简化书写, 快速开发
入门:
- 引入Axios的js文件
- shiyongAxios发送请求, 并获取响应结果
请求方式别名:(推荐简化)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[,config]])
案例
基于Vue及Axios完成数据的动态加载展示
- 数据准备的url: http://yapi.smart-xwork.cn/mock//emp/list
- 在页面加载完成后, 自动发送异步请求, 加载数据, 渲染展示页面(性别: 1 代表男, 2 代表女)
前端基础学java
前端工程化
介绍
前后端混合开发,:
- 沟通成本高, 分工不明确, 项目不便管理, 不便维护扩展
前后端分离开发
- 当前最为主流的开发模式: 前后端分离, 通过接口文档
- 开发流程:
- 需求分析
- 接口定义(API接口文档)
- 前后端并行开发(遵守规范)
- 测试(前端 后端)
- 前后端联调测试
YApi
介绍: YApi是高效, 易用, 功能强大的api管理平台, 旨在为开发, 产品, 测试人员提供更优雅的接口管理服务
地址: http://yapi.smart-xwork.cn/
使用步骤:
- 添加项目
- 添加分类
- 添加接口
环境准备
前端工程化: 是指在企业级的前端项目开发中, 把前端开发所需的工具, 技术, 流程, 经验等进行规范化, 标准化
vue-cli
介绍: Vue-cli 是官方提供的一个脚手架, 用于快速生成一个Vue的项目模板
Vue-cli提供了如下功能:
- 统一的目录结构
- 本地测试
- 热部署
- 单元测试
- 集成打包上线
依赖环境: NodeJS
安装教程: 黑马程序员p37
Vue项目简介
创建
- 命令行: vue create vue-project01
- 图形化界面: vue ui
目录结构:
- 基于Vue脚手架创建出来的工程, 有标准的目录结构
- : 整个项目的依赖包
- : 存放项目的静态文件
- : 存放项目的源代码
- : 静态资源
- : 可重用的组件
- : 路由配置
- : 视图组件(页面)
- : 入口页面(根组件)
- : 入口js文件
- : 模块的基本信息, 项目开发所需要的模块, 版本信息
- : 保存vue配置的文件, 如: 代理, 端口的配置等
启动
方式一: 以图形化界面的形式启动
方式二: 在项目目录下以命令行启动
打开NPM脚本参考这篇博客
Vue项目开发流程
Vue的组件文件以 .vue结尾, 每个组件由三个部分组成,
- : 模板部分, 由它生成HTML代码
- : 控制模板的数据来源和行为
- : css样式部分
Element
简介
Element: 是饿了么团队研发的, 一套为开发者,设计师和产品经理准备的基于Vue2.0的桌面端组件库
组件: 组成网页的部件, 例如: 超链接, 按钮, 图片, 表格, 表单, 分页条等等
官网: https://element.eleme.cn/#/zh-CHListener
快速入门
- 安装Element组件库(在当前工程的目录下), 在命令行执行命令
- 引入ElementUI组件库
- 在src下新建element文件夹用来存放element组件
- 访问官网, 复制组件代码, 调整
- 在app.vue中引用element
记得安装 和 插件, 要不然可能不会自动补全, 在标签自动补全要加左尖括号
常见组件
- Table 表格: 用于展示多条结构类似的数据, 可对数据进行排序, 筛选, 对比或其他自定义操作
- Pagination 分页: 当数据量过多时, 使用分页分解数据
这里我出现了一个错误, 当在 标签中同时加入以上两个组件时报错
- Dialog对话框: 在保留当前页面状态的情况下, 告知用户并承载相关操作
这里按下第二次时会报错:
- form 表单: 由输入框, 选择器, 多选框, 等控件组成, 用以收集, 校验, 提交数据
案例
Axios在项目目录下使用安装, 然后在使用的页面引用, 然后在钩子方法`mounted()中使用
Vue路由
简介
前端路由: URL中的hash(#号)与组件之间的对应关系
Vue Router
介绍: Vue Router是Vue的官方路由
组成:
- VueRouter: 路由器类, 根据路由请求在路由视图中动态渲染选中的组件
- : 请求链接组件, 浏览器会解析成
- : 动态视图组件, 用来渲染展示与路由路径对应的组件
安装(创建Vue项目时已选择):
定义路由:
- 需要在router文件夹下的index.js文件夹下定义
- 在想要跳转的地方进行修改:
- 在App.vue中让路由视图动态展示
打包部署
打包
在NPM脚本下运行选项
部署
Nginx
简介: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器, 其特点是占有内存少, 并发能力强, 在各大型互联网公司都有非常广泛的使用
官网: https://nginx.org/
安装:
: 配置文件目录
: 静态资源目录
: 日志文件目录
: 临时文件目录
部署
将打包好的dist目录下的文件, 复制到nginx安装目录的html目录下, 启动双击nginx.exe文件, Nginx服务器默认占用80端口号
注意: 如果80端口号被占用, 可以在nginx.conf中修改端口号
cmd中查询端口号指令为
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.bianchenghao6.com/h6javajc/19528.html