ElementUI系列

最新推荐文章于 2024-05-22 11:23:12 发布
最新推荐文章于 2024-05-22 11:23:12 发布
阅读量338 收藏
点赞数
文章标签： js vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EvilKingyhq/article/details/104455034
版权

前后端分离

什么是前后端分离模式

是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。

从四个方面理解前后端分离
交互模式不一样

在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，页面跳转，最终返回给浏览器。
在这里插入图片描述

代码的组织形式不一样

在传统架构模式中，前后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时，都必须把整个项目导入到开发工具中。而前后端分离模式在代码组织形式上有以下两种:
半分离
前后端共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。
真分离
前后端代码库分离，前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。而后端 代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，降低 集成风险。
在这里插入图片描述

开发模式不一样

在这里插入图片描述

部署方式也不一样

在这里插入图片描述

总结

前后端分离是一种架构模式,前后端人员先预定好接口,并行开发与测试.上线时进行分别部署.对开发人员能力要求高.对于小型公司或刚转型前后端分离模式公司,开发人员能力有限,采用是后端先行前后端分离开发模式.

ElementUI的使用

环境搭建

1.创建一个static web项目
2.初始化vue项目

vue init webpack

3.运行项目

npm run dev

4.访问首页

localhost:8080
ElementUI基于vue前段ui框架

1.安装elementui

npm i element-ui -S

2.main.js中导入elementui

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

3.开始使用框架：以button为例
codeDemo
3.1先在components组件中新建一个.vue文件button.vue

<template>
  <div class="hello">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>


    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

3.2在router路由中的index.js中导入上面建好的组件

import Button from '@/components/button'

在再index.js中写路由配置

{
      path: '/button',
      name: 'button',
      component: Button
    }

3.3npm run dev运行起来后在网页打开
localhost:8080/button可见效果

ElementUI&axios&Mockjs实现前端模拟数据展示

codeDemo

1.先将前端的页面模板展示出来
components中建立一个crud.vue文件

<template>
  <div>
    <el-table
      :data="users"
      style="width: 100%">
      <el-table-column
        prop="createTime"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
    </el-pagination>
  </div>
</template>
<script>
    export default {
        data(){
            return {
                users:[],
                total:100,
                page:1
            }
        },
        methods: {
            handleCurrentChange(val){
                //page当前页
                this.page =  val;
                //发送请求查询
                this.getUsers();
            },
            getUsers(){
                //发送请求 获取数据 axios
                /*  axios.get('/getUser').then(res=>{

                  })*/
                let params = {
                    page:this.page
                }
                //发送请求  controller {data:[],total:100}
                this.$http.post('/user/list',params).then(res=>{
                    console.log("-------------------res.data {data: total}");
                    console.log(res);
                    this.users =  res.data.data;
                    this.total = res.data.total;
                })
            }

        },
        mounted(){
            //页面加载完之后 执行该方法
            this.getUsers();
        }
    }
</script>

2.Mock.js模拟数据
2.1安装mockjs

npm install mockjs

2.2新建mockdemo.js文件
生成列表数据

// 使用 Mock
var Mock = require('mockjs')
/*
  数据模板定义规范 DTD
var data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1
  }]
})*/
/**
 *  DPD 数据占位符定义规范
 */
var data = Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last',
    email:'@email',
    ip:'@ip'
  }
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

2.3crud数据模拟
新建UserMock.js文件，模拟产生的数据，上面的相当于一个模板，这里是产生实际的数据。

import Mock from 'mockjs' // 引入mock
//var Mock = require('mockjs')
var dataList = []
for (var i = 0; i < 15; i++) {
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }))
}

console.log(JSON.stringify(dataList));

//index 当前页 size: 每页条数 list 总的数据
/**
 *
 * @param index = 2
 * @param size = 10
 * @param list 15
 * @returns
 */
function pagination(index, size, list){
  return list.slice((index-1)*size,index*size);
}
//拦截请求
Mock.mock(new RegExp('/user/list'),'post',(opts) => {
  //赋值
  var list =dataList;
  console.log(opts.body) ;// "{page:2}"
  //json字符串转换成JSON对象
  var index = JSON.parse(opts.body).page; //2
  //每页条数
  var size = 10;
  //公共的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list);
  return {
    'total': total,
    'data': list
  }
})

2.4、知识点：Ajax请求优化-axios

vue更新到2.0之后，官方推荐使用axios请求服务器数据。Axios和其他的ajax库都很类似，他是基于promise的http库，可以用在浏览器和node.js中
理解 就是ajax请求 --在vue里面axios
安装axios

npm install axios --save

布局到main.js中

import axios from 'axios'
//配置axios的全局基本路径 t
axios.defaults.baseURL=''
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

2.5Axios发送请求
在crud.js中发送请求【包含分页】

methods: {
            handleCurrentChange(val){
                //page当前页
                this.page =  val;
                //发送请求查询
                this.getUsers();
            },
            getUsers(){
                //发送请求 获取数据 axios
                /*  axios.get('/getUser').then(res=>{

                  })*/
                let params = {
                    page:this.page
                }
                //发送请求  controller {data:[],total:100}
                this.$http.post('/user/list',params).then(res=>{
                    console.log("-------------------res.data {data: total}");
                    console.log(res);
                    this.users =  res.data.data;
                    this.total = res.data.total;
                })
            }

        },
        mounted(){
            //页面加载完之后 执行该方法
            this.getUsers();
        }

2.6mock拦截请求 获取参数，并返回

//index 当前页 size: 每页条数 list 总的数据
/**
 *
 * @param index = 2
 * @param size = 10
 * @param list 15
 * @returns
 */
function pagination(index, size, list){
  return list.slice((index-1)*size,index*size);
}
//拦截请求
Mock.mock(new RegExp('/user/list'),'post',(opts) => {
  //赋值
  var list =dataList;
  console.log(opts.body) ;// "{page:2}"
  //json字符串转换成JSON对象
  var index = JSON.parse(opts.body).page; //2
  //每页条数
  var size = 10;
  //公共的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list);
  return {
    'total': total,
    'data': list
  }
})
EvilKingyhq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UI简介
weixin_64704029的博客
08-07 9483
element-ui是一个前端的ui框架，封装了很多已经写好的ui组件，例如表单组件，布局组件，表格组件.......是一套桌面端组件。Element - 网站快速成型工具。
elementui的介绍和使用 以及使用elementui完成增删改查和登录
Ysuhang的博客
05-31 2万+
elementui的介绍和使用 以及使用elementui完成增删改查和登录
Element-UI详解
最新发布
科技追踪者的专栏
05-22 2002
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
Element-UI
qq_50048558的博客
10-26 9295
一、Element-UI介绍 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建 Element-UI官方站点：点击此处 https://element.eleme.cn/#/zh-CN 二、Element-UI使用 1.命令行方式安装 创建 一个新的项目 当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S 打开 main.js , 导入Element-UI 相关资源. main.js是工程的入口文件
ElementUI用el-table实现表格内嵌套表格
香菜的博客
11-20 7355
el-table 实现表格内嵌套表格（宇宙无敌详细！！！一看就会！）
Element-ui的理解
weixin_49231143的博客
03-23 2万+
总而言之，学就完了！
elementui资源文件
07-12
这个框架基于Vue.js，提供了一系列高效、可复用且易定制的组件，以帮助开发者快速构建美观的企业级Web应用。在本地导入ElementUI文件，通常涉及到以下几个关键步骤和知识点： 1. **安装依赖**：在导入ElementUI之前...
elementui2.13.rar
07-23
- ElementUI是由饿了么前端团队开发的开源UI框架，提供了一系列可复用的组件，如表格、按钮、提示、下拉菜单等，适用于构建企业级的后台管理系统。 - 版本2.13包含了对之前版本的优化和新功能的添加，确保了组件的...
Axure-web元件库 ElementUI元件库.zip
04-02
在" Axure-web元件库 ElementUI元件库.zip "这个压缩包中，我们可以期待找到一系列预设好的、模仿ElementUI风格的Axure元件。这些元件可能包括按钮、表单元素、导航条、卡片、弹窗、时间选择器、分页器等常见的UI...
Web元件库 ElementUI元件库 后台模板页面.rar
08-09
这个"Web元件库 ElementUI元件库 后台模板页面.rar"文件包含了一系列使用ElementUI构建的后台模板页面，旨在帮助开发者快速搭建高效、美观且响应式的管理界面。 ElementUI提供了丰富的组件，包括但不限于以下几类：...
jq写的模拟elementui的select
05-07
ElementUI是一款基于Vue.js的UI组件库，提供了一系列美观、易用的组件，包括我们今天要讨论的Select选择器。而jQuery则是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。 标题中的"jq写...
element ui---中文官网
热门推荐
张宇的博客
10-18 8万+
【代码】element ui---中文官网,elementui中文官网地址
ElementUI之首页导航&左侧菜单
theHider的博客
07-24 2499
为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。创建。
Element-Ui+Vue实现首页布局（带收缩展开效果）
m0_63300795的博客
08-29 3377
【代码】Element-Ui+Vue实现首页布局（带收缩展开效果）
6，vue项目开发中用到的前端框架之Element
木卯彳亍的博客
11-02 1513
前端框架：Element及其常用到到的组件(el-table、el-tree。。。)
ElementUI简介
weixin_64887902的博客
05-11 7914
我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 ElementUI官网：http://element-cn.eleme.io/#/zh-CN 注1：类似前端框架还有iview Vue+ElementUI安装 CDN方式 <!-- 1. 导入css --> &...
elemetUI限制特定日期不能选择
xc9711的博客
07-07 1038
最近的一个项目，要求能够通过日期选择器限制以下这些日期不能选择那么，为了实现这个效果我也是费了一些功夫，话不多说，接下来看看是怎么实现它的吧 关键点在于picker-options，等于我们写的方法（不知道为什么，还必须得是这个方法名才能够生效） – 定义方法 可以看到，变成灰色的部分不能被选择 今天为2022-07-07,之前的时间是不能被选择的这个的话，就需要你能够获取到具体的时间节点了，格式为yyyy-mm-dd 如 2022-07-07 在我目前所在的公司，是有专门获取节假日的接口，返回的数据
前后端分离
weixin_42117918的博客
01-19 384
前言 最近这一段时间由于Nodejs的逐渐成熟和日趋稳定，越来越多的公司中的前端团队开始尝试使用Nodejs来练一下手，尝一尝鲜。 一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来，也有一些公司将NodeJS作为前后端分离的一个解决方案去施行。而像淘宝网这类的大型网站也很早的完成了前后端的分离，给我们这样的后来者提供了宝贵的经验。 同样，我们的大网盘团队...
element ui vue 路由_Vue实战项目：电商管理系统（Element-UI）-（3）主页
weixin_39683734的博客
12-13 70
1.主页布局（1）实现主页的基本布局：elementui：Container 布局容器2.axios请求拦截器（1）设置axios中的请求拦截器为其添加token，为每次api请求挂载请求头，使其能够通过需要权限的接口添加请求拦截器3.左侧菜单（1）获取左侧菜单：在生命周期阶段调用函数获取表单（2）通过双层for循环渲染左侧菜单：先看后台接口的数据，利用双层for循环来渲染菜单，在使用渲染第二次v...
elementui实现
05-16
ElementUI是一套基于Vue.js 2.0的组件库，它提供了一系列的常用组件，例如按钮、表格、表单等，帮助开发者快速构建Web应用程序的用户界面。ElementUI的实现主要包括以下几个方面： 1. 组件的封装：ElementUI将常见的组件进行封装，并提供了丰富的配置选项和事件处理方式，使得开发者可以轻松地使用这些组件。 2. 主题定制：ElementUI提供了一套主题定制方案，开发者可以根据自己的需求来定制主题，包括颜色、字体等方面。 3. 插件机制：ElementUI提供了插件机制，允许开发者编写自己的插件，扩展ElementUI的功能。 4. 国际化支持：ElementUI提供了国际化支持，可以轻松地支持多语言。 5. 文档和示例：ElementUI提供了完善的文档和示例，开发者可以轻松地学习和使用这些组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值