保姆级课程：Spring Boot+Vue前后端分离开发（第二天）

于 2024-07-27 21:37:58 发布
阅读量136 收藏 6
点赞数 2
文章标签： spring boot vue.js 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41567696/article/details/140738342
版权

保姆级教程：Spring Boot+Vue前后端分离开发：第二天

第二天任务概要

学习Element UI的使用

第一步：新建一个VUE工程

参考我之前的文章：
https://blog.csdn.net/qq_41567696/article/details/140696957
VUE2.0建议采用第一种方式创建
创建完成后，使用cd命令进入创建的项目文件夹，运行：

npm run serve

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第二步：VUE安装ElementUI

使用idea导入刚才创建的Vue前端框架，打开终端，输入：

npm i element-ui -S

按回车进行安装：
在这里插入图片描述
打开node_modules目录，若出现下图中红色箭头所指的文件夹与信息，则安装成功。
在这里插入图片描述
打开src下的main.js文件
在这里插入图片描述
向里面添加红框中的代码，完全引入ElementUI组件
在这里插入图片描述

第三步：打开ElementUI官网，进行代码参考

输入网址：
https://element.eleme.cn/#/zh-CN
打开，跳转到“组件”->"Container 布局容器"选择页面布局
在这里插入图片描述
做一个管理系统一般使用以下布局：
在这里插入图片描述
往下拉，找到相应的实例，点击实例下面的箭头，打开代码：
在这里插入图片描述
在这里插入图片描述
找到代码之后，进行复制，并粘贴到我们的Vue工程里的App.vue中：
App.vue代码：

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']" :default-active="'1-1'">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

终端运行，打开浏览器查看，效果如下：
在这里插入图片描述
重要标签解释如下：

#构建整个页面框架
<el-container></el-container>
#构建左侧菜单
<el-aside></el-aside>
    :default-openeds="['i', 'j']" #默认展开id为i与id为j的菜单
    :default-active="'i-j'"  #默认选中id为i-j的菜单
<el-submenu index="i-j"> #可展开的菜单。index为字符串类型。
	<el-menu-item>子菜单栏</el-menu-item>
</el-submenu>
<template></template> #对应el-submenu的菜单名，用于描述内容
<i class="el-icon-menu"></i> #设置相应图标
<el-menu-item></el-menu-item> #不可再展开的子节点

第四步：通过Vue router动态加载菜单

假如菜单格式定义如下：

导航1
----页面1
----页面2
导航2
----页面3
----页面4

首先在views中创建4个vue文件，分别是：Page1.vue，Page2.vue，Page3.vue，Page4.vue，同时加上相应标题：

<h1>这是页面i</h1>

在这里插入图片描述

然后打开“src/router/”下的index.js，进行文件导入与代码编写：
在这里插入图片描述
添加路由：
在这里插入图片描述
为了将每个Page文件的信息进行显示，因此重写App.vue代码：
在中添加：

  <router-view></router-view>

index.js完整代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Page1 from "../views/Page1.vue";
import Page2 from "../views/Page2.vue";
import Page3 from "../views/Page3.vue";
import Page4 from "../views/Page4.vue";
import App from "../App";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: '导航1',
    component: App,
    children:[
      {
        path: '/Page1',
        name: '页面1',
        component: Page1
      },
      {
        path: '/Page2',
        name: '页面2',
        component: Page2
      }
    ]
  },
  {
    path: '/navigation',
    name: '导航2',
    component: App,
    children:[
      {
        path: '/Page3',
        name: '页面3',
        component: Page3
      },
      {
        path: '/Page4',
        name: '页面4',
        component: Page4
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

App.vue完整代码如下：

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

<!--    动态读取src/router中index.js里的菜单名称    -->
        <el-menu>
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''"><!--第一个router可以简单理解为src/router，第三个router指index.js中的routes数组。index是item的下标-->
            <template slot="title"><i class="el-icon-setting">{{item.name}}</i></template><!--获取每一项的名称，即表格名称-->
            <el-menu-item v-for="(item1,index1) in item.children" :index="index+'-'+index1">
              <template slot="title"><i class="el-icon-setting">{{item1.name}}</i></template><!--获取每一项的名称，即表格名称-->
            </el-menu-item>
          </el-submenu><!--通过for循环读取菜单里的数据-->
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

未完待续，马上出第三天内容~

YZ122552
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
novel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型小说项目
06-13
novel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型小说项目，配备保姆级教程手把手教你从零开始开发上线一套生产级别的 Java 系统，由小说门户系统、作家后台管理系统、平台后台...
保姆级课程：Spring Boot+Vue前后端分离开发（第一天）
最新发布
qq_41567696的博客
07-26 819
运行启动类，启动后端项目，在浏览器地址栏输入：http://localhost:8081/book/findAll。使用VUE3的朋友可能会发现main.js中存在语法报错的问题，原因是IDEA js版本太低。导入完成之后，打开File->settings->Plugins，下载并安装Vue.js插件。当安装完成之后，App.vue变为相应图标，导入过程完成，可以进行开发。输入http://localhost:8080/book，跳出页面。选中刚才新建的项目，点击下方的OK。
SpringBoot+Vue前后端分离开发案例
听夜雨声烦
03-07 1904
快速搭建前后端开发平台，实现前后端交互
Springboot+Vue前后端分离项目-管理系统-上
m0_56308072的博客
05-28 5437
前端技术Vue 前端框架Vuex 全局状态管理框架ElementUI 前端UI框架。
【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端
热门推荐
大菜的博客
02-09 3万+
【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记
springboot+Vue前后端分离项目配置整合
这里是Mae。
02-11 3331
springboot+vue前后端分离项目配置整合(超详细！保姆级教学！)
1小时学会SpringBoot3+Vue3前后端分离开发
Enaium的博客
04-25 1665
首先我们需要创建数据库，比如一个图书管理系统，需要有一张图书表，有一些字段，比如标题、作者、创建时间、等等。注解，之后添加一些方法，名称就是根据数据库中字段名称一样，只不过要把蛇形命名改为小驼峰。写完之后，我们按下编译的快捷键(默认是 Ctrl+F9)，之后就可以编写接口了。这样我们的后端就写完了，接下来我们开始写前端。，我们使用左侧一栏来选择页面，右侧来展示页面。这样我们的前端就写完了，接下来我们启动项目。的基础知识，环境这里就不多说了，直接开始。之后我们就可以创建实体类了，这里需要先引入。
Docker+nginx部署SpringBoot+vue前后端分离项目（保姆及入门指南）
Hanson的博客
05-21 1456
Docker+nginx部署SpringBoot+vue前后端分离项目（保姆及入门指南）
2024最新最详细保姆教程！SpringBoot+Vue前后端分离项目部署运行教程文档。
06-18 774
如果过程中遇到任何报错问题，不要担心，一步一步跟着我的视频，我的笔记来排查。相信你最终也一定可以运行出来项目，能够独立运行出来这个项目是个非常有成就感的事情。能够这么认真仔细教你如何安装软件，部署项目的up主你还见过第二个吗？这么宝藏的up还不来个一键三连+关注！
Vue 脚手架结合 SpringBoot 构建前后端分离入门项目（实现增删改查）
2301_76348242的博客
04-30 896
面试题文档来啦，内容很多，485页！由于笔记的内容太多，没办法全部展示出来，下面只截取部分内容展示。
novel 是一套基于 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型小说项目
05-29
novel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型小说项目，配备保姆级教程手把手教你从零开始开发上线一套生产级别的 Java 系统，由小说门户系统、作家后台管理系统、平台后台...
在Spring Boot中实现异步处理与并发控制
技术研究中心
07-25 1436
通过在Spring Boot中实现异步处理与并发控制，我们能够优化应用程序的性能，提升响应速度。通过配置自定义线程池、使用异步方法、定时任务及并发控制技术，我们可以有效地管理系统资源和提升应用的吞吐量。这一过程涉及到异步任务的执行、线程池的配置、以及并发控制的实践，以帮助我们提升应用的性能和响应能力。可以通过Actuator暴露的端点监控异步任务的执行情况和线程池的状态。JVisualVM是一个监控和分析JVM的工具，可以查看线程池的使用情况和异步任务的执行状态。异步处理依赖于线程池来管理执行任务的线程。
【JavaEE】Spring Boot 自动装配原理(源码分析)
m0_74105656的博客
07-24 870
Spring自动装配原理的源码分析
Spring Boot集成screw实现数据库文档生成
HBLOG
07-24 388
在企业级开发中、我们经常会有编写数据库表结构文档的时间付出，从业以来，待过几家企业，关于数据库表结构文档状态：要么没有、要么有、但都是手写、后期运维开发，需要手动进行维护到文档中，很是繁琐、如果忘记一次维护、就会给以后工作造成很多困扰、无形中制造了很多坑留给自己和后人。
Spring boot 2.0 升级到 3.3.1 的相关问题 （六）
飞一站的博客
07-24 488
解决Spring boot 2.0 升级到3.3.1 版本的`BeanPostProcessor`警告问题。
Spring Boot 项目中使用事件发布和监听来实现消息推送和处理
servepeople的博客
07-23 458
首先，定义一个事件类，该类继承自import org} }} }
Spring Boot集成Spring Batch快速入门Demo
HBLOG
07-20 917
Spring Batch 是一个轻量级的开源框架，它提供了一种简单的方式来处理大量的数据。它基于Spring框架，提供了一套批处理框架，可以处理各种类型的批处理任务，如ETL、数据导入/导出、报表生成等。Spring Batch提供了一些重要的概念，如Job、Step、ItemReader、ItemProcessor、ItemWriter等，这些概念可以帮助我们构建可重用的批处理应用程序。
教师管理系统 spring boot+vue前后端分离
05-14
教师管理系统是一个很重要的系统，它将教学管理的课程、教师、学生等信息整合起来，便于管理和查询。在设计该系统时，可以采用前后端分离的方法，使用Spring Boot和Vue框架进行开发。 Spring Boot是一个用于构建单独的、可自包含的Spring应用程序的框架。Spring Boot可以快速搭建应用程序并提供了很多集成插件，能够很方便地与前端框架Vue进行协作。 Vue是一个轻量级MVVM框架，它能够快速构建响应式的单页Web应用程序。Vue提供了丰富的可复用的组件，并提供了数据绑定、事件绑定、过渡效果等特性，使得前端开发更加便捷。 采用前后端分离的方法，可以将数据和UI相分离，将前端和后端的开发分别进行。后端负责提供API接口，前端通过接口获取数据，并对数据进行展示和处理。 具体实现时，可以使用Spring Boot提供的RESTful API编写后端代码，定义路由和控制器。前端则可以使用Vue框架组织UI界面，并通过axios or fetch等JavaScript库发送请求获取数据，实现与后端API的交互和数据交换。 总之，采用Spring Boot和Vue框架进行前后端分离的开发可以提高开发效率，提升系统稳定性和性能，更好地实现教师管理系统的各项功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YZ122552

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值