qq_45709416的博客

菜单数据不仅仅是要在Home.vue，Login.vue里面使用，还需要在很多很多vue页面里面使用，所以要放在一个所有vue文件都可以访问的地方。Home.vue和Login.vue里面的data只能在各自的页面使用 ，这些data都是局部变量，我要做的事是把加载后的数据放到一个公共的地方，不管是Home.vue还是其他组件都能访问到的地方，放到sessionStorang和localStorage里面是可以访问到的，但是还可以放到vuex什么时候需要状态管理？

菜单表 menu ： menu 自己和自己关联查询自己的 父菜单下的 子菜单 sql语句条件：当前菜单的id 等于 parentId。用户和角色关联表 hr_role ：查询当前用户的具备哪些角色 sql语句条件： 当前角色的ID 等于 这个用户角色 的用户id。菜单和角色关联表 menu_role：查询角色具备的菜单 sql语句条件:菜单的ID 等于 这个角色拥有的菜单 ID。menu表的各个列的意思： menu表 服务端的菜单项数据。用到了4个表，其中menu表自己关联自己。

这两个选项点击是可以跳转到其他页面的，为了测试一个现在views文件夹里面新建两个vue组件，Test1.vue和Test2.vue，新建的vue组件不能直接跳转，还需要在router文件中的index.js文件里面导入才可以用。这时有人会说直接把App.vue里面的复制粘贴到Home.vue页面的template模板的标签里面就行了。要把index.js里面的routers地址数组动态的渲染到左边的导航栏里面去。把侧栏的标签里面的代码拷贝到标签里面，显示效果如下 左侧导航栏的效果代码。

昨天做了微人事登录的前端页面和后端接口，实现了前后端接口的对接，输入正确的用户名和密码之后，成功的跳转到home页。现在要做的就是Home页的Title制作。

前端端分离vhr项目，超详细的笔记项目

element-ui中的el-tree在添加或者删除子节点后，也就是每次数据刷新后树就会收上去，但是如果我们还需要在当前节点下进行后续操作，而且有很多层节点的情况下，就很麻烦了，对用户体验感非常差，那么怎么解决呢？解决办法：定义一个数组，然后点击树节点时，保存下来，存进数据内，刷新后树之前展开的节点就能还是展开的状态。如果在董事会上点添加部门就是董事会的子部门，所以要传的参数一个是父部门的id，一个添加的部门名字。数据不多可以用递归，数据很多就用懒加载的方式。当点击添加的时候应该弹出输入框。

重启服务端的时候，发现前端页面会操作不了，这样后端session会失效，我们就需要让页面重新跳转到登录页。springsecurity配置类后端配置。前端拦截器进行拦截跳转。

这样做的原因是因为要是直接用那个Jl数据会出现一些问题：会出现表格和弹框数据输入，表格也会变，然后就是弹框数据，取消的时候数据还是弹框之前输入取消的数据，导致表格的数据需要刷新才能恢复之前的数据。当点击编辑的时候应该弹出对话框 ，添加这个dialogVisible 变量，默认是关闭的。v-model的值为当前被选中的el-option的 value 属性值。点击编辑弹框，给编辑点击事件的函数里dialogVisible 变量。输入框和选择框输入数据，确认触发点击事件。在表格里进行添加是否启用的标签。

学习了SpringBoot框架之后，我们了解到SpringBoot内嵌了 Tomcat、Jetty、Undertow 三种容器，其默认嵌入的容器是 Tomcat，这个在我们启动 Spring Boot 项目的时候，在控制台上就能看到，具体信息如下：我们可以通过修改 pom.xml 来移除内嵌的 Tomcat 更换为其他的容器，比如更换为 Jetty 容器，配置如下添加完毕之后，更新pom文件，编译项目，启动之后如下显示，代表更改成功。

【代码】微人事项目在线聊天（一）

getCheckedKeys 方法 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组，(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false。## 菜单角色关系修改角色全部展示出来了，还差个预选中的问题，就是选中角色可以操作哪写菜单看数据库有个menu_role 菜单角色关联表 ，根据角色id查询可以操作哪写菜单，把角色可以操作菜单的id查询出来。

数据库: 数据存储的仓库数据库管理系统: 操作和管理数据库的大型软件SQL: 操作关系型数据库的编程语言，是一套标准。

/

我们可以看到我们定义的initPositions并没有调用，我们以前是登录的时候要点击登录的按钮去调用方法，但是我们这个不应该点，应该是页面一加载就会自动的去执行。那么如果让方法自动去执行呢？在methods中的定义的添加方法的代码如下；首先要判断用户是否输入了名字，输入了就去发送添加的请求地址，添加成功之后调用initPositions方法刷新数据，没有输入则弹出提示框。先把table中的数据展示出来，table里面的数据实际上是positions里面的数据，就是要给positions:[] 赋上值。

右边是一个蓝色的添加按钮 type=“primary” 表示是蓝色的 icon=“el-icon-plus”：+号的标记 size="small：小号的。引入之后并不能直接使用，还需要注册成组件，组件有key和value，key和value相同，可以只写一个，定义的组件想当于是自己定义的一个html标签。v-model：一会要添加的数据，这个添加的数据可以从服务端看一下，未来想以json的形式上传它，就可以在data里面声明name默认为空字符。再引入这5个组件，在。

dialogVisible把这个属性设为true 就显示对话框了。职位的名称进行展示到对话框，对话框改变，职位名称也会变。定义一个对象，点击进行赋值表单那项数据。做一个变量的拷贝进行复原没有修改的数据。点击确定按钮是做一个更新操作。在对话框里面做编辑的操作。让输入框跟标签 一样展示。进行后端连接，更新操作，点击确认才会变进行修改了。点击编辑按钮展示对话框。取消还展示输入框得数据。与输入框进行数据绑定。发现取消操作有点问题。

但是，如果用户非这样操作，进入到一个空白的页面，用户体验不好，此时，我们可以使用 Vue 中的前置路由导航守卫，来监听页面跳转，如果用户想要去一个未获授权的页面，则直接在前置路由导航守卫中将之拦截下来，重定向到登录页，或者直接就停留在当前页，不让用户跳转，也可以顺手再给用户一点点未获授权的提示信息。此时，如果没有做任何额外的处理的话，用户确实可以通过直接输入某一个路径进入到系统中的某一个页面中，但是，不用担心数据泄露问题，因为没有相关的角色，就无法访问相关的接口。

删掉了MySQLIntegrityConstraintViolationException这个异常类才能导包，能用。因为mysql字段关联其他表，进行约束了，删除不了的，就报未知错误是不合适的。在后端格式化处理非常简单，加一个注解就能搞定。需要在后端写一个全局异常类。

在controller包里面新建system包，再在system包里面新建basic包，再在basic包里面创建PositionController类，在定义PositionController类的接口的时候，一定要与数据库的menu中的url地址到一致，不然会出现没有权限访问的问题。再把position的增删改三个接口也给写一下。

添加一个点击事件，这个是一个点击多选框会触发的点击事件。给这个按钮添加一个点击事件，进行连接后端，批量删除。没有选中肯定默认是禁用批量删除按钮的，添加一个。赋值给这个空数组变量，保存着始终点击项。定义一个变量，空数组变量。赋值就是当前选择的项。