02. 导入并运行项目脚手架

2519 字约 6 分钟读完669 次阅读更新于 2026/5/3

软件

jdk21、NodeJS18+、MySQL8.0

Navicat、Maven3.8

IDEA2024.1

解压脚手架

D:/毕设

导入 SQL

新建数据库 school_share

执行数据库脚本

运行 Springboot 工程

在网上找一下 IDEA 的破解教程，要求安装 IDEA 的旗舰版

点击按钮导入 MAVEN 依赖

打开 SpringBootApplication 验证下

设置编码 UTF-8

安装插件

设置 JDK

修改 application.yml 配置

修改 IDEA 的默认菜单样式 views -> Appearance

知道什么是 IDEA 的控制台

运行 Vue 工程

配置 npm 的国内镜像

npm config set registry https://registry.npmmirror.com

通过 **npm i **安装 vue 工程的依赖

后续可以通过快捷方式启动 vue

打开 vue 页面

登录系统输入 admin admin

如果出现问题，一定要去看 idea 的控制台错误，一般都是数据库的错误（配置的数据库密码错误，数据库服务没启动，数据库 sql 没执行，没创建数据库...）

启动成功

logo

系统样式

头部 div 设置： background-color: #080c23; **color: white; **

menu 外层 div 设置： background-color: #001529;

.el-menu {
  background-color: #001529;
}
.el-menu-item {
  color: #ddd;
}
:deep(.el-sub-menu__title) {
  color: #ddd;
}
:deep(.el-sub-menu__title):hover {
  background-color: #001529;
}
.el-menu--inline .el-menu-item {
  background-color: #000c17;
}
:deep(.el-menu-item.is-active) {
  background-color: #1890ff;
  color: #fff;
}
.el-menu-item:not(.is-active):hover {
  background-color: #001529;
  color: #fff;
}

最后完成的效果：

Manager.vue 源码

<template>
  <div>
    <div style="height: 60px; background-color: #080c23;  color: white;  display: flex; align-items: center;">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img src="@/assets/imgs/logo.png" alt="" style="width: 40px">
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px">校园物品分享系统</div>
        </div>
      </div>
      <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;">
        <img style="width: 40px; height: 40px; border-radius: 50%" :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="">
        <span style="margin-left: 5px">{{ data.user.name }}</span>
      </div>
    </div>

    <div style="display: flex">
      <div style="width: 200px; background-color: #001529; min-height: calc(100vh - 60px)">
        <el-menu
            router
            style="border: none"
            :default-active="router.currentRoute.value.path"
            :default-openeds="['user']"
        >
          <el-menu-item index="/manager/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-sub-menu index="user">
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">
              <el-icon><User /></el-icon>
              <span>管理员信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/manager/person">
            <el-icon><User /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="/manager/password">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
          </el-menu-item>
          <el-menu-item index="/login" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
        <router-view @updateUser="updateUser" />
      </div>
    </div>

  </div>
</template>

<script setup>
import { reactive } from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}')
})

if (!data.user?.id) {
  ElMessage.error('请登录！')
  router.push('/login')
}

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('system-user') || '{}')
}

const logout = () => {
  ElMessage.success('退出成功')
  localStorage.removeItem('system-user')
  router.push('/login')
}
</script>

<style scoped>
.el-menu {
  background-color: #001529;
}
.el-menu-item {
  color: #ddd;
}
:deep(.el-sub-menu__title) {
  color: #ddd;
}
:deep(.el-sub-menu__title):hover {
  background-color: #001529;
}
.el-menu--inline .el-menu-item {
  background-color: #000c17;
}
:deep(.el-menu-item.is-active) {
  background-color: #1890ff;
  color: #fff;
}
.el-menu-item:not(.is-active):hover {
  background-color: #001529;
  color: #fff;
}

:deep(th)  {
  color: #333;
}
</style>