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，随后下方会出现两个下载选…...
【业务功能篇68】电商项目相关核心设计
https证书 http 超文本传输协议： 超文本：包括：文字，图片，音频，视频等。 传输：客户端向服务端发东西，服务端向客户端发东西。 协议：三方协议。怎么传，错误…...
微信开发之一键退出群聊的技术实现
简要描述： 退出群聊 请求URL： http://域名地址/quitChatRoom 请求方式： POST 请求头Headers： Content-Type：application/jsonAuthorization：login接口返回 参数： 参数名必选类型说明wI…...
〔012〕Stable Diffusion 之 中文提示词自动翻译插件 篇
✨ 目录 🎈 翻译插件🎈 下载谷歌翻译🎈 谷歌翻译使用方法🎈 谷歌翻译使用效果 🎈 翻译插件 在插件列表中搜索 Prompt Translator可以看到有2个插件选项：一个是基于谷歌翻译 〔推荐〕、一个基于百度和deepl…...
【C++】一文带你初识C++继承
食用指南：本文在有C基础的情况下食用更佳 🍀本文前置知识： C类 ♈️今日夜电波：napori—Vaundy 1:21 ━━━━━━️💟──────── 3:23 …...
SDK是什么，SDK和API有什么区别
SDK（Software Development Kit）是一种开发工具包，通常由软件开发公司或平台提供，用于帮助开发人员构建、测试和集成特定平台或软件的应用程序。SDK 包含一系列的库、工具、示例代码和文档，旨在简化开发过程并提供所需的…...
golang中使用chan控制协程并发简单事例
func main() {processNum : 5ch : make(chan struct{}, processNum)for true {ch <- struct{}{}go func() {defer func() {<-ch}()fmt.Println("我是协程", time.Now().UnixNano())time.Sleep(time.Second * 5)}()} } 可以看到，这里每5s会执行一次带…...
好用画流程图软件推荐 excalidraw
作者：明明如月学长， CSDN 博客专家，蚂蚁集团高级 Java 工程师，《性能优化方法论》作者、《解锁大厂思维：剖析《阿里巴巴Java开发手册》》、《再学经典：《EffectiveJava》独家解析》专栏作者。 热门文章推荐…...
【RP2040】香瓜树莓派RP2040之搭建开发环境（windows）
本文最后修改时间：2022年08月23日 01:57 一、本节简介 本节以树莓派pico开发板为例，搭建windows下的编译环境。 二、实验平台 1、硬件平台 1）树莓派pico开发板 ①树莓派pico开发板 ②micro usb数据线 2）电脑 2、软件平台 …...
基于springboot线上礼品商城
博主主页：猫头鹰源码 博主简介：Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容：毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...
开源，微信小程序 美食便签地图(FoodNoteMap)的设计与开发
目录 0 前言 1 美食便签地图简介 2 美食便签地图小程序端开发 2.1技术选型 2.2前端UI设计 2.3主页界面 2.4个人信息界面 2.5 添加美食界面 2.6美食便签界面 2.8 美食好友界面 2.9 美食圈子界面 2.10 子页面-店铺详情界面 2.11 后台数据缓存 2.12 订阅消息通知 2.1…...