测试平台系列(6)项目管理页面(3)
唠叨
前端页面搭建完成,后端接口也完成了,现在需要前后端进行连接在一起
前端调用接口,需要通过代理的形式,访问到后端
前端代理配置
在前端项目下创建vue.config.js文件
设置代理内容到指定链接下
封装axios请求
创建个utils.js文件,用来封装前端aixos请求,后面引用request进行调用
添加项目请求方法
添加项目前端请求
然后在project.vue文件中,引入写好的请求方法
在弹框中的确定按钮绑定上方法
在method中写入请求
请求一下,查看页面的console日志,可以看到返回数据,就成功了
获取项目数据方法
写个get方法获取数据
在引入到文件中,同上面的一致
在method写入获取数据的方法,把获取到的数据赋值给data
然后把组件中的名称改成接口中的数据,就可以了
有个问题,这个方法我是如何触发呢?不能新增按钮点击刷新
想要的效果是每次进入页面就要获取这个数据,自动请求。
这里就需要用到生命周期的方法,created,在每次加载页面执行的方法,把获取的数据方法,引入过去就可以了
项目页面就算完成
当我创建的时候,我发现页面内容不会出先我新创建的,需要手动刷新下才可以,这样的体验并不好。
需要在我创建成功后,也要请求下获取数据接口,就可以实现了。
这样就可以解决了,只要添加成功,列表中就会显示数据。
这里前端方法中写的不够严谨,如果请求数据出错了,这里就获取不到数据,导致前端报错。
这里还需要加判断接口是否正常。
还有添加成功了,要有个提示信息,添加成功。
添加成功的效果,如果失败了也会有提示信息显示
项目管理页面目前算是完成了。
知识点:
Vue
前后端分离的情况下。需要使用到代理的方式devServer中的proxy
有时候加载页面需要调用请求或者方法,这里需要了解下生命周期函数
axios 前端作为请求的插件方法
Element Ui
消息提示组件