羽玉

羽玉 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

羽玉 关注了用户 · 4月6日

前端小智 @minnanitkong

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

关注 10235

羽玉 发布了文章 · 4月2日

工作+学习总结(1)

一、react + amis项目

amis是一个低代码前端框架,使用json配置页面,减少页面的开发量。

通过amis提供的组件,可以快速构建一个新的页面,像常用的表格,表单,图表,搜索等组件都有,基本满足开发。

但是在开发过程中发现,在使用Wizard 向导,表单向导(步骤条),一步步引导用户完成操作,但基于目前的amis的Wizard组件所提供的api,满足不了能够屏蔽上一步、下一步按钮,目前的api可以修改按钮的文案,但是不能屏蔽上一步的操作,因此直接使用amis这个组件是不能满足当前的需求。

不过amis可以自定义组件,但是还不是那么熟悉怎么使用,因此选择直接用react来实现这个功能。然后去学习了下react和antd,重点是看了步骤条(steps)和表格(table)的使用。

1.构造函数(constructor)

添加一个构造函数(constructor),然后在该函数里为this.state中赋值。

构造方法是用于构建和初始化与创建对象的特殊方法class,一个类中只能有一个名为“constructor”的特殊方法。
构造函数可以使用super关键字来调用超类的构造函数。
传入props传递到父类的构造函数中(Class 组件应该始终使用 props 参数来调用父类的构造函数。)

constructor(props) {
    super(props);
    this.state = {
        num: 0
    }
}

2.react的声明周期

componentWillMount() 在渲染前调用,在客户端也在服务端
componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行
componentWillUpdate()在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用
componentDidUpdate() 在组件完成更新后立即调用。在初始化时不会被调用
componentWillUnmount()在组件从 DOM 中移除之前立刻被调用

render方法 渲染视图,render方法需要返回一个jsx元素

React.render当首次调用时,容器节点里的所有 DOM 元素都会被替换,后续的调用则会使用 React 的 DOM 差分算法(DOM diffing algorithm)进行高效的更新。

3.遇到的问题

(1)table表格有自带的分页功能,如果不配置pagination参数,则会使用自身的分页方式,但是如果设置每页展示10条数据,而后端有分页功能,由于table是根据条数进行分页的,因此请求到的数据只有10条则不会显示页码,这个可用于后端没有进行分页时使用,后端已经分页后需要配置pagination分页参数。

(2)pagination配置可直接在table组件配置,或者在render里进行配置

(3)react内的点击事件,该方法需要绑定this指向,否则在方法内使用setState修改值会报错

<Button type="primary" onClick={() => this.next()}>下一步</Button>
<Button type="primary" onClick={this.next.bind(this)}>下一步</Button>

(4)vue使用v-for循环数据,react使用foreach、map
vue使用v-if判断条件,react使用{isTrue && (<p></p>)},或者三元运算符、if语句

二、补充react知识点(基本概念)

1、state 的更新可能是异步的

例如,下面的代码无法更新counter

this.setState({
  counter: this.state.counter + this.props.increment,
});

解决这个问题,可以让setState()接收一个函数而不是对象,用state作为第一个参数,props作为第二个参数

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

2、map遍历& key

①通过组件形式
使用{}在jsx内构建元素集合,通过map方法遍历数组,将数组中的每个元素变成<li>标签,将得到的数据复制给listItem

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);

渲染到DOM
ReactDOM.render(
 <ul>{listItems}</ul>,  document.getElementById('root')
);

②jsx中嵌入map()

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); 
 
 return (
    <ul>
        {listItems}
    </ul>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
        {numbers.map((number) => 
        <ListItem key={number.toString()} value={number} /> )} 
    </ul>
  );
}

③key 唯一地标识

在使用map遍历数据时,需要给组件设置key,且是唯一的。
通常是选用id作为标识,如果没有id则可以使用index,但是如果数据发生了变动,也会影响其功能,最好有个唯一的标识。

查看原文

赞 0 收藏 0 评论 0

羽玉 发布了文章 · 4月1日

nodejs+mongodb的那些事

一、mongodb简介

mongodb是一个基于分布式文件存储的数据库,由c++语言编写,主要用于web应用提供可扩展的高性能数据存储解决方案。

mongodb是一个介于关系数据库非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似jsonbson格式,因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大,其语法有点类似于面向对象的查询语言,几乎可以实现类似关系数据库单表查询的绝大部分功能,而且还支持对数据建立索引。

bson示例:

{
    name: "MongoDB",
    type: "bson",
    data: {
        id: 1,
        code: 123456
    }
}

bson与json区别:

①更快的遍历速度
bson会把数据长度存于头部,方便检索

②操作更简易
修改某个数字,如从9变成10,数据长度发生了变化,所有的内容都要往后后移一位。bson则是可以指定数据列,修改的只是那一位数据列,但是如果数据由整型变成长整型,也是会导致数据变长的。

③增加了额外的数据类型
bson增加了byte array数据类型,不需要先转成base64在存成json。

分布式计算的优点:
可靠性(容错) :
分布式计算系统中的一个重要的优点是可靠性。一台服务器的系统崩溃并不影响到其余的服务器。

可扩展性:
在分布式计算系统可以根据需要增加更多的机器。

资源共享:
共享数据是必不可少的应用,如银行,预订系统。

灵活性:
由于该系统是非常灵活的,它很容易安装,实施和调试新的服务。

更快的速度:
分布式计算系统可以有多台计算机的计算能力,使得它比其他系统有更快的处理速度。

开放系统:
由于它是开放的系统,本地或者远程都可以访问到该服务。

更高的性能:
相较于集中式计算机网络集群可以提供更高的性能(及更好的性价比)。

缺点:软件少,网络问题,安全性

什么是关系数据库
关系型数据库,是指采用了关系模型来组织数据的数据库,其以行和列的形式存储数据,以便于用户理解,关系型数据库这一系列的行和列被称为表,一组表组成了数据库。用户通过查询来检索数据库中的数据,而查询是一个用于限定数据库中某些区域的执行代码。关系模型可以简单理解为二维表格模型,而一个关系型数据库就是由二维表及其之间的关系组成的一个数据组织。
关系数据库:Oracle、DB2、MySQL、Microsoft SQL Server、Microsoft Access等

什么是非关系数据库
指非关系型的,分布式的,数据以键值对的形式存储,结构不固定。
严格意义上应该是一种数据结构化存储方法的集合
不足:只能存储简单的数据,不支持事物

二、mongodb的特点:

1、面向集合存储易存储对象类型的数据
2、模式自由
3、支持动态查询
4、支持完全索引等

三、mongodb数据模型

monogoDB可以建多个数据库,每个数据库都有自己的权限和集合,不同的数据库也放置在不同文件中。

一个MongoDB 实例可以包含一组数据库,一个DataBase 可以包含一组Collection(集合),一个集合可以包含一组Document(文档)。一个Document包含一组field(字段),每一个字段都是一个key/value pair。

key: 必须为字符串类型。
value:可以包含如下类型。
● 基本类型,例如,string,int,float,timestamp,binary 等类型。
● 一个document。
● 数组类型。

四、nodejs

nodejs是一个基于v8引擎的js运行环境,使用了事件驱动、非阻塞式 I/O 的模型,使其轻量又高效,V8 是为 Google Chrome 提供支持的 JavaScript 引擎的名称。 当使用 Chrome 进行浏览时,它负责处理并执行 JavaScript。
v8有c++语言编写,是可移植的,且可运行于 Mac、Windows、Linux 和其他一些系统

nodejs使用commonJs模块系统 浏览器使用es5模块标准
nodejs使用require() 浏览器使用import()

nodejs+mongodb使用

var mongoClient = require('mongodb').mongoClient;
var url = 'mongodb://localhost:27017/runoob'

mongoClient.connects(url, function() {
    if (err) throw err;
    var dbData = db.db('runoob');
    // 创建集合
    dbData.createCollection('site', function() {
        db.close()// 关闭数据库
    })
    // 插入数据
    var str = {name: "张三"};
    dbData.collection('site').insertOne(str, function(err,data) {
        db.close()
    })
    // 插入多条数据insertMany()
    var str2 = {$set: { "url" : "https://www.abc.com" }};
    // str为查询条件
    dbData.collection('site').insertMany(str, str2, function(){
        db.close()
    })
    // 查询数据find()
    // 查询指定数据find({name: "张三"})
    // 更新数据updateOne()
    // 更新多条数据updateMany()
    // 删除数据deleteOne()
    // 删除多条数据deleteMany()
    // 排序sort(type)  type = {type: 1}升序  -1 降序
    // 分页find().limit(2)
    // 跳过find().skip(2)
    
})
查看原文

赞 0 收藏 0 评论 0

羽玉 关注了标签 · 4月1日

vue.js

Reactive Components for Modern Web Interfaces.

Vue.js 是一个用于创建 web 交互界面的。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

官网:https://vuejs.org
GitHub:https://github.com/vuejs/vue

关注 138084

羽玉 关注了标签 · 4月1日

程序员

一种近几十年来出现的新物种,是工业革命的产物。英文(Programmer Monkey)是一种非常特殊的、可以从事程序开发、维护的动物。一般分为程序设计猿和程序编码猿,但两者的界限并不非常清楚,都可以进行开发、维护工作,特别是在中国,而且最重要的一点,二者都是一种非常悲剧的存在。

国外的程序员节

国外的程序员节,(英语:Programmer Day,俄语:День программи́ста)是一个俄罗斯官方节日,日期是每年的第 256(0x100) 天,也就是平年的 9 月 13 日和闰年的 9 月 12 日,选择 256 是因为它是 2 的 8 次方,比 365 少的 2 的最大幂。

1024程序员节,中国程序员节

1024是2的十次方,二进制计数的基本计量单位之一。程序员(英文Programmer)是从事程序开发、维护的专业人员。程序员就像是一个个1024,以最低调、踏实、核心的功能模块搭建起这个科技世界。1GB=1024M,而1GB与1级谐音,也有一级棒的意思。

从2012年,SegmentFault 创办开始我们就从网络上引导社区的开发者,发展成中国程序员的节日 :) 计划以后每年10月24日定义为程序员节。以一个节日的形式,向通过Coding 改变世界,也以实际行动在浮躁的世界里,固执地坚持自己对于知识、技术和创新追求的程序员们表示致敬。并于之后的最为临近的周末为程序员们举行了一个盛大的狂欢派对。

2015的10月24日,我们SegmentFault 也在5个城市同时举办黑客马拉松这个特殊的形式,聚集开发者开一个编程大爬梯。

特别推荐:

【SF 黑客马拉松】:http://segmentfault.com/hacka...
【1024程序员闯关秀】小游戏,欢迎来挑战 http://segmentfault.com/game/

  • SF 开发者交流群:206236214
  • 黑客马拉松交流群:280915731
  • 开源硬件交流群:372308136
  • Android 开发者交流群:207895295
  • iOS 开发者交流群:372279630
  • 前端开发者群:174851511

欢迎开发者加入~

交流群信息


程序员相关问题集锦:

  1. 《程序员如何选择自己的第二语言》
  2. 《如何成为一名专业的程序员?》
  3. 《如何用各种编程语言书写hello world》
  4. 《程序员们最常说的谎话是什么?》
  5. 《怎么加入一个开源项目?》
  6. 《是要精于单挑,还是要善于合作?》
  7. 《来秀一下你屎一般的代码...》
  8. 《如何区分 IT 青年的“普通/文艺/二逼”属性?》
  9. 程序员必读书籍有哪些?
  10. 你经常访问的技术社区或者技术博客(IT类)有哪些?
  11. 如何一行代码弄崩你的程序?我先来一发
  12. 编程基础指的是什么?
  13. 后端零起步:学哪一种比较好?
  14. 大家都用什么键盘写代码的?

爱因斯坦

程序猿崛起

关注 155553

羽玉 关注了标签 · 4月1日

react.js

React (sometimes styled React.js or ReactJS) is an open-source JavaScript library for creating user interfaces that aims to address challenges encountered in developing single-page applications. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

关注 70017

羽玉 关注了标签 · 4月1日

css

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

关注 97668

羽玉 关注了标签 · 4月1日

关注 92588

羽玉 关注了标签 · 4月1日

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 195081

羽玉 关注了标签 · 4月1日

java

Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的 Java 程序设计语言和 Java 平台(即 JavaSE, JavaEE, JavaME)的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

Java编程语言的风格十分接近 C++ 语言。继承了 C++ 语言面向对象技术的核心,Java舍弃了 C++ 语言中容易引起错误的指針,改以引用取代,同时卸载原 C++ 与原来运算符重载,也卸载多重继承特性,改用接口取代,增加垃圾回收器功能。在 Java SE 1.5 版本中引入了泛型编程、类型安全的枚举、不定长参数和自动装/拆箱特性。太阳微系统对 Java 语言的解释是:“Java编程语言是个简单、面向对象、分布式、解释性、健壮、安全与系统无关、可移植、高性能、多线程和动态的语言”。

版本历史

重要版本号版本代号发布日期
JDK 1.01996 年 1 月 23 日
JDK 1.11997 年 2 月 19 日
J2SE 1.2Playground1998 年 12 月 8 日
J2SE 1.3Kestrel2000 年 5 月 8 日
J2SE 1.4Merlin2002 年 2 月 6 日
J2SE 5.0 (1.5.0)Tiger2004 年 9 月 30 日
Java SE 6Mustang2006 年 11 月 11 日
Java SE 7Dolphin2011 年 7 月 28 日
Java SE 8JSR 3372014 年 3 月 18 日
最新发布的稳定版本:
Java Standard Edition 8 Update 11 (1.8.0_11) - (July 15, 2014)
Java Standard Edition 7 Update 65 (1.7.0_65) - (July 15, 2014)

更详细的版本更新查看 J2SE Code NamesJava version history 维基页面

新手帮助

不知道如何开始写你的第一个 Java 程序?查看 Oracle 的 Java 上手文档

在你遇到问题提问之前,可以先在站内搜索一下关键词,看是否已经存在你想提问的内容。

命名规范

Java 程序应遵循以下的 命名规则,以增加可读性,同时降低偶然误差的概率。遵循这些命名规范,可以让别人更容易理解你的代码。

  • 类型名(类,接口,枚举等)应以大写字母开始,同时大写化后续每个单词的首字母。例如:StringThreadLocaland NullPointerException。这就是著名的帕斯卡命名法。
  • 方法名 应该是驼峰式,即以小写字母开头,同时大写化后续每个单词的首字母。例如:indexOfprintStackTraceinterrupt
  • 字段名 同样是驼峰式,和方法名一样。
  • 常量表达式的名称static final 不可变对象)应该全大写,同时用下划线分隔每个单词。例如:YELLOWDO_NOTHING_ON_CLOSE。这个规范也适用于一个枚举类的值。然而,static final 引用的非不可变对象应该是驼峰式。

Hello World

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

编译并调用:

javac -d . HelloWorld.java
java -cp . HelloWorld

Java 的源代码会被编译成可被 Java 命令执行的中间形式(用于 Java 虚拟机的字节代码指令)。

可用的 IDE

学习资源

常见的问题

下面是一些 SegmentFault 上在 Java 方面经常被人问到的问题:

(待补充)

关注 142713

认证与成就

  • 获得 0 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 4月1日
个人主页被 227 人浏览