查看: 927|回复: 0

[JavaScript/JQuery] nodejs实现静态服务器与react前端搭配

发表于 2017-8-8 12:00:10
句号论坛
基于v6.10.3版本 1. 实现静态服务器
  1. const http = require('http');
  2. const url = require('url');
  3. const path = require('path');
  4. const fs = require('fs');
  5. /**
  6. 1. 拼静态文件路径
  7. 2. 根据具体的mimeType返回相应数据
  8. 3. 静态服务器,无非就是html,css,js,png等。
  9. **/
  10. http.createServer((req, res) => {
  11. let pathname = url.parse(req.url).pathname;
  12. // 文件夹路径特殊处理
  13. if (pathname.indexOf('.') == -1) {
  14. pathname += './index.html';
  15. }
  16. // 把url路径变成 ./static路径
  17. let realUrl = './' + path.normalize('./static/' + pathname);
  18. const extname = path.extname(pathname);
  19. // 读文件
  20. fs.readFile(realUrl, (err, data) => {
  21. // 取mimetype
  22. getMimeType(extname, mime => {
  23. res.writeHead(200, {
  24. 'content-type': mime + ';charset=utf-8'
  25. });
  26. res.end(data);
  27. });
  28. });
  29. }).listen(3000);
  30. function getMimeType(extname, callback) {
  31. // 取mime.json文件,key是extname,value是mimeType
  32. fs.readFile('./mime.json', (err, data) => {
  33. const mimes = JSON.parse(data);
  34. callback(mimes[extname]);
  35. });
  36. }
复制代码
2. 简单react项目

基于dva创建简单react项目(https://github.com/dvajs/dva/...)

  1. npm i dva-cli -g
  2. dva new user-dashboard
  3. cd user-dashboard
  4. npm run build
复制代码

把编译好的dist文件夹下的东西全部拷贝到之前node项目的static文件夹下,重新访问http://localhost:3000,完成了。



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条