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.hqwc.cn/news/484961.html

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

相关文章

将一个 PostgreSQL 数据库复制到另一个数据库中

将一个 PostgreSQL 数据库复制到另一个数据库中

以管理员身份进入cmd窗口&#xff0c;输入如下命令 语法&#xff1a; pg_dump -C -h 本机IP -U 本机postgresql用户名 源数据库名 | psql -h 服务器IP -U 服务器postgresql用户名 目标数据库名 示例&#xff1a; pg_dump -C -h 127.0.0.1 -U postgres test01-dbname | psql…
阅读更多...
十七、鼠标操作与响应

十七、鼠标操作与响应

项目功能实现&#xff1a;通过移动鼠标&#xff0c;在图片上实现类似画板绘制矩形的功能&#xff0c;并把绘制的矩形区域单独显示出来 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 mouse.h #pragma once#include<opencv2/opencv.hpp>using namespac…
阅读更多...
C/C++的内存管理（1）

C/C++的内存管理（1）

内存管理 C与C的内存分布C语言中动态内存管理方式回顾C内存管理的方式 C与C的内存分布 我们学习C语言时就知道&#xff0c;储存不同的变量计算机会相应分配不同区块的内存。那为什么要把内存化为不同的区域呢&#xff1f;实质上是为了方便管理 下面我们来看看下面一道例题&…
阅读更多...
JAVAEE初阶 网络编程(十二)

JAVAEE初阶 网络编程(十二)

HTTP协议 一. 状态码1.200 OK2. 404 NOT FOUND3.403 forbidden4. 405 Method Not Allowed5. 500 Interval Server Error6.504 Gateway Timeout7.302 Move temporarily 二. 如何构造HTTP请求1.通过第三方工具构造. 二.HTTPS三. 密码学中的重要概念1.明文2.密文3.密钥4.对称加密5…
阅读更多...
普中51单片机学习（EEPROM）

普中51单片机学习（EEPROM）

EEPROM IIC串行总线的组成及工作原理 I2C总线的数据传送 数据位的有效性规定 I2C总线进行数据传送时&#xff0c;时钟信号为高电平期间&#xff0c;数据线上的数据必须保持稳定&#xff0c;只有在时钟线上的信号为低电平期间&#xff0c;数据线上的高电平或低电平状态才允许…
阅读更多...
串的相关题目

串的相关题目

于是他错误的点名开始了 我发现有关hash得题目有些是可以通过map数组来完成的&#xff1a;何为map数组&#xff0c;我们先思考一下最简单的桶的排序&#xff0c;桶排序是将我们需要数字最为下标输进数组中&#xff0c;而数组是存放的数字是这个数字出现的次数&#xff0c;但是由…
阅读更多...
基于ORB-SLAM2与YOLOv8剔除动态特征点(三种方法)

基于ORB-SLAM2与YOLOv8剔除动态特征点(三种方法)

基于ORB-SLAM2与YOLOv8剔除动态特征点(三种方法) 写上篇文章时测试过程比较乱&#xff0c;写的时候有些地方有点失误&#xff0c;所以重新写了这篇 本文内容均在RGB-D环境下进行程序测试 本文涉及到的动态特征点剔除速度均是以https://cvg.cit.tum.de/data/datasets/rgbd-dat…
阅读更多...
Kubernetes 卷存储 NFS | nfs搭建配置 原理介绍 nfs作为存储卷使用

Kubernetes 卷存储 NFS | nfs搭建配置 原理介绍 nfs作为存储卷使用

目录 1、NFS介绍2、NFS服务部署2.1安装nfs服务 (服务端配置)2.2启动NFS服务2.3 服务检查2.4 客户端配置 3、nfs作为存储卷使用3.1 nfs作为volume3.2 nfs存储的缺点3.3 nfs作为PersistentVolum 4、nfs作为动态存储提供5、总结 1、NFS介绍 NFS&#xff08;Network File System&a…
阅读更多...
模糊的照片怎么变清晰？这些方法让你快速完成

模糊的照片怎么变清晰？这些方法让你快速完成

在我们日常生活中&#xff0c;拍照已经成为记录生活点滴的重要方式。然而&#xff0c;有时候由于各种原因&#xff0c;拍摄出来的照片会显得模糊不清&#xff0c;这让我们感到十分苦恼。尤其是当我们希望珍藏那些对我们有着特殊意义的照片时&#xff0c;却因为清晰度不足而无法…
阅读更多...
智慧公厕是什么？智慧公厕是构建智慧城市的环境卫生基石

智慧公厕是什么？智慧公厕是构建智慧城市的环境卫生基石

随着城市化进程的不断加速&#xff0c;城市人口密度和流动性也逐渐增大&#xff0c;对城市公共设施的需求与日俱增。而在这些公共设施中&#xff0c;公厕作为城市基础设施中不可或缺的一环&#xff0c;对城市的环境卫生和市民生活质量起着举足轻重的作用。如何提高公厕的管理效…
阅读更多...
思考：如何写出让同事难以维护的代码？

思考：如何写出让同事难以维护的代码？

本文从【程序命名&注释】【数据类型&类&对象】【控制执行流程】和【程序/结构设计】四个方面梳理了一些真实案例&#xff0c;相信通过这些案例你能迅速get技能&#xff1a;如何写出让同事难以维护的代码doge。 比起什么程序员删库跑路&#xff0c;我更喜欢「写出让…
阅读更多...
基于springboot+vue的电影评论网站(前后端分离)

基于springboot+vue的电影评论网站(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023