跨域方式实现原理

一、What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

1.What is the same-origin security policy?

The same-origin policy is very restrictive. Under this policy, a document (i.e., like a web page) hosted on server A can only interact with other documents that are also on server A. In short, the same-origin policy enforces that documents that interact with each other have the same origin.

An origin is made up of the following three parts: the protocol, host, and port number.

Pattern of React Components

• Stateless Components Can Be Written As A Function

1
2
3
4
5
6
7
8
9
10
11
12

export var statelessComp = (props)=> {
    let message = props.message;
        return (
      <div>
        <h1>stateless Components</h1>
        <p>{message}</p>
      </div>
    );
}
statelessComp = {
  message: React.PropTypes.string.isRequired
};

• One of the most common programming patterns in React is to use stateful parent components to maintain their own state and pass it down to one or more stateless child components as props.

• A React component should use state to store information that the component itself can change

• A React component should never change its Props value.

• Stateful Components pass event method as props to Stateless Components. Then, Stateless Components create a eventHandler method in order to change the state of Stateful Components.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//This is a stateless child component.
class babyYoda extends React.Component {
  render() {
    return <h2>I am {this.props.name}!</h2>;
  }
}
//This is a stateful Parent element.
class Yoda extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Toyoda' };
  }
//The child component is rendering information passed down from the Parent component. 
  render() {
    return <babyYoda name={this.state.name} />;
  }
}

• Another programming patterns is Container Components From Presentational Components

  Use Container Components to do logical calculation.
  Use Presentational Components to render JSX elements.

使用默认props和设定props属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import PropTypes from 'prop-types';

class NavBar extends Component{
  static defaultProps={
    titile:'something on the top',
    icon:'fab fa-gihub'
  };
  static propTypes = {
    titile:PropTypes.string.isRequired,
    icon:PropTypes.string.isRequired,
  }
	render(){
    return (
      <nav>
        <h1><i className={this.props.icon}></i>{this.props.title}</h1>
      </nav>		
    )
  }
}

Functional compoents

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import PropTypes from 'prop-types';

const NavBar = (props)=>{
  return (
      <nav>
        <h1><i className={props.icon}></i>{props.title}</h1>
      </nav>		
    )
}
NavBar.defaultProps={
    titile:'something on the top',
    icon:'fab fa-gihub'
  };
NavBar.propTypes = {
    titile:PropTypes.string.isRequired,
    icon:PropTypes.string.isRequired,
  }

Save local environment variables

• Create .env.local file in root directory
• set key-value pair to create variables
• then the variables can be accessed by process.env.${key}

Ready to code?

在开始之前，先简单复习一下d3如何与react兼容的。

• d3, data-driven documents,是JavaScript的一个库，用来处理和展示数据的。通过直接操控DOM节点来进行对元素的增减修改
• 而react是采用一种非常聪明的方式来操控DOM节点—模拟并与实际DOM节点比较来更新。

因此如果‘不恰当’使用可能会引起相互干扰，不可预知的问题。就像一对夫妻一样，如果他们一直在做同一件事，那么麻烦不可避免:)

最简单的方式就是给彼此留有活动空间！让老婆去看剧，自己洗碗

因此我遵循的基本理念是让d3老婆独自在卧室看综艺，react自己在厨房管理自己的小组件。 等饭做好了，喊老婆吃饭。

Data Process

接下来开始处理数据

Loading Lib

1
2
3
4
5
6

import pandas as pd
import numpy as np
import seaborn as sns
import matplotlib.pyplot as plt
import re
Import json

Tourism Attractions data clean

1

hotSpot = pd.read_csv("bj_hotspots.csv",encoding="utf-8")

第一步，把数据搞到手

Housing Price Beijing [Lianjia]

Beijing regional housing price from Lianjia.com
Lianjia

Based on the mean price of the used houses.
Start Date:25/3/2020;
Ruoyu Wang

进入链家北京二手房信息网站， 打开开发者工具，点击Network会惊奇的发现有一个有priceMap的请求文件，接下来就用python来简单抓取一下吧。

1.Import Libs

1
2
3
4

import requests
import json
import time
import pandas as pd

2.Define method

1
2
3
4
5
6
7

def get_page(url,header) :
    my_headers = {"User-Agent": header}
    try:
        page = requests.get(url,headers = my_headers) 
        return page
    except Exception as error:
        print(str(error))

OSINT-1 How to utilise search engines

Some Operators

• “”
  Force an exact-match search. The double quotation marks will help return results including keywords inside.
• *
  An asterisk character, known as a wildcard, to match one or more words in a phrase
• OR
  Search for X or Y. This will return results related to X or Y, or both. Note: The pipe ( | ) operator can also be used in place of “OR.”
• AND
  Similar to OR ( | ), can be used in place of “&” Note: It doesn’t really make much difference for regular searches, as Google defaults to “AND” anyway. But it’s very useful when paired with other operators. 　More...

Studying Computational & Data Journalism , Cardiff, the UK.

Ruoyu Wang

GitHub
Email