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

11.16 Vue element

news 2026/3/27 16:34:25

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

轻量级PDF渲染库PdfiumAndroid：Android开发者的高效集成指南

轻量级PDF渲染库PdfiumAndroid&#xff1a;Android开发者的高效集成指南 【免费下载链接】PdfiumAndroid 项目地址: https://gitcode.com/gh_mirrors/pd/PdfiumAndroid 核心价值&#xff1a;为什么选择PdfiumAndroid&#xff1f; &#x1f4cc; 解决PDF渲染痛点&#…...

编程新知 2026/3/27 14:40:41

OpCore Simplify：零基础黑苹果配置的终极自动化解决方案

OpCore Simplify&#xff1a;零基础黑苹果配置的终极自动化解决方案 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的OpenCore EFI配置而烦…...

编程新知 2026/3/27 14:36:33

LazyVim终极指南：如何快速打造你的Neovim梦幻开发环境

LazyVim终极指南&#xff1a;如何快速打造你的Neovim梦幻开发环境 【免费下载链接】LazyVim Neovim懒人配置。 项目地址: https://gitcode.com/GitHub_Trending/la/LazyVim 你是否曾经因为Neovim配置的复杂性而望而却步&#xff1f;是否尝试过各种配置方案却始终找不到那…...

编程新知 2026/3/27 13:25:07

Qwen3.5-4B-Claude-Opus快速上手：Web页面直接调用推理蒸馏模型

Qwen3.5-4B-Claude-Opus快速上手&#xff1a;Web页面直接调用推理蒸馏模型 1. 模型概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF 是一个基于 Qwen3.5-4B 的推理蒸馏模型&#xff0c;重点强化了结构化分析、分步骤回答、代码与逻辑类问题的处理能力。该版本以 G…...

编程新知 2026/3/27 13:21:06

【紧急预警】CPython 3.12升级后，3款主流内存工具失效！2024最稳选型组合（含兼容性补丁与迁移路径）

第一章&#xff1a;Python 内存检测工具选型的底层逻辑与演进脉络Python 内存管理机制以引用计数为核心&#xff0c;辅以循环垃圾回收器&#xff08;GC&#xff09;和内存池&#xff08;pymalloc&#xff09;&#xff0c;这决定了内存问题往往隐匿于对象生命周期、引用链异常或…...

编程新知 2026/3/27 11:38:05

ViGEmBus虚拟手柄驱动：如何让任何设备变身Xbox 360或PS4控制器

ViGEmBus虚拟手柄驱动&#xff1a;如何让任何设备变身Xbox 360或PS4控制器 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 在Windows游戏生态中&#xff0c;…...

编程新知 2026/3/27 11:19:58

嵌入式系统的启动流程与初始化详解

嵌入式系统的启动流程与初始化详解 为什么启动流程如此重要 作为科技创业者&#xff0c;我深知在嵌入式产品开发中&#xff0c;启动流程的设计和优化直接影响产品的用户体验和可靠性。一个快速、稳定的启动流程不仅能提升产品的竞争力&#xff0c;还能减少客户的等待时间&#…...

编程新知 2026/3/27 10:41:48

终极指南：如何在Foobar2000中安装和配置ESLyric逐字歌词源

终极指南&#xff1a;如何在Foobar2000中安装和配置ESLyric逐字歌词源 【免费下载链接】ESLyric-LyricsSource Advanced lyrics source for ESLyric in foobar2000 项目地址: https://gitcode.com/gh_mirrors/es/ESLyric-LyricsSource 想要在Foobar2000中享受精准的逐字…...

编程新知 2026/3/27 10:19:34

致开发者：别再重复造轮子，这个开源商城系统让你把时间花在刀刃上

作为开发者&#xff0c;你是否厌倦了每次新项目都要从零搭建电商后台&#xff1f;商品、订单、会员、营销……这些基础模块耗费了你多少宝贵的创造力&#xff1f;今天&#xff0c;我们想和你聊聊一个能让你“拿来即用&#xff0c;改也不难”的解决方案——CRMEB开源商城系统。它…...

编程新知 2026/3/27 8:30:32

大多数加密API都不够用：量化团队真正需要的数据到底是什么？

如果你做过加密相关开发&#xff0c;无论是&#xff1a; 量化交易数据平台研究分析风控系统 你大概率都会经历一个阶段&#xff1a; &#x1f449; API 接了一堆&#xff0c;但始终“不够用”。 常见的一个误区 很多人在刚开始做数据接入时&#xff0c;会觉得&#xff1a; …...

编程新知 2026/3/27 8:12:28