现在node.js 使用的框架有 Express，koa 还有分别基于nest.js 和 egg.js 。据说nest.js 可以和 java 的 String 有得一比。
express 和 koa 属于 个人或者玩具的东西，学习一下就好了。
后面两个框架的话，都比较好.egg.js thinkphp 的影子[可能这就是我选择egg.js的原因]
还有就是cnode 这个网站 两个版本都有
egg.js 和 版本会比 express的版本 打开快那么几毫秒。
如果做论坛什么的话
可以直接区 github 上找cnode 这个作者算市不错了，把自己的 网站 业务逻辑什么都公开了。
不过就算公开对他也妹多大的影响，毕竟他会运营 哈哈哈
而 express 的话 比较老了，不过还是比较好用的 比较有了 async awiat 后
所这么多，也是给新手一个参考，和一些新型公司在选择框架上一个建议吧
这里这要说的市egg.js 的上传。
首先我们在
#route.js中添加一个路由规则
router.post('/upload',controller.upload.index);
在controller中新建upload文件
'use strict';
//node.js 文件操作对象
const fs = require('fs');
//node.js 路径操作对象
const path = require('path');
//egg.js Controller
const Controller = require('egg').Controller;
//故名思意 异步二进制 写入流
const awaitWriteStream = require('await-stream-ready').write;
//管道读入一个虫洞。
const sendToWormhole = require('stream-wormhole');
//当然你也可以不使用这个 哈哈 个人比较赖
//还有我们这里使用了egg-multipart
const md5 = require('md5');
class UploadController extends Controller {
async index() {
const ctx = this.ctx;
//egg-multipart 已经帮我们处理文件二进制对象
// node.js 和 php 的上传唯一的不同就是 ，php 是转移一个 临时文件
// node.js 和 其他语言（java c#） 一样操作文件流
const stream = await ctx.getFileStream();
//新建一个文件名
const filename = md5(stream.filename) + path
.extname(stream.filename)
.toLocaleLowerCase();
//文件生成绝对路径
//当然这里这样市不行的，因为你还要判断一下是否存在文件路径
const target = path.join(this.config.baseDir, 'app/public/uploads', filename);
//生成一个文件写入 文件流
const writeStream = fs.createWriteStream(target);
try {
//异步把文件流 写入
await awaitWriteStream(stream.pipe(writeStream));
} catch (err) {
//如果出现错误，关闭管道
await sendToWormhole(stream);
throw err;
}
//文件响应
ctx.body = {
url: '/public/uploads/' + filename
};
}
}
module.exports = UploadController;
这里使用的是 antd 的上传组件
还有就是 这里我使用的市自己搭建的一个 egg + react 框架，思路和 laravel 的差不多。
并没有使用 egg的服务端渲染，因为这样做的话，就像违背了 React + webpack 的传统，因为在使用next.js的时候 有时候的axios 的思路 你就要变成 node.js的 爬虫思路
https://github.com/rainbowMorelhahahah/egg-react-webpack-react-router
这里市地址，可以参考下
import React, {PureComponent} from 'react';
import {withRouter} from 'react-router-dom';
import {Upload, Icon, message} from 'antd';
class UploadThumb extends PureComponent {
constructor(props) {
super(props);
this.state = {
loading: false,
imageUrl: ""
};
}
handleChange(info) {
const {imageUrl} = this.state;
if (info.file.status === 'uploading') {
this.setState({loading: true});
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
this.getBase64(info.file.originFileObj, imageUrl => this.setState({imageUrl, loading: false}));
}
}
getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
message.error('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJPG && isLt2M;
}
render() {
const uploadButton = (
<div>
<Icon
type={this.state.loading
? 'loading'
: 'plus'}/>
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="/upload"
beforeUpload={this
.beforeUpload
.bind(this)}
onChange={this
.handleChange
.bind(this)}>
{this.state.imageUrl
? <img src={this.state.imageUrl} alt=""/>
: uploadButton}
</Upload>
);
}
}
export default withRouter(UploadThumb);
网友评论