利用业余时间，自己做了一个食物热量参考网站，数据参考自一个app食物库。技术栈使用了sass+react+react-router+redux+antd+express+mongoose。
node-health
一、How To Use
下载
首先将代码clone到本地
git clone https://github.com/1335382915/node-health.git
安装依赖包
cd node-health && npm i
引入数据并启动mongodb服务
要确保你已经安装了mongodb，然后在自己电脑上新建数据库文件夹（我的是E:\mongodbData\db）。在mongodb安装目录的bin文件夹下启动mongodb服务：
mongodb --dbpath="E:\mongodbData\db" --port 27017 -journal
启动成功后，数据库是没有任何数据的，我们需要将一些默认数据导入进来，我已经将这些数据导出成json了，你只需要重开一个命令行并输入：
mongoexport -d db -c category -o "E:node-health\db\category.json" --type json --port 27017 mongoexport -d db -c food -o "E:node-health\db\food.json" --type json --port 27017
这里推荐一个超轻量级数据库操作工具：adminMongo。
adminMongo
如果数据导入成功，那么在food和category表里会看到导入进来的数据，否则，你需要在adminMongo里自己手动创建这两张表，然后再导入数据就可以了。
启动前端服务
cd /e/node-health webpack --watch
用户：http://localhost:8888
管理员：http://localhost:8888/admin.html，用户名和密码均为admin
启动后台服务
cd /e/node-health node app
项目截图
node-health
分类
推荐食物
高热量食物
食物详情
搜索结果页
管理员登录页
后台管理页
添加食物
食物详情
修改食物
删除食物
二、说明
该项目适用于有一定前端基础（包括react和redux）和node.js基础的同学，如果你正在学习node，但又无法将一系列知识体系串起来，那么本项目同样适合你~
三、环境搭建
整体目录结构
controller：后端控制层
db：导出的数据库
json文件model：后端模型层
router：后端路由
src：前端代码
admin.ejs：管理员页面（模板引擎）
app.js：后端根文件
index.ejs：用户页面（模板引擎）
webpack.config.js：
webpack配置文件
前端
目录结构如下：
从头搭建webpack吧，由于用到了后台模板引擎，因此我们就不再单独用webpack启动一个服务了。
var path = require("path");var webpack = require("webpack");var OpenBrowserPlugin = require("open-browser-webpack-plugin");var ExtractTextPlugin = require("extract-text-webpack-plugin");var OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");//提高loader的解析速度var HappyPack = require("happypack");var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;var NoEmitOnErrorsPlugin = webpack.NoEmitOnErrorsPlugin;var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//externals配置的对象在生产环境下会自动引入CDN的对象，不会将node_modules下的文件打包进来var externals = { "React": "react", "ReactDOM": "react-dom"}//配置多入口文件，包括用户和管理员var entry = { "index": "./src/index.js", "admin": "./src/admin.js"};//最基本的webpack配置var webpackConfig = { entry: entry, output: { path: path.resolve(__dirname, "src/build"), filename: "[name].bundle.js"
}, externals: externals, devtool: "source-map", module: { rules: [
{ test: /\.js$/, exclude: /node_modules/, use: ["happypack/loader?id=babel"]
},
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader", options: { limit: 8192, name: "[name].[ext]"
}
}, { test: /\.css$/, exclude: /node_modules/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader"]
})
},
{ test: /\.scss$/, exclude: /node_modules/, use: ExtractTextPlugin.extract({ use: ["css-loader", "sass-loader"], fallback: "style-loader"
})
}
]
}, resolve: { extensions: [".js", ".json"]
}, plugins: [ new HappyPack({ id: "babel", loaders: [{ loader: "babel-loader", options: { presets: ["es2015", "stage-2", "react"]
}
}]
}), new CommonsChunkPlugin({ name: ["vendor"], filename: "vendor.bundle.js", minChunks: Infinity
}), new NoEmitOnErrorsPlugin(), new OpenBrowserPlugin({ url: "http://localhost:8888"
}), new ExtractTextPlugin("[name].bundle.css", { allChunks: false
}), //为了方便调试，暂时屏蔽
// new UglifyJsPlugin({
// minimize: true,
// output: {
// comments: false,
// beautify: false
// },
// compress: {
// warnings: false,
// drop_console: true,
// collapse_vars: true,
// reduce_vars: true
// }
// }),
new OptimizeCSSPlugin()
]
};module.exports = webpackConfig;之后，使用webpack --watch既可以完成打包。
后端
后端基于express和mongoose，用到了express-session和body-parser，所以我们先把这些包安装好：
npm i express mongoose express-session body-parser -S
然后我们看一下app.js：
const express = require("express");const mongoose = require("mongoose");const cookieParser = require("cookie-parser");const bodyParser = require("body-parser");const session = require("express-session");const app = express();
app.use(cookieParser());//解析post请求app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));//设置sessionapp.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true}));//设置存放模板文件的目录app.set("views", __dirname);//设置模板引擎为ejsapp.set("view engine", "ejs");//访问静态资源文件app.use(express.static("src"));
app.use(express.static(__dirname));
app.get("/", (req, res) => { return res.render("index", {
userName: "",
token: "",
hasLogin: false
})
})//连接mongodb，db为该工程的数据库名mongoose.connect("mongodb://localhost/db", function(err, db) { if(err) {
console.log("连接失败");
process.exit(1);
} else {
console.log("连接成功")
}
})
app.listen("8888", () => {
console.log("server created!");
})运行node app：
我们还可以使用supervisor实现代码更新功能，只需要npm i supervisor -g然后用supervisor app代替node app即可。每次代码有了变更都会自动帮你重启服务器。
环境搭建结束
到此步为止，环境搭建已经结束，项目也可以成功跑起来了，只不过没有任何内容，剩下的就是一步一步写业务。
四、CSRF防范
在写业务之前，简单实现了一下CSRF的防范，我的做法是管理员登录成功后，后端直接在页面中生成一个script标签，标签内包含了简单的登录信息和token。之后管理员每一次与后端交互都要发送这个token，由后端校验token，如果不一致，则直接返回，不再执行正常逻辑。
模板引擎
由后端生成script标签，让我最先想到了模板引擎，因此我使用了ejs来实现该功能，这也是为什么用户页面和管理员页面的后缀不是html的原因。我们看一下admin.html里面的内容吧：
当管理员登录成功后，就可以全局访问userInfo了。
下面我们看一下登录的逻辑：
const login = module.exports = (req, res) => { const {userName, password} = req.body; const session = req.session; //用户名和密码正确，保存session，并告知前端登录成功
if(userName === "admin" && password === "admin") { if(session) { if(session.user) {
res.json({ retCode: -1, retMsg: "您已登录过了"
})
} else {
session.user = {
userName,
password
}
res.json({ retCode: 0, retInfo: {}
})
}
} else {
res.json({ retCode: -1, retMsg: ""
})
}
} else {
res.json({ retCode: -1, retMsg: "用户名或密码错误"
})
}
}中间件
管理员登录成功后，session里面保存了登录信息，那么下一步就是生成token并将其和用户登录信息渲染到页面中。在asp.net和java中有一个叫做拦截器的东西，它的作用就是拦截所有请求，包括ajax请求和资源请求，在其中做一些操作然后控制请求是否继续往下执行，就像一个管道一样。在express中，中间件的作用和其是一样的，我们看一下中间件的代码：
//app,jsconst interceptor = require("./controller/interceptorCtrl");
app.use((req, res, next) => {
interceptor(req, res, next);
})//interceptorCtrl.jsconst jwt = require('jsonwebtoken');const interceptor = module.exports = (req, res, next) => { let url = req.path; //页面请求，判断session是否有值，如果有的话则生成token并将userName、token、hasLogin渲染到页面上
if(!!(~url.indexOf(".html"))) {
url = url.replace(/\//g, ""); const page = url.split(".")[0]; //将用户登录信息和token返回给前台
if(req.session.user) { const token = jwt.sign({name: "token"}, "node-health", {expiresIn: 600}); const { userName } = req.session.user;
res.render(page, {
userName,
token, hasLogin: true
})
} else {
res.render(page, { userName: "", token: "", hasLogin: false
})
}
next();
} //如果是ajax请求并且请求接口来自管理员，那么校验请求参数中的token是否正确，不正确的话则直接返回retCode 500
else if(!!(~url.indexOf("/api/admin"))) { let token = ""; const method = req.method.toLowerCase(); if(method == "get") {
token = req.query.token;
} else {
token = req.body.token;
}
jwt.verify(token, "node-health", function (err, decoded) { if (!err) { if(decoded.name !== "token") { return res.json({ retCode: 500, retMsg: "csrf"
})
} else {
next();
}
} else { return res.json({ retCode: 500, retMsg: "csrf"
})
}
})
} else {
next();
}
}功能很简单：如果是页面请求，则判断session是否有用户信息：如果有的话说明登录成功了，生成token并将其和登录信息渲染到页面上；如果没有登录信息，则渲染空值即可，执行next()让请求继续往下执行。如果是ajax请求，获取请求参数中的token并解密，校验值的正确性：如果不正确，则直接返回错误信息，请求不再往下执行；如果正确，执行next()让请求继续往下执行。
五、写一个Ajax吧
我们以管理员获取所有分类为例，看一下前后端分别是如何实现的。
前端
组件在componentDidMount阶段发起server的请求 --> 等待后端返回数据 --> 发起action --> reducer中保存数据 --> 更新视图
由于用户和管理员都需要获取分类列表，因此我将分类的server和action都划分到了用户模块。
src/components/admin/center.js
import { bindActionCreators } from "redux";import { connect } from "react-redux";import * as server from "../../server/adminServer";
...
componentDidMount() { this.props.actions.getCategory({token: userInfo.token}, null, res => message.error(res.retMsg));
}
render() { return ( <div>
...
{/*渲染分类列表*/}
{this.props.category.map((item, index) => (<div>...</div>)} </div>
)
}
...// 将actions绑定到props上const mapDispatchToProps = (dispatch) => ({ actions: bindActionCreators(server, dispatch)
});//将state绑定到props上const mapStateToProps = (state) => ({ category: state.adminReducer.category
});export default connect(mapStateToProps, mapDispatchToProps)(AdminCenter);src/server/adminServer.js
这里使用到了redux-thunk。
...
import * as action from "../action/userAction";export function getCategory(successBK, errorBK) { return (dispatch, getState) => { return getData(url.SERVER_ADMIN + url.GET_CATEGORY).then(res => { if(res.retCode == 0) {
dispatch(action.getCategory(res.retInfo));
successBK && successBK(res.retInfo);
} else {
errorBK && errorBK(res);
}
}, e => console.log(e))
.catch(e => console.log(e))
}
}src/actionType/userAction.js
...export function getCategory(category) { return { type: types.GET_CATEGORY,
category
}
}src/reducer/adminReducer.js
...
const defaultState = { category: []
}const adminReducer = (state = defaultState, action) => { switch(action.type) { case types.GET_CATEGORY:
return Object.assign({}, state, { category: action.category
}) default: return state;
}
}export default adminReducer;后端
中间件拦截请求，校验token并继续执行 --> 路由映射 --> 转发给控制层 --> 处理并返回数据
app.js
...const adminRouter = require("./router/adminRouter");
app.use("/api/admin", adminRouter);
...router/adminRouter.js
const express = require("express");const category= require("../controller/user/category");const router = express.Router();
...//调用控制层router.get("/getCategory", (req, res) => {
category.getCategory(req, res);
})module.exports = router;controller/user/category
const models = require("../../model/index");//从数据库中读取分类并返回给前端const getCategory = (req, res) => {
models.Category.find((err, result) => { if(err) {
res.json({ retCode: -1, retMsg: "mongoose error"
})
}
res.json({ retCode: 0, retInfo: result
})
})
}module.exports = {
getCategory
}
六、图片上传
管理员添加和修改食物信息时需要上传图片。如果只是练习的话，可以将图片保存到本地并将图片绝对路径保存到数据库中。但是，我们来个更加贴切真实项目的吧，将图片保存到图片服务器中~
我们将图片保存到七牛云存储系统中，你需要先注册个账号，官网地址在这里。
在管理控制台 --> 对象存储 --> 内容管理中可以看到已经存储的图片：
下一步要做的就是前端上传图片发送给后端，后端上传到七牛云并将图片链接保存到数据库。
前端上传图片
使用<input type="file" />实现图片选择。默认样式比较丑，因此我自己重写了样式：
然后要做的就是使用formData对象将图片信息发送给后端。
const fileEle = this.refs.file;const file = fileEle.files[0];
let formData = new FormData();
formData.append("imgUrl", file);
formData.append("name", this.state.name);
...this.props.actions.addFood(formData);后端接收图片
后端接收图片需要用到multiparty插件，你只需要npm i multiparty -S即可。
//controller/admin/foodHandler.jsconst multiparty = require("multiparty");const addFood = (req, res) => { const form = new multiparty.Form();
form.parse(req, (err, fields, files) => { console.log(fields); console.log(files);
})
}
上传到七牛云
我们需要使用到七牛云的node sdk，npm i qiniu -S。使用文档请访问Node.js SDK。
我们首先要做一些配置：
//七牛云图片域名const domain = "http://ox6gixp8f.bkt.clouddn.com/";//两个密钥，可以在七牛云的个人中心的密钥管理中找到const accessKey = "qVavZs09FHGxYJdaC-1ZDQeqJVbJQAbyOPnBGu5g";const secretKey = "I4Y4lXRbZz4zL7t2llASK5Lg8Eo5zKEna_uTCPfe";//定义鉴权对象macconst mac = new qiniu.auth.digest.Mac(accessKey, secretKey);//空间名，请和你的七牛云空间名保持一致const bucket = "sunnychuan";//上传的凭证const options = {
scope: bucket,
expires: 7200};//生成凭证const putPolicy = new qiniu.rs.PutPolicy(options);//生成tokenconst uploadToken = putPolicy.uploadToken(mac);//初始化configconst config = new qiniu.conf.Config();// 空间对应的机房config.zone = qiniu.zone.Zone_z0;//七牛云图片上传对象const formUploader = new qiniu.form_up.FormUploader(config);const putExtra = new qiniu.form_up.PutExtra();接下来要做的就是将图片信息上传到七牛云：
const file = files.imgUrl[0];const localFile = file.path;const temp = file.path.split("\\");const key = temp[temp.length - 1]; //xxx.jpgformUploader.putFile(uploadToken, key, localFile, putExtra, (respErr, respBody, respInfo) => { if(respInfo.statusCode == 200) { const imgUrl = domain + respBody.key; //保存到数据库即可
}
})我们可以在七牛云上看到已经上传的图片：
结束语
本项目从功能上来说只是简单的CRUD，但用到的技术比较多，也是为了给自己做一个整体技术栈的实战，后期还可以考虑添加分页和排序功能。
如果你觉得对你有帮助，欢迎star~，如果有任何疑问或bug，也欢迎提供issue。
作者：Mescal川
链接：https://www.jianshu.com/p/1aa1a0e0e254
随时随地看视频
