JavaWeb——003Axios Vue组件库（Element）

目录

一、Ajax

1、同步与异步​编辑

2、原生Ajax（繁琐）​编辑

2.1、写一个简易的Ajax

3、Axios（推荐使用）​编辑

3.1、Axios入门

3.2、Axios请求方式别名

3.3、案例：基于Vue及Axios完成数据的动态加载展示​编辑

二、前后端分离开发

1、前后端开发模式

1.1、前后端混合开发

1.2、前后端分离开发（主流模式）and前后端分离开发流程

2、YAPI（接口文档的管理平台）

三、前端工程化

1、Vue脚手架环境准备

1.1、安装NodeJS

2、Vue项目简介

2.1、Vue项目创建

2.2、Vue项目目录结构

2.3、Vue项目启动（serve）

2.4、修改Vue项目端口（vue.config.js）

3、Vue项目开发流程

3.1、Vue页面的显示过程

3.2、Vue的组件（template\script\style）

四、Vue组件库Element

1、什么是Element？

2、Element快速入门

2.1、安装ElementUI组件库

2.2、引入ElementUI组件库

views目录下新建目录（element）：​编辑

2.3、定义Vue组件（内容可复制官方文档）

3、常见组件

3.1、表格（Table）​编辑

3.2、分页组件（Pagination）

3.3、对话框组件（Dialog）

3.4、表单组件（Form）​编辑

4、案例：根据页面原型完成员工管理页面的开发

4.1、创建页面，并完成页面的整体布局规划

4.2、布局中各个组件的实现

4.3、列表数据的异常加载与渲染展示

五、Vue路由

1、前端路由

2、Vue Router

2.1、安装vue-router

2.2、定义路由配置信息（index.js）

3、案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果

4、Bug：默认访问路由路径为/

六、打包部署

1、如何打包？

2、如何部署？（Nginx）

2.1、将 dist 目录下的文件复制到 nginx 安装目录

2.2、启动nginx.exe​编辑

2.3、扩展：反向代理、负载均衡

一、Ajax

1、同步与异步

2、原生Ajax（繁琐）

代码可参考W3School中的参考手册 

效果：（查看所有的异步请求，可以点击XHR）

2.1、写一个简易的Ajax

function ajax(url) {const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url, true)xhr.onreadystatechange = () => {if(xhr.readyState === 4){if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){resolve(JSON.parse(xhr.response))}else{reject(new Error('Response error'))}}}xhr.send(null)})return p
}
const url = 'text.json'
ajax(url).then(res => console.log(res)).catch(err => console.log(err))

3、Axios（推荐使用）

3.1、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</title>
</head>
<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>
</html>

3.2、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>
</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、前后端分离开发（主流模式）and前后端分离开发流程

2、YAPI（接口文档的管理平台）

YAPI已经暂停使用

三、前端工程化

1、Vue脚手架环境准备

1.1、安装NodeJS

安装过程可参考：NodeJS安装文档.md

2、Vue项目简介

2.1、Vue项目创建

2.2、Vue项目目录结构

2.3、Vue项目启动（serve）

2.4、修改Vue项目端口（vue.config.js）

3、Vue项目开发流程

3.1、Vue页面的显示过程

render 是一个函数，它的作用就是将 App 当中定义的视图创建出对应的虚拟DOM 元素，然后挂载到 #app 这个区域

3.2、Vue的组件（template\script\style）

template相当于HTML部分，script就是js部分，style就是css的样式

在Vue项目的开发中，其实main.js以及index.html很少会去操作，主要修改的都是.vue文件

 

四、Vue组件库Element

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

1、什么是Element？

为什么要学Element？主要是方便和优美 

2、Element快速入门

2.1、安装ElementUI组件库

npm install element-ui@2.15.3

会被安装在node_modules目录下 

 

2.2、引入ElementUI组件库

views目录下新建目录（element）：

默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入 

代码

<template><div><!-- button按钮 --><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div>
</template><script>
export default {}
</script><style>
</style>

 

2.3、定义Vue组件（内容可复制官方文档）

views目录下新建目录（element）：

<!-- button按钮 --><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row>

 默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入

效果显示：

3、常见组件

3.1、表格（Table）

使用步骤：

Ⅰ、从官网复制代码到 ElementView.vue ：

 

 <!-- Table 表格 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table>

 

tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],

 

3.2、分页组件（Pagination）

 <!-- Pagination 分页 --><el-paginationbackgroundlayout="total,sizes,prev, pager, next,jumper"@size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination>

 layout属性：

事件：size-change 与 current-change：

methods: {handleSizeChange: function (val) {alert("每页记录数变化" + val);},handleCurrentChange: function (val) {alert("页码发生变化" + val);}},
};

 

 

3.3、对话框组件（Dialog）

<!-- Dialog对话框 --><!-- Table --><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-columnproperty="date"label="日期"width="150"></el-table-column><el-table-columnproperty="name"label="姓名"width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog>

数据模型：

 gridData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},],dialogTableVisible: false,

 

3.4、表单组件（Form）

<!-- Dialog对话框-Form表单 --><el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的Dialog Dialog</el-button><el-dialog title="Form表单" :visible.sync="dialogFormVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="form.date1"style="width: 100%"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-pickerplaceholder="选择时间"v-model="form.date2"style="width: 100%"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog>

数据模型

form: {name: '',region: '',date1: '',date2: '',},

方法：

通过JSON.stringify()将对象转为字符串

onSubmit :function(){//JSON>stringify  json对象转字符串alert(JSON.stringify(this.form))}

 效果：

4、案例：根据页面原型完成员工管理页面的开发

实现步骤：

4.1、创建页面，并完成页面的整体布局规划

创建EmpView.vue文件，并在根组件中进行声明和导入

待续~

4.2、布局中各个组件的实现

4.3、列表数据的异常加载与渲染展示

安装Axios

npm install axios

导入Axios： 

在EmpView.vue文件中导入：

import axios from "axios";

发送异步请求：

yapi不可以用了，详见ajax地址访问不了-解决方案文件夹

mounted() {//发送异步请求,获取数据axios.get("http://localhost:10010/emp/list").then((result) => {this.tableData = result.data.data;});},

效果展示：

 

解决图片与性别展示（使用插槽 slot-scope） 

row指代这一行所有的字段值

效果展示

五、Vue路由

1、前端路由

2、Vue Router

2.1、安装vue-router

安装（创建Vue项目时已选择）

npm install vue-router@3.5.1

2.2、定义路由配置信息（index.js）

如果你要访问的是/emp路径，那么你要导入的就是EmpView.vue组件，/dept同理： 

 

3、案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果

 示例代码：

在组件的template中的对应位置添加<router-link>标签：

<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>

在根组件中添加对应的<router-view>标签： 

4、Bug：默认访问路由路径为/

问题：由于默认的访问路由路径为/，但我们在index.js中配置的路径只有两个，并不存在/，那么怎么解决这个问题呢？如果你访问/是找不到对应的组件的

解决办法：很简单！没有就加上

const routes = [{path: '/emp',name: 'emp',component: () => import('../views/tlias/EmpView.vue')},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect: '/dept'}
]

 

六、打包部署

1、如何打包？

直接运行build 即可打包，打包生成的文件将放入dist

效果展示

打包后的文件：

 

2、如何部署？（Nginx）

2.1、将 dist 目录下的文件复制到 nginx 安装目录

2.2、启动nginx.exe

更换 nginx 的端口号

config目录 -> nginx.conf：

找到默认端口，将其改为90： 

 

 访问项目

2.3、扩展：反向代理、负载均衡

反向代理可参考： 实现nginx反向代理（附nginx教程）

负载均衡可参考： Nginx如何优雅的实现负载均衡

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

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

相关文章

Flink CDC 3.0 表结构变更时导致webUI接口无反应原因

Flink CDC 3.0 表结构变更时导致webUI接口无反应原因

Flink CDC 3.0 表结构变更时导致webUI接口无反应&#xff01; 原因&#xff1a;因为deliverCoordinationRequestToCoordinator和requestJob都是SchedulerNG中方法&#xff0c;该类的线程模型是单线程执行&#xff0c;所以在deliverCoordinationRequestToCoordinator执行表结构…
阅读更多...
mysql创建数据库，用户授权

mysql创建数据库，用户授权

一、创建用户 CREATE USER 用户名% IDENTIFIED BY 密码; flush privileges; 二、更新用户密码 update mysql.user set authentication_stringpassword("密码") where userroot; flush privileges; 三、允许root远程登录 update user set host % where user r…
阅读更多...
AIoT网关 人工智能物联网网关

AIoT网关 人工智能物联网网关

AIoT(人工智能物联网)作为新一代技术的代表&#xff0c;正以前所未有的速度改变着我们的生活方式。在这个智能时代&#xff0c;AIoT网关的重要性日益凸显。它不仅是连接智能设备和应用的关键&#xff0c;同时也是实现智能化家居、智慧城市和工业自动化的必备技术。 　　 　　一…
阅读更多...
c# entity freamwork 判断是否存在

c# entity freamwork 判断是否存在

在 Entity Framework (EF) 中&#xff0c;你可以使用 LINQ 查询来判断数据库中是否存在特定条件的记录。以下是一些常见的方法&#xff1a; 使用 Any 方法: using (var context new YourDbContext()) {bool exists context.YourEntity.Any(e > e.Property yourValue);i…
阅读更多...
【linux进程间通信(二)】共享内存详解以及进程互斥概念

【linux进程间通信(二)】共享内存详解以及进程互斥概念

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; 进程间通信 1. 前言2. 共享内…
阅读更多...
2024年2月23日 晨会汇报

2024年2月23日 晨会汇报

Good morning, colleages! This is /ˈdɑː.tʃi/ speaking. As for my report today, I decide to wing it, so I didnt prepare a script. Now, Ill share an update about my recent work activities which encompasses two key area: a summary of my work yesterday a…
阅读更多...
【Go channel如何控制goroutine并发执行顺序？】

【Go channel如何控制goroutine并发执行顺序？】

多个goroutine并发执行时&#xff0c;每一个goroutine抢到处理器的时间点不一致&#xff0c;gorouine的执行本身不能保证顺序。即代码中先写的gorouine并不能保证先执行 思路&#xff1a;使用channel进行通信通知&#xff0c;用channel去传递信息&#xff0c;从而控制并发执行…
阅读更多...
基于开源模型对文本和音频进行情感分析

基于开源模型对文本和音频进行情感分析

应用场景 从商品详情页爬取商品评论&#xff0c;对其做舆情分析&#xff1b;电话客服&#xff0c;对音频进行分析&#xff0c;做舆情分析&#xff1b; 通过开发相应的服务接口&#xff0c;进一步工程化&#xff1b; 模型选用 文本&#xff0c;选用了通义实验室fine-tune的st…
阅读更多...
电脑录屏软件哪个好用？实测告诉你答案（2024年最新）

电脑录屏软件哪个好用？实测告诉你答案（2024年最新）

在当今信息化快速发展的时代&#xff0c;无论是录制在线课程、游戏操作&#xff0c;还是制作教程、会议记录&#xff0c;一款电脑录屏软件显得尤为重要&#xff0c;可是电脑录屏软件哪个好用呢&#xff1f;本文将介绍三款主流的电脑录屏软件&#xff0c;通过分步骤详细讲述&…
阅读更多...
使用maven集成spring在测试的时候报出了如下的异常：version 60

使用maven集成spring在测试的时候报出了如下的异常：version 60

使用maven集成spring在测试的时候报出了如下的异常&#xff1a; Caused by: java.lang.IllegalArgumentException: Unsupported class file major version 60 解决&#xff1a;
阅读更多...
在word中将latex格式的公式转化为带有编号的mathtype公式

在word中将latex格式的公式转化为带有编号的mathtype公式

在word中将latex格式的公式转化为带有编号的mathtype公式 1.先在word里面配置好mathtype2.在word中设置mathtype的格式3.先将latex格式的公式转化为mathml格式4.读到这里&#xff0c;是不是觉得这个方法麻烦 1.先在word里面配置好mathtype 注意&#xff1a;1.word的版本应该是 …
阅读更多...
基于springboot+vue的中小型医院网站(前后端分离)

基于springboot+vue的中小型医院网站(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
Sovit3D数字孪生平台 助力智慧海上风电场项目加速

Sovit3D数字孪生平台 助力智慧海上风电场项目加速

我们常说地球是蓝色星球&#xff0c;那是因为海洋约占地球面积的71%。如今&#xff0c;我国正在向“双碳”目标不断奋斗&#xff0c;海上风电也作为一种潜力清洁能源&#xff0c;迸发出前所未有的活力&#xff0c;海上吹来的风成为未来清洁能源新方向。 2024年海上风电项目加速…
阅读更多...
Qt_快速安装指南

Qt_快速安装指南

下载Qt在线安装程序&#xff08;不仔细介绍&#xff09;注册Qt账号&#xff08;不仔细介绍&#xff09;使用快速运行的命令&#xff0c;按照指定的下载地址下载 在Qt指定目录打开cmd命令窗口.\eqt-unified-windows-x86-4.0.1-1-online. exe --mirror https://mirrors.ustc.edu.…
阅读更多...
JVM虚拟机结构

JVM虚拟机结构

虚拟机结构图 从图中看出&#xff1a; JVM虚拟机主要有三大部分组成&#xff1a; 1. 类加载器 2. JVM运行时内存 3. 执行引擎 一、类加载器 类加载器主要用来加载字节码文件&#xff08;.class&#xff09;到内存中 二、内存结构 如图&#xff1a;可将内存分为两大部分&…
阅读更多...
【go】IP相关工具类

【go】IP相关工具类

文章目录 1.判断ipv4 or ipv62.计算cidr格式ip所含IP个数3.计算两个ip区间所含ip个数 1.判断ipv4 or ipv6 // return int 0:错误的ip 4:ipv4 6:ipv6 func CheckIp(ip string) int {if ip "" {return 4}out : net.ParseIP(ip)if out nil {return 0}if strings.Cont…
阅读更多...
C1475D Cleaning the Phone 题解

C1475D Cleaning the Phone 题解

文章目录 C1475D Cleaning the Phone 题解Cleaning the Phone题面翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示算法&#xff1a;贪心代码&#xff1a; C1475D Cleaning the Phone 题解 link Cleaning the Phone 题面翻译 题目大意&#xff1a; 有 n …
阅读更多...
【学习iOS高质量开发】——协议与分类

【学习iOS高质量开发】——协议与分类

文章目录 一、通过委托与数据源协议进行对象间通信1.委托模式2.要点 二、将类的实现代码分散到便于管理的数个分类之中1.如何实现2.要点 三、总是为第三方类的分类名称加前缀1.为什么总是为第三方类的分类名称加前缀2.要点 三、勿在分类中声明属性1.勿在分类中声明属性的原因2.…
阅读更多...
Android进阶(二十九) 走近 IntentFilter

Android进阶(二十九) 走近 IntentFilter

文章目录 一、什么是IntentFilter &#xff1f;二、IntentFilter 如何过滤隐式意图&#xff1f;2.1 动作测试2.2 类别测试2.3 数据测试 一、什么是IntentFilter &#xff1f; 如果一个 Intent 请求在一片数据上执行一个动作&#xff0c; Android 如何知道哪个应用程序&#xf…
阅读更多...
网页数据的解析提取（XPath的使用----lxml库详解）

网页数据的解析提取（XPath的使用----lxml库详解）

在提取网页信息时&#xff0c;最基础的方法是使用正则表达式&#xff0c;但过程比较烦琐且容易出错。对于网页节点来说&#xff0c;可以定义id、class或其他属性&#xff0c;而且节点之间还有层次关系&#xff0c;在网页中可以通过XPath或CSS选择器来定位一个或多个节点。那么&…
阅读更多...
最新文章

Copyright @ 2022~2023