使用 Vue+axios+Echarts 绘制关系图遇到的坑

2022-02-19

最近做毕设,后端采用的是Spring boot,通过Neo4jRepository从neo4j中获取数据,前端框架是Vue,通过axios请求后端数据,并处理成符合Echarts规范的数据格式,之后Echarts进行渲染。在前端渲染数据的过程中遇到好多坑。 首先是如何对后端返回的数据进行处理。后端返回的数据格式是这样的: [ { "id": 1, "name": "CSS" }, { "id": 2, "name": "Javascript", "derives": [ { "id": 3, "name": "Vue.js" } ] }, { "id": 3, "name": "Vue.js" }, { "id": 171, "name": "前端技术", "includes": [ { "id": 1, "name": "CSS" }, { "id": 2, "name": "Javascript", "derives": [ { "id": 3, "name": "Vue.js" } ] }, { "id": 172, "name": "HTML", } ] }, { "id": ....

搞懂逻辑覆盖

2022-02-19

逻辑覆盖 逻辑覆盖是通过对程序逻辑结构的遍历实现程序的覆盖 分为以下几种 语句覆盖 Statement coverage 判定覆盖 Decision coverage 条件覆盖 Condition coverage 条件/判定覆盖 Condition/decision coverage 条件组合覆盖 Condition combination coverage 路径覆盖 Path coverage 例子 Path: L1(a → c → e) L2(a → b → d) L3(a → b → e) L4(a → c → d) 语句覆盖 Statement coverage 语句覆盖的要求是使所有可执行语句至少执行一次 以上图为例,所有的可执行语句都在L1上,只要选取一个用例A=2,B=0,x=3即可满足语句覆盖 判定覆盖 Decision coverage 使每个判定获得一种可能的结果至少一次。 选取用例 A=2,B=0,x=3 覆盖了L1 A=1,B=1,x=1 覆盖了L2 使每个判定的结果都获得了一次 条件覆盖 Cond....

使用 Gitalk 实现静态页面评论的功能 有更新!

2022-02-19

使用静态页面的理由 本人在Github上使用github.io部署了一个静态主页,地址是http://aopstudio.github.io,用于存放一些笔记文件。虽然静态页面功能少,自动化程度低,不过github.io的优点在于页面完全随自己设计,html,css和javascript全部随由自己安排,同时不需要自己的服务器资源。而且不少Github用户都会设置github.io作为自己的展示页面,也算是一个潮流。 更大的理由——Markdown Preview Enhanced插件太强大。。。 我使用的Markdown写作工具是VS code搭配其中的Markdown Preview Enhanced插件,功能相当强大,尤其是其中的脚本语言画图像的功能让我爱不释手。在该插件内可以使用脚本语言(比如DOT语言)画出矢量图,包含流程图、时序图、有向图、无向图等等,目前我还没有发现其他Markdown渲染工具可以达到相同的功能。Github中的Markdown语言据说是对原生Markdown进行了功能增强,但是连$\TeX$公式都不支持,和MPE插件比起来更是差了十万八千里(这里要夸一下....

使用 nginx 和 tomcat 配置反向代理和动静分离

2022-02-19

背景 本人主修的编程语言是Java语言,因此最开始接触的Web开发也是JSP技术。使用Java开发的Web应用需要部署在专门的服务器程序上运行,比如Tomcat。但是一般很少会有人将Tomcat作为用户直接访问的服务器的,一般都是使用nginx或者Apache进行反向代理。我使用的是nginx。nginx是一个俄罗斯程序员开发的服务器程序,它本身只能提供静态资源的服务,但它的优点在于并发访问量可以达到非常大的水平。 反向代理的优点 反向代理的主要优点是提高并发访问数。单独一个Tomcat服务器能提供的并发访问数不高,如果在主机上部署多个Tomcat服务器,使用nginx进行反向代理,动态调整用户的请求到不同的Tomcat服务器(这个过程称为负载均衡),就可以使并发访问量和单个Tomcat服务器相比得到成倍的提升。 动静资源分离也常常和反向代理在一起被提起,比如你部署了一个Java Web应用,这是一个动态资源,需要Tomcat提供服务(由反向代理实现),但你的网站上同时还有其他的比如纯HTML的网页、图片等等静态资源,这些静态资源就可以由nginx直接提供给访问者,减少了调用Tomca....

使用 particles.js 实现网页背景粒子特效

2022-02-19

得知途径 B3log提供了两套博客系统,一个是用Java开发的,叫做Solo,我也是在网上搜索Java博客系统时发现了它,之后才了解了B3log;还有一个是用Go语言开发的,叫做Pipe.其中Solo是需要自己在自己的云主机上搭建的,而Pipe可以选择自己搭建,也可以使用B3log搭建好的服务. 在Pipe的主页,背景使用了一个非常酷炫的粒子特效,而且还能和鼠标指针互动。 我最近正好在学习网页制作,就想着如果能把这个背景放到我自己的网页上就好了。一般这种效果不会是网页开发者自己写的,而是去调用一些别人写好的js或者css文件来完成。我在Pipe的主页点击右键,选择检查,界面变成下图 可以看到果然有一个叫做particles-js-canvas-el,那么基本可以确定这个效果就是由particles.js实现的。去百度搜索particles.js,果然找到了相关的资料。 基本配置 到官网下载paritcles.js的文件包,解压之后里面有一个demo文件夹。我们将该文件夹复制出来,并对该文件夹中的文件进行修改即可。 该文件夹中有一个index.html文件,我们打开它,找到其中的 &....

软件工程形式化方法初学体会

2022-02-19

最近在上一门叫做新技术讲座的课,我估计好多同学是看到讲座这两个字感觉这课会很水才选的,但实际上这门课讲的内容是非常硬核的软件工程形式化方法,而且授课老师也是国内第一批研究软件工程形式化方法的教授,现任日本埼玉大学教授,且上课非常认真负责,每节课都有课堂练习。不过了解了软件工程形式化的概念后,发现这个研究方向真的了不得,简直可以颠覆整个软件行业。 在早期的软件开发过程中,开发者们往往拿到问题后就直接开始编码,软件往往会出现各种各样的问题,大部分软件的质量十分低下,被称为“软件危机”。为了解决软件质量低下的问题,人们提出了软件工程化的思想,也就是目前主流的软件开发方式,引入了从需求分析到最后编码实现这一系列的过程,以及需要遵守的一系列规范,并定义了如CMMI这样的规范性等级。然而软件工程里面有很多内容的规范是非常主观的,没有一个确定的评定标准,另外很多步骤只能尽量争取正确,但根本无法确保正确,比如对于软件的测试,在软件测试这门课中就了解到全覆盖基本上是不可能完成的,并提出了语句覆盖、判定覆盖、条件覆盖等一系列只能尽量争取正确的测试覆盖。而且在执行的过程中,就算是CMMI 5级的开发单位也往....

三种实现 AJAX 的方法以及 Vue 和 axios 结合使用的坑

2022-02-19

前言 之前曾经想自己写一个天气的App,并找到了一个免费的天气数据接口的服务商——和风天气,当时也不懂怎么发HTTP请求,而且也只会用Java语言,看到官方文档里面有一个Java代码示例,就复制了一下在自己电脑上调通。一开始是在控制台输出天气数据的,后来用Swing写了一个图形化界面并放置数据,但也就到此为止了,并没有什么实用价值。 最近学习了一下前端的相关知识,发现像和风天气这样的数据接口,根本不需要用到像Java这样的大型语言,只需在网页端用Javascript发HTTP请求就能获得JSON数据,之后再渲染到HTML网页,大大节省了资源利用和开发时间,并了解到开发这样的网页最适合的方式就是使用AJAX,因为它可以实现网页的局部更新。这样我就可以实现如下的业务场景:输入想要搜索的城市,点击搜索,下面显示出该城市的天气信息,而不影响页面的其他内容。有时候JS调用AJAX请求会有跨域问题,但和风天气的数据接口并没有这个问题。 具体场景 界面如图: 在输入框输入城市名,点击搜索按钮,可以在下面显示出各项数据(从接口获得)。 大致的HTML代码如下: <div class="cont....

使用 docsify 并定制以使它更强大

2022-02-19

背景 经常在网上看到一些排版非常漂亮的技术手册,左边有目录栏,右边是Markdown格式的文档,整个配色都十分舒服,就像一本书一样,一看就很让人喜欢。就比如Markdown Preview Enhanced的文档.目前网上我了解的有两种工具可以实现这样的效果,一种叫做docsify,另一种叫做Gitbook。因为MPE文档用的是docsify,而且据docsify自己的宣传,说是 不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件,所有转换工作都是在运行时进行。 这将非常实用,如果只是需要快速的搭建一个小型的文档网站,或者不想因为生成的一堆 .html 文件“污染” commit 记录,只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。 所以我也就用它来做吧。这里先放上我的成品:https://aopstudio.github.io/docs 入门基础 具体的一些基本操作它的官方文档上面都已经写得很明白了,我就不再赘述了,官方文档地址:https://docsify.js.org/#/zh-cn/ 。....

在 Markdown 中使用数学公式

2022-02-19

背景 $\TeX$是一款经典的文本排版软件,由计算机科学界的巨匠高德纳(Donald E. Knuth)开发。高德纳有一套著名的书籍叫做《计算机程序设计的艺术》,他在写这本书的时候觉得当时其他的排版工具的效果都不能让自己满意,于是就自己开发了一套排版工具。这让我想到Ken Thompson和Dennis Ritchie为了玩一个游戏而开发出了Unix操作系统,然后为了继续完善Unix操作系统而开发出了C语言的故事,简直如出一辙。大神们总能做出一些平常人想都不敢想的事情。 $\TeX$可以为一整篇文献排版出非常漂亮整洁的效果,尤其对于数学公式的支持特别好,因此在学术界,特别是理工学界非常通用,IEEE等著名学会都要求以$\TeX$格式提交论文。我曾经尝试使用了一下,感觉排版出来的效果真的是非常专业,但是如果只是写短篇笔记的话和Markdown比起来速度慢很多,于是我还是选择了Markdown作为写笔记的工具。但是原生的Markdown是不支持数学公式的,而我作为理工科的学生经常需要记下数学公式,不过Markdown可以通过扩展语法的方式来使用$\TeX$语法的数学公式,很多Markdow....

本博客启用 https 的过程 有更新!

2022-02-19

申请SSL证书 我的博客部署在阿里云服务器上,因此我就先搜索阿里云启用https的方法,网上有比较详细的讲解,在此提供一个参考网址: https://blog.csdn.net/cslucifer/article/details/79077831 修改nginx配置文件 我的博客设置了nginx作为前置服务器反向代理Tomcat的内容,因此需要配置的是nginx的证书而不是Tomcat的。我看了一下阿里云官方文档中证书下载页的详情文档,nginx的配置方法比Tomcat简单很多,哈哈,看来真是一个明智的选择。 这个时候出现了一个问题,我找不到nginx的配置文件nginx.conf了。按照网上说的nginx安装目录死活找不到。没办法,只能动用Linux的查找文件的功能了。Linux有若干个不同的查找文件的方法。其中find是最简单粗暴的命令,就是在指定目录中一个个地找,速度比较慢。另一个命令是locate,它的执行速度很快,因为是在建立了文件索引的数据库中查找。我之前并没有使用过locate命令,只是在书上看到过,这次是第一次实际操作。当我输入locate nginx.conf时,意想....