2023/7/4

• 下载putty连上服务器后端：https://zhuanlan.zhihu.com/p/35707142 https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html

• 查看前人后端经验：https://gxyrious.github.io/2022/07/25/数据库课设的心得/

• 配置Vue环境：https://code.visualstudio.com/docs/nodejs/vuejs-tutorial

• 在Visual Studio Code 中，您可以使用快捷键「Ctrl + /」来快速添加或删除注释。

就是一个学了又没学会的大动作

2023/7/5

• axios

• element-ui

• 路由相关

就是一个学了又没学懂的大动作

2023/7/6

• nvm 使用nvm-windows来更换node的版本 nvm install 14.18.1 nvm use 14.18.1

• Postman测试接口（放弃）

• Vuestic UI组件库
1. 安装依赖

2. 修改main.js
3. 导入相应的代码段

2023/7/7

• 使用input时要用readonly则需要引入readonly属性
如果想给它赋值，则需要绑定一个变量:readonly=”readonly”

2023/7/10

• 优化了一下UI，使得其能够点击后展开

• 将按钮居中的方式：margin:0 auto;

2023/7/11

• 开始写axios了，来GET和PUT
要在使用明确this，故将其命名为self

2023/7/15-2023/8/3

• 学习ES6用法（前人笔记）
ES6用法总结
ES6学习总结记录[TOC] 前段时间自学前端时遇到了ES6新增部分，学习过后感觉对于构建大型项目还是挺有帮助的，特在此记录分享 let&constconst 与C++中的const关键字差别不大； 与 var 相比，let将变量作用域限定到了代码块中 此外，还需要注意的一点是，在全局使用 var 变量，会将其添加到上下文对象window中，而let不会 1234567891011121

https://pikachudy.github.io/2022/03/24/ES6用法总结/

• 了解了Java SpringBoot架构
使用zookeeper、maven，基于MySQL数据库进行开发，采用前后端分离架构

• 负责前端部分，完成了包含路由配置、界面设计、接口测试等一系列工作，完成了基金交易系统
仓库地址：
HundsunProject-FrontEnd
tjuDavidWang • Updated Aug 22, 2023

2023/8/16

• 项目重启，完成了医生和管理员的个人信息界面

2023/08/23

• 帮同学调了几个API，总结了一下经验
可以参考https://github.com/axios/axios#axios-api，来完成相应部分的请求
使用axios相比于原生的fetch优点
axios 是一个流行的 HTTP 客户端库，它为浏览器和 Node.js 提供了一个简单的 API 来处理 HTTP 请求。虽然原生的 fetch API 在现代浏览器中已经被广泛支持并且提供了一种处理 HTTP 请求的原生方式，但 axios 仍然具有一些显著的优势：
1. 自动转换 JSON：当使用 axios 发送请求时，如果返回的数据是 JSON 格式，它会自动将其转换为 JavaScript 对象。使用 fetch，你需要额外调用 .json() 方法来做这个转换。
2. 错误处理：axios 让错误处理更为简单。如果响应状态码在 200-299 之外，axios 会自动将其视为错误并拒绝 promise。而在 fetch 中，你需要手动检查响应的 ok 属性并可能需要抛出一个错误。
3. 请求和响应拦截：axios 允许你设置请求和响应拦截器，这使得你可以在请求发送或响应到达之前对它们进行修改或执行某些操作。
4. 取消请求：axios 提供了一种取消尚未完成的请求的方法，而 fetch 则需要使用 AbortController 来实现这一功能。
5. 更丰富的配置选项：axios 提供了一系列的配置选项，如默认的 headers、base URL 等，使得每次请求的设置更为简单。
6. 浏览器和 Node.js 的兼容性：axios 可以在浏览器和 Node.js 中使用，这意味着你可以在前端和后端使用相同的库来处理 HTTP 请求。
7. 防御 XSRF：如果你在浏览器中使用 axios，它提供了一种简单的方法来防御跨站点请求伪造 (XSRF)。
8. 自定义实例：你可以使用 axios 创建自定义的 HTTP 实例，并预先配置某些参数，如 base URL、headers 等。



测试过程中出现问题500，是由于数据库相关引起的，这时联系后端同学进行对接，了解到相同的请求不可以发两次（后端会检查是否重复），将请求修改之后便可以正常运行了

2023/08/24

• 帮助同学将其做(chao)好的SideBar改成了Vuestic的风格，并配置好了路由，可以实现页面直接跳转。
在完成的过程中看它的代码（Vue2+ElementUI+Vuex+组合式）有点难崩，但是也让我知道有vuex这个好东西，方便于不同组件之间的数据传输。貌似Vue官方推出了pinia，更加便捷轻量好用。
vuex教程：https://www.bilibili.com/video/BV1cU4y1j7aP?p=1 pinia教程：https://www.bilibili.com/video/BV1s94y1q79q/?spm_id_from=333.880.my_history.page.click
btw：MaterialIcons是尊都好看！
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

https://fonts.google.com/icons?icon.set=Material+Icons

2023/08/27

• 修改了个人信息相关的风格



• 主要是有个地方比较难处理：Vuestic的Form格式的标题都是写在上面的，如果要变成左右就得动用其他技巧。阅读文档后发现有如下处理技巧，照猫画虎即可：
• 此外，为了满足某位大佬的独特口味，增加了动效（直接使用ElementUI的内置动画）
 
 

2023/09/04

• 由于之前的数据是存在页面缓存里的，一刷新就没了，现在改过之后存在sessionStorage里面，刷新也没事了，调用方式是
对应的登录界面设置数值部分的代码是

• 增加了药品营收情况界面，可以动态的展示，使用的是echart来进行图表绘制，



其实现逻辑包含以下几个部分
这段代码描述了如何使用 ECharts（一个常用的图表库）来创建和初始化一个图表。下面我将为您详细描述这段代码的实现逻辑：
1. 获取图表DOM元素
这行代码获取了页面上id为"chart"的DOM元素，并将其赋值给chartDom变量。
2. 初始化图表
使用ECharts的init方法初始化图表，并将其赋值给myChart变量。
3. 设置图表选项 这部分代码定义了图表的各种参数和设置，如下所示：
• legend: 图例的设置。该图表有三个图例：“采购金额”、“销售金额”和“营收”。
• tooltip: 提示框组件的设置。
• xAxis: X轴的设置。数据来源于传入的data数组的date属性。
• yAxis: Y轴的设置，用于显示数值。
• series: 数据系列的设置，包括三个数据系列，每一个系列都有自己的名称、数据、类型和样式。
• dataZoom: 数据缩放组件的设置，包括一个内部数据缩放组件和一个常规数据缩放组件。
4. 应用图表选项
使用ECharts的setOption方法将前面定义的图表选项应用到初始化的图表上。

2023/09/09