BUAA开源软件开发导论第二次作业——关于csdn-datav的5个问题

作业要求

这个作业的要求是： https://bbs.csdn.net/topics/608215808

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

实战性问题

一、Node.js 16.x版本不兼容

在克隆该项目进行本地测试时，执行npm install 命令时发现如下报错信息：

npm ERR! gyp verb content checksum win-x64/node.lib 3ab87e9c27e2d49869fd15c7841c1674af56c9be3af1672c173621a3300f0e0d
npm ERR! gyp verb content checksum win-x86/node.lib a1abc3b3a13745dd883a21cbfe07f3162f6f61e8a9267d6e9de9c2b0a4abaa45
npm ERR! gyp verb download contents checksum {"node-v16.15.0-headers.tar.gz":"e0b0a2292179ab855357cefa704f797d7853b569f2d66bb7c313dd5cb36e063b","win-x64/node.lib":"3ab87e9c27e2d49869fd15c7841c1674af56c9be3af1672c173621a3300f0e0d","win-x86/node.lib":"a1abc3b3a13745dd883a21cbfe07f3162f6f61e8a9267d6e9de9c2b0a4abaa45"}
npm ERR! gyp verb validating download checksum for node-v16.15.0-headers.tar.gz (e0b0a2292179ab855357cefa704f797d7853b569f2d66bb7c313dd5cb36e063b == e0b0a2292179ab855357cefa704f797d7853b569f2d66bb7c313dd5cb36e063b)
npm ERR! gyp verb validating download checksum for win-x64/node.lib (3ab87e9c27e2d49869fd15c7841c1674af56c9be3af1672c173621a3300f0e0d == 3ab87e9c27e2d49869fd15c7841c1674af56c9be3af1672c173621a3300f0e0d)
npm ERR! gyp verb validating download checksum for win-x86/node.lib (a1abc3b3a13745dd883a21cbfe07f3162f6f61e8a9267d6e9de9c2b0a4abaa45 == a1abc3b3a13745dd883a21cbfe07f3162f6f61e8a9267d6e9de9c2b0a4abaa45)
npm ERR! gyp verb get node dir target node version installed: 16.15.0
npm ERR! gyp verb build dir attempting to create "build" dir: D:\IdeaProjects\csdn-datav\node_modules\node-sass\build
npm ERR! gyp verb build dir "build" dir needed to be created? D:\IdeaProjects\csdn-datav\node_modules\node-sass\build
npm ERR! gyp verb find VS msvs_version not set from command line or npm config
npm ERR! gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp verb find VS could not find a version of Visual Studio 2017 or newer to use
npm ERR! gyp verb find VS looking for Visual Studio 2015
npm ERR! gyp verb find VS - not found
npm ERR! gyp verb find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
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:\IdeaProjects\csdn-datav\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
npm ERR! gyp ERR! stack     at D:\IdeaProjects\csdn-datav\node_modules\node-gyp\lib\find-visualstudio.js:74:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\IdeaProjects\csdn-datav\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
npm ERR! gyp ERR! stack     at D:\IdeaProjects\csdn-datav\node_modules\node-gyp\lib\find-visualstudio.js:70:14
npm ERR! gyp ERR! stack     at D:\IdeaProjects\csdn-datav\node_modules\node-gyp\lib\find-visualstudio.js:372:16
npm ERR! gyp ERR! stack     at D:\IdeaProjects\csdn-datav\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at D:\IdeaProjects\csdn-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:527:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! System Windows_NT 10.0.22622
npm ERR! gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "D:\\IdeaProjects\\csdn-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:\IdeaProjects\csdn-datav\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.15.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

阅读报错信息后发现原因可能是Could not find any Visual Studio installation to use，

虽然与网络上类似报错信息有出入，但主要可以认为是部分依赖在本地的版本过高导致的不兼容。

尝试升级 node16 后 vue 项目中 sass 报错踩坑记录 - 简书 (jianshu.com)中的解决方案，重新安装相关依赖。

# 卸载node-sass sass-loader
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

二、未生效的postcss-pxtorem插件代码

在成功开始运行后，我发现了与(26条消息) 《开源软件开发导论》——第二次作业_Re_-Life的博客-CSDN博客中同样的问题。

尝试修改路径分隔符为 \\后，页面样式表现正常。

经查阅资料发现，该插件是用于网页适配移动端自动将像素单元生成rem单位的。而在本段代码中，由于网页是在本地Windows环境下运行的，与Linux下的路径分割符标准不同，可能导致代码判断条件失效，相关代码错误执行。

Unix使用斜杆/ 作为路径分隔符，而web应用最新使用在Unix系统上面，所以目前所有的网络地址都采用 斜杆/ 作为分隔符。

Windows由于使用 斜杆/ 作为DOS命令提示符的参数标志了，为了不混淆，所以采用 反斜杠\ 作为路径分隔符。所以目前windows系统上的文件浏览器都是用 反斜杠\ 作为路径分隔符。随着发展，DOS系统已经被淘汰了，命令提示符也用的很少，斜杆和反斜杠在大多数情况下可以互换，没有影响。

三、域名防盗链

开发文档中提到，用户头像图片服务器设置了域名防盗链，所以本地环境需要在*.csdn.net 域名下访问。

我们可以在C:\Windows\System32\drivers\etc路径下修改hosts文件，将loc.csdn.net指向IP：127.0.0.1。

经查阅，域名防盗链可以通过Nginx等进行简单地配置，服务器通过检查请求Header中的Referer地址来判断访问来源，以达到“防盗”的目的。

用户体验性问题

四、PC端UI地图缩放提示&榜单城市选择

在预览页面和本地进行测试使用时，我发现了一些用户使用时可能遇到的问题。

1.PC端网页在默认地图缩放下只能看到少数几个城市的活跃，且PC端的UI没有提示用户可以使用鼠标滚轮进行地图的缩放操作。建议在左侧或适当位置放置一缩放组件，也可以添加一个将焦点定位到当前城市的控件。

2.在展开的榜单中，地区列表将地级市简单堆列，用户难以找到想要找的城市。建议增设一个以省份划分的一级菜单。

以上建议我已提交到项目的issue，【建议】PC端UI地图缩放提示&榜单城市选择 (#41) · Issue · CSDN 技术社区 / csdn-datav · GitCode

前瞻性问题

五、项目商业化相关

在项目的Readme中有提及

- To学习者：如何从零开始建设一个数据可视化项目。（将发布内容共建任务从零开始用文字、图片、视频、代码等方式记录项目开发过程）
- ToC：付费（或会员）可查看更有价值的数据。（待议）
- ToB：设置广告位，接受B端付费广告。（暂定：广告投放需项目贡献者投票确定）

我认为这个项目最大的价值可能在于提供了一个社区贡献的可视化排行，将原力、铁粉等数据直观地向公众和开发者展示出来，而这正是一种对社区贡献者的激励，可能对于提高社区活跃度有较大积极作用。如此以来，该网站的商业价值即不限于单一网站，而是可以与CSDN社区高度绑定，促进开源社区生态建设。这样一来，实现付费（或会员）可查看更有价值的数据则显得有点难以成行。什么样的数据是值得付费的，又是可以脱敏的？当然，我认为广告位等简单的变现方式在适当程度内是完全可以接受的。

以上就是我对该项目的五个问题，对于该项目如有理解有误之处还请大家多多包涵指教。