A064_单页面组件_ElementUI_Mock_axios

已于 2022-04-06 20:04:33 修改
阅读量352 收藏
点赞数
分类专栏： 文档 文章标签： java vue javascript html
于 2021-06-23 21:02:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ffhgjgj6576567/article/details/118162027
版权

目录


ElementUI综合练习-day01

一、内容介绍

1. 搭建前端环境； （掌握）
2. 前端UI框架ElementUI简单入门 （掌握）
4. Mock.js(了解)
5. EasyMock后端模拟数据
6. Axios
7. ElementUI综合案例（CRUD）

二、搭建前端项目

1、Idea创建一个static web项目

在这里插入图片描述

2、根目录下执行vue命令
1. npm install -y
2. npm install vue
3. vue init webpack

在这里插入图片描述

3、运行项目
1.npm run dev

在这里插入图片描述

4、浏览器访问

在这里插入图片描述

5、单页面组件 . vue
5.1、定义
   创建一个.vue,里面由三个部分组成
      1 <template> 模板 html 定义结构
          只能有一个元素节点儿子（子标签）
      2 <script> js   动态行为 事件所对应函数
         export default {
               data(){ //定义数据模型
                 Return {}
}

在这里插入图片描述
3 <style scoped> 样式 美化显示

5.2、使用

在这里插入图片描述
注意：插件安装
在这里插入图片描述

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

饿了么-PC端
http://element-cn.eleme.io/#/zh-CN
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了很多的ui组件。我们可以使用这些组件快速开发前端项目。
资料下载网站：https://unpkg.com/element-ui@2.4.6/lib/

1、入门
1.1、安装
npm i element-ui -S
注意：也可以下载下来导入也ok，和以前的js一样使用就ok
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)

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

1.3、开始使用

_01_helloElementUI.vue

Elementui官网组件里面 拷贝dialog  app里面有居中功能

router.js

import HelloWorld from "./components/HelloWorld"
import HelloElementUI from "./components/_01_helloElementUI"

let routes =  [
    //以后再添加组件，只需要在路由数组中添加一个元素即可
    {
        path:"/",
        component:HelloWorld
    },
    {
        path:"/_01_helloElementUI",
        component:HelloElementUI
    }
];
export default routes;


01_helloElement.vue
<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>

在这里插入图片描述

2、Layout布局

通过基础的 24 分栏，迅速简便地创建布局。
通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

<template>
    <div>
        <!--
        el-row:一行，:gutter每栏直接的间隔，默认0
            el-col：列
            :span：占比栏数，基础的 24 分栏
          -->
        <el-row :gutter="20">
            <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>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "_02_layout"
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }
    .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>
3、Container布局容器(掌握)
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。

<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "_03_container"
    }
</script>

<style scoped>
    .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;
    }

</style>

如果container没有全屏，可以在index.html中调整如下样式：

<style type="text/css">
  html,body,#app,.el-container{
	 /*设置内部填充为0，几个布局元素之间没有间距*/
	 padding: 0px;
	 /*外部间距也是如此设置*/
	 margin: 0px;
	 /*统一设置高度为100%*/
	 height: 100%;
   }
</style>

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

4、Button按钮(掌握)
<template>
    <div>
        <!--
          按钮：
           el-button;
           disabled:禁用
           type：按钮类型；text:文字按钮，没有边框样式；
           icon="el-icon-search"：按钮图标
           size="medium"：按钮大小：三个值：medium、small、mini
           round：圆脚
          -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="text">文字按钮</el-button>
            <el-button type="primary" disabled>主要按钮</el-button>
            <el-button type="success" size="medium">成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" icon="el-icon-delete">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-row>
    </div>

</template>

<script>
    export default {
        name: "_04_button"
    }
</script>

<style scoped>

</style>
5、Tree树形控件(掌握)
6、Pagination分页(掌握-结合表格)
7、Alert警告(掌握)
8、Tabs标签页
9、Dialog对话框(掌握)
10、Form(掌握)
11、Table(掌握)

四、Elementui+Crud实现

在这里插入图片描述

1、接口数据模拟-Mockjs
1.1、为什么需要模拟数据

在前后端分离开发模式中，前后端是分离并行开发的，前端开发人员在开发的时候后台提供接口数据的接口还没有写好，所以需要模拟数据。

1.2、Mock.js模拟数据(后台人员不需要掌握-了解)
1.2.1、什么是mock.js

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求，生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据
1.2.2、特点

前后端分离
让前端攻城师独立于后端进行开发。
增加单元测试的真实性
通过随机数据，模拟各种场景。
开发无侵入
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
用法简单
符合直觉的接口。
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。

1.2.3、快速入门

需求：生成列表数据，数据条数为5条。
（1）新建demo1.js
（2）下载安装mock.js
   npm install mockjs
（3）在demo1.js文件加入代码

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

(4)执行命令 node demo1.js

我们在本例中产生了5条相同的数据，这些数据都是相同的，如果我们需要让这些数据是
按照一定规律随机生成的，需要按照Mock.js的语法规范来定义。
Mock.js 的语法规范包括两部分：
1.数据模板定义规范（Data Template Definition，DTD）
2.数据占位符定义规范（Data Placeholder Definition，DPD）

1.2.4、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来发送请求 获取模拟数据

2、Ajax请求优化-axios

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

2.1、安装
npm install axios --save
2.2、局部使用

在这里插入图片描述

2.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
})

具体文件使用
在这里插入图片描述

测试数据:
在这里插入图片描述

2.4、EasyMock or fastmock
2.4.1、什么是EasyMock

Easy Mock 是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快
速生成模拟数据的在线 mock 服务 。以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock 数据。
地址：https://www.easy-mock.com
在线文档：https://www.easy-mock.com/docs、

本身是一个开源项目，自己团队可以部署，但是官方也给我部署一套，我们直接使用他们就ok。

2.4.2、EasyMock基本入门

2.3.2.1 初始设置
（1）登录或注册。
浏览器打开 输出用户名和密码，如果不存在会自动注册。
注意：请牢记密码，系统没有找回密码功能！ –
用户名/密码 zytest123/zytest123
在这里插入图片描述

登录后进入主界面
在这里插入图片描述

（2）创建项目：点击右下角的加号
在这里插入图片描述

填写项目名称，点击创建按钮
在这里插入图片描述
创建完成后可以在列表中看到刚刚创建的项目

2.3.2.2 接口操作
（1）创建接口。点击列表中的项目
在这里插入图片描述

进入项目工作台页面
在这里插入图片描述

（2）点击“创建接口” ,左侧区域输出mock数据，右侧定义Method 、 Url 、描述等信息
在这里插入图片描述

{
  "total": 100,
  "rows|10": [{
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }]

}

保存之后 出现下图:
在这里插入图片描述

访问路径：BaseURL+URL
https://www.easy-mock.com/mock/5d5ab59158062d52256f38a6/test/user/list

程序调整:
（1）在main.js里面 注释掉mockjs的引入

//import UserMock from '../mock/userMock';

（2）在对应table.vue页面上面 修改url访问地址

getUsers(){
  let para = {
    page: this.page,
    keyword: this.filters.keyword
  };
  let url = "https://www.easy-mock.com/mock/5d5ab59158062d52256f38a6/test/user/list";
  this.$http.get(url,para)
  // axios.post("/user/list",para)
    .then((res=>{
      this.total = res.data.total;
      this.users = res.data.rows;
    }))
}
2.4.3、本地安装

其实我们可以不使用官方提供的在线，可以自己搭建，因为EasyMock提供软件安装包，支持安装。但是我们现在就是别人装好了的，暂时不安装了。

五、课程总结

1、重点
2、难点
3、如何掌握？
4、扩展

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

六、排错技巧（技巧）

七、课后练习

八、面试题

XIAOMING820
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
从零开始搭建自己的VueJS2.0+ElementUI单页面网站（三、组件编写及通信）
天降风云的博客
10-23 1万+
前言本文是本系列的第三篇文章。在前两篇文章中我们介绍了关于搭建vue+elementUI开发环境的方法和编写导航页的方法。关于前两篇文章的内容，若读者有些记不清楚，可以点击下方链接快速查看： 从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建） 从零开始搭建自己的VueJS2.0+ElementUI单页面网站（二、编写导航页）
单页面 script 标签引入 axios
SDAW_1的博客
05-17 1559
axios.js 文件 /* axios v0.20.0 | (c) 2020 by Matt Zabriskie */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'functi
vue单页面组件
great_t的专栏
04-12 1112
我们通常使用在js文件里通过vue.component(’’,{})方式，或者在某个组件里定义局部组件的时候，有以下一些弊端： 1.不支持css样式编写，需要写内联样式 2.在字符串模板中templete：这里编写html代码 没有高亮显示，代码提示等，开发及其不方便 3.限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如Babel 为了解决上述问题，引进了vue单页面组件，可完美避免上述问题。 单页面组件构成 页面 <!-- 这里编写页面结构html，注意：temp
单页面axios_Axios封装之取消重复请求和接口缓存
weixin_39626162的博客
11-21 337
在平时的单页面项目里，大家肯定接触过axios库，一个易用、简洁且高效，使用Promise管理异步，告别传统callback方式的http库。最近有个项目里接口调取的频率比较高，接口队列长，然后等待数据的时间就是痛苦的煎熬，特别是一连串有关联的数据交互，每次打开页面我都有种欲死的感觉。经过一番深思改造后，除去接口本身的速度，对于页面的流畅度提高了不少，所以今天就和大家分享一下，怎么封装二次Axio...
快速创建一个单页面vue页面 引入elelement-ui组件
weixin_45631278的博客
04-21 695
转自https://element.eleme.cn/#/zh-CN/component/installation。直接从网上链接进文件里，省去下载包（不安全，慎用） https://www.bootcdn.cn/
网络空间安全竞赛磐云P8资料
06-10
A064-网络设备安全-通过Scapy实现IEEE802.1Q渗透测试 A065-网络设备安全-通过BackTrack5渗透测试工具进行ARP协议渗透测试 A066-网络设备安全-通过Scapy进行DNS协议渗透测试 A067-网络设备安全-通过BackTrack5渗透...
asp.net mvc3 iis6
04-24
#### 安装必备组件 1. **安装 IIS6**: - 确保服务器已安装 IIS6。 2. **安装 .NET Framework 4.0**: - 下载地址: [官方下载链接]...
nodejs 十六进制字符串型数据与btye型数据相互转换
10-18
2. 将十六进制字符串`"A064"`转换回byte型数据： ```javascript const hexStr = "A064"; const bytesBack = await Hexstring2btye(hexStr); console.log(bytesBack); // 输出 Uint8Array([160, 100]) ``` 通过...
带回家
02-22
当前的 概述 .../users/d8ed8864-b82f-4b5b-a064-d74c664c7715/balance 通过商家获取用户交易 /users/056b6a9b-a119-4c85-86c4-e94cf280806f/transactions/merchant/cb21b581-cd5d-46c0-8d9a-c054
基于elementui的单页面后台管理项目模版
08-12
基于 element-ui 的单页面后台管理项目模版
vue高仿知乎日报单页面应用技术栈vuevuexvuerouteraxiosmintuisass
08-11
vue高仿知乎日报单页面应用，技术栈 vue vuex vue-router axios mint-ui sass
element-ui中按需引入的实现
11-28
element-ui中按需引入 为什么选择 element-ui 而不是 iview 因为在多次使用两个组件的过程中慢慢发现，iview 的一些组件还是需要再完善，而 element-ui 现在更加的成熟 所以， 这里我们一起来学习一下在 vue 中按需引入 element-ui 一些组件中的坑(Dialog组件) 这里我们使用的版本是 element-ui : 2.4.7，vue: 2.2.2 1、按需引入 1. 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的： npm install babel-plugin-compone
Vue.js学习-单页面组件创建、属性初识
Natural_Ant的博客
05-14 1120
1.组件创建 1）在html中使用vue时，使用new Vue 2）在.vue文件中使用export default 3）两者的区别可以参考：https://www.cnblogs.com/ppJuan/p/7151000.html 2.组件中各个属性的声明和使用（未标注使用方式的情况下，通用） 1）name：指代这个页面的名称；export default使用...
VUE基于ElementUI搭建的简易单页后台
weixin_30670925的博客
01-08 204
一、项目链接 GitHub 地址：https://github.com/imxiaoer/ElementUIAdmin 项目演示地址：https://imxiaoer.github.io/ElementUIAdmin/dist/index 二、项目依赖　 　　1. 数据请求 　　　　"axios": "^0.18.0", 　　2. 图表控件 　　　　 "e...
从零搭建VueJS2.0+ElementUI单页面网站
Joab-Y的博客
07-23 1212
前言 本人后端开发萌新一枚，最近在学习springboot搭建web项目，前端框架选择基于Vue2.0的饿了么组件ElementUI（ElementUI-github），本文旨在记录如何搭建Vue+ElementUI进行前端开发。 准备 NodeJS（npm） Webstorm （前端IDE） Nginx（后期用来转发请求到后台服务器）（后期补充） 正文 一、安装nodejs    ...
单html页面使用Vue3和Element-Plus
最新发布
茶碗儿
02-13 1971
案例：html单页面操作 vue3，element-plus，axios
vue单页面-element-表格搜索
weixin_44867717的博客
06-02 484
vue单页面-element-表格搜索 <!DOCTYPE html> <html> <head> <title>vue-test2</title> <!-- 引入样式 --> <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet"> <!-- 引入组
vue中单个页面修改element UI样式
qq_39517116的博客
03-23 1427
<template> <div class="wrap wx_login_el"> <el-input v-model="loginForm.password" type="password" auto-complete="off" @keyup.enter.native="handleLogin" :disabled="isLogin" placeholder="请输入密码" show-password .
如何取消Using generated security password: 04f43ba6-c99e-4ebf-9c73-65169a064a3b
05-30
在Spring Security的配置类中，可以使用`@Bean`注解来定义一个PasswordEncoder的实例，并将其注入到其他的组件中。当Spring Security检测到没有定义PasswordEncoder实例时，会自动生成一个随机的密码，并将其打印到...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值