React(一)——基本介绍和JSX
React(一)——基本介绍和JSX
React基本介绍及js文件的引入,ReactDOM.render()渲染页面,防止XSS攻击,编程范式,JSX的使用/语法规则/注释/输出数据类型/在属性上使用表达式,JSX列表渲染及条件渲染。
1.react基本介绍
一个用于构建用户界面的JavaScript库。
1.1起源
`React` 起源于 `Facebook` 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,做出来以后,发现这套东西很好用,就在2013年5月开源了,随后越来越多人开始关注和使用 `React`,慢慢的 `React` 就成为了当前最流行的前端开发框架之一。
1.2特点
- `React` 采用了声明式编程范式 ,可以更加方便的构建 `UI` 应用
- 内部封装更加高效的与底层`DOM`进行交互 的逻辑,提高性能的同时也能帮助我们更加专注于业务
- 可以很好的接纳其它框架或库与其进行配合
1.3React 全家桶
- `React` : 提供框架(库)核心功能,如 `组件`、`虚拟DOM` 、渲染等
- `create-react-app` : 脚手架,提供一套用于快速 构建和打包 `React` 项目的工具
- `react-router` : 基于 `React` 的路由库
- `redux、react-redux` : 状态管理库
2.React的加载引入
也可以引入通过 CDN 获得 React 和 ReactDOM 的 UMD 版本 :
开发环境:
上述版本仅用于开发环境,不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用:
通过 CDN 的方式引入 React,官方建议设置 crossorigin
属性,同时建议验证使用的 CDN 是否设置了 Access-Control-Allow-Origin: *
HTTP 请求,这样能在 React 16 及以上的版本中有更好的错误处理体验。
示例:
html:
JS:
ReactDOM.render(
'开课吧
',
document.getElementById('app')
);
结果:发现会将整个内容以及标签全部渲染出来
原因:React内部是使用innerText 而不是innerHTML进行渲染(为防止XSS攻击)
正确写法:需要使用React专属的JPX格式才可以进行渲染,且需要引入的JS使用text/babel类型及babel的JS文件,且通过babel进行渲染
ReactDOM.render(
开课吧
,
document.getElementById('app')
);
注意:使用JPX格式进行渲染,是babel内部通过ajax去访问的页面,所以页面必须运行在服务器上才能正常访问。否则会报错:
解决:如果实在VSCode编辑其中可以下载插件,live server即可;
2.2ReactDOM.render()方法解析
ReactDOM.render(element, container[, callback]) :
element:要渲染的内容
container:要渲染的内容存放容器(页面某个节点)
callback:渲染后的回调函数
2.3XSS注入攻击
为了有效的防止 `XSS` 注入攻击,`React DOM` 会在渲染的时候把内容(字符串)进行转义,所以字符串形式的标签是不会作为 `HTML` 标签进行处理的。
XSS攻击示例:通过表单的innerHTML方法会可以改变HTML上的各种标签,样式,JS等,极其不安全。
3.编程范式
就是编程的一种模式,比较流行的一些编程范式:
3.1命令式编程
告诉计算机怎么做(How?) - 过程
在原生JavaScript中,UI的构建是使用了命令式的编程方式来完成的。
let shadow = this.attachShadow({mode: 'open'});
let style = document.createElement('style');
style.textContent = `span {color:red}`;
let span = document.createElement('span');
span.innerHTML = '我是自定义元素的内容';
span.classList.add('cred');
shadow.appendChild(style);
shadow.appendChild(span);
3.2声明式编程
告诉计算机我们要什么(What?) - 结果
如sql语句和HTML:
SELECT * FROM `USER` WHERE `gender`='男' ORDER BY `age` DESC;
上面的 SQL就是一个典型的声明式编程,告诉数据库,我要什么结果,至于怎么查询出来结果,排序如何实现的过程 SQL并不关心,由内部(底层)实现。
又如以下方法(此处也包括函数式编程):
['k',1,2,'k',true,'b'].filter(v => Number.isFinite(v)).map(v=>v*10).reduce((c, v)=>c + v, 0);
3.3React.js 中的声明式 UI
我是自定义元素的内容
4.DOM对象与Virtual DOM
4.1DOM 对象
DOM:文档对象模型,把文档(一堆字符,一堆有格式的字符)中的内容解析成JS中的对象格式,并且还提供许多的方法和特性来操作这些对象,同时对这些对象的操作还会同步反馈(更新)到这些对象对应的HTML中。
浏览器会把页面中的元素映射为 JavaScript 中的对象,在 JavaScript 中通过对这些对象的访问来获取页面中对应元素及其内容。同时,对这些对象进行某些操作,又会反馈到页面中对应的元素上面。
但是,原生 JavaScript DOM 对象内容和结构太复杂,有很多的特性是我们平时很少用到的,而且我们对对象的操作会立即反馈到页面(渲染),影响性能。因此react使用虚拟DOM。
html:
console.dir(document.querySelector("#app"));
结果:发现原生DOM对象上有其所有的属性和对应的方法。
4.2虚拟 DOM
virtual DOM,参考原生 DOM 对象构建的一个对象,它的结构足够简单,同时优化渲染逻辑,减少变化带来的渲染性能影响。
HTML:
JSX:
// console.dir(document.querySelector("#app"));
const App = (
);
console.dir(App);
ReactDOM.render(
App,
document.querySelector("#app")
);
生成的 virtual DOM 结构如下:发现虚拟DOM下有props属性;props下面有children,children下包括所有的HTML结构;children又会有自己的props,props下依然有children,一直到最后没有内容。react后面的各种都是通过虚拟DOM进行操作。
5.JSX的使用
`JSX` 是一个基于 `JavaScript` + `XML` 的一个扩展语法。
- 它可以作为 `值` 使用
- 它并不是 `字符串`
- 它也不是 `HTML`
- 它可以配合 `JavaScript 表达式` 一起使用
需要引入babel库,内部是通过babel库去解析引入的app.js文件,再进行渲染的。使用babel库后,网络请求根本不会去加载自己引入的app.js文件,而是通过babel库中的ajax异步去加载,并且将加载过来的文件先通过babel进行解析成JS代码,再通过浏览器渲染出来。
js/app.js:jsx
ReactDOM.render(
开课吧
,
document.getElementById('app')
);
引入JSX解析库 :babel-standalone.js:在浏览器中处理 `JSX`
html:
> 注意:如果包含 `JSX` 或引入的代码中包含 `JSX` ,需要设置 `script` 标签的 `type` 属性为:`text/babel`
const App = (
);
6.JSX语法规则
6.1结构
每一个独立 `JSX` 结构的顶层有且只能有一个顶级父元素
jsx:
// 错误
const App = (
第二个
);
// 正确
const App = (
);
6.2在JSX中嵌入表达式
在 `JXS` 中可以使用{表达式} 嵌入`JavaScript`表达式
表达式:能产生值的一组代码的集合。
if,while,for等是语句,JXS中不支持语句 。
示例:
HTML:
JS:
let name = "kaikeba";
let title = "welcome to kaikeba";
const App = (
);
ReactDOM.render(
App,
document.querySelector("#app")
);
结果:
注意:分清楚表达式与语句的区别,if、for、while这些都是语句,JSX不支持语句 。
{if (true) {...} // 错误
7.JSX语法示例
在 `JSX` 中,表达式输出的内容类型与使用位置也有一些区别
7.1JSX中的注释
{/*注释*/}
{/*
多行注释
*/}
7.2JSX表达式输出数据类型
- 字符串、数字:原样输出
- 数组:转成字符串。相当于使用数组.join('') ,即使用空字符串而不是JS中默认的逗号连接
- 其它对象不能直接输出 。
- 布尔值、空、未定义会被忽略
数组:发现数组在JSX表达式中输出时,会以字符串形式对元素进行连接。
let arr = [2,7,3,4];
const App1 = (
);
ReactDOM.render(
App1,
document.querySelector("#app")
);
其他对象:直接输出会报错
{/*JSX输出数据类型:其他对象*/}
let obj = {name:'lmf',age:23};
const App2 = (
);
必须先对象转为数组,再输出:
//JSX对象不能直接输出,需要转为数组后才能输出
let obj = { name: 'lmf', age: 23 };
let zMouse = {
name: '子鼠',
gender: '男',
skills: ['JavaScript', 'Node.js'],
interests: ['音乐', '足球', '编程']
};
function getObj(obj){
let arr = [];
for(let k in obj){
arr.push({k}:{
Array.isArray(obj[k]) ? Object.keys(obj[k]).map(item => {
return
}) : obj[k]
} )//注意此处使用了JSX语法,所以取值必须使用{k}
}
return arr;
}
const AppCont = (
对象转为数组输出:{Object.keys(obj).map((k, v) => { return k + ': ' + obj[k] + '; ' })}
对象转为数组输出(先通过方法生成列表循环数组,再调用方法(注意也需要在{}中进行调用)进行显示):
{getObj(zMouse)}
对象循环列表输出:
{/*注意:不能使用数组作为唯一key,['JavaScript', 'Node.js']没有可作为key的,[name:'JavaScript', remark:'较难']可将arr.name或arr.remark作为唯一key*/}
{Object.keys(zMouse).map((k) => {
return {k}:{
Array.isArray(zMouse[k]) ? Object.keys(zMouse[k]).map(item => {
return
}) : zMouse[k]
}
})}
);
ReactDOM.render(
AppCont,
document.querySelector("#app")
);
结果:
布尔值、空、未定义会被忽略:
{/*JSX输出数据类型:布尔值,空或未定义*/}
const App3 = (
true:{true}
undefined:{undefined}
空:{}
);
ReactDOM.render(
App3,
document.querySelector("#app")
);
结果:
7.3在属性上使用表达式
JSX中的表达式也可以使用在属性上,但是使用的时候需要注意
jsx:
let id = 'kaikeba';
// 错误
const App = (
);
// 正确
const App = (
);
JSX更偏向JavaScript, 所以对于一些特殊的属性,使用的是JavaScript中的属性名风格。如className
jsx:
// 错误
const App = (
);
// 正确
const App = (
);
为了更加方便的操作元素的style,针对style这个属性有特殊的处理方式。style里的多个属性是以对象形式书写
const App = (
);
注意:这里的两个{{}} ,外部的大括号表示的是前面说的表达式语法中的大括号 ,里面的大括号是表示对象的大括号
注意:在属性上使用表达式时,可以直接输出对象格式的数据,但是直接在表达式中输出对象会报错
也可以使用以下方式:
let skin = {width: '100px', height: '100px', color:'red'};
const App = (
);
8.JSX列表渲染
列表渲染如果需要渲染一组数据,我们可以通过遍历(数组遍历、对象变量……)等操作,返回一组JSX。
**数据**:
let zMouse = {
name: '子鼠',
gender: '男',
skills: ['JavaScript', 'Node.js'],
interests: ['音乐', '足球', '编程']
};
8.1数组
function getSkills() {
return (
{zMouse.skills.map(skill => {skill} )}
);
}
const App = (
{getSkills()}
);
或者
const App = (
{zMouse.skills.map(skill => {skill} )}
);
8.2对象
需要将对象转为数组
//JSX对象不能直接输出,需要转为数组后才能输出
let obj = { name: 'lmf', age: 23 };
let zMouse = {
name: '子鼠',
gender: '男',
skills: ['JavaScript', 'Node.js'],
interests: ['音乐', '足球', '编程']
};
function getObj(obj){
let arr = [];
for(let k in obj){
arr.push({k}:{
Array.isArray(obj[k]) ? Object.keys(obj[k]).map(item => {
return
}) : obj[k]
} )//注意此处使用了JSX语法,所以取值必须使用{k}
}
return arr;
}
const AppCont = (
对象转为数组输出:{Object.keys(obj).map((k, v) => { return k + ': ' + obj[k] + '; ' })}
对象转为数组输出(先通过方法生成列表循环数组,再调用方法(注意也需要在{}中进行调用)进行显示):
{getObj(zMouse)}
对象循环列表输出:
{/*注意:不能使用数组作为唯一key,['JavaScript', 'Node.js']没有可作为key的,[name:'JavaScript', remark:'较难']可将arr.name或arr.remark作为唯一key*/}
{Object.keys(zMouse).map((k) => {
return {k}:{
Array.isArray(zMouse[k]) ? Object.keys(zMouse[k]).map(item => {
return
}) : zMouse[k]
}
})}
);
ReactDOM.render(
AppCont,
document.querySelector("#app")
);
或者
const App = (
{Object.keys(zMouse).map(key => {key} )}
);
8.3key
默认情况下,React 从性能上考虑,会尽可能的复用结构,针对同组可变列表结构,为了避免出现某些方面的问题,通常会给每一个列表添加一个唯一的 key。这个key一般使用数据中的唯一标识id。
{[{id:1,name:'zMouse',id:2,name:'MT'}].map(user => {user.name} )}
注意:key 的值不推荐使用数组的下标,因为数组下标没有和数据进行绑定。
9.JSX条件渲染
function moreInterests() {
if (zMouse.interests.length > 2) {
return 更多
}
}
const App = (
爱好:{zMouse.interests.map(interest=>{
return {interest}
})}
{moreInterests()}
);
9.1三元运算符
const App = (
爱好:{zMouse.interests.map(interest=>{
return
{interest}
})}
{zMouse.interests.length > 2 ?
更多 : null}
);
9.2与或运算符
const App = (
爱好:{zMouse.interests.map(interest=>{
return
{interest}
})}
{zMouse.interests.length > 2 &&
更多 }
{zMouse.interests.length < 4 ||
更多 }
);
你可能感兴趣的:(React,前端,JS高级,编程范式,JSX列表渲染及条件渲染)
1-刷力扣问题记录
leaf_leaves_leaf
算法 数据结构
25.1.191.size()和.length()有什么区别2.result.push_back({nums[i],nums[left],nums[right]});为什么用大括号?使用大括号{}是C++11引入的初始化列表语法,它允许我们在构造或初始化对象时直接传入一组值。大括号的使用在许多情况下都能让代码更加简洁和直观。{nums[i],nums[left],nums[right]}是一个初始
QT界面自适应
天生爱打工
qt qt 开发语言
一自适应工具类介绍:1.1功能控件能跟随界面大小的变化实现字体、大小同比例的变化1.2优点控件大小,字体可跟随界面大小同比例任意变化。同一套程序能兼容不同分辨率及不同DPI的显示器对于控件数目固定不变的UI区域:只需要将控件拖拽到指定位置即可,不需要使用弹簧及布局等qt属性对于控件数目有可能会根据需求变化的UI区域:可以使用qt原有的布局,但解放了qt原有布局中不能改变字体的属性。二自适应工具类使
深圳SMT贴片加工厂家核心技术及服务优势解析
安德胜SMT贴片
其他
内容概要在电子制造领域,高效、精准的生产能力已成为企业保持竞争力的关键要素。如何通过技术创新与服务优化实现快速交付与品质保障,是当前行业关注的核心议题。深圳作为国内电子制造产业的重要聚集地,其SMT贴片加工厂家通过持续的技术迭代与服务升级,形成了独特的市场竞争力。本文将系统解析该类企业在核心技术与服务模式上的突破路径,涵盖设备精度提升、工艺创新、品控体系完善等关键维度。首先,高精度贴片设备与智能化
C语言-回调函数的应用
woainizhongguo.
C/C++ c语言
什么是回调函数回调函数就是一个被作为参数传递的函数。在C语言中,回调函数只能使用函数指针实现,在C++、Python、ECMAScript等更现代的编程语言中还可以使用仿函数或匿名函数。工作机制⑴定义一个回调函数;⑵提供函数实现的一方在初始化的时候,将回调函数的函数指针注册给调用者;⑶当特定的事件或条件发生的时候,调用者使用函数指针调用回调函数对事件进行处理。应用案例(1)应用层:通过调用hal层
前端:纯前端快速实现html导出word和pdf
m0_74823715
前端 html word
实现html导出word,需要使用两个库。html-docx-js和file-saver导出word的js方法>npminstallhtml-docx-js>npminstallfile-saverjs引入importFileSaverfrom“file-saver”;importhtmlDocxfrom“html-docx-js/dist/html-docx”;/**导出word方法*/expo
Python Union 联合类型注解详解
人才程序员
杂谈 python 服务器 java linux 后端 软件工程 开发语言
文章目录PythonUnion联合类型注解详解1.什么是Union联合类型?**语法(Python3.9及之前版本)**:**语法(Python3.10及之后版本)**:2.Union联合类型注解示例**(1)使用Union来表示多个类型的参数****(2)使用`|`来表示联合类型(Python3.10及之后版本)**3.使用Union进行复杂类型注解**(1)使用Union与列表结合****(2
Ubuntu22.4.03服务器版安装及搭建深度学习环境的问题总结
蜡笔小祎在线学习
问题集合 深度学习 人工智能
Ubuntu22.4.03服务器版安装流程整个流程已经有很多分享帖了,这里概述一下:下载iso制作启动U盘,按f2进入安装,选择语言,键盘布局english,ubuntuserver安装,DHCP自动配置网络(问题1),代理服务器我们没填,配置阿里云镜源http://mirrors.aliyun.com/ubuntu/,磁盘分区(问题2),设置服务器密码,安装ssh远程工具,重启reboot。可参
释放 DeepSeek 的力量:像专家一样本地安装与探索!
guzhoumingyue
AI python
要在本地运行DeepSeek,您需要遵循以下步骤。请确保您的计算机上已安装Python和Git,并且满足DeepSeek的依赖项。步骤1:安装依赖项安装Python和pip确保您已安装Python(建议使用Python3.6及以上版本)。您可以通过在终端/命令提示符中输入以下命令来检查Python是否已安装:bash复制代码python--version或者bash复制代码python3--ver
FPGA设计怎么学?薪资前景好吗?
博览鸿蒙
FPGA fpga开发
FPGA前端设计和各岗位之间有着很多联系,是一个薪资待遇高,前景发展好的岗位。但这个岗位的门槛也比较高,很多人不知道怎么学习,下面就和宸极教育一起来了解一下吧。数字前端设计必备技能1、熟悉数字电路设计2、熟悉Verilog或VHDL3、熟悉异步电路设计4、熟悉FIFO的设计5、熟悉UNIX系统及其工具的使用6、熟悉脚本语言Perl、Shell、Tcl等7、熟悉C/C++语言、SystemVeril
Vue-纯前端导出word文档
2501_90252408
前端 vue.js word
varbuf=doc.getZip().generate({type:‘nodebuffer’});//bufisanodejsbuffer,youcaneitherwriteittoafileordoanythingelsewithit.fs.writeFileSync(path.resolve(__dirname,‘output.docx’),buf);####jszip-utils[jszi
SMT贴片治具关键设计要素与制造工艺探析
安德胜SMT贴片
其他
内容概要随着电子产品向微型化、高集成化方向加速发展,SMT贴片治具作为高密度PCB组装的核心工艺装备,其设计与制造质量直接影响贴装精度与生产效率。本段将聚焦治具设计规范的核心要素,从材料性能、结构适配性、公差匹配等维度展开系统性阐述。在材料选型层面,需综合考虑治具的耐高温性、抗变形能力及绝缘特性。例如,铝合金凭借轻量化与导热优势,常用于高精度定位模组;而工程塑料则在防静电与成本控制场景中更具适用性
C语言中的回调函数 以及应用
C r a z y
c语言 c++ java python 数据结构
定义回调函数就是一个通过函数指针调用的函数。如果你把函数的指针也就是地址作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就可以说这是回调函数。注意回调函数不是有该函数的实现方直接调用,而是再特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应看不懂没关系先继续看↓实例应用:我们先用常规思路写一个能简单实现加减乘除的计算器#includevoidmenu(){pr
PHP 安全与加密:守护 Web 应用的基石
来恩1003
PHP 从入门到精通 php 安全 前端
PHP学习资料PHP学习资料PHP学习资料在当今数字化时代,Web应用无处不在,而PHP作为一种广泛使用的服务器端脚本语言,承载着无数网站和应用的核心逻辑。然而,随着网络攻击手段日益复杂,PHP应用面临着诸多安全威胁,如SQL注入、XSS攻击等,同时,数据的加密保护也至关重要。本文将深入探讨PHP中的安全问题及加密算法的应用,帮助开发者构建更安全可靠的Web应用。一、PHP安全之殇——SQL注入攻
纯前端导入导出txt文件
今天吃了嘛o
前端导入导出txt文件 javascript html html5
1.html部分导入导出{{alone}}2.js部分导出的时候我尝试了很多次改变编码格式为gb2312的,但是无果,所以我再读取的时候先读取文件判断了文件编码格式,然后再去根据编码格式读取文件并展示页面。exportdefault{data(){return{works:[],};},methods:{handleBeforeUpload(file){this.fileList=[file];c
vue中使用ueditor上传到服务器_vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]...
小西超人
写在最前面的话:鉴于近期很多的博友讨论,说我按照文章的一步一步来,弄好之后,怎么会提示后端配置项http错误,文件上传会提示上传错误。这里提别申明一点,ueditor在前端配置好后,需要与后端部分配合进行,后端部分的项目代码git地址:https://github.com/coderliguoqing/UeditorSpringboot,然后将配置ueditor.config.js里的server
iOS平台RTSP|RTMP直播播放器技术接入说明
音视频牛哥
RTSP播放器 RTMP播放器 大牛直播SDK objective-c iOS rtsp播放器 iOS rtmp播放器 iOS rtsp player iOS rtmp player iOS播放器 大牛直播SDK
技术背景大牛直播SDK自2015年发布RTSP、RTMP直播播放模块,迭代从未停止,SmartPlayer功能强大、性能强劲、高稳定、超低延迟、超低资源占用。无需赘述,全自研内核,行业内一致认可的跨平台RTSP、RTMP直播播放器。本文以iOS平台为例,介绍下如何集成RTSP、RTMP播放模块。技术对接系统要求SDK支持iOS9.0及以上版本;支持的CPU架构:arm64(真机调试)。准备工作相关
vuecli项目实战--管理系统
团团kobebryant
项目 前端框架 java javascript 前端 vue.js
一、项目搭建HBuider直接:新建--项目--填项目名称、选地址、下拉选vue项目(2.6.10)项目结构这个样子:二、前端配置1.路由配置(地址)在src文件夹下创建router文件夹在router文件夹下面创建js文件index.js---配置组件的地址还有导航守卫、路由嵌套也配在这里1.组件路由2.组件路由嵌套3.路由导航记得跟vue对象关联还有导出路由嗷importVuefrom'vue
若依前后端分离集成CAS详细教程
Roc-xb
单点登录 前后端分离 CAS
目录一、后端配置1、添加cas依赖2、修改配置文件3、修改LoginUser.java4、修改Constants.java5、添加CasProperties.java6、添加CasUserDetailsService.java7、添加CasAuthenticationSuccessHandler.java8、修改SecurityConfig9、启动后端二、前端配置1、修改settings.js2、
Vue.js 从新手到专家:第七章 高级渲染、动态组件和插件合成
caifox菜狐狸
Vue.js 从新手到专家 前端 javascript 开发语言 vue.js ecmascript 前端框架 vite
欢迎来到《Vue.js从新手到专家》的第七章!在这一章中,我们将深入探讨Vue.js的高级渲染技术、动态组件的使用以及如何通过插件扩展应用程序的功能。这些技能将帮助你构建更加灵活和可维护的应用程序。通过学习本章内容,你将掌握以下技能:理解Render函数和JSX的基本概念及其应用场景。学习函数式组件的定义及其实现方式。掌握如何为函数式组件定义Props和Emits。学习如何使用Vue插件全局地添加
CSS flex布局 列表单个元素点击 本行下插入详情独占一行
Cxiaomu
CSS3 UI设计 css 前端
技术栈:Vue2+javaScript简介在实际开发过程中有遇到一个场景:一个list,每行个数固定,点击单个元素后,在当前行与下一行之间插入一行元素详情,便于更直观的查看到对应的数据详情。这种情形,在移动端比较常见,比如用户列表,点击单个列表展示详情,可以考虑flex布局+positionrelative定位。实现思路对于需求重点和实现拆解列表元素:for遍历每行固定(3)个元素:flex布局、
20个高级Java开发面试题及答案!
Java进阶八股文
java jvm 开发语言 spring 面试 spring boot
1、java中都有哪些引用类型?(1)强引用Java中默认声明的就是强引用,比如:Objectobj=newObject();obj=null;只要强引用存在,垃圾回收器将永远不会回收被引用的对象。如果想被回收,可以将对象置为null;(2)软引用(SoftReference)在内存足够的时候,软引用不会被回收,只有在内存不足时,系统才会回收软引用对象,如果回收了软引用对象之后仍然没有足够的内存,
活动报名系统源码:JAVA同城服务系统活动报名同城圈子商家商城城市代理躲猫猫
狂团商城小师妹
博纳miui52086 java 人工智能 大数据 微信公众平台 微信小程序
JAVA同城服务系统:打造多元化社交与娱乐新体验在数字化时代,同城服务系统已成为连接城市生活的重要桥梁。我们精心打造的JAVA同城服务系统,不仅融合了活动报名、同城圈子、商家商城、城市代理等多重功能,还特别加入了创新的“躲猫猫”游戏模块,旨在为用户提供一个集社交、娱乐、消费于一体的综合性平台。以下是对该系统功能的详细介绍及技术栈分析。功能介绍活动报名用户可以通过系统轻松浏览并参与同城各类精彩活动,
详细介绍:封装简易的 Axios 函数获取省份列表
还是鼠鼠
javascript vscode ajax 前端 前端框架
目录关键步骤:完整代码(html):代码解析:程序运行结果:本示例展示了如何通过封装一个简易的myAxios函数来模拟axios的功能,使用原生的XMLHttpRequest(XHR)对象来发起HTTP请求。我们将实现一个简单的功能,通过该封装函数从服务器获取省份列表数据,并在网页上显示这些省份。关键步骤:封装myAxios函数:myAxios函数接收一个配置对象(如请求的URL和方法),并返回一
使用vue3框架vue-next-admin导出列表数据
乐多_L
vue.js 前端 javascript
在Vue3中实现Excel导出功能可以通过以下步骤完成,这里使用xlsx库来实现前端Excel导出:1.安装依赖npminstallxlsxfile-saver#或yarnaddxlsxfile-saver2.实现代码示例需要在当前页引入import*asXLSXfrom"xlsx";注释:我导出的数据为列表的全部数据(datum);自定义我需要的表头,大家可以根据自己的需要进行替换。还可以只导出
手机对小孩的影响及应对措施探究
China_Mr_Huang
智能手机
在信息技术日新月异的当下,手机早已超脱了单纯通讯工具的范畴,深度融入现代生活的每一处细节,成为人们日常生活中不可或缺的存在。对于正处于身心快速发展关键阶段的小孩而言,手机犹如一把双刃剑,一方面为他们打开了知识的宝库,提供了便捷获取信息、拓展视野的渠道,另一方面,也在不知不觉中埋下了诸多潜在风险的隐患。因此,深入且全面地剖析手机对小孩成长所产生的影响,并探寻切实可行、行之有效的应对举措,无疑具有极其
Java——列表(List)
不会Hello World的小苗
Java java list python
概述在Java中,列表(List)是一种有序的集合,它允许元素重复,并且每个元素都有一个对应的索引值。Java提供了List接口及其实现类,用于表示和操作列表数据。常用的实现类包括ArrayList、LinkedList和Vector。1、List接口概述List是Java集合框架中的一种接口,继承自Collection接口。它定义了许多常见的操作,如:添加元素:add(Ee)、add(intin
“网约车霸主“地位面临挑战专题报告
拓端研究室
报告 汽车 新能源汽车
原文链接:tecdat.cn/?p=36528原文出处:拓端数据部落公众号广汽埃安新能源汽车,在中国车市竞争加剧的浪潮中,坚定立场,誓不言退。近期,集团虽遭遇“反内卷”讨论及裁员传言的风暴,但埃安迅速且明确地澄清,所谓的“20%人员效率提升”并非裁员举措,而是优化调整,并承诺对受影响的应届毕业生履行合同赔偿,彰显企业责任感。同时,埃安宣布泰国与长沙新厂的投产及扩招蓝图,力证其持续稳健发展的决心与实
科普:Docker run的相关事项
人工干智能
docker eureka java
一、镜像名(含标签)太长如,通过如下命令行:dockerpulldesignthru2019/dify:56c6d1af0944dbdb5e0115cb623ff0e118a4ac62拉取的镜像名(及标签)太长,可以通过改名的方法变短。在Docker中,拉取到本地的镜像可以改名。本质上,这并不是直接修改镜像本身,而是为镜像添加一个新的标签(tag),因为Docker中的镜像名称和标签其实就是对镜像
Mysql学习笔记-Mysql基础进阶
少年无为
Mysql Mysql 数据库多表查询 数据库备份 Mysql查询
#知识点1.DQL:查询语句1.排序查询2.聚合函数3.分组查询4.分页查询2.约束3.多表之间的关系4.范式5.数据库的备份和还原#DQL:查询语句1.排序查询*语法:orderby子句*orderby排序字段1排序方式1,排序字段2排序方式2...*排序方式:*ASC:升序,默认的。*DESC:降序。*注意:*如果有多个排序条件,则当前边的条件值一样时,才会判断第二条件。2.聚合函数:将一列数
spring boot基于知识图谱的阿克苏市旅游管理系统python-计算机毕业设计
QQ1963288475
spring boot 知识图谱 旅游 python vue.js django flask
目录功能和技术介绍具体实现截图开发核心技术:开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问,采用springboot集成快速开发框架,前端使用vue方式,基于es5的语法,开发工具IntelliJIDEAx64,因为该开发工具,内嵌了Tomcat服务运行机制,可不用单独下载Tomcatserver服务器。由于考虑到
SQL的各种连接查询
xieke90
UNION ALL UNION 外连接 内连接 JOIN
一、内连接
概念:内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。
内连接(join 或者inner join )
SQL语法:
select * fron
java编程思想--复用类
百合不是茶
java 继承 代理 组合 final类
复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书
一:组合语法:就是将对象的引用放到新类中即可
代码:
package com.wj.reuse;
/**
*
* @author Administrator 组
[开源与生态系统]国产CPU的生态系统
comsci
cpu
计算机要从娃娃抓起...而孩子最喜欢玩游戏....
要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....
投入一些资金和资源,人力和政策,让游
JVM内存区域划分Eden Space、Survivor Space、Tenured Gen,Perm Gen解释
商人shang
jvm内存
jvm区域总体分两类,heap区和非heap区。heap区又分:Eden Space(伊甸园)、Survivor Space(幸存者区)、Tenured Gen(老年代-养老区)。 非heap区又分:Code Cache(代码缓存区)、Perm Gen(永久代)、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。
HotSpot虚拟机GC算法采用分代收
页面上调用 QQ
oloz
qq
<A href="tencent://message/?uin=707321921&Site=有事Q我&Menu=yes">
<img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
一些问题
文强chu
问题
1.eclipse 导出 doc 出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 .....
SQL:3.mysql * 必须得放前面 否则 select&nbs
生活没有安全感
小桔子
生活 孤独 安全感
圈子好小,身边朋友没几个,交心的更是少之又少。在深圳,除了男朋友,没几个亲密的人。不知不觉男朋友成了唯一的依靠,毫不夸张的说,业余生活的全部。现在感情好,也很幸福的。但是说不准难免人心会变嘛,不发生什么大家都乐融融,发生什么很难处理。我想说如果不幸被分手(无论原因如何),生活难免变化很大,在深圳,我没交心的朋友。明
php 基础语法
aichenglong
php 基本语法
1 .1 php变量必须以$开头
<?php
$a=” b”;
echo
?>
1 .2 php基本数据库类型 Integer float/double Boolean string
1 .3 复合数据类型 数组array和对象 object
1 .4 特殊数据类型 null 资源类型(resource) $co
mybatis tools 配置详解
AILIKES
mybatis
MyBatis Generator中文文档
MyBatis Generator中文文档地址:
http://generator.sturgeon.mopaas.com/
该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中文版的文档的也会有一定的障碍,所以本章根据该中文文档以及实际应用,使用通俗的语言来讲解详细的配置。
本文使用Markdown进行编辑,但是博客显示效
继承与多态的探讨
百合不是茶
JAVA面向对象 继承 对象
继承 extends 多态
继承是面向对象最经常使用的特征之一:继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类,这个新类拥有现有类的所有extends是使用继承的关键字:
在A类中定义属性和方法;
class A{
//定义属性
int age;
//定义方法
public void go
JS的undefined与null的实例
bijian1013
JavaScript JavaScript
<form name="theform" id="theform">
</form>
<script language="javascript">
var a
alert(typeof(b)); //这里提示undefined
if(theform.datas
TDD实践(一)
bijian1013
java 敏捷 TDD
一.TDD概述
TDD:测试驱动开发,它的基本思想就是在开发功能代码之前,先编写测试代码。也就是说在明确要开发某个功能后,首先思考如何对这个功能进行测试,并完成测试代码的编写,然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能,直到完全部功能的开发。
[Maven学习笔记十]Maven Profile与资源文件过滤器
bit1129
maven
什么是Maven Profile
Maven Profile的含义是针对编译打包环境和编译打包目的配置定制,可以在不同的环境上选择相应的配置,例如DB信息,可以根据是为开发环境编译打包,还是为生产环境编译打包,动态的选择正确的DB配置信息
Profile的激活机制
1.Profile可以手工激活,比如在Intellij Idea的Maven Project视图中可以选择一个P
【Hive八】Hive用户自定义生成表函数(UDTF)
bit1129
hive
1. 什么是UDTF
UDTF,是User Defined Table-Generating Functions,一眼看上去,貌似是用户自定义生成表函数,这个生成表不应该理解为生成了一个HQL Table, 貌似更应该理解为生成了类似关系表的二维行数据集
2. 如何实现UDTF
继承org.apache.hadoop.hive.ql.udf.generic
tfs restful api 加auth 2.0认计
ronin47
目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点:
一是基于客户端的ip设置。这个比较容易实现。
二是基于OAuth2.0认证,这个需要lua,实现起来相对于一来说,有些难度。
现在重点介绍第二种方法实现思路。
前言:我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算,阅读下面的文档,实现自动化并获得收益。SeatGe
jdk环境变量配置
byalias
java jdk
进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置:
1、下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是:jdk-7u79-windows-x64.exe
2、安装jdk-7u79-windows-x64.exe
3、配置环境变量:右击"计算机"-->&quo
《代码大全》表驱动法-Table Driven Approach-2
bylijinnan
java
package com.ljn.base;
import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.Collections;
import java.uti
SQL 数值四舍五入 小数点后保留2位
chicony
四舍五入
1.round() 函数是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置我们四舍五入之后小数点后显示几位。
2.numeric 函数的2个参数,第一个表示数据长度,第二个参数表示小数点后位数。
例如:
select cast(round(12.5,2) as numeric(5,2))  
c++运算符重载
CrazyMizzz
C++
一、加+,减-,乘*,除/ 的运算符重载
Rational operator*(const Rational &x) const{
return Rational(x.a * this->a);
}
在这里只写乘法的,加减除的写法类似
二、<<输出,>>输入的运算符重载
&nb
hive DDL语法汇总
daizj
hive 修改列 DDL 修改表
hive DDL语法汇总
1、对表重命名
hive> ALTER TABLE table_name RENAME TO new_table_name;
2、修改表备注
hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
jbox使用说明
dcj3sjt126com
Web
参考网址:http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [
点击下载]
技术交流QQGroup:172543951 100521167
[2011-11-11] jBox v2.3 正式版
- [调整&修复] IE6下有iframe或页面有active、applet控件
UISegmentedControl 开发笔记
dcj3sjt126com
// typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {
// UISegmentedControlStylePlain, // large plain
&
Slick生成表映射文件
ekian
scala
Scala添加SLICK进行数据库操作,需在sbt文件上添加slick-codegen包
"com.typesafe.slick" %% "slick-codegen" % slickVersion
因为我是连接SQL Server数据库,还需添加slick-extensions,jtds包
"com.typesa
ES-TEST
gengzg
test
package com.MarkNum;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation
为何外键不再推荐使用
hugh.wang
mysql DB
表的关联,是一种逻辑关系,并不需要进行物理上的“硬关联”,而且你所期望的关联,其实只是其数据上存在一定的联系而已,而这种联系实际上是在设计之初就定义好的固有逻辑。
在业务代码中实现的时候,只要按照设计之初的这种固有关联逻辑来处理数据即可,并不需要在数据库层面进行“硬关联”,因为在数据库层面通过使用外键的方式进行“硬关联”,会带来很多额外的资源消耗来进行一致性和完整性校验,即使很多时候我们并不
领域驱动设计
julyflame
VO DAO 设计模式 DTO po
概念:
VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来。
DTO(Data Transfer Object):数据传输对象,这个概念来源于J2EE的设计模式,原来的目的是为了EJB的分布式应用提供粗粒度的数据实体,以减少分布式调用的次数,从而提高分布式调用的性能和降低网络负载,但在这里,我泛指用于展示层与服务层之间的数据传输对
单例设计模式
hm4123660
java Singleton 单例设计模式 懒汉式 饿汉式
单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。
&nb
logback
zhb8015
log logback
一、logback的介绍
Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块:logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
整合Kafka到Spark Streaming——代码示例和挑战
Stark_Summer
spark storm zookeeper PARALLELISM processing
作者Michael G. Noll是瑞士的一位工程师和研究员,效力于Verisign,是Verisign实验室的大规模数据分析基础设施(基础Hadoop)的技术主管。本文,Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间, Michael还提到了将Kafka整合到 Spark Streaming中的一些现状,非常值得阅读,虽然有一些信息在Spark 1.2版
spring-master-slave-commondao
王新春
DAO spring dataSource slave master
互联网的web项目,都有个特点:请求的并发量高,其中请求最耗时的db操作,又是系统优化的重中之重。
为此,往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层,要保证针对主库进行写操作,对多个从库进行读操作。当然在一些请求中,为了避免主从复制的延迟导致的数据不一致性,部分的读操作也要到主库上。(这种需求一般通过业务垂直分开,比如下单业务的代码所部署的机器,读去应该也要从主库读取数