elementUI入门

最新推荐文章于 2024-06-09 00:15:00 发布

脚板心

最新推荐文章于 2024-06-09 00:15:00 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/weixin_45546279/article/details/103395838

版权

1.前后端分离

1.1什么是前后端分离

前后端的认识误解:

前端代码和后端代码分开的代码那就是前后端分离 – 前后端的分工,真正前后分离,不仅仅是分工那么简单,它是一个种架构模式

(1)web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；

(2)在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求(restful风格进行前后分离的交互)

1.2 前后端分离开发的理解

交互形式:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RhPRYEYl-1575470296350)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20191204092254083.png)]$

代码形式:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-auZlWaQ1-1575470296351)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20191204092316667.png)]$

(1)前后端未分离:(同一个项目)
前端代码和后端代码同放到他同一个项目(前端代码里面包含后端代码比如jsp)
(2)前后端半分离:(同一个项目)
代码仓库 : 前端开发和后端代码分开进行开发 , 前端代码它无法进行单独测试,需要后端代码支持
(3)完成代码分离:(使用) – (不同的项目前端和后端代码分别代码不同的项目部署到不同的服务里面)，前端代码和后端代码分别放到不同的项目里面, 前端和后端可以单独测试 .并行的测试

1.3 为什么要进行前端分离开发:

(1) 分工合作 - 为优质产品打造精益团队专业的人做专业的事情

(2) 提升开发效率 – >并行开发

(3) 完美应对复杂多变的前端需求

(4) 增强代码可维护性

2.搭建前端环境

(1)创建一个static web project

(2) 安装 npm install -g vue-cli

(3) vue init webpack 项目名

(4)cd 项目名

(5)npm run dev 运行服务

3.elementui

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

3.1.安装

npm i element-ui -S

3.2.引入elementui 在 main.js

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

3.3.在vue页面使用elementui的组件

<div id="app">
      <el-button @click="visible = true">Button</el-button>
      <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
      </el-dialog>
    </div>
<script>
  export default {
    name: 'elementUi01',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        visible:false
      }
    }
  }
</script>

4.elementui的组件

Elementui官网组件里面拷贝dialog app里面有居中功能
这里列举简单的几个例子

4.1.button按钮

<template>
  <div>
    <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>
  </div>
</template>
<script>
  export default {
    data () {
      return { }
    }
  }
</script>

在index.js中使用

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Button from '@/components/02_button'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/button',
      name: 'button',
      component: Button
    }
}

4.2.Layout布局

通过基础的 24 分栏，迅速简便地创建布局

<template>
  <div>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    }
  }
</script>
<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>

4.3.Container布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：
：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列。
：顶栏容器。
：侧边栏容器。
：主要区域容器。
：底栏容器。

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    }
  }
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

5.mockjs

5.1.安装:

npm install mockjs

5.2.引用:

(2)userMock.js文件引用 mockjs

let Mock=require('mockjs')

5.3.js:

(3)在js生成数据 ,拦截axios请求

let Mock=require('mockjs')
//定义数组
var dataList = [];
//循环16次,产生16条数据放入数组
for(var i=0;i<16;i++){
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }));
}
//拦截axios请求  this.$http.post('/user/list',para) para ={page:2}
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
    //把产生的16数据 放入list对象里面
  var list =dataList;
  console.log(opts.body)
    //取出传递过来的 当前页
  var index = JSON.parse(opts.body).page; //3
    //每页显示条数
  var size = 10;
    //取出总的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list)
  return {
    'total': total, //总的条数
    'data': list //分页之后的数组
  }
})
//分页  
function pagination(index, size, list){
  return list.slice((index-1)*size,index*size); 
}

6.Elementui+Crud实现

6.1.安装axios

npm install axios --save

6.2.页面布局

<template>
  <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table
      :data="users"
      style="width: 100%"
      border
      height="450px">
      <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-column
        prop="createTime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //定义一个users数组，来装数据
        users: [],
        //总数据条数，默认为0
        total:0,
        //当前页
        page:1
      }
    },
    methods:{
      getUsers(){
        //这个是对象{key:value}
        let para = {
          page:this.page
        }
        //加载数据
        //发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
        this.$http.post('/user/list',para).then(res=>{
          console.log(res);
          //分页的list
          this.users = res.data.data;
          //总数据条数
          this.total = res.data.total;
        });
      },
      //每次点击分页条执行的方法
      handleCurrentChange(val){
        console.log(val);
        //把当前页 赋值给page
        this.page = val;
        this.getUsers();
      }
    },
    mounted(){
      //页面加载完之后执行的方法
      this.getUsers();
    }
  };
</script>

6.3.crud数据模拟

let Mock=require('mockjs')
//顶一个数组来装数据
var dataList = [];
//随机产生27条数据
for(var i=0;i<27;i++){
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }));
}
//分页
function pagination(index, size, list){
  //返回每页的数据
  return list.slice((index-1)*size,index*size);
}
//拦截axios请求
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
  //用一个数组来装产生的数据
  var list =dataList;
  console.log(opts.body)
  //拿到当前页获得page
  var index = JSON.parse(opts.body).page;
  //每页10条数据
  var size = 10;
  //拿到总数据条数
  var total = list.length
  //拿到当前页的数据
  list = pagination(index, size, list)
  //返回给前台的数据
  return {
    //总数据条数
    'total': total,
    //每页数据
    'data': list
  }
})

6.4.注意事项

引入usermock.js --在main.js

import UserMock from './usermock.js'

脚板心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
elementUI入门

1.前后端分离1.1什么是前后端分离前后端的认识误解: 前端代码和后端代码分开的代码那就是前后端分离 – 前后端的分工,真正前后分离,不仅仅是分工那么简单,它是一个种架构模式(1)web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；(2)在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求(r...
复制链接

扫一扫