day03-Vue-Element

一、Ajax

1 Ajax 介绍

1.1 Ajax 概述

概念：Asynchronous JavaScript And XML，异步 的 JavaScript 和 XML。

作用：

  1. 数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。
  2. 异步交互：可以在 不重新加载整个页面 的情况下，与服务器交换数据并 更新部分网页 的技术，如：搜索联想、用户名是否可用的校验等等。

1.2 同步异步

在这里插入图片描述

2 原生 Ajax

  1. 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
  2. 创建 XMLHttpRequest 对象：用于和服务器交换数据
  3. 向服务器发送请求
  4. 获取服务器响应数据
<body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>function getData(){//1. 创建XMLHttpRequest var xmlHttpRequest  = new XMLHttpRequest();//2. 发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//发送请求//3. 获取服务响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}}}
</script>

3 Axios

  • 介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发。
  • 官网： https://www.axios-http.cn/

3.1 Axios 的基本使用

（1）引入 Axios 的 js 文件

<script src="js/axios-0.18.0.js"></script>

（2）使用 Axios 发送请求，并获取响应结果

axios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {console.log(result.data);
});

axios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"
}).then((result) => {console.log(result.data);
});

axios() 是用来发送异步请求的，小括号中使用 js 的 JSON 对象传递请求相关的参数：

  1. method 属性：用来设置请求方式的。取值为 get 或者 post。
  2. url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
  3. data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
  4. then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

3.2 请求方法的别名

1️⃣axios.get(url [, config])
2️⃣axios.delete(url [, config])
3️⃣axios.post(url [, data[, config]])
4️⃣axios.put(url [, data[, config]])

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {console.log(result.data);
});

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {console.log(result.data);
});

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()"></body>
<script>function get(){//通过axios发送异步请求-get// axios({//     method: "get",//     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"// }).then(result => {//     console.log(result.data);// })axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);})}function post(){//通过axios发送异步请求-post// axios({//     method: "post",//     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",//     data: "id=1"// }).then(result => {//     console.log(result.data);// })axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {console.log(result.data);})}
</script>
</html>

3.3 案例

需求：基于Vue及Axios完成数据的动态加载展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios-案例</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后操作时间</th></tr><tr align="center" v-for="(emp,index) in emps"><td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new Vue({el: "#app",data: {emps:[]},mounted () {//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data;})}});
</script>
</html>

二、前后台分离开发

1 前后台分离开发介绍

1.1 前后台混合开发

在这里插入图片描述

这种开发模式有如下缺点：

  1. 沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成，再交给后台人员使用
  2. 分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
  3. 不便管理：所有的代码都在一个工程中
  4. 不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。

1.2 前后端分离开发

在这里插入图片描述

2 YAPI

2.1 YAPI介绍

  • 介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
  • 地址： http://yapi.smart-xwork.cn/

YApi主要提供了2个功能：

  1. API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
  2. Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

2.2 接口文档管理

  1. 添加项目
  2. 添加分类
  3. 添加接口

三、前端工程化

1 前端工程化介绍

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

  1. 模块化：将js和css等，做成一个个可复用模块
  2. 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
  3. 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
  4. 自动化：项目的构建，测试，部署全部都是自动完成

2 前端工程化入门

介绍： Vue-cli 是 Vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。

Vue-cli 提供了如下功能：

  1. 统一的目录结构
  2. 本地调试
  3. 热部署
  4. 单元测试
  5. 集成打包上线

依赖环境：NodeJS

Vue项目-目录结构
在这里插入图片描述

Vue项目-启动
在这里插入图片描述

Vue项目-配置端口
在这里插入图片描述

Vue项目开发流程
在这里插入图片描述
在这里插入图片描述

四、Vue 组件库 Element

1 Element介绍

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。

官网：https://element.eleme.cn/#/zh-CNListener

2 快速入门

安装ElementUI组件库 （在当前工程的目录下），在命令行执行指令：

npm install element-ui@2.15.3

引入 ElementUI 组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

访问官网，复制组件代码，调整
在这里插入图片描述

<template><div><el-container  style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header><el-container><el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表单 --><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchForm.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入职日期"><!-- 日期选择器 --><el-date-pickerv-model="searchForm.entrydate"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column label="图像" width="180"><template slot-scope="scope"><img :src="scope.row.image" width="100px" height="70px"></template></el-table-column><el-table-column label="性别" width="140"><template slot-scope="scope">{{scope.row.gender == 1 ? '男':'女'}}</template></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><br><!-- 分页条 --><!-- Pagination 分页 --><el-pagination background layout="total,sizes, prev, pager, next, jumper" @size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></el-main></el-container></el-container></div>
</template><script>
import axios from 'axios';export default {data() {return {tableData: [],searchForm: {name:"",gender:"",entrydate:[]}}},methods: {onSubmit:function(){alert("查询数据");},handleSizeChange:function(val){alert("每页记录数变化" + val)},handleCurrentChange:function(val){alert("页码发生变化" + val)}},mounted () {//发送异步请求,获取数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {this.tableData = result.data.data;  });}
}
</script><style></style>

五、Vue路由

1 路由介绍

前端路由: URL中的hash(#号) 与组件之间的对应关系。
在这里插入图片描述

介绍： Vue Router 是 Vue 的官方路由。

组成：

  • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>：请求链接组件，浏览器会解析成
  • <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

在这里插入图片描述

2 路由入门

安装(创建Vue项目时已选择)

npm install vue-router@3.5.1

定义路由
在这里插入图片描述

六、打包部署

1 前端工程打包

在这里插入图片描述

2 部署前端工程

2.1 nginx介绍

  • 介绍：Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
  • 官网：https://nginx.org/

2.2 部署

部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下。

启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号

Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr 80)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/503567.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot 整合WebService

SpringBoot 整合WebService

文章目录 WebService1.简单介绍WebService1.1. 类型1.2. 架构1.3. 主要特点1.4. 使用场景1.5. Web服务标准和技术 2.案例-WebServiceDemo2.1.引入配置文件2.2.创建接口2.3.创建接口实现类2.4.创建WebService配置类2.5.测试 WebService Web服务&#xff08;Web Services&#xf…
阅读更多...
自定义BeanNameGenerator生成规则

自定义BeanNameGenerator生成规则

通过点进ComponentScan注解进入源码可以看到 追随BeanNameGenerator进入源码可以看到该类是个借口且只有一个方法 点击上面黑色箭头出现两个实现方法 点击第一个方法 进入determineBeanNameFromAnnotation方法中 通过上诉自定义一个生成beanName方法 先创建一个CustomeBeanN…
阅读更多...
idea使用maven创建springboot项目

idea使用maven创建springboot项目

按照图片中的流程来&#xff0c;就可以创建springboot项目&#xff0c;我这个主要是想做一个JavaWeb项目 有用的话&#xff0c;点个小赞赞再走呀~
阅读更多...
b站小土堆pytorch学习记录——P7-P8 Tensorboard的使用

b站小土堆pytorch学习记录——P7-P8 Tensorboard的使用

文章目录 一、前置知识1.Tensorboard是什么2.SummaryWriter3.add_scalar()4.add_image() 二、代码1.一次函数2.蚂蚁和蜜蜂图片 一、前置知识 1.Tensorboard是什么 TensorBoard 是 TensorFlow 的可视化工具&#xff0c;它允许开发者可视化模型的图&#xff08;graph&#xff0…
阅读更多...
动态规划|【路径问题】|931.下降路径最小和

动态规划|【路径问题】|931.下降路径最小和

目录 题目 题目解析 思路 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 代码 题目 931. 下降路径最小和 给你一个 n x n 的 方形 整数数组 matrix &#xff0c;请你找出并返回通过 matrix 的下降路径 的 最小和 。 下降路径 可以从第一行中的任何元素开…
阅读更多...
力扣SQL50 大的国家 查询

力扣SQL50 大的国家 查询

Problem: 595. 大的国家 Code select name,population,area from World where area > 3000000 or population > 25000000;
阅读更多...
Apache Echarts介绍与入门

Apache Echarts介绍与入门

介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性化定制的数据可视化图表。 官网地址&#xff1a;https://echarts.apache.org/zh/index.html 入门案例 Apache Echarts官方提供的快…
阅读更多...
三天学会阿里分布式事务框架Seata-seata事务分组介绍

三天学会阿里分布式事务框架Seata-seata事务分组介绍

锋哥原创的分布式事务框架Seata视频教程&#xff1a; 实战阿里分布式事务框架Seata视频教程&#xff08;无废话&#xff0c;通俗易懂版&#xff09;_哔哩哔哩_bilibili实战阿里分布式事务框架Seata视频教程&#xff08;无废话&#xff0c;通俗易懂版&#xff09;共计10条视频&…
阅读更多...
linux系统Jenkins工具添加自由项目和maven项目

linux系统Jenkins工具添加自由项目和maven项目

Jenkins添加自由项目 添加自由项目操作流程代码远程代码邮件标题邮件正文 添加maven项目准备环境操作流程 添加自由项目 gitlab配置基本代码页面等&#xff0c;拉取代码&#xff0c;打包&#xff0c;发布操作流程 代码 远程代码 echo ssh root192.168.188.177 "tar cz…
阅读更多...
【OpenCV】绘制桌面锁屏时钟

【OpenCV】绘制桌面锁屏时钟

OpenCV 是一个开源的计算机视觉&#xff08;Computer Vision&#xff09;与机器学习软件库&#xff0c;提供了多种图像处理算法与接口&#xff0c;用于解决计算机视觉相关问题。OpenCV 支持多平台与多语言&#xff0c;本文主要记录如何使用 OpenCV-Python 绘制桌面锁屏时钟。 目…
阅读更多...
一起玩儿平衡车（ESP32）——02 平衡车的组装与接线方法

一起玩儿平衡车（ESP32）——02 平衡车的组装与接线方法

摘要&#xff1a;本文介绍平衡车的组装与接线方法 前边介绍了所要实现的平衡车的组成&#xff0c;接下来就来把小车组装起来。首先是下层底板的底面要固定两个轮子。这个只要固定孔位没有问题&#xff0c;用螺丝直接将轮子支架固定上去就可以了。固定好后如下图所示&#xff1…
阅读更多...
【MySQL】：高效利用MySQL函数实用指南

【MySQL】：高效利用MySQL函数实用指南

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; MySQL从入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. MySQL函数概论二. 字符串函数三. 数值函数四. 日期函数五. 流程函数&#x1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023