南昌创建网站,网页设计欣赏作业,低价网站建设要多少钱,软件定制平台有哪些6. 前后端交互
6.1 Ajax#xff08;原生的#xff09;
概念#xff1a; Asynchronous JavaScript And XML#xff08;异步的JavaScript和XML#xff09;
作用#xff1a;
数据交互#xff1a;通过Ajax可以给服务器发送请求#xff0c;并获取服务器响应的数据异步交…6. 前后端交互
6.1 Ajax原生的
概念 Asynchronous JavaScript And XML异步的JavaScript和XML
作用
数据交互通过Ajax可以给服务器发送请求并获取服务器响应的数据异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术
步骤
准备数据地址创建XMLHttpRequest对象用于和服务器交换数据向服务器发送请求获取服务器响应的数据
6.2 Axios
概念 对原生的Ajax进行了封装简化书写快速开发
步骤
1引入Axios的js文件
script src “js/axios-0.18.0.js”/script
2使用Axios发送请求并获取响应结果 3请求方式别名对上述代码进行改造
axios.get(url[, config])axios.post(url[, config])axios.delete(url[, config])axios.put(url[, config])例
7. 前后端分离开发
前后端分离 各司其职前端发送请求给后端后端发送响应给前端那么他们中间就需要一个规范——接口文档基于接口文档进行开发
接口文档维护 在线和离线
接口文档来源 产品经理的页面原型和需求文档分析
接口文档的管理平台YAPI
API管理接口
Mock服务——模拟真实接口返回数据便于前端测试
8. 前端开发工程化——冗余、不规范
概念 在企业级的前端项目开发中把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。
环境vue-cli
Vue官方提供的一个脚手架用于快速生成一个Vue项目模板
功能
统一目录结构本地调试热部署会自己保存刷新页面单元测试单元测试集成打包上线
依赖环境NodeJS
9. Element
概念 饿了么团队基于Vue2.0的桌面端组件(组成网页的不见超链接、图片、表格、表单等)库
命名规则 驼峰命名
步骤
安装ElementUI组件库在当前工程目录下命令行执行npm install element-ui版本号引入ElementUI组件库官方文档中找访问官方文档复制组件代码调整
10. 路由
Vue Router是Vue的官方路由URL中的hash#号与组件之间的对应关系
组成
VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件
router-link请求链接组件浏览器会解析成a
router-view动态视图组件用来渲染展示与路由路径对应的组件
index.js中定义路由main.js中在创建Vue对象的时候使用路由HTML中使用router-link引用组件的Vue中使用router-view
