Vue项目
文章平均质量分 82
Vue项目实战
敲代码敲到头发茂密
欲戴王冠,必承其重
展开
-
项目平台之测试报告的编码设计(七)
路由参数动态匹配:```path:'/user/:id'```原创 2023-10-18 08:31:01 · 262 阅读 · 2 评论 -
项目平台之测试报表的编码实现(六)
将pro传递到全局定义的方法中savePro(pro)中,并将数据保存在vue全局共享数据中(state——》pro)1、 定义created()的目的是,每次打开页面需要调用getAllRecord函数,渲染页面。当在项目列表页面,选择项目进入项目首页时,会将项目信息保存在vue的全局数据存储仓库中。使用element-plus中的滚动条组件,将图表展示放到滚动条组件中。渲染图表,需要注意的时需要将数据挂载成功之后再渲染图表。将pinia中定义的全局数据映射为当前组件的计算属性。label接收字段名称。原创 2023-10-16 08:06:26 · 158 阅读 · 0 评论 -
项目平台之项目首页编码设计(五)
描述列表中label指定描述列表的名字,后面的值对应接口返回的值。从后端接口的返回值可以看到,前端不必要定义所有的字段。element-plus中layout布局的使用。element-plus中描述列表使用。element-plus中卡片组件使用。当内容超过屏幕高度时自动产生滚动条。原创 2023-10-11 09:20:57 · 326 阅读 · 0 评论 -
Vue——Pinia数据持久化(四)
浏览器自带的数据存储方式和pinia1、window.sessionStorage:会话级别的存储,窗口关闭会自动清除,只能存储字符串和数值2、window.localStorage:持久化存储,除非主动清除,否则会永久保存到浏览器本地,只能存储字符串和数值3、Pinia:数据存储在缓存(内存)中,优点读写更快,可以保存任意的js类型数据和对象原创 2023-10-09 08:24:35 · 3018 阅读 · 2 评论 -
平台项目首页——左侧菜单栏实现(三)
当定义的组件是给到路由中对应的组件中用的,将组件定义在components中。active-text-color=“#ffaa00” 选中后的文字颜色。b、配置home的嵌套路由例如(path:‘/testcase’)通过路由可以访问的页面,页面对应的组件,将组件定义在views中。修改element UI提供的组件,修改选中后的菜单背景颜色。当切换到项目首页菜单时:主界面展示项目首页的信息。当切换到接口管理菜单时:主界面展示接口管理的信息。选择切换项目——》切换路由到项目列表页面。原创 2023-10-08 10:11:47 · 846 阅读 · 2 评论 -
平台项目列表页实现(二)
二、项目列表盒子设计项目列表页面(整个页面的大盒子)包含显示项目列表的区域(显示所有项目的盒子)包含单个项目(单个项目的盒子)包含图标、项目名称、负责人、2个按钮,共4个盒子三、添加项目盒子设计四、退出登录功能实现五、路由导航守卫实现添加路由导航守卫,控制前端页面访问的权限六、展示项目信息七、bug修复八、删除单个项目index.js九、添加项目功能index.js十、编辑和添加使用同一个弹框title:不写死在data中设置dlgTitle为弹窗的标题原创 2023-10-06 10:27:10 · 268 阅读 · 0 评论 -
平台登录页面设计(一)
* --------------------登录页面--------------------- *//* 修改element-plus 输入框表单的样式*//* 修改输入框图表样式 */main.js中导入,全局生效// 对登录的表单数据进行验证if(res){})},原创 2023-09-30 11:00:18 · 264 阅读 · 0 评论