lanxxg / blog Goto Github PK
View Code? Open in Web Editor NEWblog
blog
ECharts封装基本概念
import React from 'react';
import echarts from 'echarts';
class Echart extends React.Component {
constructor(props) {
super(props);
this.revenueChart = this.revenueChart.bind(this);
this.getEchartsInstance = this.getEchartsInstance.bind(this);
}
componentDidMount() {
this.revenueChart();
}
componentDidUpdate() {
this.revenueChart();
}
componentWillUnmount() {
echarts.dispose(this.chartElement);
}
getEchartsInstance() {
return echarts.getInstanceByDom(this.chartElement) ||
echarts.init(this.chartElement);
}
revenueChart() {
const myChart = this.getEchartsInstance();
myChart.setOption(this.props.option);
}
render() {
return (
<div ref={(el) => { this.chartElement = el; }} />
);
}
}
export default Echart ;
在react-router
中,使用browserHistory
去掉URLs时,刷新页面报404错误,收集资料如下。
在index.html
中引入文件的路径
<!-- index.html -->
<!-- index.css -> /index.css -->
<link rel="stylesheet" href="/index.css">
<!-- bundle.js -> /bundle.js -->
<script src="/bundle.js"></script>
不同服务器相关配置具体如下
这个是开发服务器,在package.json
的设置如下
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
添加.htaccess
文件,代码参考
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
RewriteEngine On
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
ErrorDocument 404 /index.html
</IfModule>
配置如下
server {
listen 80;
server_name your url;
root /path/to/xx/dist;
location / {
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location * {
try_files $uri $uri/ /index.html =404;
}
}
最后把构建完的index.html index.css
等文件放到 /path/to/xx/dist
文件夹下
创建server.js
文件,代码参考
// server.js
var express = require('express')
var path = require('path')
var app = express()
// serve our static stuff like index.css
app.use(express.static(path.join(__dirname,'build')))
// send all requests to index.html so browserHistory in React Router works
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
var PORT = process.env.PORT || 8000
app.listen(PORT, function() {
console.log('Production Express server running at localhost:' + PORT)
})
GIT的一些命令,收集资料如下
git config --global user.name name
git config --global user.email [email protected]
//设置用户名和邮箱
ssh-keygen -t rsa //生成秘钥
git remote add origin URL //连接远程仓
git remote remove origin //删除与远程仓的连接
git remote -v //显示本地连接的远程仓
git clone URL //克隆远程仓到本地
mkdir name //创建版本库
cd name
git init //初始化Git仓库
git pull origin master //下拉更新
git checkout -b <branch name>
//创建并切换分支
git status //查看状态
git add . //添加修改过的文件到暂存区
git commit -m "message" //提交到本地库
git checkout master //切换到主分支
git pull origin master //下拉更新
git merge <branch name>
//合并分支
git push -u origin master //上传到远程库
git branch -d <branch name>
//删除分支
git pull origin <branch name> //下拉更新
git checkout -b <branch name> //创建并切换分支
git status //查看状态
git diff //查看修改内容
git add . //添加修改过的文件到暂存区
git add <file> //添加指定文件到暂存区
git commit -m "message" //提交到本地库
git commit --amend //修改最后一次提交
git checkout <branch name> //切换分支
git merge <branch name>
git clone -b <branch name> url
git log 查看提交日志 (--pretty=oneline)
git log --graph命令可以看到分支合并图
git reflog 查看命令历史
git reset --hard HEAD^ (HEAD表示当前版本,上一个版本HEAD^ ,上10个版本 HEAD~10)
git reset --hard commit_id (根据 commit_id 指定某个版本) (撤销提交)
git reset HEAD file(修改添加到了暂存区时,想放弃修改) =>git checkout -- file
git checkout -- file (在工作区放弃修改)
git rm file 删除文件
git branch 查看分支
git branch <name> 创建分支
git checkout <name> 切换分支
git checkout -b <name> 创建+切换分支
git merge <name> 合并某分支到当前分支(Fast forward)
git merge --no-ff -m "merge with no-ff" <name> 普通模式
git branch -d <name> 删除分支
git pull <远程主机名> <远程分支名>:<本地分支名>
git push <远程主机名> <本地分支名>:<远程分支名>
git stash
git stash pop
git tag <tagname>
git tag -a -m "message" //指定标签信息
git tag //查看所有tag
git show <tagname>
//查看tag的版本信息
git tag -d <tagname>
//删除本地tag
git push origin :<tagname>
//删除远程分支
git push origin <tagname>
//提交指定tag
git push origin --tags //提交所有tag
好奇心好奇心
Your app is being rendered to HTML using ReactDOMServer API, and
Your app includes a user-supplied attribute name in an HTML tag.
let props = {};
let userProvidedData = '></div><script>alert("hi")</script>';
props[userProvidedData] = "hello";
let element = <div {...props} />;
const html = ReactDOMServer.renderToString(element);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.