简介
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Express 是基于Node.js 平台,快速、开放、极简的 web 开发框架。
Nodejs+Express可以让前端人员自定义API接口并实现调用。
这样写项目就方便多了，数据想怎么写就怎么写。
过程
1.新建项目文件夹
mkdir nodejs-express-react
2.初始化package.json
cd nodejs-express-react && npm init
3.安装需要的依赖
全局安装babel webpack webpack-dev-server
npm install babel webpack webpack-dev-server -g
项目安装webpack webpack-dev-server html-webpack-plugin（在build里生成自动引用bundle.js的html文件）
npm install webpack webpack-dev-server html-webpack-plugin –save
项目安装express框架
npm install express –save
项目安装react和react-dom
npm install react react-dom –save
项目安装Babel转换器，解析jsx
npm install babel babel-loader babel-core babel-preset-react babel-preset-latest –save
项目安装jquery
npm install jquery –save
4.创建项目文件
- webpack.config.js
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./entry.js',
output:{
path:path.join(__dirname, '/build'),
filename:"bundle.js"
},
devServer:{
inline:true,
port:3000
},
module:{
loaders:[
{
test:/\.js?$/,
loader:'babel-loader',
query: {
presets: ['react', 'latest']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html'
}),
new webpack.HotModuleReplacementPlugin()//热加载
],
resolve: {
modules: [path.resolve(__dirname,'node_modules')]
}
}- .babelrc（jsx=>js配置）
{
"presets": [
"latest",
"react"
]
}- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- entry.js （react入口文件）
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));- server.js （express服务器文件）
var express = require('express');
var app = express();
var _data = {
"id":"1",
"name":"zysoft",
"sex":"男",
"age":"23"
}
app.get('/introduce',function(req,res){
res.send(_data);
})
app.listen(8888,function(){
console.log('listening on *:8888');
});
- app.js（react组件文件）
import React,{Component} from 'react';
import $ from 'jquery';
export default class App extends Component {
componentDidMount(){
$.get('http://localhost:8888/introduce',function(data){
console.log(data);
})
}
render(){
return(
<p style={{
margin:'20px',
fontFamily:'幼圆'
}}>按F12查看获取到的数据</p>
)
}
}
运行
1.运行配置：在package.json中找到scripts标签，若没有则添加
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
"build": "webpack",
"server": "node server.js",
"start": "start http://localhost:3000"
},2.运行过程：（dev和server需要保留所以要开不止一个终端）
npm run build
相当于执行webpack命令，会自行查找webpack.config.js，根据配置生成build文件夹，并在该目录下生成bundle.js和自行引用bundle.js的index.html文件
npm run server
相当于执行node server.js 打开设定好的8888端口/开启服务。
npm run dev
相当于执行webpack-dev-server –devtool eval –progress –colors –hot –content-base build，这句话可以使页面有热更新的功能，即更改完代码，不用重新打包并执行webpack-dev-server，在页面自行刷新查看更改后的结果。
npm start
相当于执行start http://localhost:3000，自行打开浏览器并访问localhost:3000，查看结果。
打开F12查看控制台信息。
注意这里的报错：
很明显的跨域问题！
有人说使用$.ajax() 把dataType属性设置为”jsonp”就可以解决，但是这样实行后会报错“Unexpected token :”，这是因为你写入的明明是json格式，用jsonp来解析当然会有格式的问题。这里不推荐使用此方案。
主要的解决方案还是要在header上下功夫
理解header原理：
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
http://kb.cnblogs.com/page/92320/
Access-Control-Allow-Origin 允许的域
Access-Control-Allow-Headers 允许的header类型
打开我们的server.js，加入以下代码设置跨域访问：
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});重新生成
刷新页面
获取到自定义的api数据就可以任意的在前端页面上展示了~
github源码地址：https://github.com/zhaoyu69/nodejs-express-react
有问题欢迎指出，如果有用 欢迎star★。