Ajax及前端工程化
Ajax：异步的js与xml。
作用：
1、通过ajax给服务器发送数据，并获得其响应的数据。
2、可以在不更新整个网页的情况下，与服务器交换数据并更新部分网页的技术。
一、同步与异步
二、原生Ajax
1、准备数据地址
2、创建XMLHttpRequest对象，用于和服务器交换数据
3、向服务器发送请求
4、获取服务器响应的数据
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" name="" id="" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>function getData() {//1、创建XMLHttpRequsetvar xmlHttpRequest = new XMLHttpRequest();//2、发送异步请求xmlHttpRequest.open("GET", "/test_/ajax/ajax_info.txt");xmlHttpRequest.send();//3、获取服务器响应数据xmlHttpRequest.onreadystatechange = function() {if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {alert("123");document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;}}}</script>
</html>1、Axios
对原生ajax进行封装，方便开发
1、引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>2、
function get() {//axios发送异步请求axios({method:"get",url:"https://www.baidu.com"}).then(result => {console.log(result.data)})} 3、案例 通过vue的钩子函数实现动态加载页面数据
ajax_info.txt 格式json
{"users": [{"name": "Tom","age": 20,"gender": 1,"scorce": 78},{"name": "Rose","age": 18,"gender": 2,"scorce": 86},{"name": "Jerry","age": 26,"gender": 1,"scorce": 90},{"name": "Tony","age": 30,"gender": 1,"scorce": 52} ]
}<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.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></tr><tr align="center" v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender==1">男</span><span v-if="user.gender==2">女</span></td><td>{{user.scorce}}</td><td><span v-if="user.scorce>=85">优秀</span><span v-else-if="user.scorce>=60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data:{users:[]},//钩子函数 当页面加载完成后 自动发送数据 并将vue的users赋值mounted() {axios.get("/test_/ajax/ajax_info.txt").then(result => { this.users = result.data.users;})}}) </script>
</html>
三、前后端分离开发
接口文档规范了前端、后端工程师的开发
开发流程：
1、YAPI
YAPI是管理接口文档的工具。详见视频
2、前端工程化
1、环境准备
Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
功能：统一的目录结构、本地调式、热部署、单元测试、集成打包上线
依赖环境：Nodejs
搭建环境：
下载nodejs 安装完成后会自动配置环境变量
1、设置npm
2、检查npm的prefix值是否设置成功
3、更改下载镜像
4、安装vue-cli
5、检查vue-cli是否安装成功
2、Vue项目简介
1、创建vue项目
创建文件夹，并在文件夹导航栏输入cmd，进入cmd，输入vue ui进入图像界面，配置项目属性并下载，如图所示
如图显示，此时项目创建完成
2、vue项目目录介绍
运行项目
热部署：修改文件后，无需重启浏览器、服务器即可在线显示修改后的文件。
3、前端工程化开发流程
以vue为结尾的文件均称为组件文件。
每个组件由三部分组成<template>、<script>、<style>
template生成html代码 script为js代码控制数据来源和行为 style为css样式控制
实例：
<template><div><!-- 通过插值表达式来显示vue数据模型中的值 --><h1>{{message}}</h1></div>
</template><script>
//export导出模块
export default {//创建数据模型data () {return {message:"Hello Vue"}},methods: {}
}
</script><style></style>
相关文章：
Ajax及前端工程化
Ajax：异步的js与xml。 作用： 1、通过ajax给服务器发送数据，并获得其响应的数据。 2、可以在不更新整个网页的情况下，与服务器交换数据并更新部分网页的技术。 一、同步与异步 二、原生Ajax 1、准备数据地址 2、创建XMLHttpReq…...
electron的使用和操作
文章目录 先创建一个基本的electron应用electron生命周期事件 先创建一个基本的electron应用 先安装 npm install --save-dev electron然后在package.json里面创建如下内容 {"name": "my-electron-app","version": "1.0.0","d…...
Python最重要的数据结构是列表（list）的使用方法
列表是一种有序的集合，可以包含任意类型的元素，包括数字、字符串、布尔值、元组等。列表使用方括号[]来表示，元素之间用逗号,分隔。 以下是一些使用列表的例子： 1. 创建一个空列表： my_list []2. 创建一个包含元素的…...
二开ChatGPT微信小程序源码 AI聊天微信小程序源码 适配H5和WEB端 支持AI聊天次数限制
ChatGPT-MP是一款基于的微信小程序，同时适配H5和WEB端。它提供了前后台二开的能力，支持打字效果的流式输出，以及限制AI聊天次数和分享增加次数等功能。该开源版本仅供学习交流使用，禁止商业用途和倒卖。感谢大家的关注与支持！技术栈方面，我们使用了JDK8、SpringBoot、Vue…...
VGG简单学习
VGG简单学习 简单介绍 在AlexNet网络的基础上，为了设计深层神经网络，牛津大学设计了VGG网络,采用块的设计理念，将AlexNet中多个重复的卷积层和池化层组成一个块 论文中，使用3x3卷积核，padding1的卷积层 和带有2x2的汇…...
Stable Diffusion - 人物坐姿 (Sitting) 的提示词组合 与 LoRA 和 Embeddings 配置
欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/132201960 拍摄人物坐姿时，需要注意： 选择一个舒适和自然的坐姿，符合个性和心情。可以坐在椅子、沙发、长凳、…...
[oneAPI] 手写数字识别-GAN
[oneAPI] 手写数字识别-GAN 手写数字识别参数与包加载数据模型训练过程结果 oneAPI 比赛：https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Intel DevCloud for oneAPI：https://devcloud.intel.com/oneapi/get_started/aiAnalyticsToolki…...
爬虫逆向实战（十五）--阿某某营登录
一、数据接口分析 主页地址：阿某某营 1、抓包 通过抓包可以发现登录接口是Users/Login 2、判断是否有加密参数 请求参数是否加密？ 通过查看“载荷”模块可以发现有一个s加密参数 请求头是否加密？ 无响应是否加密？ 无cookie是…...
【计组】校验码（奇偶校验码、海明校验码、CRC）
前言 1、小提示：本篇博文是参考王道，在复习 ASCII 码的基础上，总结校验码的相关学习知识点，并在最后搭配习题（含408真题）进行巩固练习。（对重点内容进行划线、标色） 2、适用人群&…...
File Inclusion
File Inclusion 服务器执行PHP文件时，可以通过文件包含函数加载另一个文件中的PHP代码，并且当PHP来执行，这会为开发者节省大量的时间。这意味着您可以创建供所有网页引用的标准页眉或菜单文件。当页眉需要更新时，您只更新一个包含…...
函数性能探测：更简单高效的 Serverless 规格选型方案
作者：拂衣、丛霄 2019 年 Berkeley 预测 Serverless 将取代 Serverful 计算成为云计算新范式。Serverless 为应用开发提供了一种全新系统架构。借助 2023 年由 OpenAI 所带来的 AIGC 风潮，以阿里云函数计算 FC、AWS Lambda 为代表的 Serverless 以其更高…...
开发栏目概述)
嵌入式Linux Qt5 (C++)开发栏目概述
本栏目开始介绍Linux系统下的Qt C程序开发，资源是以嵌入式为切入点（现在Linux系统下的Qt C程序开发好像就是应用于嵌入式），那就跟着一起学习Linux系统下的Qt C程序开发知识，再扩展一下嵌入式的知识吧。我这里默认已经熟…...
C语言“牵手”微店商品详情数据方法，微店商品详情API接口申请指南
微店平台的商品详情通常包括以下信息： 商品名称：展示商品的名称，用于描述商品的特性和分类。 商品图片：展示商品的图片，可以有多张图片以展示不同角度和细节。 商品价格：显示商品的销售价格，可…...
C++ volatile
volatile 一、volatile 使用场景 volatile 是 C 和 C 中的一个关键字，用于告诉编译器不要对标记为 volatile 的变量进行优化，以确保每次访问都从内存中读取变量的最新值。主要用于以下情况： 硬件寄存器和内存映射设备：在访问硬…...
空洞卷积学习笔记
文章目录 1. 扩张卷积的提出2. 理解的难点 本片博客的主题思路来自于这篇文章——如何理解Dilated Convolutions(空洞卷积)，但是作者似乎是很久之前写的，文字的排版很混乱，自己来写一个新的。 1. 扩张卷积的提出 Multi-Scale Context Aggre…...
WPF中的UseLayoutRounding和SnapsToDevicePixels
WPF中的UseLayoutRounding和SnapsToDevicePixels 最近在调试项目中的UI时发现几个诡异问题： Grid容器里的GridSplitter设置粗细一样， 但截屏放大后发现线条不一样粗并且明暗不一致，导致打印出来有问题。 自定义控件的边缘在某些窗体中显示模…...
Windows权限维持—自启动映像劫持粘滞键辅助屏保后门WinLogon
Windows权限维持—自启动&映像劫持&粘滞键&辅助屏保后门&WinLogon 1. 前置2. 自启动2.1. 路径加载2.1.1. 放置文件2.1.2. 重启主机 2.2. 服务加载2.2.1. 创建服务2.2.2. 查看服务2.2.3. 重启主机 2.3. 注册表加载2.3.1. 添加启动项2.3.2. 查看注册表2.3.3. 重启…...
Mysql之explain详解
1. explain作用 使用explain可以展示出sql语句的执行计划，再根据sql的执行计划去判断这条sql有哪些点可以进行优化，从而让sql的效率达到最大化。 2. 执行计划各列含义 （1）id：id列是select的序列号，这个…...
每天一道leetcode：1926. 迷宫中离入口最近的出口（图论中等广度优先遍历）
今日份题目： 给你一个 m x n 的迷宫矩阵 maze （下标从 0 开始），矩阵中有空格子（用 . 表示）和墙（用 表示）。同时给你迷宫的入口 entrance ，用 entrance [entrancerow, …...
Mysql_5.7下载安装与配置基础操作教程
目录 一、Mysql57下载与安装 二、尝试登录Mysql 三、配置Mysql环境变量 一、Mysql57下载与安装 首先，进入Mysql下载官网：MySQL Community Downloads 随后，选择版本5.7.43，系统选择Windows，随后下方会出现两个下载选…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型（Primitive） 和 对象类型（Object） 两大类，共 8 种（ES11）： 一、原始类型（7种） 1. undefined 定…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...