资讯专栏INFORMATION COLUMN

从segmentfault爬数据到 用koa2,vue全家桶,mongodb开发一个segmentf

ChristmasBoy / 2682人阅读

摘要:注意网站中用的所有技术可以交流学习不要以线上环境运行,因为源码中没有包含相关文件中的,授权登陆需要自己配置账号密码只有读取权限交流群

前言

线上环境小包总

技术栈

服务器: node、koa2

客户端: vue、vuex、vue-router、Element-UI

数据库: redis、mongodb

打包: webpack

网站模块

爬虫模块:用于爬取一些我看的上的文章,主要采用request,cheerio模块对数据的爬取和处理,

</>复制代码

  1. 同时需要注意处理爬取图片的处理

文章模块:展示爬取的文章数据,并进行分类处理和展示

登录注册模块: 支持用户的登录注册,接入第三方登录接口,注册采用nodemailer模块进行邮箱验证

留言模块: 让用户在本网站留下自己的足记

统计模块: 统计网站访问量等数据

爬虫模块

segmentfault的文章不用登录就能查看,所有可用访问url就能取到文章的内容,唯一需要的注意的是请求的图片链接要做特殊的处理,最开始本来我是用的盗链的形式,后面过了一段时间segmentfault不允许盗链了,没办法只能从自己网站加载了。

</>复制代码

  1. 在segmentfault中图片的src中带有?,&符号这中特殊的符号(应该是图片服务器的原因),并且也没有图片的后缀
  2. 、所以我在爬取图片的时候就需要处理特殊符号,和加后缀
  3. let imgError = false, imgPath = (imgSavePath + src).replace(/?|&/g, "_");
  4. //替换特殊符号
  5. let writeFile = fs.createWriteStream(imgPath), extname;
  6. request(_src || (addr + src), {timeout: 60000}).on("response", function(response){
  7. if(response.statusCode.toString().indexOf("4") == 0){
  8. self.remove();
  9. imgError = true;
  10. resolve2();
  11. return;
  12. }
  13. extname = path.extname(response.request.path);
  14. //在响应头中获取文件后缀
  15. if(!extname && response.headers["content-type"].indexOf("image") != -1){
  16. extname = "." + response.headers["content-type"].split("/")[1];
  17. if(extname.indexOf("svg") != -1){
  18. extname = ".svg";
  19. }
  20. }
  21. let imgSrc = _src ? src : src + extname;
  22. self.attr("src", imgSrc);
  23. }).on("error", function(err){
  24. writeLog("请求图片失败: "+ (_src||src)+ " 来至url: "+ url, true);
  25. self.remove();
  26. imgError = true;
  27. reject2();
  28. }).pipe(writeFile);
  29. writeFile.on("finish", function(){
  30. if(imgError){
  31. return ;
  32. }
  33. if(extname){
  34. let imgPath = (imgSavePath + src).replace(/?|&/g, "_");
  35. //添加后缀
  36. if(fs.existsSync(imgPath)){
  37. try{
  38. if(src.indexOf(".") != -1){
  39. resolve2("自带后缀: "+ src);
  40. return;
  41. }
  42. fs.renameSync(imgPath, imgPath + extname);
  43. writeLog("修改图片: " + imgPath + extname);
  44. }catch(e){
  45. writeLog("修图图片失败原因: ."+ src + extname + "
  46. " + e, true);
  47. }
  48. resolve2(imgPath + extname);
  49. }else {
  50. writeLog("图片不存在: ."+ src+ " 来至url: "+ url, true);
  51. reject2(url);
  52. }
  53. }
  54. });

文章中的代码样式,需要自己用highlight模块去添加。
然后就是把文章的关键信息,如文件的url,时间,作者,保存到数据库,把文章的真正的html保存为一个文件,然后根据url去加载本地的html。

注意

网站中用的所有技术可以交流学习

不要以线上环境运行,因为源码中没有包含https相关文件

config.js中的github,qq授权登陆需要自己配置

mongodb账号密码只有读取权限

QQ交流群

</>复制代码

  1. 133240225、 193572405

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84816.html

相关文章

  • segmentfault数据 koa2vue全家mongodb开发一个segmentf

    摘要:注意网站中用的所有技术可以交流学习不要以线上环境运行,因为源码中没有包含相关文件中的,授权登陆需要自己配置账号密码只有读取权限交流群 前言 线上环境小包总 showImg(https://segmentfault.com/img/bVTvhf?w=1297&h=763); 技术栈 服务器: node、koa2 客户端: vue、vuex、vue-router、Element-UI 数...

    aaron 评论0 收藏0
  • vue2全家+koa2+mongodb搭建一个简单伪全栈博客

    摘要:本来不想推的,看到上有个项目很简单,都有,推推看咯。虽然这个项目很简单,但是还蛮有趣,用来入门和以及再好不过了。 本来不想推的,看到github上有个项目很简单,都有300 star,推推看咯。虽然这个项目很简单,但是还蛮有趣,用来入门vue2和nodejs以及mongodb再好不过了。 等这几天把公司手头的事情忙完,再把vuex的部分强化下。 基于vue2/vuex/vue-rout...

    bitkylin 评论0 收藏0
  • 阿里云centOS部署vue全家+node+koa2+mongo项目

    摘要:启动和停止设置开机自启配置阿里云服务器端口此项不是必须,本地连接远程数据库调试查看方便些就开启由于只开启了一些基础端口如,其他都关闭,要自己配置。 写在前面 文章有丢丢长,前端开发第一次部署项目,有问题请及时提出,以免误导其他童鞋,轻拍~, 更新系统 sudo yum update 安装mongo 1. 添加MongoDB源 在/etc/yum.repos.d/下创建名为mongodb...

    newtrek 评论0 收藏0

发表评论

0条评论

ChristmasBoy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<