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

Vue.js

文章目录

  • Vue(前端框架)
    • data基本语法
    • v-bind(属性)
    • v-if(条件)
    • v-for
    • methods事件
    • v-model表单绑定
    • todolist(添加删除展示内容,含上下移动)
    • es6语法
    • 生命周期函数
    • axios发送ajax请求

v-on事件

    常见的事件:click: 点击一次;   当鼠标点击,触发事件dblclick: 双击;当鼠标双击,触发事件focus: 获取焦点;  当得到了光标,触发事件blur: 失去焦点;   当失去了光标,触发事件mouseover:鼠标移至;  鼠标移至某标签上方,触发事件mouserout:鼠标移出; 鼠标移出某标签上方,触发事件keyup:键盘按下;  键盘按下,触发事件

Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点.
响应式数据绑定指的是vue.js会自动对页面中的某些数据的变化做出响应.(v-model指令可以实现数据的双向绑定)
组件化开发指的是vue.js通过组件,把一个单页应用中的各种模块拆分到一个个单独的组件(component)中,我们只要先在父级组件中写好各种组件标签,并且在组件标签中写好要传入组件的参数,然后在写好各种组件的实现,整个应用就可以完成了

选项参数说明
el提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标
dataVue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data的属性能够响应数据变化
methodsVue实例的方法集合,可以在Vue直接调用或将方法绑定到DOM元素的事件上
computedVue实例的计算属性集合
watch观察Vue实例变化的一个表达式或计算属性函数
components包含Vue实例可用组件的哈希表
filters包含Vue实例可用过滤器的哈希表
template定义字符串模板作为Vue实例的标识使用

过滤器
示例: 使用过滤器实现将英文单词转换为首字母大写显示。

HTML代码:

<div id="app"><div class="banner">{{ text | tranformFilter }}</div>
</div>

JavaScript代码:

filters: {tranformFilter: function (val) {var strs = val.split(' ');var result = "";for (var i = 0; i < strs.length; i++) {result += strs[i].charAt(0).toUpperCase() + strs[i].substring(1) + ' ';}return result;}}

结合django框架

Vue(前端框架)

文档链接:https://v2.cn.vuejs.org/v2/guide

Vue.js是前端三大框架之一:Angular.js、React.js、Vue.js,
Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API
Vue.js是一个构建数据驱动的Web界面的库
Vue.js是一套构建用户界面的渐进式框架
通俗的说:
Vue,js是一个构建数据驱动的 web 界面的渐进式框架
Vue.is 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
核心是一个响应的数据绑定系统

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 1.导入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><!-- 2.定义一个标签,需要给一个标签添加id -->
<div id="app">
</div></body><!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})</script></html>
    # 开发版本,包含有帮助的命令行警告<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script># 生产版本,优化了尺寸和速度<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在django里面使用可能出错,需要使用delimiters和[[]]

<div id="app">{{ message }}
</div><script type="text/javascript">var app = new Vue({el: '#app',delimiters:['[[',']]'],data: {message:'hello'}})</script>
</html>

data基本语法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}
</div>
</body><script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})</script>
</html>

在这里插入图片描述

如果有乱码问题,在前面添加<meta charset="UTF-8">
如果有多个参数,data里面用逗号分隔

<body>
<div id="app">{{ message }}{{ hello }}
</div>
</body><script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!'hello: 'abc'}})</script>
</html>

v-bind(属性)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}<br><a v-bind:href="url">baidu</a><br><span v-bind:title="showmessage">鼠标放这显示时间</span>
</div>
</body><script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!',url: 'https://www.baidu.com',showmessage: '当前时间:'+new Date().toLocaleDateString()}})</script>
</html>

在这里插入图片描述

简写可以直接加个:,将前面的v-bind省略

<div id="app">{{ message }}<br><a :href="url">baidu</a><br><span :title="showmessage">鼠标放这显示时间</span>
</div>

v-if(条件)

v-if
v-else-if
v-else
v-show
v-if和v-show区别,如果都设置为true没有区别,如果为false,则源码中v-if没有代码,v-show中是将源码的style=“diaplay:none”,即隐藏不显示,源码还在
v-show用法和v-if大致一样,但是它不支持v-else,它和vif的区别是,它制作元素样式的显示和隐藏,元素一直是存在
注意在vue中使用v-show 原来的css代码不能设置display属性,会导致冲突

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 1.导入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><!-- 2.定义一个标签,需要给一个标签添加id -->
<div id="app">{{ message }}<hr><a href="#" v-if="isLogin">已登录</a><hr><a href="#" v-if="notisLogin">请登录</a><hr>
<!--    if else两行要挨着,中间还可以加v-else-if语句--><a href="#" v-if="level === 1">等级为1</a><a href="#" v-else-if="level === 2">等级为2</a><a href="#" v-else>等级不为1</a><hr><span v-if="seen">v-if</span><hr><span v-show="seen">v-show</span>
</div>
</body><!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!',isLogin:true,notisLogin:false,level:1,seen:false}})</script>
</html>

在这里插入图片描述

v-for

<!-- 1.导入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><body>
<!-- 2.定义一个标签,需要给一个标签添加id -->
<div id="app"><ul><li v-for="(item,index) in items">{{ index+1 }} {{ item }}</li></ul>
</div>
</body><!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',data: {items:[1,2,3,4]}})</script>

在这里插入图片描述

字典格式

<li v-for="(item,key) in object">{{ key }} {{ item }}</li><script type="text/javascript">var app = new Vue({el: '#app',data: {object:{title:'aaa',author:'bbb'}}})</script>

在这里插入图片描述

<li v-for="item in items">{{ item.title }} {{ item.author }}</li>data: {items:[{title:'aaa',author:'qqq'},{title:'bbb',author:'www'}]}

在这里插入图片描述

methods事件

点击按钮弹出对话框

<body>
<div id="app"><button v-on:click="login">按钮</button>
</div>
</body><!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',data: {message:'hello'},methods:{login:function (){alert("ok")}}})</script>

简写方式

<button @click="login">按钮</button>

弹框内容+1

<body>
<div id="app"><button v-on:click="add(counter)">点击+1</button>
</div>
</body><script type="text/javascript">var app = new Vue({el: '#app',data: {counter:1,total:0},methods:{add:function(num){this.total += numalert(this.total)}}})</script>

内容文本+1

<body>
<!-- 2.定义一个标签,需要给一个标签添加id -->
<div id="app">{{ counter }}<button v-on:click="counter += 1">点击+1</button>
</div>
</body>
<!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',data: {counter:1}})</script>

v-model表单绑定

注册的时候,v-model可以获取输入的数据

data里面多选需要使用列表[]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 1.导入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个标签,需要给一个标签添加id -->
<div id="app"><table><tr><td>用户名</td><td><input type="text" name="username" v-model="username"></td></tr><tr><td>密码</td><td><input type="password" name="password1" v-model="password1"></td></tr><tr><td>确认密码</td><td><input type="password" name="password2" v-model="password2"></td></tr><tr><td>性别</td><td><input type="radio" name="sex" value="boy" v-model="sex"><input type="radio" name="sex" value="girl" v-model="sex"></td></tr><tr><td>爱好</td><td>足球<input type="checkbox" name="like" value="足球" v-model="like">篮球<input type="checkbox" name="like" value="篮球" v-model="like"></td></tr></table><button v-on:click="register">注册</button>
</div>
</body>
<!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',data: {username:'',password1:'',password2:'',sex:'',like:[]},methods:{register:function (){alert("OK")}}})</script>
</html>

todolist(添加删除展示内容,含上下移动)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 1.导入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个标签,需要给一个标签添加id -->
<div id="app"><input type="text" name="todoitem" v-model="newitem"> <button v-on:click="add">添加</button><hr><ul><li v-for="(item,index) in items">{{ item }}<a href="javascript:;" v-on:click="del(index)">删除</a><a href="javascript:;" v-on:click="up(index)">上移</a><a href="javascript:;" v-on:click="down(index)">下移</a></li></ul>
</div>
</body>
<!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',data: {items:['python','html','mysql'],newitem:''},methods:{add:function (){this.items.push(this.newitem);this.newitem = '';},del:function (index){this.items.splice(index, 1);},up:function (index){// 1.获取当前元素current=this.items[index];// 2.先把当前元素删除this.items.splice(index,1);// 3.再加回来this.items.splice(index-1,0,current);},down:function (index){// 1.获取当前元素current=this.items[index];// 2.先把当前元素删除this.items.splice(index,1);// 3.再加回来this.items.splice(index+1,0,current);}}})</script>
</html>

在这里插入图片描述

es6语法

ES6是JavaScript语言的新版本,它也可以叫做ES2015,之前学习的JavaScript属于ES5,ES6在它的基础上增加了一些语法,ES6是未来JavaScript的趋势,而且vue组件开发中会使用很多的ES6的语法,所以掌控这些常用的ES6语法是必须的·

ES6新增了let命令,它的用法类似于var,但是所声明的变量只在let命令所在的代码快内有效

{let a=10;var b=1;
}

for循环就适合使用let

for (let i=0; i<10;i++){}

还新增了const语法:const声明一个只读的常量。一旦声明,常量的值就不能改变
ES5的对象写法

var person={name:'itcast',age:12,say:function(){alert('hello')}
}

这样的也可以在ES6中使用,ES6中还可以这样写

var name='itcast';
var age=12;
var person={name,age,say:function(){alert('hello')}
}

箭头函数
之前的函数这样的

var aaa = function say(){alert('aaa');}
aaa()

ES6使用箭头函数

var say = ()=>{alert('aaa');
}
say()# 带参数
var say = (sum1,sum2)=>{return sum1+sum2;
}
say(1,2)
var person={name:'itcast',age:12,say:function(){alert(this.name)}
}

生命周期函数

生命周期函数没有在html中,但是运行的时候会自动运行

<!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',data: {items:['python','html','mysql'],newitem:''},methods:{beforeCreate:function (){console.log('beforeCreate');},create:function (){console.log('create');},beforeMounted:function (){console.log('beforeMounted');},mounted:function (){console.log('mounted');},beforedestory:function (){console.log('beforedestory');},destory:function (){console.log('destory');},}})</script>
beforeCreate
create
beforeMounted
mounted
# 当调用destory的时候会有后的结果
beforedestory
destory

axios发送ajax请求

链接:https://github.com/axios/axios

使用如下代码引入

<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

在html中写入如下代码

GET请求
urls.py

from django.urls import path
from book.views import LoginView,ReceiveViewurlpatterns = [path('login/', LoginView.as_view()),path('rece/', ReceiveView.as_view())
]

views.py

from django.shortcuts import render
from django.http import HttpResponse,JsonResponse
from django.views import View
from django.contrib.auth.mixins import LoginRequiredMixin
import datetime
import jsonclass LoginView(View):def get(self, request):return render(request, 'index.html')# return HttpResponse('get')def post(self, request):return HttpResponse('post')class ReceiveView(View):def get(self, request):data = request.GETusername = data.get('username')password = data.get('password')return JsonResponse({'data':{'username':username,'password':password}})def post(self, request):data = json.loads(request.body.decode())username = data.get('username')password = data.get('password')return JsonResponse({'data': {'username': username, 'password': password}})

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 1.导入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
</head>
<body>
<!-- 2.定义一个标签,需要给一个标签添加id -->
<div id="app">[[ message ]]<button @click="login">登入</button>
</div>
</body>
<!-- 创建Vue实例 --><script type="text/javascript">var app = new Vue({el: '#app',delimiters:['[[',']]'],data: {message:'hello'},methods:{login:function (){var url = 'http://127.0.0.1:8000/rece/?username=itcast&password=1234';axios.get(url).then((response)=>{console.log(response)}).catch((error)=>{console.log(error)})}}})</script>
</html>

POST请求:和上面相比,修改login函数

                login:function (){var url = 'http://127.0.0.1:8000/rece/';axios.post(url,{'username':'itcast','password':'1234'}).then((response)=>{console.log(response)}).catch((error)=>{console.log(error)})}

settings.py注释这行代码

MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware',# 'django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',
]

相关文章:

Vue.js

文章目录 Vue&#xff08;前端框架&#xff09;data基本语法v-bind&#xff08;属性&#xff09;v-if&#xff08;条件&#xff09;v-formethods事件v-model表单绑定todolist&#xff08;添加删除展示内容&#xff0c;含上下移动&#xff09;es6语法生命周期函数axios发送ajax请…...

博士毕业答辩流程 注意事项

前言&#xff1a;2023年5月17日14:00-17:00&#xff0c;与实验室其他同学一起旁听了本实验室的博士论文答辩。接下来&#xff0c;我对博士毕业答辩的大致流程进行简要介绍&#xff0c;并对个环节的注意事项进行总结归纳&#xff0c;供毕业生参考。 目录 1. 准备阶段2. 汇报期间…...

拼多多开放平台订单详情接口解析

API接口订单接口是指用于实现订单相关操作的程序接口。通过这个接口&#xff0c;用户可以实现创建、修改、查询和取消订单等功能。 常见的API接口订单接口包括&#xff1a; 创建订单接口&#xff0c;用于实现用户下单操作。 修改订单接口&#xff0c;用于修改已有订单信息。 …...

如何把ipa文件(iOS安装包)安装到iPhone手机上? 附方法汇总

苹果APP安装包ipa如何安装在手机上&#xff1f;很多人不知道怎么把ipa文件安装到手机上&#xff0c;这里就整理了苹果APP安装到iOS设备上的方式&#xff0c;仅供参考 苹果APP安装包ipa如何安装在手机上&#xff1f;使用过苹果手机的人应该深有感触&#xff0c;那就是苹果APP安…...

由浅入深了解 深度神经网络优化算法

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 导言 优化是从一组可用的备选方案中选择最佳方案。优化无疑是深度学习的核心。基于梯度下降的方法已经成为训练深度神经网络的既定方法。 在最简单的情况下&#xff0c;优化问题包括通过系统地从允许集合中…...

LIN-报文结构

文章目录 协议规范一、字节场二、报文头&#xff08;HEADER FIELDS&#xff09;同步间隔&#xff08;synchronisation break)同步场&#xff08;SYNCH FIELD&#xff09;标识符场&#xff08;IDENTIFIER FIELD&#xff09; 三、数据场&#xff08;DATE FIELDS&#xff09;四、校…...

南京邮电大学通达学院2023c++实验报告(三)

题目 实验题目1 某公司财务部需要开发一个计算雇员工资的程序。该公司有3类员工,工资计算方式如下: (1)工人工资:每小时工资额(通过成员函数设定)乘以当月工作时数(通过成员函数设定),再加上工龄工资。 (2)销售员工资:每小时工资额(通过成员函数设定)乘以当月…...

ISO9000和ISO9001有哪些区别?

作为ISO标准体系的新手&#xff0c;ISO9000和ISO9001是第一个接触到的标准。有些人可能会含糊地表达包含关系的词语&#xff0c;但他们仍然无法真正理解它们。两者的关系是什么&#xff1f;有什么区别&#xff1f;事实上&#xff0c;两者的主要区别体现在以下三个方面: 第一&am…...

第7章异常、断言和曰志

Java和C异 在C中&#xff0c;throw说明符在运行时执行。Java在编译时执行。 处理错误 异常处理的任务就是将控制权从产生错误的地方转移到能够处理这种情况的错误处理器。 如果由于出现错误而使得某些操作没有完成&#xff0c;程序应该&#xff1a;返回到一种安全状态&#…...

springboot读取和写入csv文件数据

前言 csv格式的表格&#xff0c;和xls以及xlsx格式的表格有一些不同&#xff0c;不能够直接用处理xls的方式处理csv&#xff1b; 以下我将介绍如何读取并写入csv数据 准备工作 要处理csv格式的表格数据&#xff0c;我们首先需要引入pom.xml的依赖 <dependency><art…...

【产品经理】工作交接

一、前言 相信大家对这样的场景一定不陌生&#xff1a;有一天去找某个业务的负责人&#xff0c;突然被告知调岗了&#xff0c;或是辞职了&#xff0c;更坏的情况是&#xff0c;甚至完全找不到相关人员了&#xff0c;直接导致工作搁置了。这种情况&#xff0c;你应该多少会感到…...

Springer期刊 latex投稿经验分享

Springer Nature期刊的latex模板下载: Download the journal article template package 以MTAP为例(修改之后对修订稿的投递过程) 第一步:将您的文章提交到适当的期刊轨道或特刊。 如有必要,从下拉菜单中更改您提交的文章类型。 然后点击Proceed 第二步: 与您提交的先前修…...

Python 文件读取的练习

读取文本文件 给定一个名为 ‘example.txt’ 的文本文件&#xff0c;编写一段Python代码&#xff0c;读取文件并打印其内容。 行数统计 给定一个名为 ‘example.txt’ 的文本文件&#xff0c;编写一段Python代码&#xff0c;计算文件中的行数。 单词统计 给定一个名为 ‘exam…...

Redis:主从复制_通过此功能实现对内存上的数据更好的保护

什么是主从复制&#xff1f; 简单的意义上来讲就是一个主人带着几个奴隶&#xff0c;奴隶的全部都是主人给他的&#xff0c;刚开始的时候奴隶是一无所有&#xff0c;是主人将自己的一部分给到奴隶了。因此奴隶翻身了&#xff0c;变得有钱了&#xff0c;也就是有一定价值了&…...

LoRA:大模型的低秩自适应微调模型

对于大型模型来说&#xff0c;重新训练所有模型参数的全微调变得不可行。比如GPT-3 175B&#xff0c;模型包含175B个参数吗&#xff0c;无论是微调训练和模型部署&#xff0c;都是不可能的事。所以Microsoft 提出了低秩自适应(Low-Rank Adaptation, LoRA)&#xff0c;它冻结了预…...

拼多多买家如何导出“个人中心”订单信息

经常在拼多多买东西&#xff0c;有时候需要把订单的物流信息导出来&#xff0c;方便记录和统计。现介绍如何使用dumuz工具来实现批量下载拼多多订单。 应用功能描述 模拟人工操作拼多多"个人中心-我的订单”订单网页&#xff0c;批量查询获取拼多多自己买的商品的订单数…...

11.计算机基础-计算机网络面试题—基础知识

本文目录如下&#xff1a; 计算机基础-计算机网络 面试题一、基础知识简述 TCP 和 UDP 的区别&#xff1f;http 与 https的区别?Session 和 Cookie 有什么区别&#xff1f;详细描述一下 HTTP 访问一个网站的过程&#xff1f;https 是如何实现加密的&#xff1f;URL是什么&…...

cs109-energy+哈佛大学能源探索项目 Part-1(项目背景)

1、项目概况 1.1 背景和动机 建筑能源性能的问题现在已经成为建筑业主极为关注的问题&#xff0c;因为这直接转化为成本。根据美国能源部的数据&#xff0c;建筑物消耗了美国全部能源的约40%。一些州和市政府采取了建筑节能目标&#xff0c;以减少城市及区域乃至全球的空气污…...

ARM Linux摄像头传感器数据处理全景视野:从板端编码视频到高级应用

ARM Linux摄像头传感器数据处理全景视野&#xff1a;从板端编码视频到高级应用 1. 摄像头传感器与数据采集&#xff08;Camera Sensor and Data Acquisition&#xff09;1.1 数字摄像头传感器基础&#xff08;Basics of Digital Camera Sensors&#xff09;1.1.1 传感器类型&am…...

Fixed Function Shader

Properties 属性 Shader语法不区分大小写 基础的数据类型 如何定义一个属性 属性要在"Properties{}"代码块中定义 Properties{_Color("Main Color",Color) (1,1,1,1)_Shininess("Shininess",range(0,8)) 4_MainTex("MainTex",2D…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...