继续挖掘vue

vue 后台登录和权限模块开发。

https://juejin.cn/post/6959388179380043784
https://shimo.im/docs/pxwyJHgqcWjWkTKX/read
（案例学习）
https://mp.weixin.qq.com/s/uD5_NgHryfJGWEP4uxlA5w
这个步骤和我的差不多思路。我没有使用shiro
还有一个b站里面

登录功能的完成。

axios 的使用，初始化。

// create an axios instance
const service = axios.create({
  baseURL: 'http://192.168.1.138:1000', // url = base url + request url
  timeout: 5000,
  withCredentials: false
})

 loginForm:{
                name:'admin',
                pass:'123456'
            }
// 为给定 ID 的 user 创建请求
axios.post('/login')
  
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

网络请求会遇到跨域情况。这个几个项目里面都说了这一点。。。
基本都是对WebMvcConfigurer 拦截的重写。

/**
     * 跨域问题解决 vue 访问出现的
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }

开始写首页了。
学习vue 案例。开始实战中。
在router 里面添加index js 中添加路径

import home from '@/views/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
  ]
})

登录成功之后，进入首页。。。

localStorage.setItem("Token", data.token)
                // console.log(data.token)
                // alert(response.data.token);
                this.$router.push({
                    path: '/'
                }) // 登录成功之后重定向到首页

image.png

代码

<template>
  <el-container style="height: 100%">
    <!--左侧 菜单-->
    <el-aside width="auto">
      <el-menu :collapse='!showSidebar' :default-active="this.$route.path"
               class="el-menu-vertical-demo" text-color="#595959">
        <!-- logo -->
        <div style="color: #1890ff; height: 40px; text-align: center; ">
          <h1 style="font-size: 20px;" >xxxxx</h1>
          <!--<h1 >125588</h1>-->
        </div>

        <!-- 菜单树 -->
        <template v-for="item in menuList">
          <el-submenu :index="item.url" :key="item.id" v-if="item.children.length != 0">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <el-menu-item :index="child.url" :key="child.id" @click="menuAction(child.url)"
                          style="margin-left: 10px;" v-for="child in item.children">
              {{child.name}}
            </el-menu-item>
          </el-submenu>
          <el-menu-item :index="item.url" :key="item.id" @click="menuAction(item.url)"
                        v-if="item.children.length === 0">
            <i :class="item.icon"></i>
            <span @click="menuAction(item.id)" slot="title">{{item.name}}</span>
          </el-menu-item>
        </template>

      </el-menu>
    </el-aside>
    <!-- 右边详情界面 -->

    <el-container>
      <el-header>
        <!-- 菜单树控制按钮 -->
        <span>
          <i :class="showSidebar ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click.stop="switchSidebar"
             style="font-size: 25px;cursor:pointer;"></i>
        </span>

        <!-- 右侧 -->
        <div class="header-right">
          <el-dropdown style="margin-left: 5px;">
            <span class="el-dropdown-link">
              <i class="el-icon-user-solid" style="font-size: 20px">
                <span style="font-size: 15px; margin-left: 5px; ">{{loginUser.name}}</span>
              </i>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" style="padding-bottom: 4px;">
              <el-dropdown-item
                @click.native="menuAction('/loginDetail',{code: loginUser.code})">个人中心
              </el-dropdown-item>
              <el-dropdown-item
                @click.native="menuAction('/modifyPassword',{code: loginUser.code})">修改密码
              </el-dropdown-item>
              <el-dropdown-item @click.native="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
</template>

methods 是方法的地方。。。
例如退出登录

 methods: {
      /*菜单显示和隐藏*/
      switchSidebar () {
        this.showSidebar = !this.showSidebar
      },
      /*菜单的展示和显示*/
      menuAction (url, query) {
        this.$router.push({path: url, query: query})
      },
      logout(){
        localStorage.clear()
        this.$router.push({
          path: '/login'
        })
      },
    },

刚启动home 的页面的时候获取数据

/**
     * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
     */
    created() {

    },

这里获取权限和用户信息
权限先写死。。。一个json 串。。
然后在写两个界面。。。route.push 就可以了。。。

image.png

这样做就需要把route中index.js 修改了一下。


export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {tab: false},
      component: home,
      children: [
        {
          path: '/home',
          name: 'index',
          component: index
        },
        {
          path: '/info',
          name: 'info',
          component: info
        },
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },

  ]
})

home 下有俩个路径，就代表着有俩个文件，点击就是上面的效果了。。
登录路径没有在里面，所以登录时其它的界面。。。

首页搭建完成。开始从后台获取数据，然后显示出来。

首页几乎是静态的页面。
rout push 路径，只要在首页里面是他自路径就行了。

最近看了一篇文章
https://juejin.cn/post/6951649464637636622

还有