若依学习笔记（三）

1.首页数据的加载（前端）

        当账户密码验证码匹配成功后，返回到login.vue中，

   this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});

        “/”是指跳转到路由根路径（即router中的index.js）中的一下代码段，因为该方法的path为“  ”

{
    path: '',//"指的是根路径"
    component: Layout,//加载Layout组件，其实就是文件夹
    redirect: 'index',//重定向，自动加载index。指向下方的component中的路径
    children: [
      {
        path: 'index',
        component: () => import('@/views/index'),
        name: 'Index',
        meta: { title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  },

        在此代码块加载Layout组件，而Layout组件是一个文件夹，默认情况下，默认加载文件夹中的index.vue文件

 <sidebar v-if="!sidebar.hide" class="sidebar-container" />
    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <!--app-main主页面内容-->
      <app-main />
      <right-panel>
        <settings />
      </right-panel>
    </div>

import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' ,

指导入从components文件夹中导入其他文件组件。

所以SideBar是指components中是SideBar中的index..vue文件

该文件的核心代码为：

   <!--获取Login中getRoute方法的菜单用for循环加载出来-->
                <sidebar-item
                 v-for="(route, index) in sidebarRouters"
                    :key="route.path  + index"
                    :item="route"
                    :base-path="route.path"
                />

自此首页加载完成。

2."用户管理“菜单数据的加载

        其他菜单的主页面的跳转是由于数据库中的component字段的路径，寻找 根目录为view中的文件，如用户管理指向的是，system/user./index

        到达index后，发现该页面有三部分组成1：页面的控件，2：部门树状图Tree，3：用户信息列表list。数据由该页面中的初始化方法create中的getList 和getTreeSelect获取

        查看getList，对应到SysUserController，startPage();方法自动对数据进行分页，分页信息的传值是由于，后台封装了HttpServletRequest，根据参数名获取参数值，可以接收到前台的值。调用mapper文件对数据库进行操作后，将返回值进行getDataTable进行封装，返回到前端

        查看SysDeptController中的treeselect，获取到部门信息，

                buildDeptTreeSelect：把数据封装成树形结构返回到前台

                        buildDeptTree：把数据分成父子节点

                        deptTrees.stream().map(TreeSelect::new).collect(Collectors.toList())：            

                               //对deptTrees进行修改，stream把deptTrees的泛型从List换成TreeSelect

                                并只取其中需要的字段，

3.”添加用户“数据预加载

4.新增用户

        校验新增信息是否重复

        在user表，role表和sys_user_role表中添加数据

5.修改用户

        操作数据时，对数据不是单纯的更新操作，而是先删除，再插入。这样也不用判断该数据是否存在

6.删除用户

        不能删除当前用户和超级管理员

        删除role表和sys_user_rolo表中的内容

        注意:user表的数据不会被删除，而是更改一个字段的的值，，此时为逻辑删除