前端笔记(React-router)

2018-02-07

安装

npm install –save react-router-dom

BrowserRouter组件

总之，要使 React Router 正常工作，你需要将整个应用封装在 BrowserRouter 组件中，此外，BrowserRouter 还会封装 history 库，使你的应用能够知道 URL 中的变化。
1
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

Link组件

React Router 提供了一个 Link 组件，使你能够添加声明式、可访问的应用导航功能。你将在锚点标记 (a) 中使用它，就像通常使用的那样。React Router 的组件是让用户能够导航应用的很好方式。例如，向链接传递 to 属性可以将用户指向绝对路径（例如 /about）：
<Link to="/about">About</Link>
因为组件会渲染成拥有相应的 href 的锚点标签 (<a>)，因此，它的行为和网络上的普通链接的行为一样

Route组件

import { Route } from 'react-router-dom'

<div className="app">
       <Route exact path="/" render={() => (
         <ListContacts onDeleteBtn={this.removeContact} contacts={this.state.contacts} />
       )}></Route>
       <Route path="/create" component={CreateContact}></Route> 
     </div>

对于 Route 组件，如果你希望向 router 将渲染的特定组件传递属性，你需要使用 Route 的 render 属性。正如你所看到的，render 使你能够控制渲染组件，进而使你能够向要渲染的组件传递任何属性。总之，Route 组件是使用 React Router 构建应用的关键部分，因为该组件将根据当前的 URL 路径决定要渲染哪些组件

展开全文 >>

阅读数:

前端笔记(React)

2018-01-26

React是单向数据流

数据从父组件流向子组件。数据更新发送到父组件，父组件会进行实际的更改。
数据位于父组件中，并向下传递给子组件。虽然数据位于父组件中，但是父组件和子组件都可以使用数据。然而，如果必须更新数据的话，则只有父组件应该进行更新。如果子组件需要更改数据，它会将更新的数据发送给父组件，由父组件完成更改。父组件执行更改后，会将更新的数据传递给子组件。
听起来可能觉得带来了额外的工作量，但是让数据朝着一个方向流动并在一个位置修改使我们更容易理解应用的工作原理。

React和javascript的关系

React 的优势之一是你要用到的很多功能都使用的是普通的 JavaScript。在过去几年内，函数式编程对 JavaScript 生态系统和社区产生了很大的影响。函数式编程是 JavaScript 中一个高级课题，涉及的内容用数百本书才能讲完。它太复杂了，以至于无法专研函数式编程的优势（我们还是要讲解 React 内容吧？）。React 基于的是大量的函数式编程的技巧…你将在这门课程中学习这些技巧。但是，有几个 JavaScript 函数对函数式编程来说非常重要，我们应该了解这些函数。这些函数包括 .map() 和 .filter() 方法。

Array 的 .map() 方法
Array 的 .filter() 方法

在 React 中声明组件

import React from 'react'
import ReactDOM from 'react-dom'


class ContactList extends React.Component {
// ...
}

在实际使用中, 可能还会看到下面的声明：

import React, { Component } from 'react'

class ContactList extends Component {
// ...
}

创建元素总结

最后，记住 React 仅关心应用的 View 层级。这是用户能看见和互动的层级。因此，我们可以使用 .createElement() 向文档中渲染 HTML。但是更多时候，你将使用语法扩展来描述 UI 的外观应该如何。这种语法扩展称之为 JSX，看起来和编写在 JavaScript 文件中的普通 HTML 很像。JSX 编译为调用 React 的 .createElement() 方法，并输出要在浏览器中渲染的 HTML。

在构建 React 应用时一个便利的思维方式是React理念。组件代表的是 React 的模块性和可重复利用性。可以将组件类看做生成组件实例的工厂。这些组件类应该遵守单一功能原则，只做一件事。如果管理太多不同的任务，建议将组件拆分为更小的子组件。

create-react-app 总结

Facebook 的 create-react-app 是一个可以帮助构建 React 应用的命令行工具。借助该工具，就无需配置 Webpack 等模块打包工具，或者 Babel 等转译器。它们使用 create-react-app 进行预配置（并且隐藏起来），使你能够立即构建应用！

1	npm install -g create-react-app

https://github.com/udacity/reactnd-contacts-complete

利用props传递数据

我们可以认为向组件传递属性就像向函数传递参数。就像我们可以访问传入普通 JavaScript 函数的参数，我们也可以使用 this.props（或者在无状态函数式组件中使用 props）访问组件的属性。

使用 props 传递数据总结
props是传递给 React 组件的任何输入内容。就像 HTML 属性一样，props名称和值会添加到组件中。

// passing a prop to a component

在上述代码中，text 是props，字符串 ‘Wanna log out?’ 是值。

所有属性都存储在 this.props 对象上。因此，要在组件中访问此 text props，我们使用 this.props.text：

// access the prop inside the component
…
render() {
return
{this.props.text}

}
…

more >>

展开全文 >>

阅读数:

Zuul应用其他maven模块bean时报Cannot determine embedded database

2018-01-12

Zuul里面应用其他模块bean时报错找不到database：

***************************
APPLICATION FAILED TO START
***************************

Description:

Cannot determine embedded database driver class for database type NONE

Action:

If you want an embedded database please put a supported one on the classpath. If you have database settings to be loaded from a particular profile you may need to active it (no profiles are currently active).

通过注解加配置

1	@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class})

后仍然没有效果，问题依旧。

最终在application.properties里面加上如下配置才启动正常.

1	spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration,org.springframework.boot.autoconfigure.orm.jpa.HibernateJpaAutoConfiguration

展开全文 >>

阅读数:

前端笔记(设计模式及JS框架)

2017-12-31

前端模式

运用闭包解决按钮点击变量变化问题

// 清屏
document.body.innerHTML = '';

var nums = [1,2,3];

// 循环遍历数组中的每一个数
for (var i = 0; i < nums.length; i++) {

// 这是数组循环中当前的数值...
var num = nums[i];

// 我们为这个数创建了一个 DOM 元素
var elem = document.createElement('div');
elem.textContent = num;

// ... 然后当我们点击 (click) 的时候，提示这个数字
elem.addEventListener('click', (function(numCopy) {
    return function() {
        alert(numCopy);
    };
})(num));

document.body.appendChild(elem);
};

Knockout.js 中的模型

http://knockoutjs.com/

console.dir(object) 是可以在现代 Web 浏览器中使用的函数，用于显示指定 JavaScript > 对象的属性列表。见MDN 文档

to-do应用扩展

underscore.js
backbone.js
jQuery

1	var app = app \|\| {}; //global variable.

IIFE 立即执行函数 (function(){...})();

展开全文 >>

阅读数:

前端笔记(Promise和XHR)

2017-11-26

Promise的几种状态

Fulfilled: Resolved. It worked.
Rejected: It didn’t work :(
pending: still waiting
settled: something happended!

简单例子

function wait(ms) {
    var promise = new Promise(
        function (resolve) {
        	console.log(this);
        	window.setTimeout(function () {
        		resolve();
        	}, ms);
     }) ;
     return promise;
};

var milliseconds = 2000;
wait(milliseconds).then(finish);

// This is just here to help you test.
function finish() {
	var completion = document.querySelector('.completion');
	completion.innerHTML = "Complete after " + milliseconds + "ms.";
};

链接Promise

1	get('example.json').then(resolveFunc).catch(rejectFunc);

等价于

1	get('example.json').then(resolveFunc).then(undefined, rejectFunc);

异常出现顺序

总是下一个thenable的rejectFunc被调用

more >>

展开全文 >>

阅读数:

前端笔记(es6)

2017-11-26

let & const

模版字段量

解构

对象字面量简写

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type,
  color,
  carat,
  //calculateWorth: function() {
    // will calculate worth of gemstone based on type, color, and carat
  //}
  calculateWorth() { ... } //可以直接省略function函数关键字
};

for… of 循环

展开运算符 `...`

`...` 表示剩余参数

可变参数函数

function sum(...nums) {
  let total = 0;  
  for(const num of nums) {
    total += num;
  }
  return total;
}

箭头函数 =>

赋值变量
const greet = name =>Hello ${name}!`;

如果列表中有两个或多个参数，或者有零个，则需要将参数列表放在圆括号内：

1
2
3

// empty parameter list requires parentheses
const sayHi = () => console.log('Hello Udacity Student!');
sayHi();

我们看过的所有箭头函数都只有一个表达式作为函数主体：

1
2
3

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
  name => name.toUpperCase()
);

这种函数主体形式称为”简写主体语法”。简写语法：

在函数主体周围没有花括号
自动返回表达式。
如果箭头函数的主体内需要多行代码，则可以使用”常规主体语法”。

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map( name => {
  name = name.toUpperCase();
  return `${name} has ${name.length} characters in their name`;
});

this和箭头函数
对于箭头函数，this 的值基于函数周围的上下文。换句话说，箭头函数内的，this 的值与函数外面的 this 的值一样。

默认函数参数

function createSundae({scoops = 1, toppings = ['Hot Fudge']} = {}) {
  const scoopText = scoops === 1 ? 'scoop' : 'scoops';
  return `Your sundae has ${scoops} ${scoopText} with ${toppings.join(' and ')} toppings.`;
}

javascript中的类概念

javascript并不是一门基于类的语言，它还是会使用函数来创建对象,并通过原型将它们关联在一起.class，extend等关键字只是语法糖

ES5创建

function Plane(numEngines) {
  this.numEngines = numEngines;
  this.enginesActive = false;
}

// methods "inherited" by all instances
Plane.prototype.startEngines = function () {
  console.log('starting engines...');
  this.enginesActive = true;
};

const richardsPlane = new Plane(1);
richardsPlane.startEngines();

ES6创建

class Plane {
  constructor(numEngines) {
    this.numEngines = numEngines;
    this.enginesActive = false;
  }

  startEngines() {
    console.log('starting engines…');
    this.enginesActive = true;
  }
}

注意：类中的方法定义之间没有任何逗号了？在类中，不用逗号来区分属性或方法。如果添加逗号，将出现 SyntaxError：unexpected token

ES6 中的子类

现在使用新的 super 和 extends 关键字扩展类。

class Maple extends Tree {
  constructor(syrupQty = 15, size, barkColor, leaves) {
    super(size, barkColor, leaves);
    this.syrupQty = syrupQty;
  }

  changeSeason(season) {
    super.changeSeason(season);
    if (season === 'spring') {
      this.syrupQty += 1;
    }
  }

  gatherSyrup() {
    this.syrupQty -= 3;
  }
}

const myMaple = new Maple(15, 5);
myMaple.changeSeason('fall');
myMaple.gatherSyrup();
myMaple.changeSeason('spring');

Maple 类是 Tree 的子类，并使用关键字 extends 将自己设为子类。要让子类可以访问到父类，需要使用关键字 super。注意到 super 有两种使用方式吗？在 Maple 的构造方法中，super 被用作函数。在 Maple 的changeSeason() 方法中，super 被用作对象！

使用子类
像大多数新增加的特性，使用 class、super 和 extends 创建子类时设置代码少了很多，语法更清晰。
只需记住，在底层，函数和原型之间的连接是一样的。
super 必须在 this 之前被调用
在子类构造函数中，在使用 this 之前，必须先调用超级类。

more >>

展开全文 >>

阅读数:

前端笔记(js内存作用域及闭包概念)

2017-11-16

js中不是所有花括号(if,while等)都能创建作用域，只有函数语句中的花括号才能创建

内存作用域和对象

var makeArray = function() {
    return [];
}
var array1 = makeArray();
var array2 = makeArray();
console.log(array1 === array2); //false

闭包。比如functionA存在functionB中，functionA持有functionB的变量x。在functionB执行完成后返回functionA，functionA仍然可以调用x进行执行。

var sagas = [];
var hero = aHero();
var newSaga = function() {
    var foil = aFoil();
    sagas.push(function(){
        var deed = aDeed();
        log(hero+deed+*foil*)
    });
};
//预测输出
newSaga();
sagas[0]();
sagas[0]();
newSaga();
sagas[0]();
sagas[1]();
sagas[0]();

`this`关键字

1) this所绑定的对象

var obj = {
    fn: function(a,b) {
        log(this);
    }
};
//var ob2 = {method:obj.fn}
obj.fn(3,4); //this->obj(this绑定obj对象。但如果没有点符号，将绑定成全局变量）

2) this在大部分重要的用法中都以参数的形式出现
3) this绑定window对象

var fn = function(x,y) {
    console.log(this, x, y);
}

fn(1,2); //输出 window, 1, 2

4) 想要this指向你想绑定的对象。需要使用.符号或使用内置的.call方法。以及new。

原型链(prototype)

var gold = {a:1};
console.log(gold.a); //1
console.log(gold.z); //undefined

var rose = Object.create(gold);
rose.b = 2;
console.log(rose.a);  //1

more >>

展开全文 >>

阅读数:

本地应用连接jconsole

2017-09-22

在应用的vm option配置如下参数即可通过jconsole顺利连接：

-Dcom.sun.management.jmxremote 
-Dcom.sun.management.jmxremote.rmi.port=8011 
-Dcom.sun.management.jmxremote.port=8011 
-Dcom.sun.management.jmxremote.ssl=false 
-Dcom.sun.management.jmxremote.authenticate=false

展开全文 >>

阅读数:

安装

BrowserRouter组件

Link组件

Route组件

React是单向数据流

React和javascript的关系

在 React 中声明组件

创建元素总结

create-react-app 总结

利用props传递数据

运用闭包解决按钮点击变量变化问题

Knockout.js 中的模型

Promise的几种状态

简单例子

链接Promise

异常出现顺序

let & const

模版字段量

解构

对象字面量简写

for… of 循环

展开运算符 ...

... 表示剩余参数

箭头函数 =>

默认函数参数

javascript中的类概念

ES6 中的子类

js中不是所有花括号(if,while等)都能创建作用域，只有函数语句中的花括号才能创建

内存作用域和对象

闭包。比如functionA存在functionB中，functionA持有functionB的变量x。在functionB执行完成后返回functionA，functionA仍然可以调用x进行执行。

this关键字

原型链(prototype)

展开运算符 `...`

`...` 表示剩余参数

`this`关键字