首先话不多说，先介绍一下网站

snaketao数据可视化展示网站

时间

不清楚，一两百个小时吧，毕竟四五次作业都在里面，只能说改版了很多次，你们只看到了目前这一的版本的光鲜亮丽，其实背地里还有99个版本

技术

框架vue3+falsk，以及一大堆js库（axios，d3，d3-cloud，echarts，element-plus，jquary,p5,vue-router,veux,bootstrap，sparkline，nicescroll，animateNumbers，videobackground，flot，graphTable，raphael，rickshaw，morris，easypiechart，justgage，mmenu。。。。） 主要用到的库还是 d3，jquary，样式主要是element-plus和bootstrap,python后端的库内容就不必多说，反正也不少，数据库当然也必不可缺，普普通通mysql就行，增和查的语法要熟练，我反正值用到了这俩

人员

由snaketao一人开发，前端界面的样式抄了一大部分（bootstrap的都是其实）

结构

肯定是要套的vue@cli脚手架的框架的
顶部导航栏和侧边导航栏，放在App.vue内，其他页面的跳转通过vue-router，确保导航栏一直存在
view内放每个页面的内容，components内放一些经常用到的组件，比如元素透明背景加上头部文字介绍这个组件，提示信息组件等等，网页内所有看到的提示信息框都是套的这个组件

assets内放很多静态文件，
注意，这里面的文件不会被转义，里面的js文件啥的需要是es5的语法，否则部分浏览器不兼容

每个板块的小介绍

home

这个板块要么是用的很简单的插件，要么就是搬运的，丰富一下主页而已，对比各种js插件，发现他们在echarts面前都是弟中弟，到官网一看，原来是Apache的，那就合理了。。

这俩插件只能做这个仪表盘，非常简陋，用着还行，样式也还过得去

mirrors这个插件相对功能多那么一丢丢，用法也非常简单

这个插件做的图标给我的感觉是比较简陋，差评，看着也没有上面mirrors那么优雅

这个是搬运的旭日图，echarts制作的，操作起来功能特别多，所以用法也相对复杂。但是太强大了，无敌！

这个是我持有近半年的股票，目前已经亏了几大千了，哎。不得不说，导入数据就可以生成k线图

以上就是借用各种工具生成的图（用的很爽）

分形树

分形树1

这个弱爆了，但是是第一次作业，我把动画去掉后也放在这展示吧，没啥可说的，代码一共20多行

分形树2

这颗树老好看了，js代码都接近200行了，随机的数值取的正态分布，一级棒

分形树3

这个代码和第二个用的一套，但是吧，这差距咋就这么大呢。。主要是字太小了看不见，而且我的字都是很短的，应付了事

直方图

到这开始进入d3的使用，直方图画出来不难，但是但是想要这个东西封装成一个函数就比较复杂了，因为得考虑到多种情况，还有就是得适应大部分数据，不能说数据名字和内容变了，直方图就挂了。
数据的获取部分参考这篇文章
网易云加密表单破解
这里数据获取还是将爬虫系统单独分开了，爬虫存入数据库，前端从数据库拿，时间可以错开，主要是因为爬取的太慢了，爬取一次得十来秒，而且不可能一直爬，肯定得有个间隙，我设置的半小时，所以前端获取的数据有一定的时延，最多也就半个小时，网页上的交互主要是利用d3.on添加原生事件，这里函数获取的参数需要好好说一下，

这里的第一个参数和第二个参数(mouseover后面函数传递的俩参数)究竟是啥，函数执行完毕，他们的生命周期是否结束了？

其实不难发现，第一个参数是一个事件，里面的东西就老多了，那么通过d3就可以很轻松的操作的DOM元素，当然用jquary也可以，我有的就是用的jquary，第二个功能更多更方便，但是此时毕竟在d3函数内部，用jquary显得杂乱无章了，
第二个参数就是数据，这个东西并没有消亡，一直都存活着，为啥要放两个参数进来呢？因为我们可能会在原来的基础上做一些改变，比如在原来的size上加大20啥的，这个时候用第二个参数非常方便，当我们想单纯改变DOM属性时，通过d3.select(参数1.target)或者$(参数1.target)就可以了开始操作DOM,简直不要太爽。而且有一个必须放俩参数的原因，那就是vue3 script setup这个语法内没有this，这简直太可怕了。

哦对，提一嘴，任何想获取DOM元素实例的操作都必须在页面组件加载完成后，这涉及到vue的生命周期了，那么简单的解决办法就是，网页加载时（就是一打开网页就要出现这个图）需要获取DOM放在onMounted内部，之后的人为操作的事件需要获取DOM实例的不用管，随便放，

哦对，再提一嘴，获取DOM时这个元素一定要存在，如果此时是v-if="false"的情况，就必须先让组件显示完整，在获取这个DOM，否则也是获取不到的，因为v-if会使DOM组件每次都会“重新”加载。

饼图

前一篇博客也有介绍，反正我的目的就完完整整的封装，让将来的我用着更方便，只暴露出一个函数，只需要导入，使用就行，参数当然是可以设置的越多越好




在写这篇博客的时候，北京今天新增感染人数为0，还是可喜可贺，

饼图的参数有这些，直方图当然还是直接用的上面封装的函数了，真的是香啊，颜色我都没改
值得一提的是这个四幅图的切换效果，我用的v-show，因为我的这四幅图实际上是进入这个页面都加载好了
所以所有的svg操作内容都要在onMounted内部，且，四个需要被挂载的svg必须真实存在，否则也会出问题，所以使用了v-show这个方法只是单纯的改变DOM的css内的display，DOM本身还是存在的，所以仍然可以选取到这个DOM元素

由于vue的数据是响应式数据，我只需要改变参数就可以实现图的切换，当然这儿要么使用全局变量，要么把响应式数据传递给子组件，但是我这儿是用的vue-router，所以干脆用全局变量好了，这样子组件也能监听到数据的变化而改变DOM的css里的display

可以看到我把所有的switch开关都放在了一个列表，通过vue渲染，通过设置一个父id，当此时显示的是父id时，这个组件才会显示，非常的秒，那么这个switch改变了什么呢？其实就把全局函数的值改为true或false，判断条件就是自己的checked是否变化，两个二值参数，可以有四种组合，刚好每个对应一个图，妙哉。

提一嘴，全局变量可以通过vuex或mixins来设置，但是由于vue3没有this，所以我用了在main.js添加config.globalProperties的方法，获取这个值就通过获取proxy来获取值

词云图

这个没啥特别的了，主要也是用到了d3.layout.cloud.js，然后自己随便改改参数，于是我有把两年前写的python文件加了进来，通过python的wordloud做词云图的可以选择，背景遮罩，字体样式，还有自己输入一段文本，通过结巴分词自动去统计词语出现的次数，非常方便，前端post到后端提交参数（输入的文本，字体，背景），后端生成并返回一个链接，然后通过jquary添加到图片的src，这里也是先提前用v-show将显示图片的占位隐藏。其实你使用的时候会发现，我做了一个小验证，字数不够是不允许提交的。这也是为了最终的效果，这里的部分样式都是使用的element-ui Plus的。

奇淫技巧

跨域的问题也在这说一下吧，简单来说就是一台主机的两个端口不能互相访问

我们主需要做一些小小的欺骗就行，当然本地和服务器的欺骗还不能一样
本地:设置vite.config.js或者vue.config.js (我是vite的框架)

vue的写法有出入，大致原理相同，相当于一个代理，简单来说，你需要欺骗服务器服务器，让它以为获取的信息是 127.0.0.1:3000(自己的端口)/api/... 实际上是从127.0.0.1:8000(后端的端口)/...，就这样
服务器也是一样，只不过是用nginx，原理一样也就不再展示,（早知道早用，这个东西是一劳永逸的）

关于flask服务端部署后不能访问静态资源

发现会出现这样的情况，自己的window是可以的，没有任何问题，但是部署到服务器就不行了，目前我还没有解决，但是我通过一个小trick，因为我的网站的根目录是可以访问到静态资源的，所以我干脆让python存到网站根目录下。。完美。

npm run build

打包会出现很多情况，比如在index.js通过<script>引入的静态资源都不会转义，且不会放到编译的dist里面，需要自己手动移动，然后更改路径。且静态的js记得不要用es6的语法，目前任然有少部分浏览器不支持，build过程会自动将vue里面的es6语法转义，除了<script>引入的

(piao)wps的字体

wps有很多很多好看的字体，超级会员可以免费下载字体，下载的字体在下面这个目录，非常好用
C:Users用户名AppDataRoamingkingsoftoffice6docerFonts

部署服务器还会出现一个bug，vue的webpack打包的资源，vue-router路径是虚拟的，当路由使用history模式时，二级页面刷新会出现404

解决方案还是niginx，也是重写路由起到一个代理的作用

location / {
    try_files $uri $uri/ @router;
    index index.html;
}
location @router {
    rewrite ^.*$ /index.html last;
}