昨晚正准备睡觉,化学老师一个微信过来,便准备开始干活(绝对不是为了GPA)。
需求:元素周期表的网页
在全球最大的同性交友网站上搜索了一番之后,我锁定了如下项目:
kadinzhang/Periodicity
首先分析源码,查看项目的结构:
可以发现,是用Vue做的纯前端(所以我们就可以瞎搞了)。(不过之前没碰过Vue,所以使用传统的猜测API大法进行修改)
首先,二话不说,先:
cnpm install
Bash
复制
注:使用cnpm
的淘宝源只是为了快一点
然后
npm run build
Bash
复制
npm run start
Bash
复制
编译项目,启动项目。但是很遗憾,发现端口被占用,所以需要修改启动端口。但是非常恶心的是不能在config.js
里面改(试过了,无效),需要:
然后跑一把可以发现跑得起来,如果你只是想跑,这样其实就行了。
由于我懒得给apache2
配置二级域名与泛解析,所以想要直接在目录下新加一个文件夹直接解析,即:gyrojeff.top/periodicity/
但是新的问题又产生了(烦),如果直接把dist
目录扔到服务器上去的话,我们会发现加载不出,即,空白页。
为了解决这个问题,分析dist
目录中的index.html
可以发现是css
和js
引用的路径出了问题。
经过分析后,我发现作者在config/index.js
当中给出了配置选项:
按照自己的情况配置即可,这里我由于需要速度优化,就直接把生成的static文件扔到了腾讯云COS上面。
做完这些之后,我们build
一把再上传文件到VPS,可以发现解决了大部分问题。
但是,仍有一个问题尚未解决。由于这个网站启用了pjax
,跳转页面的时候虽然不会直接刷新,但是会修改地址栏,我们可以发现,加载完毕后会自动修改地址:
而且,到别的子页面以后,一刷新就会404. 经过一系列的问题排查,基本上锁定了问题在两个文件:
src/router/index.js
src/components/home/PeriodicTable.vue
进行修改(具体问题请具体分析,照搬我的修改是不行的):
这样就能把router
的问题解决了。
初次使用Vue
,感觉这种设计模式是一种好文明((以后有时间一定学,以及,互联网真的是太伟大了(确信)
注:此项目使用的开源协议为MIT协议
之所以要放到自己的服务器上其实是因为原网站periodicity.io的速度实在太慢了,为了教学效果需要做的国内迁移(绝对不是因为减轻自己服务器压力才用COS的),加快速度。
真香!配置了二级域名呢(((
地址:https://periodicity.gyrojeff.top/
本文作者:博主: gyrojeff 文章标题:记录 | 元素周期表的开源网页
本文地址:https://cloud.tencent.com/developer/article/1827306
版权说明:若无注明,本文皆为“gyro永不抽风!”原创,转载请保留文章出处。
许可协议:署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 转载请保留原文链接及作者!
我的博客即将同步至腾讯云+社区,邀请大家一同入驻