ElementUI_elementui的功能-CSDN博客

本文链接：https://blog.csdn.net/qq_45619439/article/details/103812879

本文详细介绍了前后端分离的概念、优势及实践方法，探讨了ElementUI在Vue项目中的应用，包括环境搭建、Mock数据模拟及RESTful风格API的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、前后端分离

1、什么是前后端分离

就是前端代码和后端代码分开运行，各自做各自擅长的事
前后端分离大概可以从四个方面来理解：
1.2、交互形式

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

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

二，前后端分离优势

2.1、为优质产品打造精益团队
通过将开发团队前后端分离化，让前后端工程师只需要专注于前端或后端的开发工作，是的前后端工程师实现自治，培养其独特的技术特性，然后构建出一个全栈式的精益开发团队。
专业的人做专业的事情
2.2、提升开发效率
前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。与此同时，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。
并行开发
2.3、完美应对复杂多变的前端需求
如果开发团队能完成前后端分离的转型，打造优秀的前后端团队，开发独立化，让开发人员做到专注专精，开发能力必然会有所提升，能够完美应对各种复杂多变的前端需求。
2.4、增强代码可维护性
前后端分离后，应用的代码不再是前后端混合，只有在运行期才会有调用依赖关系。

全栈开发(jquery):

(1)配了假前端,来小姐姐(UI)给我写个页面
(2)前后端分离模式下的全栈(前后台)-vue,j2ee 这都是我的
(3)前后端分离模式下的后台开发-j2ee 这是前端的不要找我

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

三，ElementUI

1，什么是ElementUI

ElementUI-基于vue前端ui框架
饿了么-PC端
http://element-cn.eleme.io/#/zh-CN
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件。
资料下载网站：https://unpkg.com/element-ui@2.4.6/lib/

环境搭建

1、Idea创建一个static web项目
2、根目录下执行vue命令
vue init webpack
3、运行项目
npm run dev
4、浏览器访问
1.1、安装
npm i element-ui -S
1.2、导入
在main.js中写入一下内容:
import Vue from ‘vue’;
import ElementUI from ‘element-ui’; //引入核心js组件
import ‘element-ui/lib/theme-chalk/index.css’;//引入依赖的样式
Vue.use(ElementUI)

2、接口数据模拟-Mockjs&Easymock

2.1、为什么需要模拟数据
在前后端分离开发模式中，前后端是分离并行开发的，前端开发人员在开发的时候后台提供接口数据的接口还没有写好，所以需要模拟数据。
2.2、Mock.js模拟数据(不多)
2.2.1、什么是mock.js
Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立
于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据
2.2.2、特点
前后端分离
让前端攻城师独立于后端进行开发。
增加单元测试的真实性
通过随机数据，模拟各种场景。
开发无侵入
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
用法简单
符合直觉的接口。
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。
需求：生成列表数据，数据条数为5条。
（1）新建demo1.js
（2）下载安装mock.js
npm install mockjs
（3）在demo1.js文件加入代码
(4)执行命令 node demo1
Mock.js 的语法规范包括两部分：
1.数据模板定义规范（Data Template Definition，DTD）
2.数据占位符定义规范（Data Placeholder Definition，DPD）

let Mock=require('mockjs') 
let data=Mock.mock({ 
// name|规则:值
'list|5':[ 
{ 
'id':1, 
'name':'测试' 
} 
] 
}) 
console.log(JSON.stringify(data))

3，crud数据模拟

新创建一个文件 UserMock.js 用来模拟数据

https://www.jianshu.com/p/7674c285a0d8

（1）userMock.js里面模拟数据

import Mock from 'mockjs' // 引入mock
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")'
  }))
}

//开始的位置 size 每页显示的条数 list 总结数据
function pagination(index, size, list) {
  console.log(list);
  console.log(index, size);
  // index = 2 size 10   list.slice(10,20)
  return list.slice((index-1)*size, index*size)
}
// 获取用户列表  
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
  var list =dataList;
  console.log(opts.body)
  var index = JSON.parse(opts.body).page;
  var size = 10;
  var total = list.length
  list = pagination(index, size, list)
  return {
    'total': total,
    'data': list
  }
})

(2)需要使用axios来发送请求获取模拟数据

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

3.2、局部使用

3.3、全局使用

main.js:
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import routes from './router'
import VueRouter from 'vue-router'
import axios from 'axios'

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

Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueRouter)
const router = new VueRouter({
    routes
})

具体文件使用

四，Restful风格

Restful是http协议的扩展使用,以前我们用http只用了get和post请求,其实put,delete请求,Restful以资源为核心,针对资源要做crud. 定位资源(url),做什么操作(通过http不同请求区分), Put表示添加,Post表示修改,Get查询,Delete删除

Put http://127.0.0.1/user
{
   id:1,
   “name”:”zs”
}
Delete http://127.0.0.1/user/1
Post http://127.0.0.1/user/1
{
   “name”:”ls”
}
Get http://127.0.0.1/user/1
Get http://127.0.0.1/users