ElementUI01

最新推荐文章于 2024-11-03 11:01:20 发布
最新推荐文章于 2024-11-03 11:01:20 发布
阅读量529 收藏
点赞数
分类专栏： java 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43684164/article/details/103812434
版权
本文详细介绍了前后端分离的概念及其优势，并通过ElementUI框架的安装、导入和使用过程，展示了如何在Vue2.0项目中实现数据表格、分页、高级查询、编辑和删除等功能，同时涵盖了mockjs和axios的使用。
摘要由CSDN通过智能技术生成

ElementUI01

一.前后端分离？

1.1 什么是前后端分离？

前后端分类是一种架构模式,前后端人员先预定好接口,并行开发与测试.上线时进行分别部署.对开发人员能力要求高.对于小型公司或刚转型前后端分离模式公司,开发人员能力有限,采用是后端先行前后端分离开发模式.
在这里插入图片描述
注意：在web应用的开发期进行前后端开发工作的分工，这不是前后端分离，这叫前后端分工。

前后端分离优势：

  • 责任分明，各自做各自擅长的事情
  • 提高开发效率
  • 完美应对复杂多变的前段要求
  • 代码维护性高

二.ElementUI

2.1 什么是ElementUI?

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件。

2.2 安装

在idea的控制台中输入命令：

npm i element-ui -S

也可以下载下来，引入本地文件

2.3 导入

//引入核心js组件
import ElementUI from 'element-ui'; 
//引入依赖的样式
import 'element-ui/lib/theme-chalk/index.css';
//使用
Vue.use(ElementUI);

三.开始使用

3.1 数据表格

<!-- 数据表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      @selection-change="selectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话号码">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建日期">
      </el-table-column>
</el-table>

3.2 安装mockjs

由于使用的是假数据，所以我们用mockjs来模拟
使用mockjs之前需要安装
idea控制台输入命令：

npm install mockjs

3.3 安装axios

使用axios来发送请求 获取模拟数据
命令：

npm install axios --save

3.4 准备模拟数据,并且对外暴露资源(接口)

引入axios

*引入axios模块*/
import axios from 'axios'
/*对Vue对象进行扩展属性$http*/
Vue.prototype.$http = axios;

加载列表：
引入js文件

import User from "../js/user"

<script>
  import User from "../js/user";
  export default {
    name: 'User',
    data () {
      return {
        tableData: []
      }
    },
    methods:{
    //选中复选框触发事件
      selectionChange(v){
        console.debug(v);
      },
      //加载列表
      loadUserList(){
        this.$http.post("/user/list").then(res => {
          this.tableData = res.data.data;
        });
      }
    },
    mounted(){
      //当页面加载完毕的时候发送ajax请求
      this.loadUserList();
    }
  }
</script>

js文件:：

//对外暴露的资源
Mock.mock("/user/list","post",function (options) {
  let data = result.list;
  //响应数据
  return {"data": data};
});

效果：
在这里插入图片描述

3.5 分页+高级查询

<!--高级查询的form表单-->
    <el-form :inline="true" :model="searchForm" style="float: left" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="searchForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="searchForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
<!-- 分页 -->
    <el-pagination style="margin: 10px"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

data:

//双向绑定高级查询
searchForm:{
    username:"",
    email:""
}
	//当前页
    currentPage:1,
    //每页条数
    pageSize:10,
    //下拉列表分页条数
    pageSizes:[5,10,15,20],
    //总条数
    total:0,

methods：

//当前页改变时触发的事件
    currentChange(v){
      this.currentPage = v;
      this.loadUserList();
      this.loading = true;
    },
    //每页条数改变时触发的事件
    sizeChange(v){
      this.currentPage = 1;
      this.pageSize = v;
      this.loadUserList();
      this.loading = true;
    }
/加载列表
    loadUserList(){
      let pageParm = {"page":this.currentPage,"pageSize":this.pageSize,"searchForm":this.searchForm};
      this.loading = true;
      this.$http.post("/user/list",pageParm).then(res => {
        this.tableData = res.data.data;
        this.total = res.data.total;
        this.loading=false;
      });
    }

js：

Mock.mock("/user/list","post",function (options) {
    //分页参数json格式字符串
    let pageJsonStr = options.body;
    //分页参数json对象
    let pageJsonObj = JSON.parse(pageJsonStr);
    //获取当前页
    let page = pageJsonObj.page;
    //获取每页条数
    let pageSize = pageJsonObj.pageSize;

    let begin = (page-1)*pageSize;
    let end = page*pageSize;

    let data = result.list;
    return {data:data.slice(begin,end),
            total:result.list.length
    };
});

在这里插入图片描述

3.6 编辑/删除

表格中加一列

<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="remove(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

在这里插入图片描述

3.6.1删除

这些数据都是模拟的，并未真正实现
methods中remove方法

//删除单条数据
    remove(i,r){
      this.$confirm('亲，确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("/user/remove",r).then(res=>{
          if (res.data.success){
            this.$message({
              type: 'success',
              message: res.data.msg
            });
            this.loadUserList();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }

user.js

Mock.mock("/user/remove","post",function (options) {
    return{
      success:true,
      msg:"删除成功"
    }
});

3.6.2 批量删除

teble中加一列

<el-table-column
    type="selection"
    width="55">
</el-table-column>

teble中加一个属性

@selection-change="selectionChange"

data:

//选中的行
      selectRows: []

methods:

//选中复选框触发事件
    selectionChange(v){
      this.selectRows = v;
    }
//批量删除
    batchRemove(){
      //是否选中一行
      if (!this.selectRows.length){
        this.$message.error('亲，请选择一行再删除！');
        return;
      }
      //确认框
      this.$confirm('亲,确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      	//点击确定后，执行
        this.$http.post("/user/batchRemove",{"rows":this.selectRows}).then(res=>{
          //如果成功
          if (res.data.success){
            this.$message({
              type: 'success',
              message: res.data.msg
            });
            //重新加载
            this.loadUserList();
          }
        });
      }).catch(() => {
        //失败后执行
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }

user.js

Mock.mock("/user/batchRemove","post",function (options) {
  return{
    success:true,
    msg:"删除成功"
  }
});

效果：
在这里插入图片描述在这里插入图片描述在这里插入图片描述

3.6.3 编辑

3.6.3.1添加

添加一个弹出框，并且把form表单放进去

<!-- 面板 -->
    <el-dialog :title="title" :visible.sync="visible" width="30%">
      <!-- 编辑from表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名:">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="email:">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
      </el-form>
      <!-- 编辑提交按钮 -->
      <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog>

data:
动态生成标题
弹出框默认不可见

//弹出框标题
      title:"",
      //弹出框是否可见
      visible:false,

methods:
点击添加，显示弹出框

//添加
    add(){
      this.visible = true,
      this.title = "添加用户"
    }

在这里插入图片描述

3.6.3.2编辑

data:

//表单
      form:{
        name:"",
        email:"",
        phone:""
      }

methods:

//编辑
    edit(i,r){
      //回显,遍历
      for (let row in r){
        this.form[row] = r[row]
      }
      this.visible = true,
      this.title = "编辑用户"
    }

在这里插入图片描述

一只羊驼啊
关注
专栏目录
elementUi总结01
YangJianzuiniubi的博客
12-04 366
一. 前后端分离 1. 什么叫做前后端分离 1.1 概念 在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对...
vueUI-elementUI-01
山茶-峰
05-29 147
VUEUI Unit01 typora (markdown编辑器) 自我介绍 徐铭 xuming@tedu.cn 15201603213 同微信 备注：web2102-中心-名字 学习目标 当有一个合理需求后，可以以自己的能力整理思路实现代码。 学习方法 前三阶段重在知识点（以知识点为主，细，慢，全）。后两阶段（重移动端，重在学习框架的应用和编程思维） 边听边写 与 先听后写 课程安排 VUEUI 5 HTML5新特性 6+1 微信小程序 9 ELementUI
Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
热门推荐
无解的菜鸟晖 的博客
12-02 4万+
一、目的 后台管理系统页面的整体结构如图： 实现顶部一级菜单和左侧二级菜单进行响应，选哪个一级菜单时，左侧菜单栏有相对应下的二级菜单，产生联动效果。然后选不同的二级菜单，主体内容区域展示对应内容。 二、效果图 三、具体操作实现 1、用 vue-cli 创建的 Vue 项目后，自己再手动搭建项目的基本目录结构，如图： 2、创建一个公共组件Whole.vue 来实现整体页面结构的布局，通过 div 来进行区域定位和大小设定。 使用 el-menu 组件的 mode ...
ElementUI(1)：很好的前端开发框架
dawn0718的专栏
01-07 4352
　　前面了解了EasyUI和LayUI，这两款前端开发框架很好，如果要论流行和热度显然不及ElementUI。 　　昨天晚上看了ElementUI，界面、功能、与Vue.js的配合的确是好，使得开发者更专注于界面设计和功能实现，其实，EasyUI和LayUI也应该可以的，为什么就没有这方面的开发案例呢？ 　　实现了表格数据的修改和删除，增加也一样，按钮不好放就没有做，分页要连接数据库，暂时也没有做，后面再做，原理是相通的。 　　EasyUI和LayUI使用上都差不多，ElementUI有点别扭，但必须
ElementUI
IT瘾君子的博客
09-12 3495
1. ElementUI 1.1 ElementUI介绍 ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。 官网地址：https://element.eleme.cn/#/zh-CN 在页面上引入 js 和 css 文件即可开始使用，如下： <!-- 引入ElementUI样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/l
elementUI-01
Dylanyj的博客
12-31 171
1 前后端分离(理解) 什么叫前后端分离: ​ 前端和后端分离开 前端: 将浏览器中为用户进行页面展示的部分称之为前端 后端: 为前端提供业务逻辑和数据准备的所有代码统称为后端 前后端分工: ​ 前后端开发工作的分工就是前后端分离。 前后端分工;(错误的认识) 真的前后端分离: ​ 不仅仅是前端和后端的分工开发,而是架构的模式 ...
ElementUI中的el-form怎样格式化显示1和0为是和否
BADAO_LIUMANG_QIZHI的博客
07-30 1701
场景 某些字段代表是否怎样。 数据库中存储的是int型的1和0。 从数据中取出来的也是1和0。 怎样将其格式化为是和否 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 <el-table-column label="是否跨天" align="center" prop="sfkt" :formatter="sfktFormate" /> 添加formatte
elementUI table导出
weixin_43903629的博客
06-08 599
elementui 表格导出
ElementUI入门
Princess_Y
11-18 1336
ElementUI 常用组件 （1）Container布局容器（用于页面布局） （2）Dropdown下拉菜单（用于首页退出菜单） （3）NavMenu导航菜单（用于左侧菜单） （4）Tabel表格（用于列表展示） （5）Pagination分页（用于列表分页展示） （6）Message消息提示（用于保存、修改、删除的时候成功或失败提示） （7）Tabs标签页（用于一个页面多个业务功能） （8）Form表单（新增、修改时的表单，及表单验证） 入门案例： <!DOCTYPE html> <h
Axure 高保真 ElementUI日期选择元件，日期显示格式“2023-01-02”
12-25
在原型设计的时候，日期选择器经常会用到，包括日历日期的选择、日期时间的选择一般是下拉列表的形式进行选择。...显示的日期为“2023-01-01”式样。 下载即可用。100%模仿了ElementUi的日期选择。
elementui-day01.md
06-04
java
Vue_ElementUI-ING-2021_01:Vue＆ElementUI
03-08
Vue_ElementUI 1_vue简介 2_第1个vue应用程序 3_vue实例对象和生命周期 4_vue生命周期 5_vue模板 6_计算属性 7_v-for渲染 8_摘要更新检测 9_条件渲染 10_事件处理 11_事件对象 12_表单处理 13_实战练习1 14_实战...
HashMap为什么线程不安全？
最新发布
rnnf_yyds的博客
11-03 142
HashMap底层是基于数组 + 链表（在 Java 8 以后，当链表长度超过一定阈值时会转换为红黑树）的数据结构。在多线程环境下，当多个线程同时对HashMap进行put操作时，可下面这种情况：假设两个线程 A 和 B 同时执行put操作，它们计算出的插入位置相同（假设为index线程 A 先获取到了当前index位置的节点，在它还没来得及将新节点插入链表（或树）时，线程 B 也获取到了这个位置的节点。
[自用，更新自day5]瑞吉外卖代码及笔记
lapiii的博客
11-01 817
当使用ThreadLocal维护变量时，ThreadLocal为每个使用该变量的线程提供独立的变量副本，所以每一个线程都可以独立地改变自己的副本，而不会影响其它线程所对应的副本。Mybatis Plus公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，避免了重复代码。因为在分页查询的Dish的records(菜品记录中)，只有这个菜品所属的categoryId，但是我们需要分页的时候展示的是菜品名字。
JAVA 插入 JSON 对象到 PostgreSQL
qq_52143611的博客
10-30 882
在现代软件开发中，由于 JSON 数据的轻量和通用性，处理 JSON 数据已经变得无处不在。PostgreSQL凭借其对 JSON 的强大支持，为存储和查询 JSON 数据提供了出色的平台。为了将JSON数据保存到PostgreSQL数据库中，我们可以将JSON数据转换为PostgreSQL的JSONB类型数据，然后将其存储在数据库中。在Java中，我们可以使用JDBC或者基于ORM框架的方式来实现这一功能。
基于Mysql、JavaScript、PHP、ajax开发的MBTI性格测试网站（前端+后端）
2302_79553009的博客
10-29 1443
本项目旨在构建一个基于MBTI（迈尔斯-布里格斯性格分类指标）理论的在线平台——“16Personalities”。该平台利用PHP、MySQL、JavaScript等技术栈开发，旨在帮助用户更好地理解和运用MBTI理论来评估个人性格类型，并应用于职业规划、团队建设和人际交往等多个方面。用户端功能 包括账号注册与登录、在线性格测试、性格类型浏览、团队评估及在线交友等模块。用户可以通过完成性格测试来获得详细的MBTI性格分析，并通过平台提供的功能与其他具有不同性格类型的用户互动。
SpringSession源码分析
lkr_lkr的博客
11-01 258
默认对常规Session的理解和使用，如何使用Set-Cookie。
Java复习24（PTA)
2301_79272475的博客
10-30 410
Java复习24（PTA)：多种排序的book类*
Android 13 解决 Settings 首页矢量图修改颜色不生效
人生只是一种体验，不必用来演绎完美。
10-30 289
从Android 12 开始, 推出了Material You 设计，并在 Android 13 中得到了改进。导致了修改svg颜色不生效的问题。
elementui唯一
09-05
- *2* *3* [vue+elementui前端表单唯一校验（无分页）](https://blog.csdn.net/VIVI_CSDN01/article/details/129060340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值