正心全栈编程-文档站

Appearance

实现后台管理案例 ​

备课案例代码
html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>后台管理系统</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- 头部区域 -->
    <header class="header">后台管理系统</header>
    <!-- 中间主体区域 -->
    <div class="main">
      <!-- 左侧菜单栏 -->
      <div class="content left">
        <ul>
          <li>
            <a
              href="/users"
              class="router-link-active router-link-exact-active"
              aria-current="page"
              >用户管理</a
            >
          </li>
          <li><a href="/rights" class="">权限管理</a></li>
          <li><a href="/goods" class="">商品管理</a></li>
          <li><a href="/orders" class="">订单管理</a></li>
          <li><a href="/settings" class="">系统设置</a></li>
        </ul>
      </div>
      <!-- 右侧内容区域 -->
      <div class="content right">
        <div class="main-content">
          <div>
            <h3>用户管理区域</h3>
            <table>
              <thead>
                <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>张三</td>
                  <td>10</td>
                  <td><a href="javascript:;">详情</a></td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>李四</td>
                  <td>20</td>
                  <td><a href="javascript:;">详情</a></td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>王五</td>
                  <td>30</td>
                  <td><a href="javascript:;">详情</a></td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>赵六</td>
                  <td>40</td>
                  <td><a href="javascript:;">详情</a></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部区域 -->
    <footer class="footer">版权信息</footer>
  </body>
</html>
css
html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
}

.header {
  height: 50px;
  background-color: #263238;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  color: #fff;
}

.footer {
  height: 40px;
  line-height: 40px;
  background-color: #888;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
}

.main {
  display: flex;
  position: absolute;
  top: 50px;
  bottom: 40px;
  width: 100%;
}

.content {
  flex: 1;
  text-align: center;
  height: 100%;
}

.left {
  flex: 0 0 20%;
  background-color: #314549;
}

.left a {
  color: white;
  text-decoration: none;
}

.right {
  margin: 5px;
}

.btns {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background-color: #f5f5f5;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
}

button {
  height: 30px;
  background-color: #ecf5ff;
  border: 1px solid lightskyblue;
  font-size: 12px;
  padding: 0 20px;
}

.main-content {
  margin-top: 10px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  height: 45px;
  line-height: 45px;
  background-color: #a0a0a0;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #eee;
  line-height: 35px;
  font-size: 12px;
}

th {
  background-color: #ddd;
}

先将 备课案例代码 的文件复制到我们自己的文件夹中。看一下这个文件中的代码编写了一些什么内容，这个页面已经把后台管理页面的基本布局实现了

先把代码复制到本地，并且运行

点击左侧的"用户管理","权限管理","商品管理","订单管理","系统设置"都会出现对应的组件并展示内容

其中"用户管理"组件展示的效果如上图所示，在用户管理区域中的详情链接也是可以点击的，点击之后将会显示用户详情信息。

案例思路 ​

1、创建项目

2、在页面中引入 vue，vue-router，css 文件

3、创建 Vue 实例对象，准备开始编写代码实现功能

显示主体内容 ​

4、希望是通过组件的形式展示页面的主体内容，而不是写死页面结构，所以我们可以定义一个根组件：

只需要把原本页面中的 html 代码设置为组件中的模板内容即可

html
<div>
  <!-- 头部区域 -->
  <header class="header">后台管理系统</header>
  <!-- 中间主体区域 -->
  <div class="main">
    <!-- 左侧菜单栏 -->
    <div class="content left">
      <ul>
        <li>用户管理</li>
        <li>权限管理</li>
        <li>商品管理</li>
        <li>订单管理</li>
        <li>系统设置</li>
      </ul>
    </div>
    <!-- 右侧内容区域 -->
    <div class="content right">
      <div class="main-content">添加用户表单</div>
    </div>
  </div>
  <!-- 尾部区域 -->
  <footer class="footer">版权信息</footer>
</div>

5、当我们访问页面的时候，默认需要展示刚刚创建的 app 根组件，我们可以创建一个路由对象来完成这个事情，然后将路由挂载到 Vue 实例对象中即可

js
// filename: src/router/index.js

import { createRouter, createWebHistory } from "vue-router";

// 创建路由表
const routes = [
  {
    path: "/",
    component: () => import("../views/home.vue"),
  },
];

// 创建路由对象
const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

export default router;

然后在 main.js 中绑定

js
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

补充：到此为止，基本的 js 代码都处理完毕了，我们还需要在 App.vue 设置一个路由占位符

vue
<template>
  <!--放置路由导航视图-->
  <router-view></router-view>
</template>

<script setup></script>

实现路由表 ​

6、此时我们打开页面应该就可以得到一个 VueRouter 路由出来的根组件了

我们需要在这个根组件中继续路由实现其他的功能子组件

先让我们更改根组件中的模板：更改左侧 li 为子级路由链接，并在右侧内容区域添加子级组件占位符

html
<div>
  <div class="main">
    <!-- 左侧菜单栏 -->
    <div class="content left">
      <ul>
        <!-- 注意：我们把所有 li 都修改为了路由链接 -->
        <li><router-link to="/users">用户管理</router-link></li>
        <li><router-link to="/accesses">权限管理</router-link></li>
        <li><router-link to="/goods">商品管理</router-link></li>
        <li><router-link to="/orders">订单管理</router-link></li>
        <li><router-link to="/systems">系统设置</router-link></li>
      </ul>
    </div>
    <!-- 右侧内容区域 -->
    <div class="content right">
      <div class="main-content">
        <!-- 在 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</div>

然后，我们要为子级路由创建并设置需要显示的子级组件

js
import Users from "../views/subviews/users/Index.vue";
import UserInfo from "../views/subviews/users/UserInfo.vue";
import Rights from "../views/subviews/Rights.vue";
import Goods from "../views/subviews/Goods.vue";
import Orders from "../views/subviews/Orders.vue";
import Settings from "../views/subviews/Settings.vue";

// 创建路由表
const routes = [
  {
    path: "/",
    component: () => import("../views/home.vue"),
    children: [
      { path: "/users", component: Users },
      { path: "/userinfo/:id", component: UserInfo, props: true },
      { path: "/rights", component: Rights },
      { path: "/goods", component: Goods },
      { path: "/orders", component: Orders },
      { path: "/settings", component: Settings },
    ],
  },
];

展示用户数据 ​

7、展示用户信息列表：

A.为 Users 组件添加私有数据，并在模板中循环展示私有数据

vue
<template>
  <div>
    <h3>用户管理区域</h3>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in userlist" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <a href="javascript:;" @click="">详情</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";

const userlist = reactive([
  { id: 1, name: "张三", age: 10 },
  { id: 2, name: "李四", age: 20 },
  { id: 3, name: "王五", age: 30 },
  { id: 4, name: "赵六", age: 40 },
]);

const router = useRouter();
</script>

<style scoped></style>

8、当用户列表展示完毕之后，我们可以点击列表中的详情来显示用户详情信息，首先我们需要创建一个组件，用来展示详情信息

vue
<template>
  <div>
    <h5>用户详情页 --- 用户 Id 为：{{ id }}</h5>
    <button @click="go_back()">后退</button>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

defineProps({
  id: Number,
});
const router = useRouter();
const go_back = () => {
  router.go(-1);
};
</script>

然后我们需要设置这个组件的路由规则

js
// 创建路由表
const routes = [
  {
    path: "/",
    component: () => import("../views/home.vue"),
    children: [
      { path: "/users", component: Users },
      // 添加一个/userinfo 的路由规则
      { path: "/userinfo/:id", component: UserInfo, props: true },
      { path: "/rights", component: Rights },
      { path: "/goods", component: Goods },
      { path: "/orders", component: Orders },
      { path: "/settings", component: Settings },
    ],
  },
];

再接着给用户列表中的详情 a 连接添加事件

vue
<template>
  <div>
    <h3>用户管理区域</h3>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in userlist" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <a href="javascript:;" @click="goDetail(item.id)">详情</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";

const userlist = reactive([
  { id: 1, name: "张三", age: 10 },
  { id: 2, name: "李四", age: 20 },
  { id: 3, name: "王五", age: 30 },
  { id: 4, name: "赵六", age: 40 },
]);

const router = useRouter();

const goDetail = (id) => {
  router.push("/userinfo/" + id);
};
</script>