ElementUI综合练习（一）

简介

前后端分离开发
搭建前端环境-nodejs&npm&vue&webpack&vue-cli
前端ui框架ElementUI-饿了么（vue）入门
ElementUI+crud
Axios(ajax请求)- -包含在crud里面
Mock.js&EasyMock–包含在crud里面

一、前后端分离

1、什么是前后端分离

在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。
很多人误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。前后端分工
其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式，我们在实施的过程中主要对以下四个方面来进行比较和重新认识。

前后端分离大概可以从四个方面来理解：

1.1、交互形式

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

1.2、代码组织方式

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

1.3、开发模式

1.3.1、真正前后端分离

在这里插入图片描述
想要做到前后端真正分离必备的条件：能力要求高、大公司

1.3.2、后端先行

在这里插入图片描述
能力要求要求高,小公司,刚转型前后端分离的公司

二、搭建前端环境

1.Idea创建一个Static Web 项目

在这里插入图片描述

2、根目录下执行vue命令

vue init webpack
此时的项目结构
在这里插入图片描述

3、运行项目

我这里是使用的淘宝镜像，如下命令：
cnpm run dev
在这里插入图片描述

三、ElementUI-基于vue前端ui框架

1、入门

1.1、安装

cnpm i element-ui -S
注意：也可以下载下来导入也ok，和easyui一样使用就ok

1.2、导入

在mian.js中写入以下内容：

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

1.3、开始使用

1.3.1、在src/components目录下拷贝HelloWord改名为01_layout.vue

<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">1</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple">1</div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light">2</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">1</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">2</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">3</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">3</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">4</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple">1</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">2</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple">3</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple">5</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">6</div></el-col>
    </el-row>
  </div>
</template>
<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

1.3.2、在router目录下的index.js写入如下代码

import Layout from '@/components/01_layout'
Vue.use(Router)

1.3.4、在routes中配置路径

{
      path: '/layout',
      name: 'Layout',
      component: Layout
    }

1.3.4、启动项目，浏览器测试

以下两个类容后面再讲
Axios(ajax请求)- -包含在crud里面
Mock.js&EasyMock–包含在crud里面

来源：CSDN

作者：mx141242

链接：https://blog.csdn.net/qq_43375965/article/details/103788224

标签

前端