入侵织梦网站,cosy主题wordpress,万州网站制作,网站开发的对联声明#xff1a;本文来源于黑马程序员PDF讲义
Ajax
我们前端页面中的数据#xff0c;如下图所示的表格中的学生信息#xff0c;应该来自于后台#xff0c;那么我们的后台和前端是 互不影响的2个程序#xff0c;那么我们前端应该如何从后台获取数据呢#xff1f;因为是2…声明本文来源于黑马程序员PDF讲义
Ajax
我们前端页面中的数据如下图所示的表格中的学生信息应该来自于后台那么我们的后台和前端是 互不影响的2个程序那么我们前端应该如何从后台获取数据呢因为是2个程序所以必须涉及到2个 程序的交互所以这就需要用到我们接下来学习的Ajax技术。 Ajax: 全称Asynchronous JavaScript And XML异步的JavaScript和XML。
其作用有如下2 点
与服务器进行数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如 搜索联想、用户名是否可用的校验等等 //1. 创建XMLHttpRequest创建XMLHttpRequest对象用于和服务器交换数据也是原生Ajax请求的核心对象提供了各种方法
var xmlHttpRequest new XMLHttpRequest();//2. 发送异步请求调用对象的open()方法设置请求的参数信息例如请求地址请求方式。然后调用
send()方法向服务器发送请求
xmlHttpRequest.open(GET,http://yapi.smartxwork.cn/mock/169327/emp/list);
xmlHttpRequest.send();//发送请求//3. 获取服务响应数据我们通过绑定事件的方式来获取服务器响应的数据。
xmlHttpRequest.onreadystatechange function(){//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应 200表示这是一个正确的Http请求没有错误if(xmlHttpRequest.readyState 4 xmlHttpRequest.status 200){document.getElementById(div1).innerHTML xmlHttpRequest.responseText;}
} 最后我们通过浏览器打开页面请求点击按钮发送Ajax请求最终显示结果如下图所示 Axios 原生的Ajax请求的代码编写起来还是比较繁琐的所以接下来我们学习一门更加简单的发送Ajax 请求的技术Axios 。Axios是对原生的AJAX进行封装简化书写。 Axios的使用比较简单主要分为2步
引入Axios文件
script srcjs/axios-0.18.0.js/script
使用Axios发送请求并获取响应结果官方提供的api很多此处给出2种如下 在vue的mounted钩子函数编写Ajax请求请求数据代码如下 ajax请求的数据我们应该绑定给vue的data属性之后才能进行数据绑定到视图并且浏 览器打开后台地址数据返回格式如下图所示 vue项目目录结构介绍 vue项目的标准目录结构以及目录对应的解释如下图所示 vue项目的热更新功能 只要我们保存更新的代码我们直接打开浏览器不需要做任何刷新发现页面呈现内容发生了变 化这就是我们vue项目的热更新功能 template: 模板部分主要是HTML代码用来展示页面主体结构的script: js代码区域主要是通过js代码来控制模板的数据来源和行为的style: css样式部分主要通过css样式控制模板的页面效果得 ElementUI的快速入门
首先我们先要安装ElementUI的组件库打开VS Code停止之前的项目然后在命令行输入如下 命令
npm install element-ui2.15.3最后我们只需要去ElementUI的官网找到组件库然后找到按钮组件抄写代码即可。 Dialog:
在保留当前页面状态的情况下告知用户并承载相关操作。其企业开发应用场景示例如下图 所示 组件属性详解
那么ElementUI是如何做到对话框的显示与隐藏的呢是通过如下的属性 visible.sync 是否显示 Dialog Form表单 路由功能
首先我们需要先安装vue-router插件可以通过如下命令
npm install vue-router3.5.1
但是我们不需要安装因为当初我们再创建项目时已经勾选了路由功能已经安装好了。
然后我们需要在src/router/index.js文件中定义路由表根据其提供的模板代码进行修改最终代 码如下
import Vue vue
import VueRouter vue-router
Vue.use(VueRouter)
const routes [{
path: /emp, //地址hash
name: emp,
component: () import(../views/tlias/EmpView.vue) //对应的
vue组件},{
path: /dept,
name: dept,
component: () import(../views/tlias/DeptView.vue)}
]
const router new VueRouter({
routes
})
export default router
