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,一经查实,立即删除!

相关文章

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

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

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

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

电脑录屏软件哪个好用?实测告诉你答案(2024年最新)

在当今信息化快速发展的时代&#xff0c;无论是录制在线课程、游戏操作&#xff0c;还是制作教程、会议记录&#xff0c;一款电脑录屏软件显得尤为重要&#xff0c;可是电脑录屏软件哪个好用呢&#xff1f;本文将介绍三款主流的电脑录屏软件&#xff0c;通过分步骤详细讲述&…

使用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公式 1.先在word里面配置好mathtype2.在word中设置mathtype的格式3.先将latex格式的公式转化为mathml格式4.读到这里&#xff0c;是不是觉得这个方法麻烦 1.先在word里面配置好mathtype 注意&#xff1a;1.word的版本应该是 …

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

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

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

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

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虚拟机结构

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

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

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

Android进阶(二十九) 走近 IntentFilter

文章目录 一、什么是IntentFilter &#xff1f;二、IntentFilter 如何过滤隐式意图&#xff1f;2.1 动作测试2.2 类别测试2.3 数据测试 一、什么是IntentFilter &#xff1f; 如果一个 Intent 请求在一片数据上执行一个动作&#xff0c; Android 如何知道哪个应用程序&#xf…

Spring Boot中实现列表数据导出为Excel文件

点击下载《Spring Boot中实现列表数据导出为Excel文件》 1. 前言 本文将详细介绍在Spring Boot框架中如何将列表数据导出为Excel文件。我们将通过Apache POI库来实现这一功能&#xff0c;并解释其背后的原理、提供完整的流程和步骤&#xff0c;以及带有详细注释的代码示例。最…

关于设备连接有人云的使用及modbus rtu协议,服务器端TCP调试设置

有人云调试 调试过程问题1. 关于modbus rtu协议,实质上有三种modbus基本原理modbus 格式2. 关于modbus crc16通信校验3. 关于在ubuntu阿里云服务器端,监听网络数据之调试mNetAssist之前的一个项目,再拿出来回顾下。 调试过程 先 要在有人云,用手机号注册一个服务账号,官网显…

家的情感记忆:如何用壁纸讲述你的墙故事?

1、方小童在线工具集 网址&#xff1a; 方小童 该网站是一款在线工具集合的网站&#xff0c;目前包含PDF文件在线转换、随机生成美女图片、精美壁纸、电子书搜索等功能&#xff0c;喜欢的可以赶紧去试试&#xff01;

HarmonyOS—使用预览器查看应用/服务效果

DevEco Studio为开发者提供了UI界面预览功能&#xff0c;可以查看应用/服务的UI界面效果&#xff0c;方便开发者随时调整界面UI布局。预览器支持布局代码的实时预览&#xff0c;只需要将开发的源代码进行保存&#xff0c;就可以通过预览器实时查看应用/服务运行效果&#xff0c…

探索分布式强一致性奥秘:Paxos共识算法的精妙之旅

提到分布式算法&#xff0c;就不得不提 Paxos 算法&#xff0c;在过去几十年里&#xff0c;它基本上是分布式共识的代名词&#xff0c;因为当前一批常用的共识算法都是基于它改进的。比如&#xff0c;Fast Paxos 算法、Cheap Paxos、Raft 算法等。 由莱斯利兰伯特&#xff08;L…

Spring6学习技术|AOP

学习材料 尚硅谷Spring零基础入门到进阶&#xff0c;一套搞定spring6全套视频教程&#xff08;源码级讲解&#xff09; AOP AOP&#xff08;Aspect Oriented Programming&#xff09;是一种设计思想&#xff0c;是软件设计领域中的面向切面编程&#xff0c;它是面向对象编程的…

AIDL的工作原理与使用示例 跨进程通信 远程方法调用RPC

AIDL的介绍与使用 AIDL&#xff08;Android Interface Definition Language&#xff09;是Android中用于定义客户端和服务端之间通信接口的一种接口定义语言。它允许你定义客户端和服务的通信协议&#xff0c;用于在不同的进程间或同一进程的不同组件间进行数据传递。AIDL通过…

算法项目(3)—— 从零实现KNN、朴素贝叶斯垃圾邮件分类

本文包含什么? 项目运行的方式项目代码,自己实现KNN算法以及朴素贝叶斯算法.代码介绍运行有问题? csdn上后台随时售后.项目说明 本文主要是自己从0实现KNN算法以及朴素贝叶斯算法.然后使用英文垃圾邮件数据集进行垃圾邮件分类.常见的代码均调用sklearn库来实现,本文自行实现…

从零学习Linux操作系统第二十八部分 shell脚本中的执行流控制

一、什么是执行流、循环执行流 执行流&#xff1a;改变执行顺序&#xff0c;使之更方便操作者 循环执行流&#xff1a;根据脚本是执行流再某一个状态下进行循环执行&#xff0c;进行多次执行后再往下走&#xff08;for语句&#xff09; for语句 作用 为循环执行动作 for语句…