当前位置： 首页 > news >正文

11.16 Vue element

news 2026/2/9 2:16:41

Ajax

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

作用：

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

同步与异步：

原生Ajax

1.准备数据地址：https://mock.apifox.cn/m1/3128855-0-default/emp/list

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。

官网： Axios中文文档 | Axios中文网

•Axios入门

1.引入Axios的js文件

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

链接：https://mock.apifox.cn/m1/3128855-0-default/emp/list

案例

1. 数据准备的url： http://yapi.smart-xwork.cn/mock/169327/emp/list

2. 在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1 代表男，2 代表女)

<!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("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {this.emps = result.data.data;})}});
</script>
</html>

前后端分离开发

前后端混合开发

当前最为主流的开发模式：前后端分离

YApi

介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

前端工程化

前端工程化：是指在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化、标准化。

  • 环境准备

vue

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

Vue-cli提供了如下功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

依赖环境：NodeJS

安装NodeJS

安装vue-cli

  • Vue项目简介

Vue项目-创建

命令行：

图形化界面：

Vue项目-目录结构

  • 基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

Vue项目-启动

Vue项目-配置端口

  • Vue项目开发流程

Vue项目开发流程

Vue的组件文件以 .vue结尾，每个组件由三个部分组成：<template> 、<script>、<style> 。

Vue组件库Element

什么是Element

  • Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
  • 组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。
  • 官网：https://element.eleme.cn/#/zh-CNListener

快速入门

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

引入ElementUI组件库

访问官网，复制组件代码，调整

常见组件

常见组件-表格

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

常见组件-分页

Pagination 分页：当数据量过多时，使用分页分解数据。

常见组件-对话框

Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。

常见组件-表单

Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

案例

根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。

服务端数据获取地址：https://mock.apifox.cn/m1/3128855-0-default/emp/list

步骤：

  • 创建页面，完成页面的整体布局规划
  • 布局中各个部分的组件实现
  • 列表数据的异步加载，并渲染展示

Vue 路由

前端路由：URL中的hash（#号）与组件之间的对应关系。

Vue Router

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

组成：

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

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

打包部署

打包：npm 脚本直接打包

部署

Nginx

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

官网：nginx

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

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

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

访问：http://localhost:90

相关文章：

11.16 Vue element

Ajax 概念&#xff1a;Asynchronous JavaScript Anderson XML&#xff0c;异步的JavaScript和XML。 作用&#xff1a; 数据交换&#xff1a;通过Ajax 可以给服务器发送请求&#xff0c;并收取服务器相应的数据。异步交互&#xff1a;可以在不重新加载整个页面的情况下&#…...

编程日记 2024/11/18 5:50:28

Gin 框架中的路由

1、路由概述 路由（Routing）是由一个 URI（或者叫路径）和一个特定的 HTTP 方法（GET、POST 等） 组成的，涉及到应用如何响应客户端对某个网站节点的访问。 RESTful API 是目前比较成熟的一套互联网应用程序的 API 设计理论，所以我们设计我们的路 由的时候建议参考 …...

编程日记 2024/11/18 5:45:23

在MATLAB中实现自适应滤波算法

自适应滤波算法是一种根据信号特性自动调整滤波参数的数字信号处理方法&#xff0c;其可以有效处理噪声干扰和信号畸变问题。在许多实时数据处理系统中&#xff0c;自适应滤波算法得到了广泛应用。在MATLAB中&#xff0c;可以使用多种方法实现自适应滤波算法。本文将介绍自适应…...

编程日记 2024/11/18 5:44:21

linux文件与重定向

目录 一、共识原理 二、回顾C语言文件函数 1.fopen 2.fwrite 3.fclose 三、文件系统调用 1.open 2.write 3.访问文件的本质 4.stdin&&stdout&&stderror 5.文件的引用计数 四、重定向 1.文件描述符的分配规则 2. 输出重定向 3.重定向系统调用 4.…...

编程日记 2024/11/18 5:42:18

基于Python的仓库管理系统设计与实现

背景&#xff1a; 基于Python的仓库管理系统功能介绍 本仓库管理系统采用Python语言开发&#xff0c;利用Django框架和MySQL数据库&#xff0c;实现了高效、便捷的仓库管理功能。 用户管理&#xff1a; 支持员工和管理员角色的管理。 用户注册、登录和权限分配功能&#x…...

编程日记 2024/11/18 5:41:16

【Pikachu】URL重定向实战

人生在世只有一次&#xff0c;不必勉强选择自己不喜欢的路&#xff0c;随性而生或随性而死都没关系&#xff0c;不过无论选择哪条路&#xff0c;都不要忘记自己的初心。 1.不安全的url跳转实战 首先点击页面上的链接&#xff0c;观察url 直接修改url为https://www.baidu.com进…...

编程日记 2024/11/18 5:40:12

C语言实现3D动态爱心图形的绘制与动画效果

**标题&#xff1a;C语言实现3D动态爱心图形的绘制与动画效果** --- ### 一、引言 在计算机图形学中&#xff0c;三维图形的绘制和动画处理是一个重要且有趣的研究方向。通过数学公式描述的几何体可以在计算机屏幕上展示出丰富多彩的动态效果&#xff0c;其中“爱心”图形作…...

编程日记 2024/11/18 5:39:10

深入理解Nginx：从基础配置到高级优化

什么是Nginx&#xff1f; Nginx&#xff08;发音为“Engine-X”&#xff09;是一个高性能的HTTP和反向代理服务器&#xff0c;同时也可以作为邮件代理服务器和通用的TCP/UDP代理服务器。Nginx以其高并发处理能力、稳定性和灵活的配置闻名&#xff0c;是现代Web开发和部署的核心…...

编程日记 2024/11/18 5:38:09

ONLYOFFICE8.2版本测评，团队协作的办公软件

文章目录 引言ONLYOFFICE产品简介功能与特点1. 实时协作2. 兼容性3. 模板库4. 评论和修订5. 安全性 体验与测评功能测试 邀请用户使用项目介绍结尾了解更多 引言 在数字化办公的浪潮中&#xff0c;效率和协作成为了工作的核心。ONLYOFFICE作为一个强大的办公套件&#xff0c;正…...

编程日记 2024/11/18 5:37:07

spring 和 grpc 的整合

spring 和 grpc 的整合 首先我们要知道 grpc 中我们在使用的时候用到了 grpc 的那些东西 dil 的编写serverimplserverbuilder addService 客户端的 stub 编写 这里面我们看一下我们那些地方可能需要 spring 帮我们管理&#xff0c;那些地方我们需要自己来管理呢&#xff1f;…...

编程日记 2024/11/18 5:36:07

企业项目级IDEA设置类注释、方法注释模板（仅增加@author和@date）

文章目录 前言一 设置类注释1.1 添加模板1.2 复制配置 二 设置方法注释2.1 添加模版2.2 设置模版2.3 设置参数变量2.4 配置对应快捷键2.5 配置对应作用域2.6 使用方式 说明 前言 公司代码规范中&#xff0c;需要在标准JavaDoc注释的基础上加上作者和日期。网上虽然有很多现成的…...

编程日记 2024/11/18 5:35:04

1 设计模式原则之开闭原则

一、开闭原则 1.定义 开闭原则&#xff1a;对扩展开放&#xff0c;对修改关闭。 2.具体用法 在程序需要进行拓展的时候&#xff0c;不能去修改原有的代码&#xff0c;实现一个热插拔的效果。简言之&#xff0c;是为了使程序的扩展性好&#xff0c;易于维护和升级。 想要达到这…...

编程日记 2024/11/18 5:34:03

前端大环境

需求增长&#xff1a; 数字化转型推动&#xff1a;企业和组织的数字化转型进程不断加快&#xff0c;对前端开发的需求持续增加。无论是企业官网、电子商务平台、在线办公系统还是各种移动端应用&#xff0c;都需要专业的前端开发来打造良好的用户界面和交互体验。新兴技术和平台…...

编程日记 2024/11/18 5:31:00

Electron: 主进程和渲染进程之间通信

// 渲染进程 向 主进程 异步通信// preload.js 预加载 const {ipcRenderer} require(electron) ipcRenderer.send(on-send-event, 这里是需要传递的参数) // 第一步ipcRenderer.on(on-resend-event, (e, data) > {console.log(data) // 打印的是ipcMain.on传递过来的参数&a…...

编程日记 2024/11/18 5:29:59

社交电商的优势及其与 AI 智能名片小程序、S2B2C 商城系统的融合发展

摘要&#xff1a;本文深入分析了社交电商相较于传统电商的优势&#xff0c;包括门槛低、易操作、更生活化和可团队化运作等特点。同时&#xff0c;探讨了 AI 智能名片小程序和 S2B2C 商城系统在社交电商发展中的作用&#xff0c;以及它们与社交电商融合所带来的新机遇和发展前景…...

编程日记 2024/11/18 5:28:55

蓝桥杯c++算法学习【4】之简单数论（阶乘约数、求值、循环小数、等差数列、最大比例：：：非常典型的必刷例题！！！）

别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01;! 关注博主&#xff0c;更多蓝桥杯nice题目静待更新:) 简单数论 一、阶乘约数 【问题描述】 定义阶乘n!123...n。 请问100! &#xff08;100 的阶乘&#xff09;有多少个正约数。 【答案提交】 这…...

编程日记 2024/11/18 5:27:54

重构代码之删除对参数的赋值

删除对参数的赋值 是一种重构技术&#xff0c;旨在消除对方法参数的重新赋值。这种实践可以增强代码的可读性和维护性&#xff0c;避免潜在的副作用。以下是详细讲解&#xff1a; 一、动机 保护参数的意图&#xff1a;方法参数通常表示传入数据或状态。如果重新赋值&#xff…...

编程日记 2024/11/18 5:24:51

Docker的基本概念、安装步骤以及一些简单的用法

Docker 是一种开源的容器化平台&#xff0c;允许开发者打包应用及其依赖项到一个可移植的容器中。容器可以在任何支持Docker的环境中运行&#xff0c;这使得应用的部署和管理变得更加简单和高效。 1. Docker的基本概念 在深入学习Docker之前&#xff0c;了解一些基本概念是很…...

编程日记 2024/11/18 5:23:50

VuePress v2 快速搭建属于自己的个人博客网站

目录 为什么用VuePress&#xff1f; 一、前期准备 Node.js 使用主题快速开发 二、VuePress安装 三、个性化定制 修改配置信息 删除不需要的信息 博客上传 四、部署 使用github快速部署 初始化仓库 本地配置 配置github的ssh密钥 部署 为什么用VuePress&#xff…...

编程日记 2024/11/18 5:21:47

shell编程--永久环境变量和字符串显位

环境变量 echo $HOME 在终端输出后会显示家目录有个root变量 我们会提出个疑问为什么平时我们在终端输入sl 或者which等等命令会输出一些内容呢&#xff0c;这是因为这些命令都有对应的环境变量。 我们查看一下环境变量 在终端输入&#xff1a; echo $PATH 我们看一下输出…...

编程日记 2024/11/18 5:18:43

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/8 21:59:25

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2026/1/25 4:19:49