榕城候佳人的博客

第二步，在绘制地图的vue组件中导入该json文件。解释第三个import，world可以随便改名字，在下面第三步注册地图的时候对应第二个world。第三步，定义图表并配置图表。注意在注册地图的时候，第一个是地图的名称，第二个是在import的时候给json文件取的名字。核心步骤：下载对应的地图文件；在script中导入json文件；下面给出完整代码（script），template部分只需要设置对应的图表id即可。之前所查找的资料都没有讲清楚如何引入地图文件并绘制地图，下面做一个记录。

今日绘图需要用到echarts的地图json文件，但是github上已经找不到了，后发现伟大的网友提供了地址如下：Index of /examples/data/asset/geo

时，可以展示多行数据。之前查找资料的时候，很多用字符串模板的，即{a}{b}{c}之类的，但是经过实践之后发现这种方法对于散点图并不合适（当然也可能是因为我没找到正确的办法）。核心就是tooltip中的formatter代码，这里可以在其中用console.log来查看，再决定返回什么数据。这样就可以实现文章开头的效果了。不过最后还是找到了解决方法，下面给出代码，大家可以根据自己的情况修改。

base64图片转换工具，是一款可以在线任意图片格式转Base64 DataUrl编码工具,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。要实现不同的点对应不同的图片，只需要在series中每个symbol设置不同dataURI即可。总结一下，就是先把图片转换成dataURI，然后在series中的symbol写上即可。base64图片在线转换工具 - 站长工具。

重点是 .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {d}%"),

在做数据可视化网站时，有时需要用到多个图表，这时就需要对图表的样式做一个统一的设计使网站外观更整齐。

场景需求：后端采用flask通过pymysql从数据库获取数据，并返回给前端。前端vue3利用axios获取数据并运用到echarts绘制图表。

有需求是在vue项目中实现点击按钮完成页面跳转。这里不适用a标签，而是用vue自带的vue-router。首先看一下项目结构src│ App.vue│ main.js│├─router│└─viewindex.vue可以看到，我在初始的vue项目中添加了一个文件夹router，并在里面添加了一个index.js文件。

这里简化了flask连接数据库的部分，假设已经取得了数据这里用“我爱你ლ(′◉❥◉｀ლ)”字符串表示后端返回的数据库数据。记录一个前后端分离遇到的问题，即vue前端从flask后端获取数据。具体描述如下：flask只负责连接数据库并获取数据库的数据，并返回给前端vue；vue则需要获取后端返回的数据并显示。这里我们点击按钮后利用axios（也需要npm install axios进行安装）就可以获取从后端返回的数据。需要注意的是，后端flask与前端vue需要同时开启服务器。

有个项目需求，如题目所示。这种展示方式让首页的内容可以完美展示而不受到导航栏的干扰，等下滑查看内容时导航栏的背景颜色再显示出来。非常简单，有需要的伙伴可以根据自己实际情况自行修改。导航条随滚动条下滑显示-示例。导航栏随滑动条下滑显示。

目前有一个需求就是在网页上放置一个音乐控制按钮，并且是在vue3项目里面。于是小白的我遇到了2个问题，第一个问题是如何实现没有进度条的播放按钮，这个网上有现成的代码，可以通过js代码切换不同的图片或者是别的样式，并不算难；第二个问题是如何在vue3项目中引入js文件，这个给刚刚接触vue3的我带来了一点麻烦。首先声明这个功能只涉及了我的3个页面，一个是vue组件，另一个就是自建的本地js文件，还有一个就是vue项目自带的index.html文件。最后一步是在index.html文件引入js文件。

查阅资料后发现要在vue项目自带的index.html文件内添加下面的样式代码才行。使用vue时发现总有去不掉的外边距，在index.vue里面怎样设置样式都不管用。

上篇文章中我们实现了首页前端的实现，这篇文章我们继续完成登录与注册界面的原型设计和前端实现。同时回顾一下上期完成时的项目文件夹再看看这期完成预计的项目文件夹是的，就增加了3个文件，两个前端html文件和一个css文件（因为可以登录与注册的css可以通用）。那么下面就让我们从原型设计开始吧。

经过小小的准备时间，终于是可以开始进入设计环节了，据我所知一个产品的开发包括了规划、分析、设计、开发、测试、维护等几个阶段。先前的分析虽然很拉，但也确实是必要的。那么接下来就正式进入项目的第三个环节——原型设计。我的计划是先设计出几个重要界面的原型，然后再用前端实现，途中可以记录需要用到的后端技术，最后再用后端实现与前端的交互。

我的网站主打一个数据的统计分析与可视化；面向用户为12岁-30岁的年轻人，用户体验设计要围绕他们的风格；核心功能就是允许把任务分成几个模块，每个模块下自己定义任务同时记录完成时间和完成的时间段等，同时数据统计分析与可视化功能要允许对这些数据用不同的方式呈现，并进行个性化的时间使用特征分析👉进一步完善我的思路，核心功能两个，一个对要做的事情的分类及其花费时间的记录方式；另一个是对时间数据的统计，分析和可视化。同时采用的时间理论（也不算理论）就是不用精确记录时间，而是大致的开始时间和大致的结束时间；

上篇文章中我们实现了首页和登录界面的原型设计，得到最后的文件夹结构如下，那么今天我们就基于首页的原型设计来完成前端的实现。

后面所有的项目文件都会及时更新到上面，我也会用Pycharm的git工具实现。这是第一次使用git正式管理项目，后续在使用过程中还会涉及相关的知识的。💙这里是个人时间管理网站项目开发全流程记录，欢迎感兴趣的朋友关注我，关注《献给榕榕》专栏，让我们一起享受项目开发的过程吧！💙。

好的，到这里基本的项目准备就结束了，后续还有变动都是根据实际开发过程进行的。现在让我们回顾一下都做了什么：利用anaconda创建一个python的虚拟环境在Pycharm专业版中创建一个falsk项目并将虚拟环境的python解释器作为其解释器下载echarts.js文件导入flask项目中修改项目文件夹，创建一个app包用于存放各个分功能，创建相关静态文件夹，配置类文件config.py和项目启动文件manager.py💙。

但是我也还没有具体的想好，只有一些模糊的概念，要在以后的开发过程中慢慢挖掘。1. 可视化 | 可视化对我来讲是必须的。我最希望看到的就是用良好的可视化方法展现每天自己在不同环节所耗费的时间，从而让我可以清醒地意识到自己哪些地方做的还好，哪些需要改进。2. 分析统计 | 可以根据我自己记录的数据，做一些简单的分析功能。比如统计每周在哪些地方花的时间最多；不同时间段都做些什么等等。这要看我自己具体记录了哪些类型的数据3. 输入存储 | 这是最基本的，要能够自己提交每日的相关信息。

这篇文章把自己今年寒假花了20天做的一个网站放出来。这个网站就是用来练练手感的，接下来会重新做一个属于我的个人网站，主题还没有想好，但是应该是类似于一个个人博客吧。后面做网站时会一直更新进度，感兴趣的小伙伴可以关注我了解后续，这个送给女朋友的就不详解了，直接放置源码，可以直接运行，当做一个参考。

计算机网络，python语言实现基于socket的网络编程(二)。上次是将服务器和客户端搭建好，实现了本地的文件传输。但是身份验证却没有实现，另外数据也缺少存储的地方，因此这次计划完成前端的登录验证功能和网页的文件传输下载以及连接数据库。

之前看了很多很多的Flask框架的项目结构，了解到它是一个高度灵活的轻量级web框架，意思就是项目的结构不像Django那样有着固定的模式，而是可以根据开发者的爱好进行设计。这也就给想用正儿八经的一种结构写一个网站带来了困扰。好在看了几天的资料后，我大概理清楚了思路，下面进行介绍。废话不多说，先上我的项目结构（只有把自己的项目结构列出来并讲解清楚，才能至少让他人懂得一种结构），等会会进行详细的介绍。

在写html页面的时候，需要在网页上提供一个下载按钮可以下载我自己电脑中的文件。我已经知道了该文件的路径，但是之前看了很多文章都没找到正确办法，一直不知道如何能够下载本地的文件，经过不断实验发现，可以利用a标签中的downlo属性，同时将href属性设置为文件的路径，注意：该路径对html页面来说是相对路径。

*********源代码在文末**********这是计网期末大作业——Python socket编程系列的最后一篇文章，接着上一篇的内容这一篇介绍如何将前后端串联起来，实现基于TCP连接的网页版文件传输。这是代码结构，可以看到一共有三个数据库，分别是客户端用来发送文件的client_db，接受文件的client_db_download和服务器用于保存接受的文件serveer_db（因为这里是同一台电脑，服务器发送的数据就从客户端发送文件的数据库中取就可以了）

一个数据库模型对应一个数据库的表，所有的数据库模型都要继承ORM对象db的Model基类，即db.Model.导入方式：app.config.from_object(config.Config)导入方式：app.config.from_pyfile(‘config.py’)2. 通过类进行配置。在config.py文件中创建Config类，里面进行配置。使用方式：app.config[‘配置信息’] = ‘配置信息对应的值’1. 单独创建一个config.py文件，然后里面写上所有的配置信息。

项目采用蓝图进行视图函数的管理，每个功能被放在一个小的app中。登录和注册功能放在了app_login文件夹中。两张背景图片（有需求自取，当然也可以换自己喜欢的，推荐一个网站。注册register.html页面。登录login.html页面。主页面index.html。

需要安装的包：flask_sqlalchemy，使用方法是需要绑定到一个app上，然后再创建一个sqlalchemy对象db（也就是ORM，用于对数据库进行操作的一个映射）。最后总结使用flask_sqlalchemy与直接用pymysql相比的好处就是不用接触直接的SQL语句，而是创建了一个ORM对象用于操纵数据库。而模型文件则是存放每一个表的结构（所有的字段，字段的限制等等）

第一步，在登录和主页的视图函数部分编写flash消息（@login是我注册的蓝图）。把它们放在条件判断失败的地方。第二步，在前端页面利用jinja2模板语法接收flash消息，并把他们放在正确的位置。如何给出上述的红色提示信息呢？其实很简单，只需要两步。h2标题正下方，样式是tip等会列出。这样的haul就可以搞定啦。

大概原因就是浏览器有自动保存密码的功能。为了解决这个问题也很简单，我们只用在css最顶端加上这段代码。这样即使自动保存密码也不影响我们的样式（下面就显示了我之前设置的密码）问题描述：input设置密码属性后导致input设置的所有样式失效。在设计登录页面时，遇到一个之前没遇见的问题，这里记录一下。但是当我在密码输入框设置密码属性后（如下）首先我对登录部分的盒子设置了如下属性。这样按道理可以实现下面的效果。

计算机网络，python语言实现基于socket的网络编程(一)

这学期有个数据可视化的作业，遂决定做一个世界杯主题的可视化网站。基于Python、Flask和Echarts。因此网站也将分为3个大块，分别是单届世界杯的数据详细分析、3届世界杯数据对比分析和其他往届世界杯重要数据分析。好吧我是标题党，标题用的是完成时，但是事实上我这个还没完成。后面会针对每个模块给出详细介绍。

经过2个月的工作，我完成了80%的工作量，并成功将静态网站进行了部署。并对页面进行了更新。不过当前虽然完成了部署，但是还没有实现响应式布局，所以只有用谷歌浏览器打开会正常显示布局。同时可能是部署在github的原因，页面加载有点慢。这些问题我后面还会解决，先看看效果吧。源代码等结课以后再公布~简单的设计了一下，介绍了可视化的内容，灵感来源等等，也还有部分内容没有设计完。然后是3届世界杯的可视化，这里只设计好了2014年的一部分，中间是对单个国家的具体分析。然后是整体的分析（内容是随便写的）