项目记录2

8.20-8.24 连接列表页和创建mysql连接配置页和mysql连接编辑页

8.25-8.26 测试 前后端修改 上线

通过列表页调用后端接口返回并展示已创建的mysql连接列表 头部有搜索框 通过搜索框可以动态的通过连接名称对列表内进行搜索（小问题通过使用计算属性和过滤器解决动态查询②），通过下拉菜单选择新建数据库连接方式，点击连接的其他地方在右侧会弹出一个抽屉，展示选中连接详情，目前只开放展示创建者和创建时间，并有编辑和删除按钮，可以通过点击连接的名字或图标，或者右侧抽屉的编辑按钮进入编辑页面，（因为创建和编辑页面都会复用整个页面的布局和样式，所以我对这个页面抽成可复用的组件，组件中通过校验后$emit一个自定义事件，对使用这个组件的父组件点击保存按钮可以分别调用创建的post接口和编辑提交的put接口）使用了路由跳转，点击触发事件跳转到编辑页面（这里会遇到上线后的第一个问题①），编辑页面调用封装好的接口api根据当前所选中的连接的id去匹配调用接口传回来的id获取选中页的内容并作出修改提交调用封装好的api接口put方法传回后端修改后的配置，创建连接还有测试连接功能，点击测试按钮置位loading使用iview组件给按钮添加触发点击事件触发onloading方法调用测试接口，拿到response里面的availabel的值做校验（问题③因为当时后端返回的response里面带的availabletrue成功true失败返回false，只有两种状态，我需要通过他的状态去在测试按钮右侧做一个测试成功或失败的提示框，因为我需要提示框在成功或失败的时候弹出，用v-if去控制他们的出现，因为空或者0都会被默认为false，所以我单独定义了available属性，并在成功的时候赋值1，失败赋值2，v-if判断available的值去进行显示）

问题1，在开发种，我在路由跳转的时候用 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ath:.....传参通过添加{id…}})通过在path上进行拼进行跳转，在上线后测试中会发现，url前面还会有一些标识性字符，这样在用这种方法跳转就会找不到页面,后改用this.$router.push({name:“路由名字”,params:“传参”})进行路由跳转和传参解决

问题2，在搜索框需要通过输入框输入的内容进行动态的过滤连接列表这个需求， 想到计算属性可以产生数据依赖，并在计算属性中使用了filter对连接列表进行过滤拿到每一项的名字用indexOf去检索搜索框v-model的值大于-1就返回去实现，并将列表中v-for直接遍历原来接口返回的列表数据改成计算属性中定义的，和输入框中双向绑定的值产生依赖实现动态查询

问题3

测试按钮，通过调用接口返回的值进行和用户交互测试成功失败提示框做判断，因为当时后端返回的response里面带的availabletrue成功true失败返回false，只有两种状态，我需要通过他的状态去在测试按钮右侧做一个测试成功或失败的提示框，因为我需要提示框在成功或失败的时候弹出，用v-if去控制他们的出现，因为空或者0都会被默认为false，所以我单独定义了available属性，并在成功的时候赋值1，失败赋值2，v-if判断available的值去进行显示

问题4，在右侧抽屉中展示创建时间，因为后端传给我的是个时间戳，我需要对时间戳进行解析，封装了一个工具方法在utils中，通过new Date方法 去将时间戳转换为正常的时间格式，通过getMonth getDate getHours getMinutes getSeconds 将时间进行抽离再拼接，并在抽离过程中封装方法，对抽离出来的值做判断，如果小于10 在前面补0