Webpact打包React后端Node+Express

Webpact打包React后端Node+Express

前言

React官方推荐用Browserify或者Webpack 来开发React组件。

Webpack 是什么？是德国开发者 Tobias Koppers 开发的模块加载器。Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了。在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等..Webpack 都有对应的模块 loader，如下文中将用到jsx-loader来加载带react语法的js文件

Express 是目前最流行的 Node.js Web MVC开发框架，最受 Web 开发人员欢迎。使用其强大的功能，开发人员可以创建单页和多页，和混合模式的 Web 应用程序。本实例用Json数组模拟实现数据model模块，在Express框架下实现Restful API

[1]后端

一、安装及配置环境[window环境]

1、打开命令行,安装监听代码变更可自动重启node服务器的supervisor

npm install -g supervisor

在开发nodejs程序，调试的时候，无论你修改了代码的哪一部分，都需要重启服务才能生效。Node.js的这种设计虽然有利于提高性能，却不利于开发调试，因为我们在开发过程中总是希望修改后立即看到效果，而不是每次都要终止进程并重启。supervisor 可以帮助你实现这个功能，它会监视你对代码的改动，并自动重启 Node.js。

2、命令行全局安装Nodejs MVC框架express。

注意：如果运行有问题可以加上版本号安装。

npm install -g express

3、使用Express创建项目

cd E:\nelson\test\express\    

express -t ejs commentbox

cd commentbox

npm intall

如上：命令行下先定位到自己的目录E:\nelson\test\express\ ，再输入express -t ejs commentbox创建项目，此时，会自动生成一个commentbox文件夹。文件夹里面面会有model、public、routes和views文件夹，还有app.js和package.json两个文件。再命令行cd commentbox定位到commentbox文件夹下，然后输入npm install（这是必需的），此时，目录下会多出node_modules文件夹，这是node模块文件夹。

二、编写代码

1、添加model文件E:\nelson\test\express\commentbox\model\comments.js

exports.comments = [
  { author : ‘小明‘, text : "Nothing is impossible, the word itself says ‘I‘m possible‘!"},
  { author : ‘小强‘, text : "You may not realize it when it happens, but a kick in the teeth may be the best thing in the world for you"},
  { author : ‘小兵‘, text : "Even the greatest was once a beginner. Don‘t be afraid to take that first step."},
  { author : ‘拉登‘, text : "You are afraid to die, and you‘re afraid to live. What a way to exist."}
];

      用json数组模拟后台数据，当然可以直接去连数据库，写数据库连接配好model就可以了。

2、修改应用入口文件E:\nelson\test\express\commentbox\app.js

/**
 * Module dependencies.
 */

var express = require(‘express‘);
var routes = require(‘./routes‘);
var comment = require(‘./routes/comment‘);
var http = require(‘http‘);
var path = require(‘path‘);

var app = express();

// all environments
app.set(‘port‘, process.env.PORT || 3000);
app.set(‘views‘, path.join(__dirname, ‘views‘));
app.set(‘view engine‘, ‘jade‘);
//app.use(express.favicon());
app.use(express.logger(‘dev‘));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(express.bodyParser());
app.use(app.router);
app.use(express.static(path.join(__dirname, ‘public‘)));

// development only
if (‘development‘ == app.get(‘env‘)) {
  app.use(express.errorHandler());
}

app.get(‘/‘, routes.index);
app.get(‘/comments‘, comment.list);
app.get(‘/comments/:id‘, comment.get);
app.delete(‘/comments/:id‘, comment.delete);
app.post(‘/comments‘, comment.add);
app.put(‘/comments/:id‘, comment.update);  

http.createServer(app).listen(app.get(‘port‘), function(){
  console.log(‘Express server listening on port ‘ + app.get(‘port‘));
});

红色部分是自己加上去的，定义好增删改查api接口。代码书写方式遵从CommonJS规范

3、增加路由/控制器配置文件E:\nelson\test\express\commentbox\routes\comment.js

/*
 * GET comments listing.
 */

var comments = require(‘../model/comments‘).comments;  

exports.list = function(req, res){
  res.json(comments);
};  

exports.get = function(req, res){
   if(comments.length <= req.params.id || req.params.id < 0) {
    res.statusCode = 404;
    return res.send(‘Error 404: No comment found‘);
  }
  var q = comments[req.params.id];
  res.json(q);
};  

exports.delete = function(req, res){
  if(comments.length <= req.params.id) {
    res.statusCode = 404;
    return res.send(‘Error 404: No comment found‘);
  }  

  comments.splice(req.params.id, 1);
  res.json(true);
};  

exports.update = function(req, res){
  res.setHeader(‘Content-Type‘, ‘application/json;charset=utf-8‘);
  for(var i=0;i<comments.length;i++){
    if(comments[i].author==req.body.author){
      comments[i] = req.body;
      res.send({status:"success", message:"update comment success"});
      console.log(comments);
    }
  } 

};  

exports.add = function(req, res){
  if(!req.body.hasOwnProperty(‘author‘) ||
     !req.body.hasOwnProperty(‘text‘)) {
    res.statusCode = 400;
    return res.send(‘Error 400: Post syntax incorrect.‘);
  } 

  var newComment = {
    author : req.body.author,
    text : req.body.text
  }; 

  comments.push(newComment);
  res.json(true);
};

这里比较清晰的定义了增删改查的请求处理

4、命令行输入supervisor app.js，ok，现在打开浏览器输入localhost:3000你就可以运行并测试API接口了，也可以使用postman或者curl来测试，本例只用上了get与add请求。

supervisor app.js

浏览器打开http://localhost:3000/comments 

结果如下：

[
  {
    "author": "小明",
    "text": "Nothing is impossible, the word itself says ‘I‘m possible‘!"
  },
  {
    "author": "小强",
    "text": "You may not realize it when it happens, but a kick in the teeth may be the best thing in the world for you"
  },
  {
    "author": "小兵",
    "text": "Even the greatest was once a beginner. Don‘t be afraid to take that first step."
  },
  {
    "author": "拉登",
    "text": "You are afraid to die, and you‘re afraid to live. What a way to exist."
  }
]

浏览器打开http://localhost:3000/comments/1

结果如下：

{
  "author": "小强",
  "text": "You may not realize it when it happens, but a kick in the teeth may be the best thing in the world for you"
}

后端到此结束！

[2]前端

一、配置前端环境1、添加Webpack配置文件E:\nelson\test\express\commentbox\webpack.config.js

module.exports = {
    entry: [
      ‘./public/assets/js/entry.js‘
    ],
    output: {
        path: __dirname + ‘/public/assets/‘,
        publicPath: "/public/assets/",
        filename: ‘bundle.js‘
    },
    module: {
        loaders: [
          { test: /\.js?$/, loaders: [‘jsx-loader?harmony‘] }
        ]
    }
};

webpack.config.js是webpack默认的配置文件。如果改了文件名要重新执行：webpack --config webpack.config.js 这样的命令，如果不改文件名就直接输入webpack就会自动打包文件。

2、命令行安装各种依赖模块。



npm install -g webpack（如果没安装wepack的话需要全局安装）npm install --save-dev jsx-loader


npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev marked
npm install --save-dev jquery


二、编写前端js代码


1、编写react 留言版组件：E:\nelson\test\express\commentbox\public\assets\js\commentbox.js




var React = require(‘react‘);
var ReactDOM = require(‘react-dom‘);
var marked = require(‘marked‘);
var $ = require(‘jquery‘);

var Comment = React.createClass({
  rawMarkup: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    );
  }
});
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = this.refs.author.value.trim();
    var text = this.refs.text.value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    this.refs.author.value = ‘‘;
    this.refs.text.value = ‘‘;
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="你的名字" ref="author" />
        <input type="text" placeholder="说些什么..." ref="text" />
        <input type="submit" value="发表" />
      </form>
    );
  }
});

var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: ‘json‘,
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    // TODO: submit to the server and refresh the list
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.ajax({
      url: this.props.url,
      dataType: ‘json‘,
      type: ‘POST‘,
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>我的留言板</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

module.exports = CommentBox; 




这例子代码直接与react官方代码一样，只是改成了CommonJs风格。注意:webpack尊从CommonJS规范，使用起来非常方便，require相应的模块，如$ = require(‘jquery‘)，就可以直接使用jQuery，当然要先npm安装了要使用的模块。


2、webpack入口js文件：E:\nelson\test\express\commentbox\public\assets\js\entry.js




var React = require(‘react‘);
var ReactDOM = require(‘react-dom‘);
var CommentBox = require(‘./CommentBox‘);

ReactDOM.render(
    <CommentBox url="/comments" pollInterval={2000} />,
    document.getElementById(‘commentbox‘)
 );




可参考第1点配置文件里面定义好入口js文件，名称和路径要一致。


3、添加留言版静态html页面：E:\nelson\test\express\commentbox\public\html\index.html




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的留言板</title>
</head>
<body>
    <div id="commentbox"></div>
    <script src="/assets/bundle.js"></script>
</body>
</html>




bundle.js文件就是webpack打包好的js文件，引用进来就可以直接看到效果。


4、命令行输入webpack打包js文件


webpack


这时，根据配置文件，在目录E:\nelson\test\express\commentbox\public\assets下会自动生成bundle.js文件


5、好，大功告成；这时在刚才打开的浏览器页面修改url地址为：http://localhost:3000/html/index.html，效果如下：




在页面上面测试发表留言，测试通过，OK


前端React代码参考自官方教程，略有改动


－－React Tutorial https://facebook.github.io/react/docs/tutorial.html


后端Restful API接口参考自


－－NODE.JS AND EXPRESS - CREATING A REST API http://blog.modulus.io/nodejs-and-express-create-rest-api


－－nodejs+Express实现Restful的web应用 http://blog.csdn.net/jthink_/article/details/9708087




标签: node, express, supervisor, react, Webpact, jsx-loader
				


				
时间： 2024-07-31 21:19:04 

		


		


	

	
	

		


		
Webpact打包React后端Node+Express的相关文章


								

		

			

                手把手教你webpack、react和node.js环境配置（上篇）
			

		

		

									

				很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node没兴趣的可以只看这篇. 这里是下篇链接:手把手教你webpack.react和node.js环境配置(下篇) 我把所有代码都放到了github上面供参考:webpack-react-express环境配置 1. 什么是webpack? Webpack 是当下最热门的前端资源模块化管理和打包工具.它可			

		

	

				

		

			

                前端基于react,后端基于.net core2.0的开发之路（1） 介绍
			

		

		

									

				文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数据初始化 3.前端基于react,后端基于.net core2.0的开发之路(3) 各个技术栈配置和说明 4.前端基于react,后端基于.net core2.0的开发之路(4) 前端路由,模型,服务的说明 5.前端基于react,后端基于.net core2.0的开发之路(5) 配置node层,s			

		

	

				

		

			

                前端基于react,后端基于.net core2.0的开发之路（2） 开发环境的配置，注意事项，后端数据初始化
			

		

		

									

				前端环境配置 项目介绍文章:前端基于react,后端基于.net core2.0的开发之路(1) 介绍 1.VSCode安装 下载地址:https://code.visualstudio.com/Download 2.node下载 下载地址:https://nodejs.org/en/ V8.9.1版本下载 3.cnpm安装 在安装完node后,npm默认就安装了,因为某种原因,npm下载组件包的速度太慢了,所以需要安装cnpm 安装命令 npm install -g cnpm --regist			

		

	

				

		

			

                Redux+React Router+Node.js全栈开发
			

		

		

									

				详情请交流  QQ  709639943 01.Java深入微服务原理改造房产销售平台 02.跨平台混编框架 MUI 仿豆瓣电影 APP 03.Node.js入门到企业Web开发中的应用 04.Redux+React Router+Node.js全栈开发 05.Java秒杀系统方案优化 高性能高并发实战 06.企业级刚需Nginx入门,全面掌握Nginx配置+快速搭建高可用架构 07.快速上手Linux 玩转典型应用 08.全面系统讲解CSS 工作应用+面试一步搞定 09.Java Spring			

		

	

				

		

			

                一：练手的项目简介（node express  vue  elementui  axios）
			

		

		

									

				一:项目基本构造 项目一共有 16 个页面,是一个电商网销项目,自己在网上的某网上找的一个要做的网站的设计图: 页面主要包括:  登录页 -- 注册页 -- 首页 -- 产品列表页 -- 产品详情页 -- 会员中心页 -- 我的购物车页 -- 支付页 -- 支付成功页 -- 支付失败页 -- 评价页 -- 评价详情页 -- 我的订单页 -- 订单详情页 -- 确认订单页 -- 收货地址列表页: 后端技术: node express  mongo: 前端技术:vue-cli  elementui 			

		

	

				

		

			

                Node+Express+node-mysql 实战于演习 全套mysql(增删改查)
			

		

		

									

				最近这段时间研究Node感觉不错,自己做了一个增删改查,虽然有些简陋,但是思想是想通的,其实所有项目都是增删改查,有助于初学者快速掌握Node 首先 本实例展示的是基于Node+Express+node-mysql快速搭建的一套增删改查,视图模板是jade,基本上都是现在能用的到的技术,市面上的实例也特别少,有用的又不新,所以自己写一个 基本工作 首先我们准备一些基本的,因为我是用mysql麻烦可以自己装一下mysql,去官网可以下各种操作系统的安装包. 实例就一张表,下面是这张表的建表语句 S			

		

	

				

		

			

                node+express+mongodb初体验
			

		

		

									

				从去年11月份到现在,一直想去学习nodejs,在这段时间体验了gulp.grunt.yeomen,fis,但是对于nodejs深入的去学习,去开发项目总是断断续续. 今天花了一天的时间,去了解整理整个学习思路,以下是我的学习分享,是入门级学习体验适合node+mongodb开发小白,node已玩过很久的大神这篇文章可能不适合. 开篇来个例子: 客户端表单页面: <!DOCTYPE HTML> <html lang="en-US"> <head> &			

		

	

				

		

			

                Node Express 初探
			

		

		

									

				一如既往,先上一张图 Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. 关于Express更多相关知识请链接至官网http://www.expressjs.com.cn/ 1.访问本地服务 在指定的目录中创建app.js 1 //express 2 var express = require('express'); 3 //app核心 4 var app = express(); 5 //get 6 app.get('/', function (req, res			

		

	

				

		

			

                node Express 创建一个web应用
			

		

		

									

				环境安装的node版本是最新的,下个月会发布4.0,把io.js合并进来. [[email protected] myExpressApp]$ node --version v0.12.7 npm和node版本中的npm版本更新是不同布的,我们要经常更新npm包, [[email protected] ~]$ npm install --g npm /home/doctor/opt/node/bin/npm -> /home/doctor/opt/node/lib/node_modules/np