第一部分：
elementplus官网：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)
1、安装elementplus
npm install element-plus --save
查看package.json中存在依赖表示成功安装
2、引入elementplus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)注意：vue3不支持elementUI，所以选择以下搭配其中之一（这里我选的是2）
（1）vue2+elementUI
（2）vue3+elementPlus
3、使用组件设置布局
点击官网上方菜单栏的组件，点击
点击布局容器可以看到示例，我们选择使用最下面的侧边栏的示例代码
Container 布局容器 | Element Plus (element-plus.org)
查看示例的代码，这里选择手动引入（elementplus还支持自动按需引入）
代码主要分成四部分，第一部分我们需要放在template里面，第二部分是选择按需部分引入的方式，我们可以不管，第三部分是放在script里的data部分里面也就是提供页面的数据，具体填入形式如下
<script >
export default {
name: "HomeView",
data(){
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
};
return {
tableData : (Array.from({ length: 20 }).fill(item)),
}
}
}
</script>第四部分是页面的样式，不重要，我们可以不使用
引入完成功编译运行后的结果：
4、在asserts文件夹里面创建一个global.css用来书写全局样式
//global.css
html,body,div{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}然后再main.js里引入 （不要忘了加 ./ ）
将所有菜单的高度改成100% 这个时候滚动页面整个页面不会跟随滚动，菜单栏可以单独滚动
自行调整样式后：
第二部分
1、改变e-menu的背景颜色等一些属性
<el-menu :default-openeds="['1', '3']" style="height: 100%;overflow-x:hidden"
background-color="rgb(48,65,86)" //菜单背景设为藏蓝
text-color="#fff" //字体设为白色
active-text-color="#ffd04b" //选中后字体变成黄色
:collapse-transition="false"
:collapse="isCollapse" //设置初始被展开的属性为false（初始为折叠）
>效果：
2、添加一些图标
先安装elementPlus图标：
npm install --save @element-plus/icons
到elementPlus官网图标下赋值图标标签代码
Icon 图标 | Element Plus (element-plus.org)
<span>Tom
<el-icon style="margin-left: 5px">
<ArrowDownBold></ArrowDownBold>
</el-icon>
</span>
效果：
编写收缩的方法
methods: {
collapse(){ //点击收缩按钮触发
this.isCollapse=!this.isCollapse
}
}此时收缩会出现问题，文字没有隐藏，宽度不对
所以需要将宽度设为动态的
然后再将导航的名称都放在span标签里，就会自动收缩进去
然后更改如果收缩了，图标就改变，这里我用v-if和v-else的组合
再结合前面设置的isCollapse状态
使得图标可以切换
效果：
------------------》
3、设置菜单栏标题：
<div style="height: 60px;line-height: 60px;text-align: center">
<img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top:5px;margin-right: 5px">
<b v-show="!isCollapse" style="color: white">后台管理系统</b>
</div>效果：
----------------------》
linehight如果设置和垂直高度一致，就会居中，否则就会在上方或者下面
style="line-height: 60px"效果：
----------》
4、 阴影特效：
首先去掉e-menu的边框的颜色
border-right-color: transparent再在e-side里面添加阴影属性
box-shadow: 2px 0 6px rgb(0 21 41 / 35%)效果：
第三部分
1、设置表格页码数
进到官网页面，pagination
Pagination 分页 | Element Plus (element-plus.org)
copy“完整功能”代码
黏贴在e-mian标签下的e-table下
<div style="padding: 10px 0">
<el-pagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[100, 200, 300, 400]"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
/>
</div>此时可以看到底部的效果，并且还没有生效
2、设置搜索栏（一定要看script里面是否自动导入了输入框图标）
<el-input style="width: 300px" type="text" placeholder="请输入名称">
<template #prefix>
<el-icon class="el-input__icon">
<search></search>
</el-icon>
</template>
</el-input>
<el-button class="ml-5" type="" style="color: orangered">搜索</el-button>效果：
扩展多个输入框：
3、设置表头颜色和边框
<el-table :data="tableData" border stripe ><style >
.el-table th{
background-color: beige !important
}
</style>效果：
4、添加一些按钮：
增删导入导出
<div style="margin: 10px 0;text-align: left">
<el-button type="primary">新增
<el-icon><CirclePlus></CirclePlus></el-icon>
</el-button>
<el-button type="danger">批量删除
<el-icon><remove></remove></el-icon>
</el-button>
<el-button type="primary">导入
<el-icon><bottom></bottom></el-icon>
</el-button>
<el-button type="primary">导出
<el-icon><top></top></el-icon>
</el-button>
</div>表格里的编辑、删除
<el-table-column label="操作" >
<el-table-column>
<template>slot-scope="scope"</template>
<el-button type="success">编辑
<el-icon><edit></edit></el-icon>
</el-button>
<el-button type="danger">删除
<el-icon><remove></remove></el-icon>
</el-button>
</el-table-column>
</el-table-column>最后的效果：
5、固定表头优化：
(108条消息) vue项目中table表格固定表头和首尾列_梨城毒妃的博客-CSDN博客_vue固定表头
<el-table :data="tableData" border stripe height="500px" max-height="400px" >
至此管理系统的前端雏形已经产生
第四部分
1、加一个页签
在官网的面包屑模块下：
Breadcrumb 面包屑 | Element Plus (element-plus.org)
<div style="margin-bottom: 30px">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
<el-breadcrumb-item :to="{path: '/new'}">用户管理</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
</div>效果：
2、SpringBoot框架搭建
1、创建项目，引入lombok，mybatisplus，mysql等等依赖
后两个依赖在项目勾选时候可以自动导入，所以只用关注前面的
<dependencies>
<!-- lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
</dependency>
<!-- mybatisplus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.1</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.16</version>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
<version>8.0.31</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-core</artifactId>
<version>3.4.3.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
2、编写yml文件
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/mybatisplus_db?serverTimezone=UTC
username: root
password: 123456
main:
banner-mode: off
mybatis-plus:
global-config:
banner: false
server:
port: 8081
效果：
项目结构：
测试springboot
3、数据库设计
建立表：sys_user
写入数据：
建立包和实体接口
使接口继承BaseMapper，并注解为Mapper
在写任何controller时候前面都要加一个注解：RestController
测试连接数据库
用lambdaquery来写查询
@RequestMapping("/select") //访问路径
public List<User> select(){
LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<User>();
// lqw.like(User::getUsername,'a');
List<User> userList = userDao.selectList(lqw);
return userList;
}结果：
