web开发 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue(学习版2)

news2024/11/22 7:09:07

一、前言 

接下来就是来解决这些问题 

二、 Ajax

1.ajax 

javscript是网页三剑客之一,空用来控制网页的行为的

xml是一种标记语言,是用来存储数据的 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>‘

2.axios 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios</title>
</head>
<body>
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
    function get(){
        axios({
            method:'get',
            url:'http://yapi.smart-xwork.cn/mock/169327/emp/list',

        }).then(result =>{
            console.log(result.data);
            
        })

    } 

    function post(){
        axios({
            method:'post',
            url:'http://yapi.smart-xwork.cn/mock/169327/emp/deleteById',
            data:'id=1', 
        }).then(result =>{
            console.log(result.data);
            
        })

    }
</script>
</html>

3.axio案例 

 这三个代码都是没有用浏览器看到的(因为那个网址打不开)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios案例</title>
</head>
<body>
    
    <div id="app">
        <table width="800px" cellspacing="0" border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图片</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职时间</th>
                <th>更新时间</th>
            </tr>

            <tr v-for="(emp, index) in emps" align="center">
                <td>{{index+1}}</td>
                <td>{{emps.name}}</td>
                <!-- <td>{{emps.image}}</td> -->
                 <td>
                    <img v-bind : src="emps.image" alt="" height="50px" width="70px">
                 </td>
                <td>
                    <span v-if="gender == 1">男</span>
                    <span v-if="gender == 2">女</span>
                </td>
                <td>{{emps.job}}</td>
                <td>{{emps.entrydate}}</td>
                <td>{{emps.updatatime}}</td>
            </tr>

        </table>
    </div>

</body>
<script>
    new Vue({
        el:'a#pp',
        data:{
            emps:[]
        },
        mounted() {
            axios.get('').then(result => {
                this.emps = result.data.data;//当前vue实例中的data中的emps属性赋值
                
            })
        },
    })
</script>
</html>

三、前后端分离开发

1.介绍

2.YAPI -接口文档管理平台

这里我插播一条:使用apipost

四、前端工程化

1.环境准备

 

如果需要可以找我要

 

2. vue项目介绍

 

 

3.vue项目开发流程

五、Vue组件库Element

六、Vue路由

七、打包部署

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Fastjson反序列化漏洞——JNDI注入

一.前言 之前使用反序列化和序列化时写入的到文件里面的&#xff0c;真实环境中&#xff0c;也是这样吗&#xff1f; 当然不是了&#xff0c;通过二进制&#xff0c;字节流数据进行的。 为什么会有JNDI&#xff1f; 由于http和ftp传输消耗资源仍然很大&#xff0c;就有了JRM…

macOS Sequoia发布:Apple又给我们带来了什么惊喜?

今天是个激动人心的日子,尤其是对于Mac用户来说,因为Apple正式发布了全新的操作系统——macOS Sequoia。作为一款专为Mac设备设计的操作系统,Sequoia不仅仅是简单的升级,它承载了Apple在系统体验上的巨大飞跃。听到这个消息,你可能会好奇,Apple这次又会带来什么样的创新?…

【Python】高效图像处理库:pyvips

月亮慢慢变圆&#xff0c;日子慢慢变甜。 在图像处理领域&#xff0c;pyvips 是一个轻量级且高效的库&#xff0c;适合处理大规模图像、实现高性能的操作。相较于其他常见的图像处理库如 PIL 或 OpenCV&#xff0c;pyvips 以其低内存占用和出色的速度脱颖而出。本文将介绍 pyv…

2024年全国大学生数学建模竞赛B题生产过程中的决策问题分析

目录 引言 问题 1&#xff1a;抽样检测方案设计 问题 2&#xff1a;生产过程中的决策 决策阶段划分 决策方案 结果 问题 3&#xff1a;多道工序和零配件的决策 生产流程 决策过程 问题 4&#xff1a;基于抽样检测的重新决策 动态调整次品率 结论 引言 在2024年全国…

[Golang] Sync

[Golang] Sync 文章目录 [Golang] Syncsync.WaitGroupsync.Once对比init() sync.Lock互斥锁和读写锁互斥锁读写锁 死锁问题加锁解锁不成对循环等待 sync.Mapsync/atomicatomic和mutex的区别atomic.value sync.Pool如何使用sync.Pool使用场景 Golang中我们一般提倡使用通信来共享…

Java入门,初识Java

Java背景知识 Java是早期美国 sun 公司&#xff08;Stanford University Network&#xff09;在1995年推出的一门计算机高级编程语言。Java早期称为Oak&#xff08;中文翻译为&#xff1a;橡树&#xff09;&#xff0c;后期改名为Java。&#xff08;因为当时sun公司门口有很多…

MySQL_数据类型简介

课 程 推 荐我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448;入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448;虚 拟 环 境 搭 建 &#xff1a;&#x1…

【计算机网络】TCP 协议——详解三次握手与四次挥手

文章目录 一、引言二、TCP1、TCP 的数据格式2、TCP 的三次握手3、TCP 的四次挥手4、TCP 的全双工通信 三、TCP 的状态转换1、TCP 连接的建立&#xff08;三次握手&#xff09;状态2、TCP 连接的终止&#xff08;四次挥手&#xff09;状态3、TCP 异常情况 一、引言 TCP与UDP的区…

Linux操作系统文件权限管理

Linux操作系统下文件的权限分为当前用户权限、用户组权限和其他用户权限&#xff0c;然后每一类用户或组又分为读权限(r)、写权限(w)和可执行权限(x)。 如图1&#xff0c;打开任一目录&#xff0c;右键单击文件&#xff0c;在弹出菜单选择“属性”&#xff0c;在弹出的属性选项…

一款强大的吉他乐谱编辑软件GuitarPro 8.2中文解锁版

GuitarPro 8.2中文解锁版是一款强大的吉他乐谱编辑软件&#xff0c;适合新手和专业乐手。它提供详尽教程和实用工具&#xff0c;助力初学者掌握吉他技巧&#xff1b;对于专业乐手&#xff0c;它精准记录音符和节奏&#xff0c;提供丰富编辑功能和音效处理。此外&#xff0c;软件…

【python版】示波器输出的csv文件(时间与电压数据)如何转换为频率与幅值【方法④】

将示波器输出的 CSV 文件中的时间和电压数据转换为频率和幅值数据的过程涉及几个步骤&#xff0c;下面是详细的步骤和相关的计算公式&#xff1a; 1. 导入数据 首先&#xff0c;你需要将 CSV 文件中的时间和电压数据导入到数据分析工具中&#xff0c;比如 Python&#xff08;…

【网络】TCP/IP 五层网络模型:网络层

最核心的就是 IP 协议&#xff0c;是一个相当复杂的协议 TCP 详细展开讲解&#xff0c;是因为 TCP 确实在开发中非常关键&#xff0c;经常用到&#xff0c;IP 则不同&#xff0c;和普通程序猿联系比较浅。和专门开发网络的程序猿联系比较紧密&#xff08;开发路由器&#xff0…

深度学习自编码器 - 随机编码器和解码器篇

序言 在深度学习领域&#xff0c;自编码器作为一种无监督学习技术&#xff0c;凭借其强大的特征表示能力&#xff0c;在数据压缩、去噪、异常检测及生成模型等多个方面展现出独特魅力。其中&#xff0c;随机编码器和解码器作为自编码器的一种创新形式&#xff0c;进一步拓宽了…

COTERRORSET—— LLM训练新基准让模型从自身错误中学习

概述 论文地址&#xff1a;https://arxiv.org/pdf/2403.20046.pdf 在最近的研究中&#xff0c;大规模语言模型因其推理能力而备受关注。这些模型在各种任务和应用中取得了令人瞩目的成果&#xff0c;尤其是使用思维链&#xff08;CoT&#xff09;提示方法的有效性已得到证实。…

智慧宿舍平台|基于Springboot+vue的智慧宿舍系统(源码+数据库+文档)

智慧宿舍系统 目录 基于Springbootvue的智慧宿舍系统 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取 博主介绍&#xff1a;✌️大厂码农|毕设布道师&#xff0c;阿里云开发社区乘风者…

FPGA基本结构和简单原理

前言&#xff1a; FPGA全程为&#xff08;Field Programmable Gate Array&#xff09;现场可编程逻辑阵列&#xff0c;以基本的逻辑为主可以实现大多数芯片可以实现的功能&#xff0c;比如说&#xff1a;ASIC芯片等&#xff0c;在半导体领域有着重要的作用。 本文…

3. 轴指令(omron 机器自动化控制器)——>MC_MoveAbsolute

机器自动化控制器——第三章 轴指令 4 MC_MoveAbsolute变量▶输入变量▶输入输出变量▶输入输出变量 功能说明▶指令详情▶时序图▶重启运动指令▶多重启动运动指令▶异常 示例程序1▶参数设定▶动作示例▶梯形图▶结构文本(ST) 示例程序2▶参数设定▶动作示例▶梯形图▶结构文…

【智路】智路OS 应用开发

1 总览 1.1 功能 智路OS的应用基于框架提供的服务数据&#xff0c;实现场景理解、指标计算、V2X核心功能实现&#xff0c;应用包括但不限于&#xff1a; V2X应用场景实现交通事件检测交通流指标计算系统监控路径规划控制 开发者可以基于智路OS框架和数据&#xff0c;实现自…

【CSS in Depth 2 精译_030】5.2 Grid 网格布局中的网格结构剖析(下)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

Python编程 - 线程

目录 前言 一、线程的使用 &#xff08;一&#xff09;基础使用 &#xff08;二&#xff09;等待线程完成 &#xff08;三&#xff09;多个线程 &#xff08;四&#xff09;守护线程 &#xff08;五&#xff09;线程同步 &#xff08;六&#xff09;总结 二、队列对象 …