Vue+Element实现后台数据操作项目

项目整体描述

项目半路接手的，项目采用前端主流框架之一vue,通过webpack进行打包,主用es6进行编码，ui框架采用饿了么(element-ui)

项目需求

本项目主要是权限分配以及不能权限的角色对数据的操作，由于是后台项目，页面美化相对要求较低，重在逻辑交互以及不同权限角色数据互通。

项目构建目录：

项目用到的技术方法：

1.子组件向父组件传值（this.$emit）
    父组件中：this.$emit("Children",value(值))
    子组件中：children:function(val){console.log(val)}
2.父组件向子组件传值（props）
    父组件中：<child :msg="需传的值"></child>
    子组件中：props:{msg:ss}
3.路由跳转携带参数
    当前路由中：this.$router.push({path:"路径"，query:{参数名：参数值})
    跳转路由中：this.$route.query.参数名
4.向后台请求数据并携带参数（vue-resource与axios）
    vue-resource：this.$http.post("地址"，{参数}，{emulateJson:true{emulateJSON}).then(res=>{成功回调}).catch(err=>{失败回调})
    emulateJson：true表示把数据当成form表单形式进行传输false则是普通json
    axios：vue官方推荐用法，vue2.0后不再更新vue-resource
        使用：axios.post("地址"，{参数名，参数}).then(res=>{成功回调}).catch(err=>{失败回调})
5.保存一个值，页面刷新不丢失（采用的是sessionStorage）
    设置一个sessionStorage:sessionStorage.setItem("键名"，键值)
    取一个sessionStorage:sessionStorage.getItem("键名")
    删除一个sessionStorage:sessionStorage.remove("键名")
6.element中树形结构树节点若字数太多，需求显示省略号，鼠标悬浮显示内容。
    此问题刚开始头疼许久，后解决办法为：title属性。
        利用renderContent方法，在renderContent方法里<span title={node.label}>{node.label}<>

    效果：

总结：

本项目是政府后台管理项目，功能比较单一；主要是数据互通，第一次分享，主要记录一个项目遇到的难点。新手上道，大神勿喷，有错地方欢迎指导。