昨日内容回顾
1. Vue使用
1. 生成Vue实例和DOM中元素绑定
2. app.$el --> 取出该vue实例绑定的DOM标签
3. app.$data --> 取出该vue实例绑定的data属性
2. 模板语法
1. {
{name}} --> 在标签中间引用data属性中的变量
2. v-html=' msg ' --> 在页面上显示我定义的标签元素
3. v-if =' ok ' --> 控制标签在不在DOM中
4. v-show=' !ok ' --> 控制标签的display属性的值(是否显示)
5. v-bind:href=' url ' --> 将标签的属性和vue实例的data属性绑定起来
6. v-on:click=' dianwo ' --> 给标签绑定一个点击事件,方法需要在vue实例的methods中定义
7. v-model=' article ' --> 用在input标签和textarea标签中,将用户输入和vue实例中的数据属性建立双向绑定
3. 计算属性和侦听器
1. 计算属性
(字符串翻转的例子)
1. 计算属性需要定义在vue实例的 computed 中
2. 多用于对变量做一些自定义的操作
3. 我们在页面上像使用普通data属性一样使用计算属性
2. 侦听器
多用于一些复杂的运算或者异步操作
侦听器需要放在 vue实例的 watch 中
4. class和style属性
1. 基于对象的绑定
2. 基于数组的绑定
5. 条件渲染
v -if
如果想控制多个标签的显示与否,可以使用 template 标签把它们包起来
v -if /v-else
v -if /v-else if /v-else
6. 列表渲染
v -for循环
7. 事件处理
详见2.模板语法
8. 表单绑定
详见2.模板语法
二. 小清单
1. 对象的深拷贝
2. 根据索引删除数组中的元素
splice(索引,删除个数,插入的元素)
View Code
一、Vue组件
组件基础
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织:
将上图理解为一个网页
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过 Vue.component
全局注册的:
Vue.component(' my-component-name ' , {
// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue
) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。
到目前为止,关于组件注册你需要了解的就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把组件注册读完。
组件注册
组件名
在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册时:
Vue.component(' my-component-name ' , { /* ... */ })
该组件名就是 Vue.component
的第一个参数。
你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
你可以在风格指南中查阅到关于组件名的其它建议。
组件名大小写
定义组件名的方式有两种:
使用 kebab-case
Vue.component(' my-component-name ' , { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如
。
使用 PascalCase
Vue.component(' MyComponentName ' , { /* ... */ })
当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说
和
都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的 。
全局注册
到目前为止,我们只用过 Vue.component
来创建组件:
Vue.component(' my-component-name ' , {
// ... 选项 ...
})
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue
) 的模板中。比如:
js代码:
Vue.component(' component-a ' , { /* ... */ })
Vue.component( ' component-b ' , { /* ... */ })
Vue.component( ' component-c ' , { /* ... */ })
new Vue({ el: ' #app ' })
html代码:
在所有子组件中也是如此,也就是说这三个组件在各自内部 也都可以相互使用。
常规举例 :
"en " >
"UTF-8 " >
Title
"app " >
"ttt " >弹弹弹
View Code
访问网页,点击按钮,效果如下:
如果页面其他地方,也需要弹框效果呢?代码复制一遍? 这不符合编程习惯,需要使用组件
组件是可复用的 Vue 实例,且带有一个名字
组件举例 :
"en " >
"UTF-8 " >
Title
"app " >
View Code
刷新网页,效果同上!
在这个例子中是 ,就是一个自定义组件。它作为一个自定义元素来使用!
因为组件是可复用的 Vue 实例,所以它们与 new Vue
接收相同的选项,例如 data
、computed
、watch
、methods
以及生命周期钩子等。仅有的例外是像 el
这样根实例特有的选项。
组件的复用
你可以将组件进行任意次数的复用:
View Code
注意当点击按钮时,每个组件都会各自独立维护它的 count
。因为你每用一次组件,就会有一个它的新实例被创建。
刷新网页,效果如下:
data
必须是一个函数
当我们定义这个
组件时,你可能会发现它的 data
并不是像这样直接提供一个对象:
取而代之的是,一个组件的 data
选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则,点击一个按钮就可能会影响到其它所有实例 :
举例:点击按钮,数字加1
"en " >
"UTF-8 " >
Title
"app " >
View Code
刷新网页,效果如下:
局部注册
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:
js代码
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components
选项中定义你想要使用的组件:
new Vue({
el: ' #app '
components: {
' component-a ' : ComponentA,
' component-b ' : ComponentB
}
})
对于 components
对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。
注意局部注册的组件在其子组件中不可用 。例如,如果你希望 ComponentA
在 ComponentB
中可用,则你需要这样写:
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
' component-a ' : ComponentA
},
// ...
}
举例:
"en " >
"UTF-8 " >
Title
"app " >
View Code
刷新网页,效果同上!
总结:
注意事项:
组件中的data属性必须设置成一个函数!!!
1. 注册全局组件
Vue.component(组件名,{
template: ``,
data: function(){
return {}
},
methods: {...}
})
2. 注册局部组件(当前vue实例才能使用的组件)
new Vue({
el: ' #app ' ,
components: {
alert: {
template: ``,
data: function(){
return {}
},
methods: {...}
}
}
})
View Code
通过 Prop 向子组件传递数据
早些时候,我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的。这也正是 prop 的由来。
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 props
选项将其包含在该组件可接受的 prop 列表中:
js代码:
Vue.component(' blog-post ' , {
props: [ ' title ' ],
template: ' {
{ title }} '
})
一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问 data
中的值一样。
一个 prop 被注册之后,你就可以像这样把数据作为一个自定义特性传递进来:
html代码:
"My journey with Vue " >
"Blogging with Vue " >
"Why Vue is so fun " >
效果图
然而在一个典型的应用中,你可能在 data
里有一个博文的数组:
js代码:
new Vue({
el: ' #blog-post-demo ' ,
data: {
posts: [
{ id: 1, title: ' My journey with Vue ' },
{ id: 2, title: ' Blogging with Vue ' },
{ id: 3, title: ' Why Vue is so fun ' }
]
}
})
View Code
并想要为每篇博文渲染一个组件:
html代码:
post
v-for =" post in posts "
v -bind:key=" post.id "
v -bind:title=" post.title "
>
View Code
如上所示,你会发现我们可以使用 v-bind
来动态传递 prop。这在你一开始不清楚要渲染的具体内容,比如从一个 API 获取博文列表 的时候,是非常有用的。
到目前为止,关于 prop 你需要了解的大概就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把 prop 读完。
举例:公司客服,每点击一次,表示接待了一个客户
"en " >
"UTF-8 " >
Title
"app " >
for=" item in list " v-bind:name=" item " >
View Code
刷新网页,效果如下:
父子传值,一定要使用props。这里说的父,指的是网页整体。子,指的是tankuang局部组件。
网页点击之后,需要将值传给button按钮,最终展示数据!
关键步骤如下:
1.定义了一个列表list,使用for循环遍历每一个元素
2.将值赋给item
3.item动态赋值给name
4.name传给props里面的name,name必须是字符串。
5.通过校验后,将值传给{ {name}},前端来渲染。
子组件向父组件传值
需要统计每一个客服,一共接待了多少客户。每增加一个客户,总数加1。
"en " >
"UTF-8 " >
Title
"
app " >
本月接待客户数:{
{totalCount}}
for=" item in list " v-bind:name=" item " >
View Code
刷新网页,效果如下:
发现一个问题,总数没有变动?为什么呢?
因为这一段代码
methods:{
ttt:function(){
//自增
this.count +=1
}
}
改变时,没有把外面的总数加1。那么如何改变父层的元素呢?需要使用自定义事件
自定义事件
事件名
跟组件和 prop 不同,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:
js代码:
则监听这个名字的 kebab-case 版本是不会有任何效果的:
html代码:
跟组件和 prop 不同,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on
事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent
将会变成 v-on:myevent
——导致 myEvent
不可能被监听到。
因此,我们推荐你始终使用 kebab-case 的事件名 。
举例:
"en " >
"UTF-8 " >
Title
"
app " >
本月接待客户数:{
{totalCount}}
for=" item in list " v-bind:name=" item " v-on:jiedai=" add " >
View Code
刷新网页,效果如下:
这样设计的好处是,子组件只能修改自己的。如果需要修改父组件,必须通过自定义事件来完成!
插槽
插槽内容
Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案 ,将
元素作为承载分发内容的出口。
它允许你像这样合成组件:
html代码:
然后你在
的模板中可能会写为:
html代码:
<a
v -bind:href=" url "
class =" nav-link "
>
当组件渲染的时候,这个
元素将会被替换为"Your Profile"。插槽内可以包含任何模板代码,包括 HTML:
"/profile " >
class =" fa fa-user " >
Your Profile
甚至其它的组件:
html代码:
"/profile " >
"user " >
Your Profile
如果
没有包含一个
元素,则任何传入它的内容都会被抛弃。
举例:
"en " >
"UTF-8 " >
Title
"
app " >
本月接待客户数:{
{totalCount}}
for=" item in list " v-bind:name=" item " v-on:jiedai=" add " >
上班了!
View Code
刷新网页,效果如下:
注意:template必须包含一个
元素,否则 中的内容会被丢弃掉,网页不展示!
网页无法展示。template必须使用闭合标签,否则报错!
具名插槽
有些时候我们需要多个插槽。例如,一个假设的
组件多模板如下:
html代码:
View Code
对于这样的情况,
元素有一个特殊的特性:name
。这个特性可以用来定义额外的插槽:
View Code
在向具名插槽提供内容的时候,我们可以在一个父组件的 元素上使用 slot
特性:
"header " >
Here might be a page title
A paragraph for the main content.
And another one.
"footer " >
Here' s some contact info
View Code
另一种 slot
特性的用法是直接用在一个普通的元素上:
"header " >Here might be a page title
A paragraph for the main content.
And another one.
"footer " >Here' s some contact info
View Code
我们还是可以保留一个未命名插槽,这个插槽是默认插槽 ,也就是说它会作为所有未匹配到插槽的内容的统一出口。上述两个示例渲染出来的 HTML 都将会是:
class=
" container " >
Here might be a page title
A paragraph for the main content.
And another one.
View Code
举例:
"en " >
"UTF-8 " >
Title
"
app " >
本月接待客户数:{
{totalCount}}
for=" item in list " v-bind:name=" item " v-on:jiedai=" add " >
"he " >
上班了!
打卡!
" heng " >哼哼!
View Code
刷新网页,效果如下:
总结:
1. 父组件 -传值-> 子组件
v -bind:变量=' 值 '
注意事项:
子组件接收值需要在props里面声明
2. 子组件 -传值-> 父组件
触发自定义事件的方式,为了确保父组件的值不会被子组件直接修改
子组件触发事件:
this.$emit( ' 事件名 ' )
父组件监听事件:
v -on:事件名=' 处理的方法 '
3. 插槽和带名字的插槽
引用子组件的时候,我可以传递一些额外的标签元素
View Code
二、前端开发工具包
node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器 npm,是全球最大的开源库生态系统。
官网:
https://nodejs.org/en/
下载最新版本
安装,疯狂点击下一步,就可以了!
安装完成后,打开cmd控制台,输入命令node -v 查看版本:
C:\Users\xiao>node -v
v10. 7.0
本质上还是JS,跑在V8引擎上的,让JS能够和操作系统进行交互 和Python\php类似的脚本语言
npm
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题
打开cmd控制台,输入命令npm -v 查看版本:
C:\Users\xiao>npm -v
6.1.0
类似于Python中的pip,帮助我们解决包和包之间版本的依赖关系
webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
安装webpack,使用一下命令:
npm install webpack -g
npm install webpack -cli -g
关闭cmd窗口,再次打开,查看版本
C:\Users\xiao>webpack -v
4.16.2
准备文件
新建a.js
(function(){
//定义全局变量
//这种方式经常被用到一个匿名函数执行后将一些函数公开到全局
window.ryf = ' ruanyifeng ' ;
})();
View Code
一般定义需要被导入的变量或者方法,使用function定义。
如果直接使用var 声明,那么html导入js之后,就直接有了全局变量,可能会影响当前html的全局变量,会被覆盖!
推荐使用方法,调用时,才使用变量
新建test.html,引入a.js
View Code
访问网页,效果如下:
发现Console打印出变量了
Nodejs 编写模块相当的自由,开发者只需要关注 require,exports,module 等几个变量就足够,而为了保持模块的可读性,很推荐把不同功能的代码块都写成独立模块,减少各模块耦合。
module.exports
用来导出代码,初始值为一个空对象 {}
修改a.js
(function(){
//定义全局变量
//这种方式经常被用到一个匿名函数执行后将一些函数公开到全局
window.ryf = ' ruanyifeng ' ;
})();
//当前这个包 向外提供一个变量:ryf
//module.exports 则用来导出代码,初始值为一个空对象 {}
module.exports = {
ryf: ryf
}
View Code
require
webpack中可以写commonjs格式的require同步语法
经典的commonjs同步语法
新建b.js
var obj = require(' ./a.js ' );
此时webpack会将a.js打包进引用它的文件中,这是最普遍的情形!
正式使用Webpack
webpack可以在终端中使用,在基本的使用方法如下:
# {extry file}出填写入口文件的路径,本文中就是上述main.js的路径,
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}
指定入口文件后,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack不是全局安装的,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址。
在终端中输入如下命令:
必须先进入到b.js文件的目录
C:\Users\xiao>e:
C:\Users\xiao >cd E:\python_script\Vue
再执行命令
webpack b.js
效果如下:
由于没有指定打包文件的存放路径,执行完成之后,会在当前目录生成dist目录 ,里面有一个文件main.js
查看main.js
!function(e){var r={};function t(n){
if (r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){
" undefined " !=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:" Module " }),Object.defineProperty(e," __esModule " ,{value:!0})},t.t=function(e,r){
if (1&r&&(e=t(e)),8&r)return e;if (4&r&&" object " ==typeof e&&e&&e.__esModule )return e;var n=Object.create(null);if (t.r(n),Object.defineProperty(n," default " ,{enumerable:!0,value:e}),2&r&&" string " !=typeof e)for (var o in e)t.d(n,o,function(r){
return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule ?function(){
return e.default}:function(){
return e};return t.d(r," a " ,r),r},t.o=function(e,r){
return Object.prototype.hasOwnProperty.call(e,r)},t.p="" ,t(t.s=0)}([function(e,r,t){t(1)},function(e,r){window.ryf=" ruanyifeng " ,e.exports={ryf:ryf}}]);
View Code
发现代码被压缩成一行了,代码被打乱了,看不懂的
修改test.html,改为导入mian.js
View Code
刷新网页,效果如下:
发现变量依然有效!
posted @
2018-07-25 16:01 肖祥 阅读(
... ) 评论(
) 编辑 收藏
你可能感兴趣的:(python 全栈开发,Day90(Vue组件,前端开发工具包))
使用LM Studio在WordPress基于大模型原创文章上稿进行SEO优化
Mr数据杨
Python 自然语言技术 wordpress 大模型 seo 1024程序员节
在进行自动化文章生成与发布的流程中,首先需要确保基础配置的完善性和数据的准确性。通过手动设置分类和标签,文章能够在发布时被准确归类,从而提升SEO的效果。通过Excel表格的方式管理这些分类与标签,结合Python脚本,可以高效地实现自动化文章的生成和发布。该流程依赖于对WordPress数据库的操作,包括标签的批量导入、分类和标签的映射,以及通过AI生成内容的自动发布。全面的配置不仅节省了手动处
linux安装python开发环境
燃冰结晶
linux python linux install python jupyter python web开发环境
安装Anaconda下载Anacondawgethttps://repo.anaconda.com/archive/Anaconda3-5.3.0-Linux-x86_64.sh安装AnacondabashAnaconda3-5.3.0-Linux-x86_64.sh会选择安装路径会选择是否需要安装vscode,国内安装不上,所以不要安装了刷新环境配置source~/.bashrc验证是否安装成功
Python 小练习 —— 统计字符串各类字符数量
奶香臭豆腐
python 开发语言 学习
需求允许用户不断输入一个字符串。写一个函数负责统计该字符串中的字符、数字、空格、特殊字符的个数。代码如下:#统计字符、数字、特殊字符的个数fromtypingimportTuple#使用类型注释所需的库#定义函数,用到了类型注释。defcount_characters(msg:str)->Tuple[int,int,int,int]:digit_count=0#数字计数器alpha_count=0
Python —— 深拷贝和浅拷贝
奶香臭豆腐
python 开发语言 学习
Python——深拷贝和浅拷贝浅拷贝——ShallowCopy深拷贝——DeepCopy总结常见的应用场景浅拷贝——ShallowCopy浅拷贝是指复制对象本身,但不会复制对象内部的嵌套对象。换句话说,浅拷贝会创建一个新的对象,但是新对象中的元素是原始对象元素的引用(即指向同一块内存地址)。因此,若原始对象中的元素是可变对象,修改这些元素会影响到原始对象和拷贝对象。s="abcdef123456"
Python 小练习 —— 循环法和对数法计算利息
奶香臭豆腐
python 开发语言 学习
Python小练习——循环法和对数法计算利息需求循环法算利息对数法算利息需求本金principal=10000利息intrest=0.0325目标2*principal多长时间可以本金翻倍(即本金达到目标值)循环法算利息代码如下:importmathprincipal=10000INTEREST=0.0325TARGET=2*principal#20000#循环法year=0whileprinci
正则表达式regex
GotoMeiben
正则表达式
工具网站:RegExr:Learn,Build,&TestRegEx正则表达式(RegularExpression,Regex)是一种强大的字符串匹配工具,广泛用于文本搜索、数据处理和输入验证等场景。无论是Python、Java、JavaScript还是Shell脚本,Regex都是不可或缺的技能。本文将深入介绍正则表达式的各种用法,包括:基本匹配(字母、数字)特殊符号^$\b量词{}*+?字符类
使用Python爬虫实时监控行业新闻案例
海拥✘
python 爬虫 开发语言
目录背景环境准备请求网页数据解析网页数据定时任务综合代码使用代理IP提升稳定性运行截图与完整代码总结在互联网时代,新闻的实时性和时效性变得尤为重要。很多行业、技术、商业等领域的新闻都可以为公司或者个人发展提供有价值的信息。如果你有一项需求是要实时监控某个行业的新闻,自动化抓取并定期输出这些新闻,Python爬虫可以帮你轻松实现这一目标。本文将通过一个案例,带你一步一步实现一个简单的Python爬虫
python ffmpeg直播_FFmpeg+Nginx+Rtmp+HLS+Videojs搭建直播网站(理论与实战)
weixin_39565300
python ffmpeg直播
第1章直播原理与架构28分钟2节1-1直播原理与架构直播原理与架构「仅限付费用户」点击下载“直播原理与架构.pdf”[14:53]开始学习1-2甜点:福优学苑--简历包装与面试技巧甜点:福优学苑--简历包装与面试技巧「仅限付费用户」点击下载“福优学苑--简历包装与面试技巧--51other.pdf”[13:36]开始学习第2章亲手搭建FFmpeg+Nginx直播网站1小时48分钟11节2-1直播引
Java Pjsip (Pjsua2 api ) 2.10 windows sip语音呼叫教程
java_lilin
pjsip pjsip sip pjsua2 java sip
1.安装swigwin-4.0.1下载地址http://www.swig.org/download.html注意是swigwinWindowsusersshoulddownloadswigwin-4.0.1whichincludesaprebuiltexecutable.配置目录到winpath2.下载pjproject-2.10.zip(如果有python错误请安装py2.7及环境path配置)
Python中Tushare(金融数据库)入门详解
eqa11
数据库 python 金融
文章目录Python中Tushare(金融数据库)入门详解一、引言二、安装与注册1、安装Tushare2、注册与获取Token三、Tushare基本使用1、设置Token2、获取数据2.1、获取股票基础信息2.2、获取交易日历2.3、获取A股日线行情2.4、获取沪股通和深股通成份股2.5、获取上市公司基础信息2.6、获取A股周线行情字段解析四、总结Python中Tushare(金融数据库)入门详解
micropython 中socket中的非阻塞 报错 Error->: [Errno 119] EINPROGRESS
水可煮粥
micropython 网络 服务器 tcp/ip python
在建立连接前设置非阻塞,会报错[Errno119]EINPROGRESSsock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)addr=socket.getaddrinfo(host,port)[0][-1]sock.setblocking(False)#非阻塞sock.connect(addr)改成先连接,后设置,即可sock=socket.s
python websocket 心跳_websocket心跳及重连机制
蜗牛老湿
python websocket 心跳
websocket心跳及重连机制websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒。因此为了保证连接的可持续性和稳定性,websocket心跳重连就应运而生。在使用原生websocket的时候,如果设备网络断开,不会立刻触发websocket的任何事件,前端也就无法得知当前连接是否已经断开。这个时候如果调用websocket.send方法,浏览器
Steamworks:Steamworks平台概览_2024-07-25_00-28-31.Tex
chenjj4003
游戏开发2 php 服务器 linux 性能优化 arcgis 游戏 github
Steamworks:Steamworks平台概览Steamworks简介1.1Steamworks平台概述Steamworks是一个由Valve公司开发的全面的软件开发工具包(SDK),旨在帮助游戏开发者和发行商在Steam平台上发布和管理他们的游戏。Steamworks集成了Steam的多项服务,包括但不限于自动更新、成就系统、云存储、社交网络功能、反作弊机制、以及Steam创意工坊等,为游戏
十四、python使用MySQL数据库
weixin_45460686
python笔记 mysql 数据库 python
(一)pymsql模块pymsql是Python3中操作MySQL的模块,其使用方法和py2的MySQLdb几乎相同。1、模块安装pipinstallpymysql2、使用模块步骤:导入pymysql库。调用pymysql.connect()方法建立与数据库的连接。在connect()方法中,传入数据库的主机名、用户名、密码和数据库名称等连接参数。importpymysql#创建数据库连接conn
python panda下载_pandas python下载|Pandas for python v0.25.0官方版 v0.25.0官方版 - 哩咯下载站...
weixin_39647458
python panda下载
Pandas是python的数据分析包,最初被作为金融数据分析工具而开发出来,提供pandas.whl包下载,有需要的赶快下载吧!软件介绍Pandas是python的一个数据分析包,最初由AQRCapitalManagement于2008年4月开发,并于2009年底开源出来,目前由专注于Python数据包开发的PyData开发team继续开发和维护,属于PyData项目的一部分。Pandas最初被
python——作用域
光纤光栅
python学习 python java 前端
一、作用域定义:作用域就是变量产生作用的范围。可以分为全局作用域和局部作用域(函数)。在代码运行中,不是所有变量都会一直保存,大多数变量是不断的建立和销毁,以此来避免内存被占用过多。y=2#y就是全局作用域的全局变量deffn():x=1#x是局部作用域中的变量fn()1.1全局作用域在代码中,全局作用域在程序执行时创建,在程序执行结束时销毁。所有函数以外的都是全局作用域。在全局作用域定义的变量都
如何使用 Docker 搭建 FastAPI 环境, 本地仅编辑代码
Acaibird.
eureka 云原生
在开发FastAPI应用时,我们有时希望将应用容器化,以便于部署和管理,同时避免污染本地的Python环境。使用Docker可以轻松实现这一目标,但如果你想在容器中安装依赖并进行调试,如何在不破坏本地环境的情况下管理依赖呢?本文将介绍如何通过Docker将FastAPI应用容器化,并展示如何进入容器安装依赖。1.项目结构假设你已经有一个简单的FastAPI项目结构,主要包含以下文件:Dockerf
零基础学Python图片处理:用Pillow库轻松玩转修图
小彭爱学习
python python pillow python处理图片
零基础学Python图片处理:用Pillow库轻松玩转修图一、初识Pillow:你的第一张数码暗房安装准备(只需要1分钟)打开电脑的命令行(Windows按Win+R输入cmd,Mac打开终端),输入:pipinstallpillow看到「SuccessfullyinstalledPillow-x.x.x」就安装成功啦!图片处理四步走打开图片:像打开文件柜一样找到图片修改图片:裁剪、调色、加特效查
2024年03月CCF-GESP编程能力等级认证Python编程四级真题解析
码农StayUp
python CCF GESP 青少年编程
本文收录于专栏《Python等级认证CCF-GESP真题解析》,专栏总目录:点这里,订阅后可阅读专栏内所有文章。一、单选题(共15题,共30分)第1题小杨的父母最近刚刚给他买了一块华为手表,他说手表上跑的是鸿蒙,这个鸿蒙是.()A.小程序B.计时器C.操作系统D.神话人物答案:C本题属于考察计算机基础知识。鸿蒙是操作系统,操作系统是管理计算机硬件与软件资源的程序,同时也是计算机系统的内核与基石。它
python代码画动态烟花源码,烟花代码编程python复制
Rtee1
python 开发语言 人工智能
本篇文章给大家谈谈爱心代码编程python可复制,以及python代码画动态烟花源码,希望对各位有所帮助,不要忘了收藏本站喔。Sourcecodedownload:本文相关源码下面是一个简单的Python烟花代码,可以通过编写程序来模拟烟花的绽放过程:importturtleimportrandom#设置窗口大小和标题screen=turtle.Screen()screen.setup(800,6
python 解决PyCharm里plugins搜索不到插件
weixin_43250628
python学习日记 计算机 pycharm ide python
pycharmplugins搜索不到插件解决方案:在图示位置填入url:https://plugins.jetbrains.com/后应用即可
Python爬虫-猫眼电影的影院数据
写python的鑫哥
爬虫案例1000讲 python 爬虫 猫眼 电影 电影院 数据 采集
前言本文是该专栏的第46篇,后面会持续分享python爬虫干货知识,记得关注。本文笔者以猫眼电影为例子,获取猫眼的影院相关数据。废话不多说,具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。接下来,跟着笔者直接往下看正文详细内容。(附带完整代码)正文地址:aHR0cHM6Ly93d3cubWFveWFuLmNvbS8=目标:获取猫眼电影的影院数据1.项目场景介绍老规矩,我们还是通过接码
跟我一起学Python数据处理(七十四):数据处理工具与网页抓取入门
lilye66
python jupyter 开发语言 爬虫
跟我一起学Python数据处理(七十四):数据处理工具与网页抓取入门大家好!一直以来,我都坚信在学习的道路上,相互交流和共同进步是非常重要的。在Python数据处理这片充满挑战与机遇的领域,我也在持续学习和探索,希望借由这一系列的博客,能和大家一起深入钻研,共同成长。在上一篇博客中,我们学习了Jupyternotebook的相关知识,今天咱们接着来了解Python数据处理中的其他关键内容,包括一些
59.python的类与对象
安迪python学习笔记
Python基础知识 python 开发语言
59.python的类与对象文章目录59.python的类与对象1.什么是类?2.作用3.Python中的类4.type函数查看数据类型5.什么是对象?1.什么是类?日常生活中,我们可能会听到这样的对话:物以类聚,人以群分。这一类的面包真的很难吃。这一类水果对身体很好。【类的中文释义】类是对一类事物的概括,是许多相似或相同事物的综合。这些事物各不相同,但具有一些共同的特征或行为。【示例】类名:花百
虚拟DOM和真实DOM的区别
水煮庄周鱼鱼
概念 前端
虚拟DOM(VirtualDOM)、DOM(RealDOM)是前端开发中常用的两种概念。什么是真实DOM?真实DOM是浏览器中实际存在的DOM结构,它由浏览器解析HTML生成,并且直接与浏览器交互。当页面中的数据发生变化时,真实DOM会重新计算布局和渲染,这个过程比较耗费性能。什么是虚拟DOM?虚拟DOM是一种在内存中以JavaScript对象的形式表示的轻量级的DOM结构。它是对真实DOM的一种
Python从0到100(四):Python中的运算符介绍(补充)
是Dream呀
python java 数据库
前言:零基础学Python:Python从0到100最新最全教程。想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知识,成为学习学习和学业的先行者!欢迎大家订阅专栏:零基础学Python:Python从0到100最新
Python从0到100(三十五):beautifulsoup的学习
是Dream呀
Dream的茶话会 python beautifulsoup 学习
前言:零基础学Python:Python从0到100最新最全教程。想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知识,成为学习学习和学业的先行者!欢迎大家订阅专栏:零基础学Python:Python从0到100最新
Python学习笔记 - Python数据类型
yunfan188
# Python学习笔记 Python Python数据类型
前言在Python语言中,所有的数据类型都是类,每一个变量都是类的“实例”。没有基本数据类型的概念,所以整数、浮点数和字符串也都是类。Python有6种标准数据类型:数字、字符串、列表、元组、集合和字典,而列表、元组、集合和字典可以保存多项数据,它们每一个都是一种数据结构,因此可以称这四种为“数据结构”类型。本文我们主要介绍数字和字符串类型。一、数字类型Python数字类型有4种:整数类型、浮点数
MacOS Python版本管理(pyenv)
IT匠人
macos
1.通过homebrew安装pyenvbrewupdatebrewinstallpyenv2.修改zshprofile否则通过pyenv切换python版本会不生效#编辑.zshrcor~/.bash_profilevim~/.zshrc#在配置下面增加exportPYENV_ROOT="$HOME/.pyenv"exportPATH="$PYENV_ROOT/shims:$PATH"ifcomm
labelme汉化以及打包为.exe
xxbghh
python 开发语言 后端
刚接触python,记录一下自己的安装过程以及遇到的问题。一,安装labelme下载anaconda一直点击下一步安装,安装完成后在开始菜单找到AnacondaPrompt(anaconda3)并打开,运行下列代码condacreate-nlabelme_py27python=2.7condaactivatelabelme_py27condainstallpyqtpipinstalllabelme
LeetCode[Math] - #66 Plus One
Cwind
java LeetCode 题解 Algorithm Math
原题链接:#66 Plus One
要求:
给定一个用数字数组表示的非负整数,如num1 = {1, 2, 3, 9}, num2 = {9, 9}等,给这个数加上1。
注意:
1. 数字的较高位存在数组的头上,即num1表示数字1239
2. 每一位(数组中的每个元素)的取值范围为0~9
难度:简单
分析:
题目比较简单,只须从数组
JQuery中$.ajax()方法参数详解
AILIKES
JavaScript jsonp jquery Ajax json
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持。
timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局
JConsole & JVisualVM远程监视Webphere服务器JVM
Kai_Ge
JVisualVM JConsole Webphere
JConsole是JDK里自带的一个工具,可以监测Java程序运行时所有对象的申请、释放等动作,将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。
使用JConsole工具来分析WAS的JVM问题,需要进行相关的配置。
首先我们看WAS服务器端的配置.
1、登录was控制台https://10.4.119.18
自定义annotation
120153216
annotation
Java annotation 自定义注释@interface的用法 一、什么是注释
说起注释,得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说,元数据是描述数据的。就象数据表中的字段一样,每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据,也就是说注释是描述java源
CentOS 5/6.X 使用 EPEL YUM源
2002wmj
centos
CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
在SQLSERVER中查找缺失和无用的索引SQL
357029540
SQL Server
--缺失的索引
SELECT avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,
last_user_seek ,
Spring3 MVC 笔记(二) —json+rest优化
7454103
Spring3 MVC
接上次的 spring mvc 注解的一些详细信息!
其实也是一些个人的学习笔记 呵呵!
替换“\”的时候报错Unexpected internal error near index 1 \ ^
adminjun
java “\替换”
发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...
在拆分字符串时遇到通过 \ 来拆分,可是用所以想通过转义 \\ 来拆分的时候会报异常
public class Main {
/*
POJ 1035 Spell checker(哈希表)
aijuans
暴力求解--哈希表
/*
题意:输入字典,然后输入单词,判断字典中是否出现过该单词,或者是否进行删除、添加、替换操作,如果是,则输出对应的字典中的单词
要求按照输入时候的排名输出
题解:建立两个哈希表。一个存储字典和输入字典中单词的排名,一个进行最后输出的判重
*/
#include <iostream>
//#define
using namespace std;
const int HASH =
通过原型实现javascript Array的去重、最大值和最小值
ayaoxinchao
JavaScript array prototype
用原型函数(prototype)可以定义一些很方便的自定义函数,实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。
实现代码如下:
<script type="text/javascript">
Array.prototype.unique = function() {
var a = {};
var le
UIWebView实现https双向认证请求
bewithme
UIWebView https Objective-C
什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求
中有讲述,不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求,网上有些文章中有涉及到此内容,但都只言片语,没有讲完全,更没有完整的代码,让人困扰不已。但是此知
NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存)
bijian1013
redis 数据库 NoSQL
3.事务处理
Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行,而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时,这个连接会进入一个事务上下文,该连接后续的命令不会立即执行,而是先放到一个队列中,当执行exec命令时,redis会顺序的执行队列中
各数据库分页sql备忘
bingyingao
oracle sql 分页
ORACLE
下面这个效率很低
SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20;
下面这个效率很高
SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
【Scala七】Scala核心一:函数
bit1129
scala
1. 如果函数体只有一行代码,则可以不用写{},比如
def print(x: Int) = println(x)
一行上的多条语句用分号隔开,则只有第一句属于方法体,例如
def printWithValue(x: Int) : String= println(x); "ABC"
上面的代码报错,因为,printWithValue的方法
了解GHC的factorial编译过程
bookjovi
haskell
GHC相对其他主流语言的编译器或解释器还是比较复杂的,一部分原因是haskell本身的设计就不易于实现compiler,如lazy特性,static typed,类型推导等。
关于GHC的内部实现有篇文章说的挺好,这里,文中在RTS一节中详细说了haskell的concurrent实现,里面提到了green thread,如果熟悉Go语言的话就会发现,ghc的concurrent实现和Go有点类
Java-Collections Framework学习与总结-LinkedHashMap
BrokenDreams
LinkedHashMap
前面总结了java.util.HashMap,了解了其内部由散列表实现,每个桶内是一个单向链表。那有没有双向链表的实现呢?双向链表的实现会具备什么特性呢?来看一下HashMap的一个子类——java.util.LinkedHashMap。
读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory
bylijinnan
abstract
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
package design.pattern;
/*
* Abstract Factory Pattern
* 抽象工厂模式的目的是:
* 通过在抽象工厂里面定义一组产品接口,方便地切换“产品簇”
* 这些接口是相关或者相依赖的
压暗面部高光
cherishLC
PS
方法一、压暗高光&重新着色
当皮肤很油又使用闪光灯时,很容易在面部形成高光区域。
下面讲一下我今天处理高光区域的心得:
皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道(Lab模式的L通道)决定,色彩则由a、b通道确定。
处理思路为在保持高光区域纹理的情况下,对高光区域着色。具体步骤为:降低高光区域的整体的亮度,再进行着色。
如果想简化步骤,可以只进行着色(参看下面的步骤1
Java VisualVM监控远程JVM
crabdave
visualvm
Java VisualVM监控远程JVM
JDK1.6开始自带的VisualVM就是不错的监控工具.
这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面
通过JMX连接远程机器, 需要经过下面的配置:
1. 修改远程机器JDK配置文件 (我这里远程机器是linux).
Saiku去掉登录模块
daizj
saiku 登录 olap BI
1、修改applicationContext-saiku-webapp.xml
<security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />
<security:intercept-url pattern=&qu
浅析 Flex中的Focus
dsjt
html Flex Flash
关键字:focus、 setFocus、 IFocusManager、KeyboardEvent
焦点、设置焦点、获得焦点、键盘事件
一、无焦点的困扰——组件监听不到键盘事件
原因:只有获得焦点的组件(确切说是InteractiveObject)才能监听到键盘事件的目标阶段;键盘事件(flash.events.KeyboardEvent)参与冒泡阶段,所以焦点组件的父项(以及它爸
Yii全局函数使用
dcj3sjt126com
yii
由于YII致力于完美的整合第三方库,它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如,Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数,使得代码看起来更加简洁易用。(原文地址)
我们可以保存在globals.php在protected目录下。然后,在入口脚本index.php的,我们包括在
设计模式之单例模式二(解决无序写入的问题)
come_for_dream
单例模式 volatile 乱序执行 双重检验锁
在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题,但是因为由于JVM为了使得处理器内部的运算单元能充分利用,处理器可能会对输入代码进行乱序执行(Out Of Order Execute)优化,处理器会在计算之后将乱序执行的结果进行重组,保证该
程序员从初级到高级的蜕变
gcq511120594
框架 工作 PHP android html5
软件开发是一个奇怪的行业,市场远远供不应求。这是一个已经存在多年的问题,而且随着时间的流逝,愈演愈烈。
我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题,当然这些方法常常不管用,于是,唯一能做的就是不断地尝试,逐个看看是否奏效”。
现在我们把淫浸代码时间超过3年的开发人员称为
Reverse Linked List
hcx2013
list
Reverse a singly linked list.
/**
* Definition for singly-linked list.
* public class ListNode {
* int val;
* ListNode next;
* ListNode(int x) { val = x; }
* }
*/
p
Spring4.1新特性——数据库集成测试
jinnianshilongnian
spring 4.1
目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T
C# Ajax上传图片同时生成微缩图(附Demo)
liyonghui160com
1.Ajax无刷新上传图片,详情请阅我的这篇文章。(jquery + c# ashx)
2.C#位图处理 System.Drawing。
3.最新demo支持IE7,IE8,Fir
Java list三种遍历方法性能比较
pda158
java
从c/c++语言转向java开发,学习java语言list遍历的三种方法,顺便测试各种遍历方法的性能,测试方法为在ArrayList中插入1千万条记录,然后遍历ArrayList,发现了一个奇怪的现象,测试代码例如以下:
package com.hisense.tiger.list;
import java.util.ArrayList;
import java.util.Iterator;
300个涵盖IT各方面的免费资源(上)——商业与市场篇
shoothao
seo 商业与市场 IT资源 免费资源
A.网站模板+logo+服务器主机+发票生成
HTML5 UP:响应式的HTML5和CSS3网站模板。
Bootswatch:免费的Bootstrap主题。
Templated:收集了845个免费的CSS和HTML5网站模板。
Wordpress.org|Wordpress.com:可免费创建你的新网站。
Strikingly:关注领域中免费无限的移动优
localStorage、sessionStorage
uule
localStorage
W3School 例子
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不