关于csdn-datav项目的一些疑问（北航开源软件导论第二次作业）

Smily^-^

已于 2022-09-24 00:10:05 修改

阅读量882

点赞数 1

文章标签：开源软件前端大数据

于 2022-09-23 23:09:57 首次发布

本文链接：https://blog.csdn.net/weixin_51903460/article/details/127019406

版权

这个作业的要求是：第二次作业：对你感兴趣的开源项目提问题

我提问的开源项目是：csdn-datav

我的合作者是：Deeeeex.的博客_CSDN博客-领域博主

我与Deeeeex.采用线上合作的方式共同完成了本篇博客，首先我们在多个项目中选定了数据可视化这个项目，对这个项目的技术栈以及最后的实现效果都十分感兴趣；在合作中我们都尝试在本地运行了代码，我记录了自己在本地运行时遇到的一些问题以及解决方案，而Deeeeex.在本地运行时发现了侧边栏格式错误的问题，我们尝试解决并验证了其他贡献者提出的改进方案；在使用项目的过程中，Deeeeex.提出了增加用户浏览时的参与感的想法，而我提出了关于地区检索易用性方面的一些改进建议；最后Deeeeex.阐述了对于项目商业化后续服务的思考。

实战性问题

本地运行代码时遇到的问题以及解决方案

由于在软工团队中一直承担前端任务，我本人对CSDN数据可视化的任务十分感兴趣。在尝试在本地运行代码时踩了一些坑，不过后来都一一解决了。Learning by doing，在这里也记录一下自己遇到的一些问题以及解决方案，也许能帮助到一些遇到同样问题的伙伴。

node.js 16.x版本不兼容

在clone项目到本地后直接执行npm install会报出以下错误：

npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (D:\study\datav\node_modules\node-gyp\lib\find-visualstudio.js:121:47)        
npm ERR! gyp ERR! stack     at D:\study\datav\node_modules\node-gyp\lib\find-visualstudio.js:74:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\study\datav\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
npm ERR! gyp ERR! stack     at D:\study\datav\node_modules\node-gyp\lib\find-visualstudio.js:70:14
npm ERR! gyp ERR! stack     at D:\study\datav\node_modules\node-gyp\lib\find-visualstudio.js:372:16
npm ERR! gyp ERR! stack     at D:\study\datav\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at D:\study\datav\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:406:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
npm ERR! gyp ERR! command "D:\\Applications\\node.js\\node.exe" "D:\\study\datav\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\study\datav\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.14.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

尝试多种办法之后，发现可能是node.js 16.x版本不兼容的问题（我所用的node版本是v16.14.0），解决方法如下：

# 卸载
npm uninstall node-sass sass-loader

#重新安装 
npm i sass-loader sass -S -D

# 全局安装 vue/cli
npm install -g @vue/cli

# 更新项目中的vue-cli依赖
vue upgrade

# Sass
npm install -D sass-loader@^10 sass

执行以上操作之后报错解决（可参考升级 node16 后 vue 项目中 sass 报错踩坑记录）。

设置本地开发环境host

解决完node的报错之后，在serve时又出现了以下报错：

 INFO  Starting development server...
[10%] building (0/0 modules)
D:\study\datav\node_modules\webpack-dev-server\lib\Server.js:2472
        throw error;
        ^

Error: getaddrinfo ENOTFOUND loc.csdn.net
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26) {
  errno: -3008,
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'loc.csdn.net'
}

是由于没有认真阅读开发文档导致的，建议大家还是要认真读一下开发文档。

由于用户头像图片服务器设置了域名防盗链，所以本地环境需要在*.csdn.net 域名下访问，避免开发环境头像不显示问题域名与与vue.config.js 配置保持一致

27.0.0.1 loc.csdn.net

我们需要更改本地的Hosts文件，具体的更改流程可以参考vs code配置修改hosts文件配置本地域名。

成功在本地运行

上述两个问题解决完后已经可以在本地成功build了，但一开始网页无法访问，重启项目后解决。

App running at:

  - Local:   http://loc.csdn.net:8080/
  - Network: http://loc.csdn.net:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

本地部署访问时侧边栏格式错误

问题描述

我克隆了这个项目，并尝试在本地运行，但是在本地运行npm run serve指令访问http://loc.csdn.net:8080/csdn-datav/force时发现与官方网站https://map.csdn.net/csdn-datav/force的画面比例不一致（浏览器比例均为100%），具体体现在侧边栏的显示不全。关于这个问题我已经提交了一个issue本地部署访问时侧边栏格式错误 (#42) · Issue · CSDN 技术社区 / csdn-datav · GitCode

这是官网的显示情况

而这是本地部署后访问的情况

可以看到侧边栏的显示比例导致文字显示不全

尝试解决

在尝试解决前我浏览了该项目的PR，发现相同的问题已经有社区成员提交了PR，于是我翻阅了该成员的博客《开源软件开发导论》——第二次作业，并尝试了其中的解决方案，该问题已成功解决。

使用型问题

关于增加用户浏览时的参与感

如果用户从csdn其他网站跳转过来，是否考虑根据登录用户的id把用户的原力值也显示在榜单下方，并显示本人排名或者是类似于“距离上榜还差xxx原力值”的展示效果。

关于地区检索的易用性

目前对于地区的定位主要靠地图点击城市，但对于用户对想要查看的城市地理位置并不明晰的场景，根据城市名称的查找就显得尤为重要。目前对于地区的选择采用了下拉框，但候选项的排序似乎并无章法，用户想通过名称检索变得十分困难，建议后续可以增加关键字检索或者首字母检索等方式，便于用户对城市名的快速检索。