前端基础4——jQuery

文章目录

  • 一、基本了解
    • 1.1 导入jQuery库
    • 1.2 基本语法
    • 1.3 选择器
  • 二、操作HTML
    • 2.1 隐藏和显示元素
    • 2.2 获取与设置内容
    • 2.3 获取、设置和删除属性
    • 2.4 添加元素
    • 2.5 删除元素
    • 2.6 设置CSS样式
  • 三、jQuery Ajax
    • 3.1 基本语法
    • 3.2 回调函数
    • 3.3 常用HTTP方法
    • 3.4 案例一
      • 3.4.1 准备工作
      • 3.4.2 准备一个api接口地址
      • 3.4.3 定义Ajax执行逻辑
    • 3.5 案例二：提交表单
    • 3.6 案例三：数据表格

一、基本了解

概念：

  • jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如JS原生代码几十行实现的功能，jQuery可能一两行就可以实现，因此得以广泛应用，官方网站。
  • 使用jQuery可以简化代码编写，解决浏览器的兼容性。

发行版本：

  • 1.x：常用版本，运维人员已够使用。
  • 2.x，3.x：除非特殊要求，一般用的少。

1.1 导入jQuery库

  • jQuery代码编写位置与JS位置一样，但需要先head标签里引入jquery.min.js文件。

下载地址：

  • https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
  • https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js
  • https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js

1.下载到本地，引用本地文件方式。
在这里插入图片描述
2.直接指定jquery库文件网址。
在这里插入图片描述

1.2 基本语法

  • 语法格式：$(selector).action()
  • $：代表jQuery本身，只要是使用jQuery语法，就必须使用$符号。
  • (selector)：选择器，查找HTML元素。
  • action()：对元素的操作，和js使用方式大致相同。

1.3 选择器

名称语法示例
标签选择器element$(“h2”) 选取所有h2元素
类选择器.class$(“.title“) 选取所有class为title的元素
ID选择器#id$(“#title”) 选取id为title的元素
并集选择器selector1,selector2,…$(“div,p,.title”) 选取所有div、p和拥有class为title的元素
属性选择器$(“input[name=‘username’]”) 选取input标签名为username的元素。
$(“[href=‘#’]”) 选取href值等于“#”的元素

二、操作HTML

2.1 隐藏和显示元素

  • hide() ：隐藏某个元素。
  • show() ：显示某个元素。
  • toggle() ：hide()和show()方法之间切换。

1.设置三个按钮，点击”隐藏“按钮，则隐藏标签内容；点击"显示"按钮，则显示标签内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p id="demo">我的名字是：卿君</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="toggle" type="button">切换</button><script type="text/javascript">$("#hide").click(function () {$("p").hide();});$("#show").click(function () {$("p").show();});$("#toggle").click(function () {$("p").toggle();})
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

2.2 获取与设置内容

  • text()：设置或返回所选元素的文本内容。
  • html()：设置或返回所选元素的HTML内容。
  • val()：设置或返回表单字段的值。

1.对比文本内容和html内容区别。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><p id="txt">演讲主题：<b>正文</b>。
</p>
<button type="button" id="1">显示文本</button>
<button type="button" id="2">显示HTML</button>
<p id="3"></p><script type="text/javascript">$("#1").click(function () {x = $("#txt").text();   //打印id=txt标签的文本内容。$("#3").text(x);   //将获取的内容传入id=3的标签。$("#3").text(x).css("color","red") //不会解析b标签});$("#2").click(function () {x = $("#txt").html(); //获取html内容。$("#3").html(x).css("color","blue") //会解析b标签，.html()设置})
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

2.设置返回表单字段的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h1>欢迎访问运维管理系统</h1>
用户名：<input type="text" id="uname" name="username"><br>
密码：<input type="password" id="pwd" name="password"><br>
<button type="button" id="btn">显示输入内容</button>
<p id="demo"></p>
<script type="text/javascript">$("#btn").click(function () {a = $("#uname").val();b = $("#pwd").val();$("#demo").text(a + ',' + b).css("color","red")})
</script>
</body>
</html>

在这里插入图片描述

2.3 获取、设置和删除属性

  • attr()：设置或返回所选元素的属性值。
  • removeAttr()：删除属性值。

1.获取元素属性值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" id="a1">百度一下</a><br>
<button type="button" id="btn">查看CSS属性值</button>
<p id="demo"></p>
<script type="text/javascript">$("#btn").click(function () {x = $("#a1").attr("href"); //获取属性值$("#demo").text(x) //将属性值作为内容设置元素})
</script>
</body>
</html>

在这里插入图片描述
2.设置超链接，从第一个网址跳转到第二个网址。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" id="a1">百度一下</a><br>
<button type="button" id="btn">查看CSS属性值</button>
<p id="demo"></p>
<script type="text/javascript">$("#btn").click(function () {x = $("#a1").attr("href","http://www.redis.cn/"); //从百度跳转到redis官网。})
</script>
</body>
</html>

3.删除属性值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" id="a1">百度一下</a><br>
<button type="button" id="btn">删除CSS属性值</button>
<p id="demo"></p>
<script type="text/javascript">$("#btn").click(function () {x = $("#a1").removeAttr("href");   //删除href属性。})
</script>
</body>
</html>

在这里插入图片描述

2.4 添加元素

  • append() 在被选中元素的结尾插入内容。
  • prepend() 在被选中元素的开头插入内容。
  • after() 在被选中元素之后插入内容。
  • before() 在被选中元素之前插入内容。

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="main"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div>
<button type="button" id="wenben1">追加文本</button>
<button type="button" id="wenben2">开头新增文本</button>
<button type="button" id="wenben3">追加段落</button>
<script type="text/javascript">$("#wenben1").click(function () {$("#main").append("追加的文本内容");})$("#wenben2").click(function () {$("#main").prepend("新增的文本内容");})$("#wenben3").click(function () {$("#main").append("<p>追加的段落</p>");})
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

2.5 删除元素

  • remove()：删除被选元素及子元素。
  • empty()：清空被选元素（删除下面所有子元素）。

1.删除div标签内容，包括其下所有的标签内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="main"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div><button type="button" id="wenben1">追加文本</button>
<button type="button" id="wenben2">开头新增文本</button>
<button type="button" id="wenben3">追加段落</button>
<button type="button" id="wenben4">删除</button>
<script type="text/javascript">$("#wenben1").click(function () {$("#main").append("追加的文本内容");})$("#wenben2").click(function () {$("#main").prepend("新增的文本内容");})$("#wenben3").click(function () {$("#main").append("<p>追加的段落</p>");})$("#wenben4").click(function () {$("#main").remove();})
</script>
</body>
</html>

在这里插入图片描述
2.隐藏div标签内容。
在这里插入图片描述

2.6 设置CSS样式

  • css() 设置或返回样式属性（键值）。
  • addClass() 向被选元素添加一个或多个类样式。
  • removeClass() 从被选元素中删除一个或多个类样式。
  • toggleClass() 对被选元素进行添加/删除类样式的切换操作。

1.直接设置样式属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="main"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div>
<button type="button" id="ziti">修改字体大小</button>    //点击按钮修改字体大小。
<button type="button" id="color">修改字体颜色和样式</button>    //点击按钮修改字体颜色和样式。<script type="text/javascript">$("#ziti").click(function () {$("#main").css("font-size","6px");})$("#color").click(function () {$("#main").css({"color":"blue","font-style":"italic"});})
</script>
</body>
</html>

在这里插入图片描述
2.引用类修改样式属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script><style>    //定义通用属性样式。.mm {color: orange;font-size: 10px;}</style>
</head>
<body>
<div id="main"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div>
<button type="button" id="ziti">修改字体颜色和大小</button>  //点击按钮修改字体颜色。
<script type="text/javascript">$("#ziti").click(function () {$("#main").addClass("mm");})
</script>
</body>
</html>

在这里插入图片描述
3.删除属性样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script><style>    //定义通用属性样式。.mm {color: orange;font-size: 10px;}</style>
</head>
<body>
<div id="main" class="mm"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div>
<button type="button" id="ziti">删除字体属性</button>   //点击按钮去除原本的字体颜色。
<script type="text/javascript">$("#ziti").click(function () {$("#main").removeClass("mm");})
</script>
</body>
</html>

在这里插入图片描述

三、jQuery Ajax

概念：

  • Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML），AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等。
  • 可以减少带宽、服务器负载；提高用户体验。
  • 使用场景：网页局部刷新

工作流程：

  1. 浏览器第一次访问网站一个页面时，Web服务器处理完后会以消息体方式返回浏览器，浏览器自动解析HTML内容。
  2. 当有局部有新数据需要更新时，Ajax会在背后去请求服务端拿到数据，再交给js处理html，最后渲染填充到那个div板块。此时就达到不需要刷新网页，就可以加载刷新局部数据的功能。
    在这里插入图片描述

3.1 基本语法

  • jQuery Ajax主要使用$.ajax()方法实现，用于向服务端发送HTTP请求。
  • 基本语法：$.ajax([settings]);
  • settings 是$.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合。
参数类型描述
urlstring发送请求的地址，默认为当前页地址
typestring请求方式，默认为GET
dataobejct、array、string发送到服务器的数据
dataTypestring预期服务器返回的数据类型，包括JSON、XML、text、HTML等
contentTypestring发送信息至服务器时内容编码类型。默认值: “application/xwww-form-urlencoded”。
timeoutnumber设置请求超时时间
globalBoolean表示是否触发全局Ajax事件，默认为true
headersobejct设置请求头信息
asyncBoolean默认true，所有请求均为异步请求。设置false发送同步请求

3.2 回调函数

  • 回调函数：参数引用一个函数，并将数据作为参数传递给该函数。
  • jqXHR：一个XMLHttpRequest对象
参数函数格式描述
beforeSendfunction(jqXHR,object)发送请求前调用的函数，例如添加自定义HTTP头
successfunction(data, String textStatus,jqXHR)请求成功后调用的函数，参数data：可选，由服务器返回的json数据
errorfunction(jqXHR,String textStatus,errorThrown)请求失败时调用的函数
completefunction(jqXHR, String textStatus)请求完成后（无论成功还是失败）调用的函数

3.3 常用HTTP方法

  • HTTP方法：向服务器提交数据，服务器根据对应方法操作。
HTTP方法数据处理说明
POST新增新增一个资源
GET获取取得一个资源
PUT更新更新一个资源
DELETE删除删除一个资源

3.4 案例一

3.4.1 准备工作

1.创建好一个Django基础项目。

###########################################################
1.项目根url路由规则。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [re_path('^$',views.qingjun)
]
###########################################################
2.创建一个应用模块qingjun。
python manage.py startapp qingjun
###########################################################
3.qingjun.views.py视图文件。
from django.shortcuts import render
def qingjun(request):return render(request,'index.html')
###########################################################
4.定义index.html模板。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>平台首页</title><script src="/static/js/jquart.min.js"></script>
</head>
<body>
首页
</body>
</html>
###########################################################
5.导入jquery库文件，存放目录/static/js/jquart.min.js。
库文件下载地址：https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
###########################################################
6.更改django默认静态文件地址，settings.py文件末尾追加以下内容。
STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),
)

在这里插入图片描述

3.4.2 准备一个api接口地址

1.添加代码。
在这里插入图片描述
2.查看效果。
在这里插入图片描述

3.4.3 定义Ajax执行逻辑

1.html文件中写js脚本，使用jQuery Ajax编写。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>平台首页</title><script src="/static/js/jquart.min.js"></script>
</head>
<body>
首页
<p id="a">这是Ajax请求的数据</p>
<script>$.ajax({type: "GET",url: "/user_api/",   //ajax请求地址。success: function (abc) {        //abc位置参数，是服务端返回的json数据。console.log(abc);$("#a").text(abc)   //将请求结果打印到p标签显示。},error: function () {alert("请求错误")}})
</script>
</body>
</html>

2.查看结果。
在这里插入图片描述

3.5 案例二：提交表单

  • 表单输入新内容，点击提交按钮，Ajax向后端API发起数据。

1.项目url路由规则代码。

from django.urls import path,re_path
from qingjun import views
urlpatterns = [re_path('server/', views.server),
]

2.应用qingjun中的视图函数server代码。

from django.shortcuts import render
from django.http import JsonResponse
def server(request):if request.method == "GET":return render(request, 'server.html')elif request.method == "POST":print(request.POST)try:pass# 获取提交的字段，使用模型类入库。code = 0msg = "数据库添加成功！"except Exception:code = 1msg = "数据库添加失败！"result = {'code': code, 'msg': msg}return JsonResponse(result)

3.html模板内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新增服务器</title><script src="/static/js/jquart.min.js"></script>
</head>
<body>
<h1>添加服务器信息</h1>##默认from表单是通过submit提交按钮来触发事件进行提交数据，默认提交到action的url地址，为空则是当前页面。
##若要使用from表单的submit提交按钮，需要在from标签中添加参数onsubmit="return false，可以去掉触发提交事件。
##Ajax提交from表单会重复提交url，添加#表示不触发from提交事件。
<form action="#" method="post">   //创建一个post提交表单。{% csrf_token %}主机名：<input type="text" name="hostname"><br>IP地址：<input type="text" name="ip"><br>操作系统：<input type="text" name="os"><br>
{#    <input type="submit" value="提交" id="btn"> onsubmit="return false" #}<button type="button" id="btn">提交</button>
</form><p id="notice"></p>
<script>$("#btn").click(function () {// 1.先获取表单中所有值。var hostname = $("input[name='hostname']").val();  //通过jquery的属性选择器获取表单输入的值。var ip = $("input[name='ip']").val();var os = $("input[name='os']").val();var csrf_token = $("input[name='csrfmiddlewaretoken']").val();// 2.将表单的值统一放到对象。data = {'hostname': hostname, 'ip': ip, 'os': os, 'csrfmiddlewaretoken':csrf_token};// 3.通过ajax将这个对象提交到服务端数据接口。$.ajax({type: "POST",url: "/server/",  //数据接口data: data,success: function (result) {if(result.code == 0) {$("#notice").text(result.msg).css("color", "blue")} else if(result.code == 1){$("#notice").text(result.msg).css("color", "red")}},error: function(){alert("服务器异常！")}})});
</script>
</body>
</html>

4.测试效果。
在这里插入图片描述

在这里插入图片描述

3.6 案例三：数据表格

  • 点击”批量删除“按钮，Ajax向后端API发送要删除的数据ID。

1.项目url路由规则代码。

from django.urls import path,re_path
from qingjun import views
urlpatterns = [re_path('server_table/', views.server_table),
]

2.应用qingjun中的视图函数server代码。

from django.shortcuts import render
from django.http import JsonResponse
def server_table(request):if request.method == "GET":return render(request,'server_table.html')elif request.method == "POST":ids = request.POST.get("ids")try:# a = bfor i in ids.split(','):print(i)# 基于ID，使用模型类从数据库中删除code = 0msg = "删除数据成功！"except Exception:code = 1msg = "删除数据失败！"result = {'code': code, 'msg': msg}return JsonResponse(result)

3.html模板内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>服务器列表</title><script src="/static/js/jquart.min.js"></script>
</head>
<body>
{% csrf_token %}
<table border="1"><thead><tr><th><input type="checkbox" id="selectAll">全选</th><th>主机名</th><th>IP</th><th>操作系统</th></tr></thead><tbody id="tb"><tr><td><input type="checkbox" value="1" name="id"></td><td>test1</td><td>192.168.1.10</td><td>CentOS7</td></tr><tr><td><input type="checkbox" value="2" name="id"></td><td>test2</td><td>192.168.1.11</td><td>CentOS7</td></tr><tr><td><input type="checkbox" value="3" name="id"></td><td>test3</td><td>192.168.1.11</td><td>CentOS7</td></tr></tbody>
</table><button id="btn">批量删除（发送AJAX请求）</button>
<p id="notice"></p><script>//1.点击全选按钮，选中全部内容；再次点击全选按钮，取消全部选中内容。$("#selectAll").click(function(){var all_num = $("#tb input").length; // 获取总行数var select_num = $("#tb input:checked").length;     //获取选择的数量。if(all_num == select_num) {      //如果等于说明是全选，再点击的目的是取消全选。$("#tb input").prop("checked",false)    //设置取消全选。} else {$("#tb input").prop("checked",true)    //设置全选。}// 获取当前选中的input值var check = $("#tb input:checked");   //获取是一个数组，check[0].value获取第一个input值。// 将选中的input的id放到数组var ids = new Array()    //定义一个新数据。for(var i=0;i<check.length;i++) {console.log(check[i].value);ids.push(check[i].value);    //将遍历出来的id数据放入数组。}ids = ids.join(',');console.log(ids);var csrf_token = $("input[name='csrfmiddlewaretoken']").val();// 2.将表单的值统一放到对象data = {'ids': ids, 'csrfmiddlewaretoken':csrf_token};});// 3.通过ajax将这个对象提交到服务端数据接口。$("#btn").click(function(){$.ajax({type: "POST",url: "/server_table/",  //数据接口data: data,success: function (result) {if(result.code == 0) {$("#notice").text(result.msg).css("color", "blue")} else if(result.code == 1){$("#notice").text(result.msg).css("color", "red")}},error: function(){alert("服务器异常！")}})})
</script>
</body>
</html>

4.查看效果。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vue2023 面试归纳及复习

Vue2023 面试归纳及复习

目录 1. Vue 3中的Composition API&#xff08;Hooks&#xff09;是什么&#xff1f;它与Options API有何不同&#xff1f; Composition API 的优势 2 Options API 语法格式 3 setup 语法糖 4 Vue3的生命周期 5. 请解释一下Vue 3中的Teleport&#xff08;传送&#xf…
阅读更多...
设计模式-迭代器

设计模式-迭代器

文章目录 1. 引言1.1 概述1.2 设计模式1.3 迭代器模式的应用场景1.4 迭代器模式的作用 2. 基本概念2.1 迭代器 Iterator2.2 聚合 Aggregate2.3 具体聚合 ConcreteAggregate 3. Java 实现迭代器模式3.1 Java 集合框架3.2 Java 迭代器接口3.3 Java 迭代器模式实现示例 4. 迭代器模…
阅读更多...
ElasticSearch（一）数据类型

ElasticSearch（一）数据类型

ElasticSearch&#xff08;一&#xff09;数据类型 1.简述 Es数据类型分为基础数据类型和复杂类型数据&#xff0c;掌握ES数据类型才能进一步使用ES检索数据内容。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…
阅读更多...
【python爬虫】10.指挥浏览器自动工作（selenium）

【python爬虫】10.指挥浏览器自动工作（selenium）

文章目录 前言selenium是什么怎么用设置浏览器引擎获取数据解析与提取数据自动操作浏览器 实操运用确认目标分析过程代码实现 本关总结 前言 上一关&#xff0c;我们认识了cookies和session。 分别学习了它们的用法&#xff0c;以及区别。 还做了一个项目&#xff1a;带着小…
阅读更多...
身份识别与鉴权技术调研方案

身份识别与鉴权技术调研方案

对称加密算法 对称加密方式又称为私钥加密方式&#xff0c;该方式的加密和解密过程使用同一个密钥&#xff0c;因此该密钥又称为共享密钥。如图2.2所示&#xff0c;在对称加密方式中&#xff0c;发送方使用对称加密算法和共享密钥处理原始数据&#xff0c;得到一个加密后的密文…
阅读更多...
Navicat使用HTTP通道服务器进行连接mysql数据库（超简单三分钟完成），centos安装nginx和php，docker安装nginx+php合并版

Navicat使用HTTP通道服务器进行连接mysql数据库（超简单三分钟完成），centos安装nginx和php，docker安装nginx+php合并版

序言 因为数据库服务器在外网是不能直接连接访问的&#xff0c;但是可以访问网站&#xff0c;网站后台就能访问数据库&#xff0c;所以在此之前&#xff0c;访问数据库的数据是一件非常麻烦的事情&#xff0c;在平时和运维的交流中发现&#xff0c;他们会使用ssh通道进行连接访…
阅读更多...
博客系统后台前端UI设计

博客系统后台前端UI设计

效果展示 API编写 index.js import axios from "./request"const fastdfs {delete: file/fastdfs/delete } const permission {search: "/sys/permission/search",add: "/sys/permission/add",update: "/sys/permission/update",d…
阅读更多...
Python Tcp编程

Python Tcp编程

网络连接与通信是我们学习任何编程语言都绕不过的知识点。Python 也不例外&#xff0c;本文就介绍因特网的核心协议 TCP &#xff0c;以及如何用 Python 实现 TCP 的连接与通信。 TCP 协议 TCP协议&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#…
阅读更多...
微信小程序左上角home图标的解决方法之一 层级混乱导致的home图标显示的问题 自定义左上角左侧图标的返回路径

微信小程序左上角home图标的解决方法之一 层级混乱导致的home图标显示的问题 自定义左上角左侧图标的返回路径

这个项目的编辑页在tabbar上 导致跳到tabbar得使用wx.switchTab 保存后返回原来的页面就出现了左上角的home图标 本来想通过自定义home图标的跳转路径来解决这个问题 没想到居然找不到相关内容 有清楚的朋友麻烦给我留个言不胜感激 那我写一下我的骚操作 app.js globalData: {…
阅读更多...
Git学习——细节补充

Git学习——细节补充

Git学习——细节补充 1. git diff2. git log3. git reset4. git reflog5. 提交撤销5.1 当你改乱了工作区某个文件的内容&#xff0c;想直接丢弃工作区的修改时5.2 当提交到了stage区后&#xff0c;想要退回 6. git remote7. git pull origin master --no-rebase8. 分支管理9. g…
阅读更多...
【计算机网络】序列化与反序列化

【计算机网络】序列化与反序列化

文章目录 1. 如何处理结构化数据&#xff1f;序列化 与 反序列化 2. 实现网络版计算器1. Tcp 套接字的封装——sock.hpp创建套接字——Socket绑定——Bind将套接字设置为监听状态——Listen获取连接——Accept发起连接——Connect 2. 服务器的实现 ——TcpServer.hpp初始化启动…
阅读更多...
uniapp 微信小程序 获取用户头像和昵称

uniapp 微信小程序 获取用户头像和昵称

一、背景 自2022年10月25日后&#xff0c;小程序 wx.getUserProfile 接口 被收回&#xff0c;通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像&#xff0c;昵称将统一返回 “微信用户”。如需获取用户头像昵称&#xff0c;可以手动获取&#xff0c;具体步骤&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023