JavaWeb笔记_03

WebDay03总结

1.Ajax

1.1 Ajax概述

• 作用: 前后端交换数据
• 特点: 异步交互
  • 同步请求:在响应之前不能做其他操作.
  • 异步请求:相当于单独开了个线程发送请求, 不影响页面操作. 不需要加载整个页面就能更新数据

1.2 Axios实现

• 格式

原生Ajax太复杂，直接调用方法

• Axios针对不同的请求，提供了别名方式的api,具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

• 举个栗子
• 格式:

//get请求
axios.get("请求路径?参数名=参数值").then(r => {});
//从这个链接获取数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
//将获取到的数据打印到控制台
.then(r => {consle.log(r.data)});
//post请求
axios.post("url","请求参数")
  	 .then(r => {
  	})

2.前后端分离开发

2.1 概述

• 后期在公司大部分都是前后端分离的项目
• 模式:
  • 先定义接口文档
  • 前端按照接口文档发送请求
  • 后端按照接口文档响应数据

2.2 YAPI

• 作用:
  • 定义在线接口文档
  • MOCK数据
• 操作: 自己按照文档操作一遍

3.前端工程化

3.1 环境准备

• 安装NodeJS和Vue-cli

1. 官网下载NodeJs并安装
2. 配置npm的全局安装路径，使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "NodeJS安装目录(eg:E:\NodeJS)"

3. 切换npm的淘宝镜像

npm config set registry https://registry.npm.taobao.org

4. 安装Vue-cli

npm install -g @vue/cli

3.2创建Vue工程

• 命令行：直接通过命令行方式创建vue项目

  vue create vue-project01
  

• 图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建

  vue ui
  

• 源代码放在src下

• 修改端口 vue.config.js

3.3开发流程

• xxx.vue文件结构
  • <template>视图区域</template>
  • <script>数据模型和方法</script>
  • <style>css</style>
• 在App.vue中import上述vue文件
  • 格式主要是靠快捷键提示
  • vue文件注意命名,大驼峰
• 运行：直接基于cmd命令窗口，在vue目录下，执行输入命令npm run serve即可

npm run serve

4.Element

4.1快速入门

• 安装Element组件库

  npm install element-ui@2.15.3  
  

• main.js引入资源

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

• 去官网CV需要的组件, 到vue文件中

4.2 常见组件

• 表格 Table
  • :data=“数据模型”
  • prop=“变量名”
  • label=“字段名”
• 表单 Form
  • lable=“字段名”
  • v-model=“数据模型”
• 分页 Pagenation
  • size-change pageSize 改变时会触发 每页条数
  • current-change currentPage 改变时会触发 当前页
  • prev-click 用户点击上一页按钮改变当前页后触发 当前页
  • next-click 用户点击下一页按钮改变当前页后触发 当前页
• 对话框 Dialog
  • — Dialog 的内容
  • title Dialog 标题区的内容
  • footer Dialog 按钮操作区的内容- 布局容器
  • open Dialog 打开的回调
  • opened Dialog 打开动画结束时的回调
  • close Dialog 关闭的回调
  • closed Dialog 关闭动画结束时的回调