王下邀月熊_Chevalier
王下邀月熊_Chevalier

在重构脚手架中掌握React/Redux/Webpack2基本套路

本文从属于笔者的Web Frontend Introduction And Best Practices:前端入门与最佳实践,项目的Github地址为Webpack2-React-Redux-Boilerplate.

Warning!笔者自己构建的基于Webpack+React+Redux的脚手架已经经历了三个版本,之前的两个版本参考Webpack实战之Quick Start以及我的Webpack套装。在本文文首此处,我必须严肃吐槽下,我深刻感觉到Boilerplate就像当年的Rails,方便入门的同时会给你无尽的束缚,因此笔者不建议任何人在正式项目中直接使用自己不能完全掌控的脚手架。我觉得我是无法忘记当初被react-redux-universal-hot-example支配的恐惧。

Webpack2 React Redux Boilerplate

核心组件代码与脚手架之间务必存在有机分割，整个程序架构清晰易懂。

如果你是完全的React初学者,那么建议首先了解下使用Facebook的create-react-app快速构建React开发环境，同时参考笔者的React 入门与最佳实践以及Redux 入门与最佳实践。本项目算是个半自动化的脚手架工具,笔者并不希望做成完全傻瓜式的开箱即用的工具,这只会给你的项目埋下危险的伏笔,希望每个可能用这个Boilerplate的同学都能阅读文本,至少要保证对文本提及的知识点有个全局的了解。

Features

本部分假设你已经对Webpack有了大概的了解，这里我们会针对笔者自己在生产环境下使用的Webpack编译脚本进行的一个总结，在介绍具体的配置方案之前笔者想先概述下该配置文件的设计的目标，或者说是笔者认为一个前端编译环境应该达成的特性，这样以后即使Webpack被淘汰了也可以利用其他的譬如JSPM之类的来完成类似的工作。

  • 考虑到同一项目对多编译目标的支持，包括开发环境、纯前端运行环境（包括Cordova、APICloud、Weapp这种面向移动端的方案）、同构直出环境，并且保证项目可以在这三个环境之间平滑切换，合理分割脚手架工具与核心应用代码。

  • 单一的配置文件：很多项目里面是把开发环境与生产环境写了两个配置文件，可能笔者比较懒吧，不喜欢这么做，因此笔者的第一个特性就是单一的配置文件，然后通过npm封装不同的编译命令传入环境变量，然后在配置文件中根据不同的环境变量进行动态响应。另外，要保证一个Boilerplate能够在最小修改的情况下应用到其他项目。

  • 多应用入口支持：无论是单页应用还是多页应用，在Webpack中往往会把一个html文件作为一个入口。笔者在进行项目开发时，往往会需要面对多个入口，即多个HTML文件，然后这个HTML文件加载不同的JS或者CSS文件。譬如登录页面与主界面，往往可以视作两个不同的入口。Webpack原生提倡的配置方案是面向过程的，而笔者在这里是面向应用方式的封装配置。

  • 调试时热加载：这个特性毋庸多言，不过热加载因为走得是中间服务器，同时只能支持监听一个项目，因此需要在多应用配置的情况下加上一个参数，即指定当前调试的应用。

  • 自动化的Polyfill：这个是Webpack自带的一个特性吧，不过笔者就加以整合，主要是实现了对于ES6、React、CSS(Flexbox)等等的自动Polyfill。

  • 资源文件的自动管理：这部分主要指从模板自动生成目标HTML文件、自动处理图片/字体等资源文件以及自动提取出CSS文件等。

  • 文件分割与异步加载：可以将多个应用中的公共文件，譬如都引用了React类库的话，可以将这部分文件提取出来，这样前端可以减少一定的数据传输。另外的话还需要支持组件的异步加载，譬如用了React Router，那需要支持组件在需要时再加载。

真的需要Redux吗?

  • 思考:我需要怎样的前端状态管理工具?

  • 你不一定需要Redux

虽然本项目是面向Webpack+React+Redux的Boilerplate，但是笔者还是希望在此抛出这个问题，也是便于大家能够理解Redux。对于这个问题笔者没有明确的答案,但是在这两年的自己对于Redux的实战中,也一直在摇把。我坚定的认为Redux指明了解决某类问题的正确方向,但是它真的适合于所有的项目吗?笔者在我的前端之路一文中提及,从以DOM操作为核心的jQuery时代到以声明式组件为核心的React时代的变迁是声明式编程对于命令式的慢慢代替,而Redux则是纯粹的声明式编程典范。这里以某个登录认证的小例子进行说明，产品的需求是允许用户在登录成功之后在登录页面上显示“登录成功，正在跳转”，然后延时跳转到其他页面。这里强调要在登录页面上进行回显是因为很多人习惯将，跳转作为Side Effect在Thunk或者Saga中就处理了，并没有影响到界面本身。具体的代码对比可以参考纯粹的React实现的登录跳转与基于Redux实现的登录跳转。首先，如果是纯粹的React命令式的话，会是:

class ReactComponent{
  ...
  if(!isValid){ //isValid是外部传入的状态变量，存放用户是否已经登录
  //如果尚未登录，则进行登录操作
  login().then(()=>{
    //登录成功之后，显示文字并且执行跳转
    show('登录成功，正在跳转');
    redirect();
  });
}
}

如果我们引入Redux，并且将Component中的所有副作用移除的话:

class ReduxComponent{
  ...
  if(!isValid){ 
      login(); //执行登录操作，其会dispatch某个Action，触发外部状态变化
  }
  
  if(shouldRedirect){ //需要添加该变量来记录是否需要进行跳转
    show('登录成功，正在跳转');
    dispatch({type:'SET_SHOULDREDIRECT_FALSE'});//将控制是否跳转的状态变量重置
    redirect();
  }
}
}

从上面的例子中我们能看出,就好像能量守恒定理一样,对于任何的业务逻辑的实现要么以命令的方式,要么以声明的方式辅以大量的状态变量（参考基于变量的循环与基于迭代的循环二者的代码复杂度比较）。Redux以函数式编程的强约束将我们很多的逻辑拆分为了多个纯函数表示,并以数据流驱动整个项目。Redux允许我们以支离破碎的逻辑代码与相较于命令式编程膨胀很多的模板代码为代价实现百分百的可测试性与可预测性。经过这么长时间的摸索与社区广泛的讨论实践，Redux的优势与劣势都已经很明显了。对于具体的使用者也是见仁见智，以笔者而言因为一直都在中小型企业中，往往对于产品进度的要求会多余测试，并且更多的以人工测试为主，因此笔者目前是尝试在项目中混用MobX与Redux，希望能够有效平衡开发速度与整体的鲁棒性/可扩展性。

Personal Best Practice

本部分是列举一些通用的个人最佳实践的感受，不局限于React或者Redux。具体的关于React与Redux的实践建议会在下文中介绍。

  • Promise

使用Promise进行异步操作，建议使用await/async作为Promise语法糖构建异步函数。

  • fetch

使用fetch作为统一的数据获取函数，在本项目中使用了笔者的[fluent-fetcher]()作为fetch的上层封装使用。

  • 尽可能少的使用行内样式,将每个组件的样式文件与组件声明文件同地存放
    譬如Material-UI这个著名的React样式组件库与react-redux-universal-hot-example

之前的版本都是用的CSS-IN-JavaScript,全部内联样式。笔者感觉还是需要将CSS与JS剥离开来,一方面是处于职责分割的考虑,另一方面也是为了样式的可变性。通过样式类的方式来定义方式很方便地可以通过CSS来修正样式,而不需要每次都要找半天内联样式在哪里,然后去重新编译整个项目。

  • 适当合理地编写纯函数，在合理范围内尽可能地将逻辑处理抽象为纯函数

Reference

Boilerplate

  • react-transform-boilerplate

  • react-boilerplate

  • react-redux-saga-boilerplate

  • react-redux-universal-hot-example

Blogs

  • webpack-for-the-fast-and-the-furious

  • react-project

Quick Start

本部分笔者首先会介绍本项目中所有预置的项目编译及运行命令。首先需要明确的两点，本Boilerplate是希望达成以下两个目标：

（1）将关于应用的配置与关于Webpack的配置剥离开

项目中开发配置主要在dev-config目录下，如果你要基于本项目进行二次开发,可以直接拷贝dev-config与package.json到你自己的项目中,然后根据需要配置dev-config/apps.config.js项目。而主要的应用配置信息目前是抽象到了dev-config/app.config.js文件中，主要的可配置项如下:

/**
 * Created by apple on 16/6/8.
 */
const defaultIndexPage = "./dev-config/server/template.html";

module.exports = {
  apps: [
    //HelloWorld
    {
      id: "helloworld",
      src: "./src/simple/helloworld/helloworld.js",
      indexPage: defaultIndexPage,
      compiled: false //控制在执行npm run build时是否会编译该app
    },
    {
      id: "react",
      src: "./src/react/react_app.js",
      indexPage: defaultIndexPage,
      compiled: true
    },
    {
      id: "redux",
      src: "./src/redux/redux_app.js",
      indexPage: defaultIndexPage,
      compiled: false
    }
  ],

  //开发服务器配置
  devServer: {
    appEntrySrc: "./src/react/react_app.js", //当前待调试的APP的入口文件
    port: 3000 //监听的Server端口
  },

  //依赖项配置
  proxy: {
    //后端服务器地址 http://your.backend/
    backend: "",
  },

  //如果是生成的依赖库的配置项
  library: {
    name: "library_portal",//依赖项入口名
    entry: "./src/library/library_portal.js",//依赖库的入口,
    libraryName: "libraryName",//生成的挂载在全局依赖项下面的名称
    libraryTarget: "var"//挂载的全局变量名
  }
};

（2）能够以平滑的方式编译为三个不同的目标，主要是独立部署（往往作为单页应用或者离线WebAPP）与Server Side Rendering这两种。

Simple

笔者正在逐步采用yarn作为替代npm的依赖管理工具，不过在目前的README中还是保留了npm方式，有兴趣的朋友可以自己进行尝试。

首先使用git clone命令将项目Clone到本地:

git clone https://github.com/wxyyxc1992/Webpack2-React-Redux-Boilerplate
cd Webpack2-React-Redux-Boilerplate

然后使用 npm install / npm link命令安装依赖项目，同时如果你要实现部署的话还需要一些全局命令，可以使用sh install.sh进行安装。然后将dev-config/app.config.js作如下配置:

  //开发服务器配置
  devServer: {
    appEntrySrc: "./src/simple/helloworld/helloworld.js", //当前待调试的APP的入口文件
    port: 3000 //监听的Server端口
  },

然后使用npm start命令启动调试服务器，此时在命令行中Webpack DashBoard会自动输出编译信息:

然后在浏览器中打开http://localhost:3000，你可以看到如下画面：

此时在编辑器中实时修改App.js，结果可以通过热加载实时反馈到界面上，热加载主要是利用实时传送描述热加载的json与js文件:

这样当我们有需要自定义某些热加载的规则时可以同样利用这种方式。我们通过npm start利用WebpackDevServer来启动开发服务器，这个很方便我们进行开发。接下来我们通过npm run build命令来构建可发布版本，这种方式编译得出的基于hashHistory，可以用于单页应用（路径不变）或者离线应用（譬如应用到Cordova中），首先我们需要在dev-config/apps.config.js中将目标应用编译状态设置为true。注意，如果同时编译多个应用，那么CommonsChunkPlugin会将这几个应用中的公共代码抽取出来:

    //HelloWorld
    {
      id: "helloworld",
      src: "./src/simple/helloworld/helloworld.js",
      indexPage: defaultIndexPage,
      compiled: true //控制在执行npm run build时是否会编译该app
    },

直接在浏览器中打开helloworld.html文件，即可看到与刚才热加载时相同的页面。另外需要注意的是，这里使用的HTML模板都是统一放置于dev-config/server/template.html文件，笔者建议使用Helmet来为HTML添加自定义的元标签或者样式脚本等。

Library

以上述方式编译的是独立可运行的脚本，而在有些情况下我们希望以类似于jQuery的方式挂载全局变量/函数的方式使用部分功能，这里我们就需要将编译目标设置为Library。首先将dev-config/apps.config.js中Library配置如下:

  //如果是生成的依赖库的配置项
  library: {
    name: "library_portal",//依赖项入口名
    entry: "./src/simple/library/library_portal.js",//依赖库的入口,
    libraryName: "libraryName",//生成的挂载在全局依赖项下面的名称
    libraryTarget: "var"//挂载的全局变量名
  }

然后使用npm run build:library进行编译，这里我们希望将某个简单的ES6类导出到页面中使用:

/**
 * @function 基于ES6的服务类
 */
export class FooService {

    static echo(){

        const fooService = new FooService();

        return fooService.getMessage();
    }

    /**
     * @function 默认构造函数
     */
    constructor() {
        this.message = "This is Message From FooService!";
    }

    getMessage() {
        return this.message;
    }

}

我们还需要设置专门的入口文件:

/**
 * Created by apple on 16/7/23.
 */
import {FooService} from "./foo";

/**
 * @function 配置需要暴露的API
 * @type {{foo: {echo: FooService.echo}}}
 */
module.exports = {

    foo: {
        echo: FooService.echo
    }

};

然后在需要的页面中引入编译好的两个脚本:

此时打开该界面，即可以弹出如下窗口:

Server Side Rendering Support

本部分我们使用react_app这个应用作为示例，首先同样将配置中调试目标设置为react_app.js:

  //开发服务器配置
  devServer: {
    appEntrySrc: "./src/react/react_app.js", //当前待调试的APP的入口文件
    port: 3000 //监听的Server端口
  },

然后使用npm start命令来启动开发服务器，然后同样可以使用npm run build命令编译可发布版本。然后打开dist/目录下的react.html文件，即可以看到界面，注意，此时使用的是hashHistory，因此URL的形式为:

react.html?_ijt=4t0fmg7f6rhsv85efsau6j3t1r#/detail?_k=f9r3og

然后我们需要以Server Side Rendering的方式发布项目，其主要区别在于支持browserHistory以及服务端完成渲染。注意，实际上页面发送到客户端之后还会依靠加载的JS脚本全部重新渲染，其只是为了方便SEO/首屏显示速度/填充初始状态到界面中。

首先，我们需要将apps.config.js文件中的ssrServer项目设置为我们目标的ssrServer:

  //用于服务端渲染的Server路径
  ssrServer: {
    serverEntrySrc: './src/react/ssr_server.js'
  },

我们使用npm run build:ssr命令进行编译，在dist目录下可以得到如下文件:

.
├── react.bundle.js
├── react.css
├── react.html
├── ssr_server.bundle.js
├── ssr_server.bundle.js.map
└── vendors.bundle.js

在本项目中为了尽可能的代码复用，使用了变量来控制是否支持服务端渲染，我们直接使用 node dist/ssr_server.bundle.js即可以启动服务器，此时URL格式为:

http://localhost:3001/login

Develop Environment:开发环境机制详解

Webpack2

  • What's new in webpack 2

本项目中使用Webpack 2替代原本的Webpack 1，从Webpack 1到Webpack 2很多的配置项目发生了变化，详细列表可以参考引用中提供的链接。而在本项目中，其中几个典型的修改为:
（1）所有loader的配置提取到了LoaderOptionsPlugin中。

  //提取Loader定义到同一地方
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false,
    options: {
      context: '/',
      postcss: [
        utils.postCSSConfig
      ]
    }
  }),

这里包含对于原本的UglifyJsPlugin与PostCSS的配置。

（2）loader配置更加灵活。

loaders: [
    {
        test: /\.css$/,
        loaders: [
            "style-loader",
            { loader: "css-loader", query: { modules: true } },
            {
                loader: "sass-loader",
                query: {
                    includePaths: [
                        path.resolve(__dirname, "some-folder")
                    ]
                }
            }
        ]
    }
]

WebpackDevServer & Hot Loader

在前一版本的devServer中，笔者使用了express加上webpack-dev-middleware与webpack-hot-middleware中间件，本版本中是迁移到了WebpackDevServer:

new WebpackDevServer(webpack(config), {
  //设置WebpackDevServer的开发目录
  contentBase: path.join(__dirname + "/"),
  // publicPath: `http://0.0.0.0:${appsConfig.devServer.port}/`,
  hot: true,
  historyApiFallback: true,
  quiet:true,
  // noInfo: true,
  stats: {colors: true}
}).listen(appsConfig.devServer.port, '0.0.0.0', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log(`Listening at http://0.0.0.0:${appsConfig.devServer.port}/`);
});

另外就是对于HotReloader的使用，目前很多热加载的实现方式还是基于react-transform，不过该项目已经废弃了，因此这里如果要自己添加热加载组件的话，建议使用react-hot-loader，目前笔者使用了3.0版本。我们分别需要将上面的WebpackDevServer中的hot设置为true，并且在Babel配置文件中添加如下配置:

  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ],
      "plugins": [
        "react-hot-loader/babel"
      ]
    }
  }

API Proxy

待补充。

React Router & Server Side Rendering

  • React路由解决方案React-Router介绍与实践

Pure Frontend

我们首先从应用的入口程序看起:

let history;

//判断是否为SSR从而确定应该选用哪个History
if (__SSR__) {
  //如果是浏览器环境,则使用browserHistory
  history = browserHistory;
} else {
  //如果是独立环境,则使用hashHistory
  history = hashHistory;
}

//在浏览器环境下使用hashHistory
const router = 
  {getRoutes(localStorage)}
;

//将组件渲染到DOM中
render(
  router,
  document.getElementById('root')
);

这里将路由配置提取到单独文件中，是因为路由配置是需要在服务端与客户端共享的，因此将可能是DOM下独有的localStorage或者类似的对象以参数方式传入。对于Route的配置倒是客户端与服务端保持一致:

  return (
    
      
      
      
      
    
  );

其余的代码不多，可以自行浏览整个项目。这里有个关于React Router的点我想说明下,在Route配置时使用withRouter这个方法可以以HOC方式注入router对象到Props中，这样我们在进行页面跳转时可以使用:

this.props.router.goBack()

Server Side Rendering

首先我们说几句废话，需要了解服务端渲染到底做了啥:

（1）Server端只负责首页的渲染，其他页面仍然由客户端进行渲染。即虽然URL Path发生了变化，但是并未触发整个页面的完全刷新。

（2）以Redux为代表的状态管理工具中的Store只是在第一次渲染时将数据传递给客户端，在后续的页面切换/认证等操作中的所有代码皆在客户端运行。

这里我们不需要改造上面的客户端入口文件，而需要添加一个用于服务端运行的文件，其核心代码为:

//处理所有的请求地址
app.get('/*', function (req, res) {

  //匹配客户端路由
  match({routes: getRoutes(), location:req.originalUrl}, (error, redirectLocation, renderProps) => {

    if (error) {

      res.status(500).send(error.message)

    } else if (redirectLocation) {

      res.redirect(302, redirectLocation.pathname + redirectLocation.search)

    } else if (renderProps) {

      let html = renderToString();

      res.status(200).send(renderHTML(html, {key: "value"}, ['/static/vendors.bundle.js', '/static/react.bundle.js']));

    } else {
      res.status(404).send('Not found')
    }
  })
});

可以看出，即是用户首次向服务端发起请求时，首先对于首屏展示的组件进行渲染。我们来做一个对比，服务端渲染之后的得到的HTML字符串为:

而原始的JSX组件如下，可以发现事件处理等很多代码都被过滤了。

/**
 * Created by apple on 16/9/13.
 */
export class Login extends Component {

  /**
   * @function 默认渲染函数
   * @return {XML}
   */
  render() {
    return 

      登陆界面

      

        

        
      


    

  }
}

Authentication

有时候我们需要对某些URL添加权限认证，即只允许认证用户才能访问，这里我们可以通过Route中的onEnter属性进行控制:

而我们在上文中传入的Store对象也是在这个时候派上用场:

/**
   * @function 判断用户是否登陆,如果未登陆则强制性跳转到登录页面
   * @param nextState
   * @param replace
   * @param callback
   */
  async function auth(nextState, replace, callback) {

    let userToken = store.userToken;

    //在这里执行异步认证,假设传入的store中包含userToken
    //这里使用Promise执行异步操作
    //如果是SSR,则本部分代码会在服务端运行

    let isValid = await valid_user(userToken);

    //如果用户尚未认证,则进行跳转操作
    isValid || replace('/login');

    //执行回调函数
    callback();

  }

Isomorphic Redux

笔者目前在自己主导的几个前端项目中渐渐的转向MobX与Redux并行.本项目中对于Redux的文件布局采取的是Ducks这种方式,参考了my-journey-toward-a-maintainable-project-structure-for-react-redux一文。即按照特性来将Reducers、ActionCreators、Actions、Selectors集中到单个文件中:

// src/ducks/auth.js
const AUTO_LOGIN = 'AUTH/AUTH_AUTO_LOGIN'
const SIGNUP_REQUEST = 'AUTH/SIGNUP_REQUEST'
const SIGNUP_SUCCESS = 'AUTH/SIGNUP_SUCCESS'
const SIGNUP_FAILURE = 'AUTH/SIGNUP_FAILURE'
const LOGIN_REQUEST = 'AUTH/LOGIN_REQUEST'
const LOGIN_SUCCESS = 'AUTH/LOGIN_SUCCESS'
const LOGIN_FAILURE = 'AUTH/LOGIN_FAILURE'
const LOGOUT = 'AUTH/LOGOUT'

const initialState = {
  user: null,
  isLoading: false,
  error: null
}

export default (state = initialState, action) => {
  switch (action.type) {
    case SIGNUP_REQUEST:
    case LOGIN_REQUEST:
      return { ...state, isLoading: true, error: null }

    case SIGNUP_SUCCESS:
    case LOGIN_SUCCESS:
      return { ...state, isLoading: false, user: action.user }

    case SIGNUP_FAILURE:
    case LOGIN_FAILURE:
      return { ...state, isLoading: false, error: action.error }

    case LOGOUT:
      return { ...state, user: null }

    default:
      return state
  }
}

export const signup = (email, password) => ({ type: SIGNUP_REQUEST, email, password })
export const login = (email, password) => ({ type: LOGIN_REQUEST, email, password })
export const logout = () => ({ type: LOGOUT })

对于Redux Dev Tools,请自行使用[Browser Extension]()。

Simple Count

我们首先以简单的基于Redux的计数器为例，将dev-config/apps.config.js中的开发配置设置为如下:

  //开发服务器配置
  devServer: {
    appEntrySrc: "./src/redux/redux_app.js", //当前待调试的APP的入口文件
    port: 3000 //监听的Server端口
  },

然后使用npm start运行开发服务器，界面上的如下表示即为该示例:

在Redux DevTools中，红色框线标示出的即为count相关的状态，我们接下来简单描述下其核心代码。在Redux开发中，我们首先需要构建一个Ducks，即包含Action、ActionCreator与Reducer:

/**
 * Created by apple on 16/10/11.
 */
// no changes here ?

/**
 * @function 定义Actions
 * @type {string}
 */
export const INCREMENT_COUNT = 'INCREMENT';

export const DECREMENT_COUNT = 'DECREMENT';

/**
 * @function 定义Reducer
 * @param state
 * @param action
 * @return {number}
 */
export default (state = 0, {type}) => {
  switch (type) {
    case INCREMENT_COUNT:
      return state + 1;
    case DECREMENT_COUNT:
      return state - 1;
    default:
      return state
  }
}

/**
 *@region 定义Action Creator
 */

/**
 * @function 触发加1操作
 * @return {{type: string}}
 */
export const increment = ()=> {

  return {
    type: INCREMENT_COUNT
  }

};

/**
 * @function 在这里进行异步加1操作
 * @return {function(*)}
 */
export const incrementAsync = ()=> {

  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
};

/**
 * @function 执行计数器减一操作
 * @return {{type: string}}
 */
export const decrement = ()=> {

  return {
    type: DECREMENT_COUNT
  }

};

这里为了简单起见，我们是使用了redux-thunk来处理异步Action，实际上在Redux中对于异步Action的处理也有各种各样的实践，包括笔者在这里自定义的promiseMiddleware，也是一种方式。然后我们需要构建一个Store来存放全局的状态，Store本身是基于Reducer来递归生成状态树的,其核心代码如下:

  const store = createStoreWithMiddleware(
    rootReducer,
    initialState,
    typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' && __DEV__ ? window.devToolsExtension() : f => f);

  /**
   * @function 保证Redux Reducer的热加载
   */
  if (__DEV__ && module.hot) {
    module.hot.accept('./reducer', () => {
      //替换Store中的Reducer
      store.replaceReducer(require('./reducer'));
    })
  }

现在我们已经写完了Redux部分的代码，下面就是需要将状态导入到界面中:

@connect(
  state => ({
    count: state.count
  }),
  {pushState: push, increment, incrementAsync, decrement}
)
export class Home extends Component {
  render() {

    //在非SSR状态下导入SCSS文件
    __SSR__ || require('./home.scss');

    const {count, pushState, increment, incrementAsync, decrement} = this.props;

    return 


      

        王下邀月熊 Webpack2-React-Redux-Boilerplate
      


      

      


      
导航栏目:


      
  • 
        
      
    • 
      
  • 登陆页
    • 

      
    
      
    

      
    基于Redux的Count实例
    
      
    {count}
    
      
    
        
        
        
      
    

    
    
  }
}

    React Router Redux

    React Router Redux的代码还是简单易懂的,其只是在用户点击/跳转与React Router自身的History之间加上了一层封装

    history + store (redux) → react-router-redux → enhanced history → react-router

    如果你需要自定义其他的Location,譬如如果你需要引入ImmutableJS作为Store:

    import Immutable from 'immutable';
import {
    LOCATION_CHANGE
} from 'react-router-redux';

let initialState;

initialState = Immutable.fromJS({
    locationBeforeTransitions: undefined
});

export default (state = initialState, action) => {
    if (action.type === LOCATION_CHANGE) {
        return state.merge({
            locationBeforeTransitions: action.payload
        });
    }

    return state;
};

    SSR

    与上文中的Server Side Rendering Server相比，其添加了对于状态传递的支持:

    
//处理所有的请求地址
app.get('/*', function (req, res) {

  //构建出内存中历史记录
  const memoryHistory = createHistory(req.originalUrl);

  //服务端构建出Store
  const store = createStore(memoryHistory);

  //构建出与Store同步的history
  const history = syncHistoryWithStore(memoryHistory, store);

  //匹配客户端路由
  match({history, routes: getRoutes(), location: req.originalUrl}, (error, redirectLocation, renderProps) => {

    if (error) {

      res.status(500).send(error.message)

    } else if (redirectLocation) {

      res.redirect(302, redirectLocation.pathname + redirectLocation.search)

    } else if (renderProps) {

      let html = renderToString(
        
          
        
      );

      //设置全局的navigator值
      // global.navigator = {userAgent: req.headers['user-agent']};

      res.status(200).send(renderHTML(html, {key: "value"}, ['/static/vendors.bundle.js', '/static/redux.bundle.js']));

    } else {
      res.status(404).send('Not found')
    }
  })
});

    欢迎大家指导与讨论,同时再次建议,在不能掌握本项目的情况慎重直接用于大型项目中,对自己负责。

    你可能感兴趣的:(webpack2,redux,react.js)

    • 一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！ tabzzz react.jsjavascriptecmascript
      文章目录什么是Redux？它有什么用Redux基本原理Redux在React中具体使用的方法ReduxToolkit（RTK）createSlice函数参数返回值示例configureStore函数参数返回值示例React-ReduxProvider组件示例React组件使用store中的数据useSelector钩子函数示例connect组件mapStateToPropsmapDispatchT
    • redux 的 toolkit使用教程和demo 天下一场夢 前端面试题Reactreact.jsjavascript前端
      React的redux-toolkit是一个简化Redux开发的工具包，它提供了一系列的简化方法来处理常见的Redux模式。下面我将指导你如何使用redux-toolkit创建一个简单的计数器应用。第一步：安装依赖首先你需要确保你的项目中已经安装了react,react-dom,@reduxjs/toolkit,和react-redux。你可以通过以下命令来安装它们（如果你还没有创建项目的话，可以
    • react 全局状态管理 redux的使用 小刘的代码仓库 react.js前端javascript
      redux为全局状态管理类似vuex目录redux官网一、安装npminstallredux二、创建三、修改四、接受五、拆分、合并六、异步处理redux-thunk的使用七、redux-promise的使用八、async和await九、react-redux的使用十、修改soter的属性值十一、异步的完整代码redux官网入门Redux|Redux中文官网一、安装npminstallredux二、
    • 快速使用react 全局状态管理工具--redux 蓝胖子不是胖子 Reactreact.js前端前端框架
      reduxRedux是JavaScript应用中管理应用状态的工具，特别适用于复杂的、需要共享状态的中大型应用。Redux的核心思想是将应用的所有状态存储在一个单一的、不可变的状态树（statetree）中，状态只能通过触发特定的action来更新。官方文档https://cn.redux.js.org/tutorials/typescript-quick-start如果对react不了解可以看我
    • JavaScript面试：什么是纯函数？ 魂斗驴
      纯函数对于多种用途至关重要，包括函数式编程，可靠的并发和React+Redux应用程序。但是“纯函数”是什么意思？在我们研究纯函数是什么之前，仔细研究一下函数可能是一个好主意。观察它们的方式可能有所不同，这将使函数式编程更易于理解。什么是函数？函数是一种方法，它需要一些输入，称为自变量，并产生一些输出称为返回值。函数可以达到以下目的：映射：根据给定的输入产生一些输出。函数将输入值映射到输出值。过程
    • react中关于token的两个场景 Now？！ react.jsjavascript前端
      场景一在react项目中，路由跳转前需判断是否存在token，有则正常跳转，没有则去登录页面。实现这里使用的是localstorage存储token（也可以使用redux管理token）//src\components\AuthRoute.js//封装高阶组件//有token正常跳转无token去登录页import{Navigate}from'react-router-dom'exportfunc
    • javascript设计模式---单例模式 知道了啊 javascript设计模式单例模式
      JavaScript设计模式—单例模式单例模式又称为单体模式，并提供一个访问它的全局访问点，也就是说，第二次使用同一个类创建的对象的时候，应该得到和第一次创建的对象完全相同的对象特点一个类只能生成一个实例对象提供一个全局访问点来获取这个实例案例window和documentVuex，Redux和Router全局loading缺点确保在整个应用中，只有一个实例存在，而且该实例需要被全局访问时。但是使
    • 微信小程序 全局共享数据 Mobx 在页面及组件上使用 尚梦 微信小程序小程序
      一前言在小程序中，常常有些数据需要在几个页面或组件中共享，对于这样的数据，在web开发中，有些朋友使用过redux、vuex之类的状态管理框架。在小程序开发中，也有不少朋友喜欢用MobX。二mobx引入npminstall--savemobx-miniprogrammobx-miniprogram-bindingsnpm命令执行完后，记得在开发者工具的项目中点一下菜单栏中的工具-构建npm。三创建
    • redux基础 小宇cool
      1.什么是Redux?Redux是JavaScript状态容器,提供了预测的状态管理,.可以让你构建一致化的应用,应用于不同的环境(客户端,服务器,元素应用)2.ActionAction是把数据从应用,传到Stroe的有效载荷.他是Stroe的唯一来源,一般来是你会通过troe.dispath将action传到stroe中action相当于一个触发器,只有当我们触发了action,我们才能对sta
    • react.js 涔溪 react.js前端前端框架
      一、create-react-app全局安装create-react-app$npminstall-gcreate-react-app创建一个项目$create-react-appyour-app注意命名方式CreatinganewReactappin/dir/your-app.Installingpackages.Thismighttakeacoupleofminutes.安装过程较慢，Inst
    • React Native优质开源项目推荐与解析 concisedistinct 移动开发reactnativeReact移动开发iosAndroid
      目录2.ReactNative的优势2.1.跨平台开发2.2.热更新2.3.丰富的社区资源2.4.优秀的性能3.优质开源项目推荐3.1.ReactNavigation3.1.1项目简介3.1.2特点和优势3.1.3应用场景3.2.Redux3.2.1项目简介3.2.2特点和优势3.2.3应用场景3.3.ReactNativeElements3.3.1项目简介3.3.2特点和优势3.3.3应用场景3
    • React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 04 首页产品展示、搜索、筛选和产品详情 皮蛋很白 实战typescriptreact.js
      构建首页布局搜索布局//src\components\core\Search.tsximport{Button,Col,Divider,Form,Input,Row,Select}from'antd'importProductItemfrom'./ProductItem'constSearch=()=>{return(所有分类搜索)}exportdefaultSearch搜索结果展示的产品组件//
    • React学习day18 我在东软打代码 Reactreact
      Provider批量传递store对象,求和案例react-redux优化容器组件和UI组件整合一个文件。无需自己给容器组件传递store，给包裹一个即可。使用react-redux后也不用自己再检测redux中状态的改变，容器组件可以自动完成这个工作。.mapDispatchToProps也可以简单的写一个对象一个组件要和redux“打交道”要经过几步(1)定义好UI组件—不暴露(2)引入con
    • React基础面试题 涔溪 Reactreact.js前端前端框架
      React面试题以下是面试官最有可能问到的50个React面试题和答案。为方便你学习，我对它们进行了分类：基本知识React组件ReactReduxReact路由基本知识1.区分RealDOM和VirtualDOMRealDOMVirtualDOM1.更新缓慢。1.更新更快。2.可以直接更新HTML。2.无法直接更新HTML。3.如果元素更新，则创建新DOM。3.如果元素更新，则更新JSX。4.D
    • 2024最新最全的React面试题 二丫骑士qq react.js前端前端框架
      1.react和vue的区别？(1)设计理念:React:更倾向于函数式编程思想，推崇组件的不可变性和单向数据流。Vue:结合了响应式编程和模板系统，致力于简化开发过程。(2)核心库与生态系统:React:React本身只关注UI层，但它有一个庞大的生态系统，例如Redux、MobX等用于状态管理，以及ReactRouter用于路由处理。Vue:Vue是一个更完整的解决方案，它的核心库除了视图层，
    • vue设置全局背景图_vue开发使用笔记 weixin_39629780 vue设置全局背景图
      在SPA单页面组件的开发中Vue的vuex和React的Redux都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:首先要安装、使用vuex首先在vue2.0+你的vue-cli项目中安装vuex:npminstal
    • React.js如何使用Bootstrap Vesper63 前端react.jsbootstrap前端
      在React.js项目中使用Bootstrap有多种方法，主要包括直接引入BootstrapCSS文件和使用ReactBootstrap库。下面将详细介绍这两种方法。方法一：直接引入BootstrapCSS文件这是最简单的方式，只需在项目中引入Bootstrap的CSS文件即可。安装Bootstrap：你可以通过npm或yarn安装Bootstrap：npminstallbootstrap或者：y
    • 外卖系统定制开发：技术选型与架构设计要点 万岳科技系统开发 人工智能小程序前端
      随着外卖行业的迅速发展，餐饮企业需要一个高效、稳定、可扩展的外卖系统来满足日益增长的用户需求。本文将探讨外卖系统定制开发的技术选型与架构设计要点，并提供一些示例代码来说明关键技术的实现。一、技术选型1.前端技术选型外卖系统的前端需要具备良好的用户体验和快速响应能力。常用的前端技术包括：框架：React、Vue.js或Angular状态管理：Redux、VuexCSS预处理器：Sass、Less打包
    • Flutter 第三方库 creazylee
      flutter_redux：在Flutter上使用Redux。flutter_webview_plugin：WebView插件。flutter_amap：高德地图Flutter插件。flutter_alipay：支付宝支付Flutter插件。amap_location：高德地图定位插件。flutter_mobile_vision：二维码识别神库，支持人面识别。barcode_scan：二维码识别库
    • 前端精髓-React hulovelove 面试职场和发展
      目录React的几大原理：diff原理React的工作流程大致如下：React为什么要使用reduxRedux基本原理：Redux的核心概念包括：Redux的工作流程大致如下：整个redux工作流程：Reducer为什么要返回一个新的state为什么要用State?reducer如何管理数据？React异常获取-错误边界（ErrorBoundary）：React严格模式开启与关闭？严格模式有什么好
    • 从零开始开发跑腿配送系统：技术选型与架构设计 万岳科技系统开发 小程序人工智能前端
      开发一个跑腿配送系统涉及多个技术栈和模块，从前端到后端，再到数据库和实时通信，每一个环节都至关重要。本文将详细介绍从零开始开发跑腿配送系统的技术选型与架构设计，并提供部分代码示例以帮助理解。一、技术选型前端技术：React：用于构建用户界面，具有组件化和高效的特点。Redux：用于状态管理，便于管理复杂的应用状态。AntDesign：提供一套美观的UI组件，提升开发效率和用户体验。后端技术：Nod
    • 使用 Redux 管理 React 应用状态 JudithHuang React从入门到放弃react.jsjavascript前端
      使用Redux管理React应用状态在复杂的React应用中，管理组件状态变得越来越复杂，这时候引入Redux可以帮助我们更好地管理状态。Redux是一个可预测状态容器，它可以帮助我们统一管理应用的状态，使得状态变化更加可控。本文将介绍如何在React应用中使用Redux。Redux简介Redux是一个状态管理库，它提供了一种可预测的状态管理方案。Redux的核心思想是将应用的状态存储在一个单一的
    • React核心⼊⻔-lesson1 IT帮 #Reactreact.js前端
      自学React从入门到精通，从使用到写源码React⼊⻔课堂⽬标资源起步⽂件结构⽂件结构⼀览React和ReactDomJSX使⽤JSX组件组件的两种形式class组件function组件组件状态管理类组件中的状态管理函数组件中的状态管理事件处理组件通信Props属性传递contextredux⽣命周期变更缘由新引⼊了两个新的⽣命周期函数：getDerivedStateFromProps，getS
    • Superset二次开发之Superset架构理解 aimmon 架构supersetBI
      技术框架框架作用前端React构建用户界面的JavaScript库ReduxJavaScript应用的状态管理库，管理组件间的状态共享Webpack前端资源打包工具BabelJavaScript编译器D3.js数据可视化的JavaScript库后端Flask轻量级的Pythonweb框架，处理HTTP请求、路由以及其他Web服务功能SQLAlchemySQL工具包和对象关系映射（ORM）工具，处理
    • React Hook “useSelector“ cannot be called at the top level. React Hooks must poguanba react.jsjavascript前端
      一般报这个错的话，就是useSelector写在了函数组件外边解决办法就是//项目的根组件import{useSelector}from"react-redux";functionApp(){constcount=useSelector(state=>state.counter)returnthisistitle{count};}exportdefaultApp;
    • react起源 lemmo
      简介React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"dataflowsdown"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。它由Facebook、Instagra
    • 2024前端面试准备之uniapp篇 前端fighter 前端面试uni-app
      全文链接！！！！！！！1.UniApp和其他跨平台框架（如ReactNative、Flutter）有什么区别？语言和技术栈：UniApp使用Vue.js作为开发语言和技术栈，而ReactNative使用React.js，Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。性能和体验：UniApp的性能和用户体验相对较好，因为它使用原生渲染技术，可以实现更接近原生应用的
    • Ant Design 组件学习经验 zhulichao
      Tree组件参考TreeSelect异步加载数据使用redux时，TreeSelect异步加载数据需要通过触发action调用后台获取数据，根据reducer更新的state显示出加载的数据。需添加loadData属性，值为一个方法，如onLoadData，内容如下。这个函数的返回值好像必须是一个Promise对象，如果不这么写，会报UncaughtTypeError:Cannotreadprop
    • 快速创建react项目. River_tong
      react简介说起react，我相信大家都对它有一定的了解，react目前是前端界非常流行的一个框架了，react它产生了很多相关的技术，比如：我们常说的react.js，我们可以用react语法来编写一些网页版应用，reactnative这门技术使得我们可以用react语法来编写原生应用，reactVR可以借助react的语法来编写一些VR相关的应用或者说全景视图这样的应用。react开发环境搭
    • react-redux 基本原理 & 使用redux 处理异步逻辑 廖雪青
      Redux出现的背景随着对React使用的深入，你会发现组件级别的state，和从上而下传递的props这两个状态机制，无法满足复杂功能的需要，例如跨层级之间的组件的数据共享和传递，Redux应运而生。state应用&redux应用对比左图是单个React组件，它的状态可以用内部的state来维护，而且这个state在组件外部是无法访问的。右图则是使用Redux的场景，用全局唯一的Store维护了
    • Java序列化进阶篇 g21121 java序列化
              1.transient         类一旦实现了Serializable 接口即被声明为可序列化，然而某些情况下并不是所有的属性都需要序列化，想要人为的去阻止这些属性被序列化，就需要用到transient 关键字。
    • escape()、encodeURI()、encodeURIComponent()区别详解 aigo JavaScriptWeb
      原文：http://blog.sina.com.cn/s/blog_4586764e0101khi0.html   JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函
    • ArcgisEngine实现对地图的放大、缩小和平移 Cb123456 添加矢量数据对地图的放大、缩小和平移Engine
      ArcgisEngine实现对地图的放大、缩小和平移:  个人觉得是平移，不过网上的都是漫游，通俗的说就是把一个地图对象从一边拉到另一边而已。就看人说话吧.  具体实现: 一、引入命名空间    using ESRI.ArcGIS.Geometry;    using ESRI.ArcGIS.Controls; 二、代码实现.
    • Java集合框架概述 天子之骄 Java集合框架概述
         集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
    • 旗正4.0页面跳转传值问题 何必如此 javajsp
      跳转和成功提示 a)        成功字段非空forward 成功字段非空forward，不会弹出成功字段，为jsp转发，页面能超链接传值,传输变量时需要拼接。接拼接方式list.jsp?test="+strweightUnit+"或list.jsp?test="+weightUnit+&qu
    • 全网唯一:移动互联网服务器端开发课程 cocos2d-x小菜 web开发移动开发移动端开发移动互联程序员
          移动互联网时代来了！     App市场爆发式增长为Web开发程序员带来新一轮机遇，近两年新增创业者，几乎全部选择了移动互联网项目！传统互联网企业中超过98%的门户网站已经或者正在从单一的网站入口转向PC、手机、Pad、智能电视等多端全平台兼容体系。据统计，AppStore中超过85%的App项目都选择了PHP作为后端程
    • Log4J通用配置|注意问题 笔记 7454103 DAOapachetomcatlog4jWeb
      关于日志的等级 那些去 百度就知道了！ 这几天 要搭个新框架  配置了 日志 记下来 ！做个备忘！ #这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~! log4j.rootLogger=INFO,allLog # DAO层 log记录到dao.log 控制台 和 总日志文件 log4j.logger.DAO=INFO,dao,C
    • SQLServer TCP/IP 连接失败问题 ---SQL Server Configuration Manager darkranger sqlcwindowsSQL ServerXP
      当你安装完之后,连接数据库的时候可能会发现你的TCP/IP 没有启动.. 发现需要启动客户端协议 : TCP/IP  需要打开 SQL Server Configuration Manager... 却发现无法打开 SQL Server Configuration Manager..?? 解决方法:  C:\WINDOWS\system32目录搜索framedyn.
    • [置顶] 做有中国特色的程序员 aijuans 程序员
      从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有些技术书读得可
    • document.domain 跨域问题 avords document
      document.domain用来得到当前网页的域名。比如在地址栏里输入：javascript:alert(document.domain); //www.315ta.com我们也可以给document.domain属性赋值，不过是有限制的，你只能赋成当前的域名或者基础域名。比如：javascript:alert(document.domain = "315ta.com");
    • 关于管理软件的一些思考 houxinyou 管理
      工作好多看年了,一直在做管理软件,不知道是我最开始做的时候产生了一些惯性的思维,还是现在接触的管理软件水平有所下降.换过好多年公司,越来越感觉现在的管理软件做的越来越乱. 在我看来,管理软件不论是以前的结构化编程,还是现在的面向对象编程,不管是CS模式,还是BS模式.模块的划分是很重要的.当然,模块的划分有很多种方式.我只是以我自己的划分方式来说一下. 做为管理软件,就像现在讲究MVC这
    • NoSQL数据库之Redis数据库管理(String类型和hash类型) bijian1013 redis数据库NoSQL
      一.Redis的数据类型 1.String类型及操作         String是最简单的类型，一个key对应一个value，string类型是二进制安全的。Redis的string可以包含任何数据，比如jpg图片或者序列化的对象。         Set方法：设置key对应的值为string类型的value
    • Tomcat 一些技巧 征客丶 javatomcatdos
      以下操作都是在windows 环境下 一、Tomcat 启动时配置 JAVA_HOME 在 tomcat 安装目录，bin 文件夹下的 catalina.bat 或 setclasspath.bat 中添加 set JAVA_HOME=JAVA 安装目录 set JRE_HOME=JAVA 安装目录/jre 即可； 二、查看Tomcat 版本 在 tomcat 安装目
    • 【Spark七十二】Spark的日志配置 bit1129 spark
      在测试Spark Streaming时，大量的日志显示到控制台，影响了Spark Streaming程序代码的输出结果的查看(代码中通过println将输出打印到控制台上)，可以通过修改Spark的日志配置的方式，不让Spark Streaming把它的日志显示在console   在Spark的conf目录下，把log4j.properties.template修改为log4j.p
    • Haskell版冒泡排序 bookjovi 冒泡排序haskell
      面试的时候问的比较多的算法题要么是binary search，要么是冒泡排序，真的不想用写C写冒泡排序了，贴上个Haskell版的，思维简单，代码简单，下次谁要是再要我用C写冒泡排序，直接上个haskell版的，让他自己去理解吧。     sort [] = [] sort [x] = [x] sort (x:x1:xs) | x>x1 = x1:so
    • java 路径 配置文件读取 bro_feng java
      这几天做一个项目，关于路径做如下笔记，有需要供参考。 取工程内的文件，一般都要用相对路径，这个自然不用多说。 在src统计目录建配置文件目录res,在res中放入配置文件。 读取文件使用方式： 1. MyTest.class.getResourceAsStream("/res/xx.properties") 2. properties.load(MyTest.
    • 读《研磨设计模式》-代码笔记-简单工厂模式 bylijinnan java设计模式
      声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 个人理解：简单工厂模式就是IOC; * 客户端要用到某一对象，本来是由客户创建的，现在改成由工厂创建，客户直接取就好了 */ interface IProduct {
    • SVN与JIRA的关联 chenyu19891124 SVN
      SVN与JIRA的关联一直都没能装成功，今天凝聚心思花了一天时间整合好了。下面是自己整理的步骤： 一、搭建好SVN环境，尤其是要把SVN的服务注册成系统服务 二、装好JIRA，自己用是jira-4.3.4破解版 三、下载SVN与JIRA的插件并解压，然后拷贝插件包下lib包里的三个jar，放到Atlassian\JIRA 4.3.4\atlassian-jira\WEB-INF\lib下，再
    • JWFDv0.96 最新设计思路 comsci 数据结构算法工作企业应用公告
                         随着工作流技术的发展，工作流产品的应用范围也不断的在扩展，开始进入了像金融行业(我已经看到国有四大商业银行的工作流产品招标公告了)，实时生产控制和其它比较重要的工程领域，而
    • vi 保存复制内容格式粘贴 daizj vi粘贴复制保存原格式不变形
          vi是linux中非常好用的文本编辑工具，功能强大无比，但对于复制带有缩进格式的内容时，粘贴的时候内容错位很严重，不会按照复制时的格式排版，vi能不能在粘贴时，按复制进的格式进行粘贴呢？ 答案是肯定的，vi有一个很强大的命令可以实现此功能 。     在命令模式输入:set paste，则进入paste模式，这样再进行粘贴时
    • shell脚本运行时报错误：/bin/bash^M: bad interpreter 的解决办法 dongwei_6688 shell脚本
      出现原因：windows上写的脚本，直接拷贝到linux系统上运行由于格式不兼容导致 解决办法： 1. 比如文件名为myshell.sh，vim myshell.sh 2. 执行vim中的命令 : set ff?查看文件格式，如果显示fileformat=dos，证明文件格式有问题 3. 执行vim中的命令 :set fileformat=unix 将文件格式改过来就可以了，然后:w
    • 高一上学期难记忆单词 dcj3sjt126com wordenglish
      honest 诚实的；正直的 argue 争论 classical 古典的 hammer 锤子 share  分享；共有 sorrow 悲哀；悲痛 adventure 冒险 error 错误；差错 closet 壁橱；储藏室 pronounce 发音；宣告 repeat 重做；重复 majority 大多数；大半   native 本国的，本地的，本国
    • hibernate查询返回DTO对象，DTO封装了多个pojo对象的属性 frankco POJOhibernate查询DTO
            DTO-数据传输对象；pojo-最纯粹的java对象与数据库中的表一一对应。       简单讲：DTO起到业务数据的传递作用，pojo则与持久层数据库打交道。         有时候我们需要查询返回DTO对象，因为DTO
    • Partition List hcx2013 partition
      Given a linked list and a value x, partition it such that all nodes less than x come before nodes greater than or equal to x. You should preserve the original relative order of th
    • Spring MVC测试框架详解——客户端测试 jinnianshilongnian
      上一篇《Spring MVC测试框架详解——服务端测试》已经介绍了服务端测试，接下来再看看如果测试Rest客户端，对于客户端测试以前经常使用的方法是启动一个内嵌的jetty/tomcat容器，然后发送真实的请求到相应的控制器；这种方式的缺点就是速度慢；自Spring 3.2开始提供了对RestTemplate的模拟服务器测试方式，也就是说使用RestTemplate测试时无须启动服务器，而是模拟一
    • 关于推荐个人观点 liyonghui160com 推荐系统关于推荐个人观点
          回想起来，我也做推荐了3年多了，最近公司做了调整招聘了很多算法工程师，以为需要多么高大上的算法才能搭建起来的，从实践中走过来，我只想说【不是这样的】     第一次接触推荐系统是在四年前入职的时候，那时候，机器学习和大数据都是没有的概念，什么大数据处理开源软件根本不存在，我们用多台计算机web程序记录用户行为，用.net的w
    • 不间断旋转的动画 pangyulei 动画
      CABasicAnimation* rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M
    • 自定义annotation sha1064616837 javaenumannotationreflect
      对象有的属性在页面上可编辑，有的属性在页面只可读，以前都是我们在页面上写死的，时间一久有时候会混乱，此处通过自定义annotation在类属性中定义。越来越发现Java的Annotation真心很强大，可以帮我们省去很多代码，让代码看上去简洁。 下面这个例子 主要用到了 1.自定义annotation：@interface，以及几个配合着自定义注解使用的几个注解 2.简单的反射 3.枚举
    • Spring 源码 up2pu spring
      1.Spring源代码 https://github.com/SpringSource/spring-framework/branches/3.2.x 注：兼容svn检出 2.运行脚本 import-into-eclipse.bat 注：需要设置JAVA_HOME为jdk 1.7 build.gradle compileJava { sourceCompatibilit
    • 利用word分词来计算文本相似度 yangshangchuan wordword分词文本相似度余弦相似度简单共有词
      word分词提供了多种文本相似度计算方式： 方式一：余弦相似度，通过计算两个向量的夹角余弦值来评估他们的相似度 实现类：org.apdplat.word.analysis.CosineTextSimilarity 用法如下： String text1 = "我爱购物"; String text2 = "我爱读书"; String text3 =
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他