SSM整合项目（使用Vue3 + Element-Plus创建项目基础页面）

1.配置Vue启动端口

1.修改vue.config.js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true
})
module.exports = {
    devServer: {
        port: 9999 //启动端口
    }
}
2.启动

image-20240310091319021

2.安装Element Plus

命令行输入 npm install element-plus --save

image-20240310091915697

3.修改Vue3默认样式并自定义一个组件

1.修改App.vue
1.删除原有结构
<template>
  <div>

  </div>
</template>

<style>

</style>
2.启动项目查看

image-20240310092602015

2.修改HomeView.vue
<template>
  <div>

  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {

  }
}
</script>
3.删除HelloWorld.vue组件

image-20240310092952626

4.创建一个组件 src/components/Header.vue
1.组件解释

image-20240310093749335

2.代码
<template>
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;
display: flex">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color:
dodgerblue">后台管理
    </div>
    <div style="flex: 1"></div>
    <div style="width: 100px">下拉框</div>
  </div>
</template>
<script>
export default {
  name: "Header"
}
</script>

<style scoped>

</style>
5.App.vue引入组件
<template>
  <div>
    <!--使用Header组件-->
    <Header></Header>
    Home页面
  </div>
</template>
<script>
//引入Header组件
import Header from "@/components/Header.vue";
//导出Header组件，当前Vue组件的名字为Layout
export default {
  name: "Layout",
  components: {
    Header
  }
}
</script>
<style>

</style>

image-20240310094743408

6.本阶段总结

image-20240310095102268

4.创建全局的global.css并引入

1.目录

image-20240310095411715

2.代码
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
3.解释

image-20240310095531357

4.在main.js引入

image-20240310095652205

5.main.js引入Element-Plus

1.修改main.js

image-20240310100053063

2.测试Element-Plus是否生效
1.打开Element-Plus官方文档，查找一个按钮组件

image-20240310100455302

2.放到App.vue中

image-20240310100540756

3.查看页面，报错

image-20240310100614632

4.尝试解决问题
1.alt + enter安装组件

2.但是报错

Cannot install Node.js module: D:\nodejs(14.17.3)\npm.cmd install element-plus --save Standard error: ‘D:\nodejs’ �����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ���

5.重装nodejs
1.这次存放在nodejs文件夹下，之前的文件夹是带中文括号的，不知道是不是这个原因

image-20240310103124278

2.配置IDEA的nodejs

image-20240310103238891

3.再次尝试运行，又报错，这次是解释器的问题

Cannot install Node.js module: please specify default Node.js interpreter.

6.配置一下IDEA的Node.js的解释器

image-20240310103440030

7.再次尝试安装，成功！

image-20240310103521618

8.启动项目，成功出现按钮

image-20240310103555975

6.显示个人信息和退出登录的下拉框

1.需求分析

image-20240310103712371

2.去组件库找到下拉框的组件

image-20240310104217930

3.修改自定义组件src/components/Header.vue
<template>
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;
display: flex">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color:
dodgerblue">后台管理
    </div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown>
    <span class="el-dropdown-link">
      Tom
    </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>
export default {
  name: "Header"
}
</script>

<style scoped>

</style>
4.效果展示

image-20240310104318827

7.创建侧边栏并调整布局

1.需求分析

image-20240310104510630

2.查找侧边栏组件

image-20240310110323365

3.粘贴到src/components/Aside.vue并修改
<script setup>

</script>

<template>
<!--  引入导航菜单-->
  <div>
    <el-menu style="width: 200px"
        default-active="2"
        class="el-menu-vertical-demo"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>导航一</span>
        </template>
        <el-menu-item-group title="组一">
          <el-menu-item index="1-1">选项一</el-menu-item>
          <el-menu-item index="1-2">选项二</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-4">
          <template #title>选项四</template>
          <el-menu-item index="1-4-1">选项一</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span>导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon><document /></el-icon>
        <span>导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <span>导航四</span>
      </el-menu-item>
    </el-menu>  </div>
</template>

<style scoped>

</style>
4.修改App.vue引入Aside组件并布局
<template>
  <div>
    <!--  布局-->
    <div>
      <!--header组件-->
      <Header/>
      <!--主体，弹性布局-->
      <div style="display: flex">
        <!--侧边栏-->
        <Aside/>
        <!--内容区域，这个部分通过路由来展示，这里路由到HomeView, flex: 1-->
        <!--这里路由的view默认是/也就是HomeView组件-->
        <router-view style="flex: 1"/>
      </div>
    </div>

  </div>
</template>
<script>
//引入Header组件
import Header from "@/components/Header.vue";
//引入Aside
import Aside from "@/components/Aside.vue";
//导出Header组件，当前Vue组件的名字为Layout
export default {
  name: "Layout",
  components: {
    Header,
    Aside
  }
}
</script>
<style>

</style>
5.在路由到的组件HomeView随便放入一个Element组件测试
<template>
  <div>
    <el-empty description="description" />
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {

  }
}
</script>
6.结果展示

image-20240310112806054

8.修改HomeView.vue添加斑马表格

1.找到组件

image-20240310113750353

2.修改HomeView.vue
<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
<!--      把width去掉，就会自适应-->
      <el-table-column prop="date" label="日期"/>
      <el-table-column prop="name" label="名字"/>
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {

  },
  //增加一个data，单项绑定tableData
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    }
  }
}
</script>
3.结果展示

image-20240310113930703

9.Element-Plus国际化

1.官方文档

image-20240310114339565

2.修改main.js进行国际化

image-20240310114417103

3.当表格没有数据时就是中文的暂无数据了

image-20240310114440439

10.从官网设置测试数据，并支持日期排序

1.修改HomeView.vue

image-20240310135357448

2.data更新为中文数据

image-20240310135419200

3.结果展示

image-20240310135441807

11.添加相关的操作按钮和搜索框

1.需求分析

image-20240310140641584

2.修改HomeView.vue
1.增加按钮
<template>
  <div>
    <!--增加按钮和搜索框-->
    <!--magrin代表上下边距为10px，左右边距为5px-->
    <div style="margin: 10px 5px">
      <el-button type="primary">新增</el-button>
      <el-button>其他</el-button>
    </div>
    <!--再增加一个搜索框并设置边距-->
    <div style="margin: 10px 5px">
      <!--搜索框，双向绑定一个search-->
      <el-input v-model="search" style="width: 30%" placeholder="请输入关键字"/>
      <el-button type="primary">查找</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 90%">
      <!--把width去掉，就会自适应-->
      <el-table-column sortable prop="date" label="日期"/>
      <el-table-column prop="name" label="名字"/>
      <el-table-column prop="address" label="地址"/>
      <!--在表格的最后一列加入两个超链接-->
      <el-table-column fixed="right" label="操作" width="100">
        <template #default>
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
2.新增data绑定搜索框

image-20240310141728537

3.结果展示

image-20240310141805634

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/448168.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

css相邻元素边框重合问题，解决方案

css相邻元素边框重合问题，解决方案

1、如下图所示&#xff0c;在给元素设置边框后&#xff0c;相邻元素会出现重合的问题 2、解决方案 给每个元素设置margin-top以及margin-left为负的边框 <div style"width: 300px;display: flex;flex-wrap: wrap;margin-top: 50px;"><div style"border…
阅读更多...
Python——读写属性

Python——读写属性

采用读写属性的目的就是把录入的数据控制在合理区间。 如&#xff1a;学生的年龄&#xff08;age&#xff09;&#xff0c;学生的身高&#xff08;height&#xff09;... 方法一&#xff1a;利用实例方法来控制 class Student:def __init__(self,name"",age0):self.…
阅读更多...
docker离线搭建仓库

docker离线搭建仓库

要在Docker中搭建本地仓库&#xff0c;可以按照以下步骤进行操作&#xff1a; 首先安装 Docker。根据不同的操作系统选择合适的版本并完成安装过程。打开命令行工具&#xff08;如Terminal或PowerShell&#xff09;&#xff0c;运行以下命令来创建一个新的容器并将其设置为本地…
阅读更多...
基于yolov7与arduino的眼睛跟随模块

基于yolov7与arduino的眼睛跟随模块

基于yolov7与arduino的眼睛跟随模块 整个模块的介绍摄像模块图片传输模块图像检测模块控制模块动力模块 整个模块的介绍 我们首先需要一个图片收集的模块来对当前的图片进行收集然后将图片传至服务端对图片中的眼睛利用YOLO进行检测最后将数据传至arduino使其控制动力模块来进…
阅读更多...
物奇平台超距断连无蓝牙广播问题解决方法

物奇平台超距断连无蓝牙广播问题解决方法

是否需要申请加入数字音频系统研究开发交流答疑群(课题组)？可加我微信hezkz17, 本群提供音频技术答疑服务，+群赠送语音信号处理降噪算法，蓝牙耳机音频，DSP音频项目核心开发资料, 物奇平台超距断连无蓝牙广播问题解决方法 一 问题反馈 二解决方法： 1 运行流程分析 对应代…
阅读更多...
【RabbitMQ】RabbitMQ的交换机

【RabbitMQ】RabbitMQ的交换机

交换机类型 在上文中&#xff0c;都没有交换机&#xff0c;生产者直接发送消息到队列。而一旦引入交换机&#xff0c;消息发送的模式会有很大变化&#xff1a;可以看到&#xff0c;在订阅模型中&#xff0c;多了一个exchange角色&#xff0c;而且过程略有变化&#xff1a; Pub…
阅读更多...
数据结构与算法第三套试卷小题

数据结构与算法第三套试卷小题

1.删除链表节点 **分析&#xff1a;**首先用指针变量q指向结点A的后继结点B&#xff0c;然后将结点B的值复制到结点A中&#xff0c;最后删除结点B。 2.时间复杂度的计算 **分析&#xff1a;**当涉及嵌套循环的时候&#xff0c;我们可以直接分析内层循环即可&#xff0c;看内…
阅读更多...
小白优化Oracle的利器”sqltrpt.sql”脚本

小白优化Oracle的利器”sqltrpt.sql”脚本

SQL调优顾问是Oracle自带的一个功能强大的内部诊断工具&#xff0c;用于对性能不佳的SQL语句给出优化建议。但如果从命令行调用它比较麻烦&#xff0c;幸运的是&#xff0c;Oracle提供了一个方便的内置脚本“sqltrpt.sql”&#xff0c;简化了调用过程。 sqltrpt.sql脚本位于Or…
阅读更多...
实践：qemu 运行 linux riscv with AIA（APLICIMSIC）

实践：qemu 运行 linux riscv with AIA（APLICIMSIC）

RISCV架构 Linux AIA支持 目标&#xff1a;在 Qemu 中运行一个支持 riscv aia 的 linux 翻译参考自&#xff1a;https://lwn.net/Articles/963231/ 文章日期&#xff1a;2024年2月22日&#xff0c;星期四&#xff08;截至2024年3月&#xff0c;最新&#xff09; 这个网站里在不…
阅读更多...
EasyExcel导出自定义表格

EasyExcel导出自定义表格

谈到新技术&#xff0c;每个人都会有点恐惧&#xff0c;怕处理不好。确实&#xff0c;第一次使用新技术会遇到很多坑&#xff0c;这次使用 EasyExcel 这个新技术去做 excel 导出&#xff0c;还要给表格加样式&#xff0c;遇到不同的版本问题&#xff0c;遇到颜色加错了地方&…
阅读更多...
JavaEE企业开发新技术2

JavaEE企业开发新技术2

目录 2.7 Field类的基本概念 文字性概念描述&#xff1a; Field类 2.8 Field的基本操作-1 2.9 Field的基本操作-2 分析&#xff1a; 2.10 Field 的综合练习 总结&#xff1a; 和equals的区别&#xff1a; 使用 比较 使用equals比较 2.7 Field类的基本概念 文字性…
阅读更多...
OpenCV 图像的几何变换

OpenCV 图像的几何变换

一、图像缩放 1.API cv2.resize(src, dsize, fx0,fy0,interpolation cv2.INTER_LINEAR) 参数&#xff1a; ①src &#xff1a;输入图像 ②dsize&#xff1a;绝对尺寸 ③fx&#xff0c;fy&#xff1a;相对尺寸 ④interpolation&#xff1a;插值方法 2.代码演示 import cv2 …
阅读更多...
前端报错404，nginx正常、gateway没有转发请求

前端报错404，nginx正常、gateway没有转发请求

问题描述&#xff1a;前端报错 404 Not Found 原因&#xff1a;nacos中对应服务没有上线&#xff0c;下线后&#xff0c;可以启动本地服务&#xff0c;然后在测试上调试代码。&#xff01;&#xff01; 记住重启对应服务&#xff0c;也不会自动上线。
阅读更多...
JVM的内存区域

JVM的内存区域

JVM内存区域最粗略的划分可以分为堆和栈&#xff0c;当然&#xff0c;按照虚拟机规范&#xff0c;可以划分为以下几个、区域 Java虚拟机运行时数据区 JVM内存分为线程私有区和线程共享区&#xff0c;其中方法区和堆是线程共享区&#xff0c;虚拟机栈、本地方法栈和程序计数器是…
阅读更多...
植物病害识别：YOLO水稻病害识别/分类数据集（2000多张，2个类别，yolo标注）

植物病害识别：YOLO水稻病害识别/分类数据集（2000多张，2个类别，yolo标注）

YOLO水稻病害识别/分类数据集&#xff0c;包含疾病和正常2类&#xff0c;共2000多张图像&#xff0c;yolo标注完整&#xff0c;可直接训练。 适用于CV项目&#xff0c;毕设&#xff0c;科研&#xff0c;实验等 需要此数据集或其他任何数据集请私信
阅读更多...
floodfill算法题目

floodfill算法题目

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;在下面的题目中慢慢体会floodFill算法&#xff0c;虽然是新的算法&#xff0c;但是用的思想和前面的文章几乎一样&#xff0c;代码格式也几乎一样&#xff0c;但不要去背代码 图像渲染 https://leetcode.cn/problems/flood…
阅读更多...
事物的传播属性

事物的传播属性

事务传播属性是Spring框架在处理事务时的一个重要概念&#xff0c;它定义了在事务方法被另一个事务方法调用时&#xff0c;如何处理事务边界的行为。这些属性是通过Spring的Transactional注解中的propagation属性来设置的。下面是几个常见的Spring事务传播属性&#xff1a; *RE…
阅读更多...
生成式 AI：使用 Pytorch 通过 GAN 生成合成数据

生成式 AI：使用 Pytorch 通过 GAN 生成合成数据

导 读 生成对抗网络&#xff08;GAN&#xff09;因其生成图像的能力而变得非常受欢迎&#xff0c;而语言模型&#xff08;例如 ChatGPT&#xff09;在各个领域的使用也越来越多。这些 GAN 模型可以说是人工智能/机器学习目前主流的原因&#xff1b; 因为它向每个人&#xff0…
阅读更多...
RK3568 xhci主控挂死问题

RK3568 xhci主控挂死问题

串口日志 rootjenet:~# [18694.115430] xhci-hcd xhci-hcd.1.auto: xHCI host not responding to stop endpoint command. [18694.125667] xhci-hcd xhci-hcd.1.auto: xHCI host controller not responding, assume dead [18694.125977] xhci-hcd xhci-hcd.1.auto: HC died; c…
阅读更多...
微软模拟飞行器回放功能

微软模拟飞行器回放功能

参考b站up主&#xff0c;欢迎大家去关注&#xff1a;https://www.bilibili.com/video/BV1Z34y1P7zz/?spm_id_from333.880.my_history.page.click&vd_source4e0b40493e2382633fab2ddc1bb1d9cc 下载网址&#xff1a;https://flightsim.to/file/8163/flight-recorder 坠毁检…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站