用vue简单设计一个权限

前言

本次是为了研究和学习使用本地库vuex

额，可能使用优化上面还不太理想。

优化以后在优化,本次仅仅实现功能。

思路

1. 从后端获取树形菜单的数据，然后把第一层的数据展示出来，
2. 在给他添加一个点击事件，点击时去后端拿指定treeNodeId的数据。然后放到vuex的库里面
3. 然后通过计算属性实时变化发生改变

当然我这个的性能肯定不太好，可是我对vue不是太熟悉，所以暂时只能这样了。

---

后台

TreeNodeAction(业务逻辑层)

其他的方法就多写了一个，

还要把一个地方给改了

其他的业务处理层就没多写了

package com.liwangwang.vue.web;

import java.util.List;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.liwangwang.base.web.BaseAction;
import com.liwangwang.vue.biz.TreeNodeBiz;
import com.liwangwang.vue.entity.TreeNode;
import com.liwangwang.vue.util.JsonData;
import com.liwangwang.vue.util.ResponseUtil;

public class TreeNodeAction extends BaseAction{

	private static final long serialVersionUID = 1L;
	private TreeNodeBiz treeNodeBiz;
	
	
	public TreeNodeBiz getTreeNodeBiz() {
		return treeNodeBiz;
	}


	public void setTreeNodeBiz(TreeNodeBiz treeNodeBiz) {
		this.treeNodeBiz = treeNodeBiz;
	}


//	public String execute() {
//		ObjectMapper om = new ObjectMapper();
//		List list = this.treeNodeBiz.list();
//		JsonData jsonData = new JsonData(1, "操作成功", list);
//		try {
//			ResponseUtil.write(response, om.writeValueAsString(jsonData));
//		} catch (Exception e) {
//			e.printStackTrace();
//		}
//		return null;
//	}
	
	public String selectlist() {//http://localhost:8080/sshdemo/vue/treeNodeAction_list.action
		ObjectMapper om = new ObjectMapper();
		List<TreeNode> list = this.treeNodeBiz.list();
		System.out.println(list.toString());
		JsonData jsonData = new JsonData(1, "操作成功", list);
		try {
			ResponseUtil.write(response, om.writeValueAsString(jsonData));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * 多条树形的表示
	 * @return
	 */
	public String selectbylist() {
		ObjectMapper om = new ObjectMapper();
		String treeNodeId = request.getParameter("treeNodeId");
		System.out.println("aaaaaaaaaaaaaaaaaaa:"+treeNodeId);
		List<TreeNode> list = this.treeNodeBiz.getbylist(treeNodeId);
		JsonData jsonData = new JsonData(1, "操作成功", list);
		try {
			ResponseUtil.write(response, om.writeValueAsString(jsonData));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

}

TreeNodeDao

package com.liwangwang.vue.dao;

import java.util.List;

import org.hibernate.HibernateException;
import org.hibernate.Session;
import org.springframework.orm.hibernate5.HibernateCallback;

import com.liwangwang.base.dao.BaseDao;
import com.liwangwang.vue.entity.TreeNode;

public class TreeNodeDao extends BaseDao {

	private static final long serialVersionUID = 1297339130752837659L;
	public void add(TreeNode treeNode) {
		this.getHibernateTemplate().save(treeNode);
	}
	
	public List<TreeNode> list(){
		return (List<TreeNode>) this.getHibernateTemplate().execute(new HibernateCallback<List<TreeNode>>() {
			@Override
			public List<TreeNode> doInHibernate(Session session) throws HibernateException {
				List<TreeNode> list = (List<TreeNode>) session.createQuery("from TreeNode where treeNodeType=1").list();
//				for (TreeNode treeNode : list) {
//					Hibernate.initialize(treeNode.getChildren());
//				}
				return list;
			}
		});
	}
	public List<TreeNode> getbylist(String treeNodeId){
		return (List<TreeNode>) this.getHibernateTemplate().execute(new HibernateCallback<List<TreeNode>>() {
			@Override
			public List<TreeNode> doInHibernate(Session session) throws HibernateException {
				List<TreeNode> list = (List<TreeNode>) session.createQuery("from TreeNode where treeNodeType = 2 and parentNodeId = "+treeNodeId+" ").list();
//				for (TreeNode treeNode : list) {
//					Hibernate.initialize(treeNode.getChildren());
//				}
				return list;
			}
		});
	}



}

这里还要修改TreeNode.java

package com.liwangwang.vue.entity;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

public class TreeNode implements Serializable{
	private Integer treeNodeId;
	private String treeNodeName;
	private Integer treeNodeType;
	private Integer parentNodeId;
	private String url;
	private Integer position;
	private String icon;
	private List<TreeNode> children = new ArrayList<>();




	@Override
	public String toString() {
		return "TreeNode [treeNodeId=" + treeNodeId + ", treeNodeName=" + treeNodeName + ", treeNodeType="
				+ treeNodeType + ", parentNodeId=" + parentNodeId + ", url=" + url + ", position=" + position
				+ ", icon=" + icon + ", children=" + children + "]";
	}

	public Integer getTreeNodeId() {
		return treeNodeId;
	}

	public void setTreeNodeId(Integer treeNodeId) {
		this.treeNodeId = treeNodeId;
	}

	public String getTreeNodeName() {
		return treeNodeName;
	}

	public void setTreeNodeName(String treeNodeName) {
		this.treeNodeName = treeNodeName;
	}

	public Integer getTreeNodeType() {
		return treeNodeType;
	}

	public void setTreeNodeType(Integer treeNodeType) {
		this.treeNodeType = treeNodeType;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public Integer getPosition() {
		return position;
	}

	public void setPosition(Integer position) {
		this.position = position;
	}

	public String getIcon() {
		return icon;
	}

	public void setIcon(String icon) {
		this.icon = icon;
	}

	public List<TreeNode> getChildren() {
		return children;
	}

	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}

	public Integer getParentNodeId() {
		return parentNodeId;
	}

	public void setParentNodeId(Integer parentNodeId) {
		this.parentNodeId = parentNodeId;
	}





}

TreeNode.hbm.xml

<hibernate-mapping>
	<class table="t_vue_tree_node" name="com.liwangwang.vue.entity.TreeNode">
		<id name="treeNodeId" type="java.lang.Integer" column="tree_node_id">
			<generator class="increment">generator>
		id>

		<property name="treeNodeName" type="java.lang.String" column="tree_node_name">property>
		<property name="treeNodeType" type="java.lang.Integer"
			column="tree_node_type">property>

		 <property name="parentNodeId" type="java.lang.Integer" column="parent_node_id">property>
		<property name="url" type="java.lang.String" column="url">property>
		<property name="position" type="java.lang.Integer" column="position">property>
		<property name="icon" type="java.lang.String" column="icon">property>
		<bag lazy="false" name="children" cascade="save-update" inverse="true">
			<key column="parent_node_id">key>
			<one-to-many class="com.liwangwang.vue.entity.TreeNode" />
		bag>
	class>
hibernate-mapping>

---

前端

action.js

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/sshdemo', //服务器
	'SYSTEM_USER_DOLOGIN': '/vue/userAction_login.action', //用户登陆
  'SYSTEM_USER_USERCODE': '/vue/userAction_userCode.action', //验证码验证
  'SYSTEM_MENU_TREE_LIST': '/vue/treeNodeAction_selectbylist.action', //树形的另一个
	'SYSTEM_USER_DOREG': '/vue/userAction_reg.action', //用户注册
	'SYSTEM_MENU_TREE': '/vue/treeNodeAction_selectlist.action', //左侧树形菜单加载
	'SYSTEM_ARTICLE_LIST': '/vue/articleAction_list.action', //文章列表
	'SYSTEM_ARTICLE_ADD': '/vue/articleAction_add.action', //文章新增
	'SYSTEM_ARTICLE_EDIT': '/vue/articleAction_edit.action', //文章修改
	'SYSTEM_ARTICLE_DEL': '/vue/articleAction_del.action', //文章删除
	'SYSTEM_USER_GETASYNCDATA': '/vue/userAction_getAsyncData.action', //vuex中的异步加载数据
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

存储设计

set

get

action.js

export default{
  setResturantNameByAsync:(state,payload)=>{
    console.log("aaa");
    setTimeout(()=>{
      console.log("bbb");
      state.commit('setResturantName',payload);
      // state.resturantName = payload.resturantName;//这个是没办法将state容器里面的值改变的
    },3000);
    console.log("ccc");
  },
  doAjax: (context, payload) => {
		let _this = payload._this
		let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;
		_this.axios.post(url, {}).then((response)=> {
			console.log(response);
		}).catch(function(error) {
			console.log(error);
		});
	},

  doMenus:(state, payload) => {
    let _this = payload._this
    let url = _this.axios.urls.SYSTEM_MENU_TREE_LIST;

     _this.axios.post(url,{treeNodeId:payload.treeNodeId}).then((response)=>{
      console.log(response);
     _this.$store.commit('setMenus',{
        menus:response.data.result
      });
      console.log("改变后"+_this.$store.getters.getMenus);


    }).catch(function(error){
        console.log(error);
    });

  }

}

前端页面

AppMain.vue

<template>
	<el-container class="main-container">
		<el-aside v-bind:class="asideClass">
			<LeftNav>LeftNav>

		el-aside>
    	<LeftNav1>LeftNav1>

		<el-container>
			<el-header class="main-header">
				<TopNav>TopNav>
			el-header>
			<el-main class="main-center">
				<router-view>router-view>
			el-main>
		el-container>
	el-container>
template>

<script>
	// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'
  import LeftNav1 from '@/components/LeftNav1.vue'

	// 导出模块
	export default {
		data(){
      return{
        asideClass:'main-aside'
      };
    },
    components:{
      TopNav,LeftNav,LeftNav1
    },
      created(){
        this.$root.Bus.$on("collapsed-side",(v)=>{
          this.asideClass = v ? 'main-aside-collapsed' :'main-aside'

        });
      }
	};
script>
<style scoped>
	.main-container {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.main-aside-collapsed {
		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
		width: 64px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}

	.main-aside {
		width: 240px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}

	.main-header,
	.main-center {
		padding: 0px;
		border-left: 2px solid #333;
	}
style>

LeftNav.vue

<template>
	<el-menu router default-active="$route.path" class="el-menu-vertical-demo"  background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b"  >
		
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		div>
    



      <el-submenu :index="'id_'+m1.treeNodeId" v-for="m1 in treemenus">
          <template slot="title">
            <i :class="m1.icon">i>
            <span  @click="changeNode(m1.treeNodeId)" >{{m1.treeNodeName}}span>
          template>
       el-submenu>


	el-menu>
template>
<script>
	export default {
      data(){
        return{
          // collapsed:false,
          treemenus:[],
        };
      },
      created(){
        // this.$root.Bus.$on("collapsed-side",(v)=>{
        //   this.collapsed = v;
        // });
        let url = this.axios.urls.SYSTEM_MENU_TREE;

        this.axios.post(url,{}).then((response)=>{
          console.log(response);
          let data = response.data.result;

           this.treemenus = data;

            this.$store.dispatch('doMenus',{
              _this: this,
              treeNodeId:1
            })




        }).catch(function(error){
            console.log(error);
        });


      }
      ,
      methods: {
        changeNode(treeNodeId) {
            console.log("调用成功:"+treeNodeId)
             this.$store.dispatch('doMenus',{
              _this: this,
              treeNodeId:treeNodeId
            })


        }
      },
	}
script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
style>

LeftNav1.vue

<template>
	<el-row class="tac">
  <el-col :span="12">
    <h5>h5>
    <el-menu>
      <el-submenu :key="'id_'+m.treeNodeId" :index="m.url" v-for="m in menus">
        <template slot="title">
          <i :class="m.icon">i>
         <span  >{{m.treeNodeName}}span>
        template>
      el-submenu>

    el-menu>
  el-col>

el-row>
template>
<script>
	export default {
      data(){
        return{

        };
      }
      ,
      computed: {
        menus() {
          return  this.$store.getters.getMenus;
        }
      },
	}
script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
style>