vue学习记录 5

昨天看到侧边导航栏的位置就下班了，现在继续看。

文件位置 src/layout/components/NavBar.vue 但是没有getters，还是没找准位置。同目录下的子组件也没有。佬也记不清当初怎么写的了。

参考之前路由里面给layout重定向到dashboard，会不会这个侧边栏也通过类似的手段，路径变掉了？我之前一直以为这个store文件夹应该是大佬直接下载copy的功能组件，现在决定打开看看。

store文件夹目录：

-store
--|-indexs.js-------------//给Store做模型分割→modules
--|-modules---------------//
--|--|-app.js-------------//cookie控制sidebarStatus
--|--|-formDesign.js------//流程图表单绘制，和侧边栏没关系
--|--|-permission.js------
//侧边栏路由操控处，遍历路由字符串转换为组件对象，处理layout
//涉及到文件有三：（之前位置找对了但没全对）
place = src/components/ParentView
place = src/router的constantRouterMap
place = src/layout/layout.vue
--|--|-sidebarMain.js-----//17行代码，就是用来接收SET_NEW_ROUTES_MAIN的
--|--|-tarsView.js--------
//操作CacheView，页面缓存，也就是公司网页内置标签页的代码
//在百度上找到了实现效果一模一样的……教程网址：http://www.ay1.cc/article/1678784544480716120.html
--|--|-user.js------------//拉各种请求和工具的
--|-getters.js------------//用来声明的，基本都是xx: state => state.app.xx
--|-muatation-types.js----//常量字符串声明，配合mutations使用
--|-mutations.js----------//声明mutations，跟formDesign.js相关

//之前没接触过的modules、state、mutations、actions网上资料或教程
//modules基本用法：https://blog.csdn.net/u013517229/article/details/127906004
//state基本用法：//https://blog.csdn.net/weixin_43010586/article/details/104600544
//mutations基本用法：https://blog.csdn.net/Anony_me/article/details/123897093
//actions基本用法：https://blog.csdn.net/itdabaotu/article/details/90701395

//store具体应用教程：https://blog.csdn.net/w_t_y_y/article/details/105734633

希望菜单栏内容不是存储在后端的，我还想把我扫雷插进去呢。

可以看到，store文件夹中有关侧边栏的文件就：app.js、permission.js、sidebarMain.js、getters.js这几个。app.js就是控制侧边栏开不开的，然后把状态参数传出去；sidebarMain.js是用来接收某个状态量的；getters.js是声明用的。主要依赖permissions.js。所以查看import涉及到的三文件

import { constantRouterMap } from "@/router";
import Layout from "@/layout/Layout";
import ParentView from "@/components/ParentView";

①constantRouterMap位于src/router/index.js，作为export const constantRouterMap之前已经看过

②src/layout/Layout忽略style：

<template>
  <div :class="classObj" class="app-wrapper">
    <!-- 如果正在展示则点击收起 -->
    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <!-- 左侧导航栏容器，分别用到标签navbar、tags-view、app-main，footer-tool被注释掉没启用 -->
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <navbar /><tags-view></tags-view><app-main /><!-- <footer-tool></footer-tool> -->
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain, TagsView, FooterTool } from './components'
import ResizeMixin from './mixin/ResizeHandler'
//连客户端的被删掉了
// import {signalDom} from "./signalr";
// const signalDomDD = new signalDom()
export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView,
    FooterTool
  },
  mixins: [ResizeMixin],
  computed: { 
// 响应事件，用于组件的值跟随其他数据改变，computed用法资料：
//https://blog.csdn.net/alical/article/details/122892108
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    handleClickOutside() { // 合上菜单
      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
    }
  }
}
</script>

③src/components/parentView/index.vue：

<template>
  <router-view />
</template>

连div都没有的，就这三行。

查了一下百度，据说是vue-element-admin三级路由，参考博客：

https://www.cnblogs.com/netcore-vue/p/14911375.html

头好痒，感觉要长脑子了（悲）

 

---

---

终于找齐导航栏配置了：

src/layout/Layout.vue//导入侧边菜单，导航栏，主页面，和网上的基本一样
src/layout/mixin/ResizeHandler.js//自动识别侧边菜单是否关闭
src/layout/components/Sidebar/Navbar.vue//页面顶部菜单栏绘制
// ↑ 汉堡栏<hamburger>+隐藏左侧栏<el-menu-item>+面包屑所用对象<el-badge>+下拉菜单<el-dropdowm>
src/components/Hamburger/index.vue//汉堡栏，一堆svg图参数，控制左侧导航栏的开合
src/components/Breadcrumb/index.vue//配置面包屑路由，会用到router设置的meta
src/layout/components/AppMain.vue//组件演示的页面
src/layout/components/Sidebar/index.vue//左侧侧边栏布局（公司的还加了搜索框）及路由
src/layout/components/Sidebar/SidebarItem.vue//左侧侧边栏菜单项，显示父子菜单
src/layout/components/Sidebar/Item.vue//渲染菜单项图标和标题的
src/layout/components/Sidebar/Link.vue//配置链接的

原来在网上能找到一模一样的，略坑。

然后所有的入口网址或者说接口都在src/api/index.js里，具体为

import * as XXX from "./xxx/xxxx......"

const httpRequest = {
  ...OldeSaaS,
  auth: { Auth },
  XXX(大菜单): {
    XXX(小菜单)
  }
}
export default httpRequest;

而import from的对应路径的文件，以上传文件功能的src/api/.../basicdata/Upload.js为例：

import httpReq from "@/utils/request";

// 上传文件(支持分片,断点续传)
export function uploadfilebreakpointresume(params){
  let url = "/api/...（隐藏）/upload/uploadfilebreakpointresume";
  return httpReq(url, "post", params)
}

// 上传文件
export function uploadfile(params){
  let url = "/api/...（隐藏）/upload/uploadfile";
  return httpReq(url, "post", params)
}

// 查询上传进度
export function uploadpercent(params){
  let url = "/api/....（隐藏）/upload/uploadpercent";
  return httpReq(url, "post", params)
}