3537743305
贫民
贫民
  • 最后登录2021-10-11
  • 发帖数1
阅读:262回复:0

[vue]vue 大乱斗

楼主#
更多 发布于:2021-09-28 19:53
1:根据后端提供的接口获取数据,将得到的数据通过绑定的数组渲染在表格中。

2:对表格的数据分时间段、和大于最低值的查询。(引用element ui中的时间选择器 并且对日期格式进行转换

3:将表格中选中的数据下载为excel表格( 通过给表格绑定 @selection-change= ''handleSelectionChange'' 获取选中行的所有内容,赋给一个空数组,在提取每条数据id,将id字符串拼接(1,2,3,4)传给后端
handleSelectionChange(val) { 
   this.multipleSelection = val;
    //提取数组中的id 
    let arr = this.multipleSelection.map(string => { 
    return string.id  
}) 
//数组转字符串  
this.ids = arr.join(',') 
// this.ids=arr.toString() }, 
//下载为excel表 
Download: function () {
 window.open(this.$api.report.Download + '?ids=' + this.ids, "_self", "excelOfAccount")
},




4:在vue中引如eachat 图表根据后端传过来的数据绘制图表,绑定X轴和Y轴,根据数据生成柱状图。

5:父组件与子组件之间的传值  
  父组件传给子组件:子组件通过props方法接受参数
 子组件传给父组件:$emit方法传递参数


6: Vue的路由实现:hash模式 和 history模式
hash模式:在浏览器显示的URL中带有符号“#”,#以及#后面的字符称之为hash,通过hashChange事件来监听URL的改变,用window.location.hash读取。
特点:hash虽然在URL中,但不被包括在HTTP请求中,因此hash不会重加载页面。hash内容是用来指导浏览器动作,对服务端安全无用。
history模式:在浏览器显示的URL中以“ / ”分割,没有#。这种模式采用HTML5的新特性且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
特点:前端的 URL 必须和实际向后端发起请求的 URL 一致,如http://www.xxx.com/items/id,后端如果缺少对 /items/id 的路由处理,将返回 404 错误。解决办法:当访问不到页面时,重定向到index.html页面,即app依赖的页面。


7:Vuex是什么?
Vuex是一种用来实现状态管理的机制,它的应用核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex主要有四个模块组成:
state:用来存储组件状态。Vuex使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。
mutations:用于同步修改store中的状态。使用this.$store.commit(mutationsType, ...param);触发。
getters:类似Vue的计算属性,主要用来过滤一些数据或者直接返回某个状态值。使用this.$store.getters.xxx获取。
action:用于同步修改store中的状态。使用this.$store.dispatch(actionType, ...param) 触发。


8:App打包
若使用了代理地址,打包成App后代理地址会失效,
需要使用 baseURL 指定地址 以及其他地方使用代理地址从后端获取数据也需要改为指定地址

Axios.defaults.baseURL = "http://192.168.1.5:8080"

详情请看:https://www.cnblogs.com/zddbean/p/14763373.html
游客


返回顶部

公众号

公众号