zoukankan      html  css  js  c++  java
  • 测试平台系列(6)项目管理页面(3)

    唠叨

    前端页面搭建完成,后端接口也完成了,现在需要前后端进行连接在一起
    前端调用接口,需要通过代理的形式,访问到后端

    前端代理配置

    在前端项目下创建vue.config.js文件

    设置代理内容到指定链接下

    封装axios请求

    创建个utils.js文件,用来封装前端aixos请求,后面引用request进行调用
    image

    添加项目请求方法

    添加项目前端请求
    image

    然后在project.vue文件中,引入写好的请求方法
    image

    在弹框中的确定按钮绑定上方法
    image

    在method中写入请求
    image

    请求一下,查看页面的console日志,可以看到返回数据,就成功了
    image

    获取项目数据方法

    写个get方法获取数据
    image

    在引入到文件中,同上面的一致
    image

    在method写入获取数据的方法,把获取到的数据赋值给data
    image

    然后把组件中的名称改成接口中的数据,就可以了
    image

    有个问题,这个方法我是如何触发呢?不能新增按钮点击刷新
    想要的效果是每次进入页面就要获取这个数据,自动请求。
    这里就需要用到生命周期的方法,created,在每次加载页面执行的方法,把获取的数据方法,引入过去就可以了
    image

    项目页面就算完成
    image

    当我创建的时候,我发现页面内容不会出先我新创建的,需要手动刷新下才可以,这样的体验并不好。
    需要在我创建成功后,也要请求下获取数据接口,就可以实现了。
    image
    这样就可以解决了,只要添加成功,列表中就会显示数据。

    这里前端方法中写的不够严谨,如果请求数据出错了,这里就获取不到数据,导致前端报错。
    这里还需要加判断接口是否正常。
    还有添加成功了,要有个提示信息,添加成功。
    image

    添加成功的效果,如果失败了也会有提示信息显示
    image

    项目管理页面目前算是完成了。

    知识点:

    Vue

    前后端分离的情况下。需要使用到代理的方式devServer中的proxy
    有时候加载页面需要调用请求或者方法,这里需要了解下生命周期函数
    axios 前端作为请求的插件方法

    Element Ui

    消息提示组件

  • 相关阅读:
    zipfile模块——读取(查看)zip压缩文件
    line[:1]和split(',')
    csv文件——简单读操作01
    读取文件内容——读取一个二进制文件,然后保存到另外一个文件
    zipfile模块——从zip文件中 解压缩
    读写操作文件——open()函数与读写文件01
    文件的操作
    csv文件——简单读操作01
    读写操作文件——open()函数与读写文件02
    读取文件内容——open函数
  • 原文地址:https://www.cnblogs.com/TestingShare/p/15651389.html
Copyright © 2011-2022 走看看