退出登录功能

1.在index.vue中定义一个<el-button>按钮，并且绑定一个点击事件@click="handlelogout"事件，、

2.然后在下方定义一个handlelogout()函数

1
2
3
4
5
function handlelogout () {
  showModel("是否要退出登录？").then(res => {
    console.log("退出登录");
  })
}

3.在util.js中封装一个提示框方法

1
2
3
4
5
6
7
8
9
10
11
12
13
import { ElMessageBox } from 'element-plus'

export function showModel (content = "提示内容", type = "warning", title = ""){
    return ElMessageBox.confirm(
      content,
      title,
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type,
      }
    )
}

4.manager.js中调用logout接口

1
2
3
export function logout() {
  return axios.post("/admin/logout")
}

5.在index.vue文件夹中引入showModel（弹出框）以及toast（提示成功）方法

1
import { showModel, toast } from '~/composables/util'

6.添加.finally方法，不管用户怎样都清除缓存

①移除cookie里的token ②清除当前用户状态 Vuex

将方法写到/store/index.js中的actions中，和登录功能一样首先定义logout方法，然后在里面去调用auth.js中定义的removeToken方法，然后要将vuex中state里的user清空（在使用mutation时，要先解构一下参数里的{commit}，整体代码如下所示：

1
2
3
4
5
6
7
// 退出登录
   logout ({ commit }) {
    // 移除cookie里的token
    	removeToken()
    // 清除当前用户状态 Vuex
        commit("SET_USERINFO",{})
    }

③跳转回登录页

1
2
3
4
5
import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转回登录页
router.push("/login")

④提示退出登录成功

1
2
// 提示退出登录成功
toast("退出登录成功")

⑤在index.vue中引入vuex的useStore方法

1
2
3
4
import { useStore } from "vuex";
const store = useStore()

store.dispatch("logout")

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
function handlelogout () {
  showModel("是否要退出登录？").then(res => {
    logout()
      .finally(() => {
        // 移除cookie里的token 清除当前用户状态 Vuex
        store.dispatch("logout")
        // 跳转回登录页
        router.push("/login")
        // 提示退出登录成功
        toast("退出登录成功")
      })
  })
}

全局loading进度条实现

安装npm i nprogress

1.在composables中的util.js进行封装

1
2
3
4
5
6
7
8
9
import ngrogress from 'ngrogress'
// 显示全屏loading
export function showFullLoading(){
	ngrogress.start()
}
// 隐藏全屏loading
export function hideFullLoading(){
	ngrogress.done()
}

2.由于全局都需要用到，因此到permission.js里进行调用

1
2
3
4
5
6
7
8
import {
  showFullLoading,
  hideFullLoading
} from "~/composables/util"

router.beforeEach(async (to, from, next) => {
    // 显示全屏loading
    showFullLoading()

3.最后在下方添加全局后置守卫（让它在页面加载完后消失）

1
2
// 全局后置守卫
router.afterEach((to, from) => hideFullLoading())

动态页面标题实现

1.首先在/router/index.js下每一个routes增加meta，例如：

1
2
3
4
5
6
7
8
const routes = [
  {
    path: "/",
    component: Index,
    meta: { 
      title:"后台首页"
     }
  },

2.在全局permission.js中设置页面动态标题

1
2
3
// 设置页面标题
let title = (to.meta.title ? to.meta.title : "") + "-中国碳生产率后台"
document.title = title

后台主布局的实现

1.新建src/layouts/admin.vue主布局和/layouts/components/FHeader.vue头部 and FMenu.vue侧边 and FTagList.vue标签导航并初始化，再在admin.vue中进行引入，admin.vue代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <el-container>
    <el-header>
      <f-header></f-header>
    </el-header>
    <el-container>
      <el-aside>
        <f-menu></f-menu>
      </el-aside>
      <el-main>
        <f-tag-list></f-tag-list>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import FHeader from './components/FHeader.vue.js';
import FMenu from './components/FMenu.vue.js';
import FTagList from './components/FTagList.vue.js';
</script>

2.在router/index.js中引入Admin，后台首页更改：

1
2
3
4
5
6
7
8
9
10
11
12
13
 import Admin from "~/layouts/admin.vue"

{
    path: "/",
    component: Admin,
    children: [{
        path: "/",
        component: Index,
        meta: { 
          title:"后台首页"
      }
    }]
  },

公共头部开发—样式布局

FHeader.vue

样式布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
  <div class="f-header">
    <span class="logo">
      <el-icon class="mr-1">
        <eleme-filled />
      </el-icon>
      碳生产率
    </span>
    <el-icon class="icon-btn">
      <fold />
    </el-icon>
    <el-icon class="icon-btn">
      <refresh />
    </el-icon>
    <div class="ml-auto flex items-center">
      <el-icon class="icon-btn">
        <full-screen />
      </el-icon>
      <el-dropdown class="dropdown">
        <span class="flex items-center text-light-50">
          <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
          {{ $store.state.user.username }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>

</script>
<style>
.f-header {
  @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
  height: 64px;
}

.logo {
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}

.icon-btn {
  @apply flex justify-center items-center;
  width: 42px;
  height: 64px;
  cursor: pointer;
}

.icon-btn:hover {
  @apply bg-indigo-600;
}

.f-header .dropdown {
  height: 64px;
  cursor: pointer;
  @apply flex justify-center items-center mx-5;
}
</style>

刷新和全屏(课时26和可视27)

通用弹框表单组件封装（一）

在/src/components下新建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <el-drawer v-model="showDrawer" title="修改密码" size="45%" :close-on-click-modal="false">
    <div class="formDrawer">

    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue';
const showDrawer = ref(false)
// 打开
const open = () => showDrawer.value = true

// 关闭
const close = () => showDrawer.value = false

</script>

未完待续…