renren-fast-vue自我学习的收获与总结

周阳波
2023-12-01

renren-fast-vue学习心得:

  1. 基于vue、与element-ui组件的结合使用
  2. 成功与后端的部署,实现数据交互
  3. renren-geneator生成的vue中js结构
  4. 数据的请求和返回

1.element-ui官网文档对各种组件都有详细的介绍。要想熟练使用还是得多看官网的api文档,加深记忆和理解。

element-ui官方文档地址:https://element.eleme.cn/#/zh-CN

2.使用vscode直接打开renren-fast-vue文档,把代码生成器的生成的vue放src/views/modules/generator目录下

在static/config/index.js文件中配置有与后端数据交互的api请求地址。与后端的xml配置文件中的地址一致。

3.vue界面的js文件结构

data:定义页面及脚本需要的变量(即使用的所有的组件使用到的变量)
components:组件的渲染(即新视图的实现:定义的新增页面的方法名写在这里)
activated:与created类似,在页面元素渲染前执行(一般把页面上显示的列表方法写在这里,优先渲染列表内容)
mounted:在页面元素渲染完成后再执行
methods:vue界面中用到的方法的定义

4.数据的请求与返回

this.$http({
  url: this.$http.adornUrl('/generator/tcarcar/list'),
  method: 'get',
  params: this.$http.adornParams({
      'page': this.pageIndex,
       // 这里一般放置需要传到后端的所有参数
  })
}).then(({data}) => {//当路径正确,且响应成功则返回后端参数
    this.dataList = data.list
    //vue定义的data接受后端返回的“list”,实现“dataList”的渲染
})

这是我自己学习了两个周的renren-fast-vue的收获,我也只是个小白,所以对其理解也只能到这一地步,vue不难,最主要的还是对element-ui组件的控制,还是得熟读官网的api文档,在开发时就不会浪费太多时间在组件的控制和参数的传递上。

 类似资料: