精华内容
下载资源
问答
  • vue前端模糊搜索
  • 主要介绍了Vue前端对axios的封装和使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 在src文件夹下创建这两个文件 在mapApi.js中写入页面的...注意需要引入你的axios封装文件 在需要用到接口的页面引入 在页面用调用你的接口这里我用的是async await进行调用的如果不会使用建议去看一下相关内容 ...
    1. 在src文件夹下创建这两个文件
      vue前端接口api统一管理封装[外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imblo3GBUcsdnimg.cn/20210420611433503.png4(h1ttps://img-blog.csdnimg.cn/20210120141421533.png)]
    2. 在mapApi.js中写入页面的接口信息根据实际情况进行改变
      在这里插入图片描述
      注意需要引入你的axios封装文件
    3. 在需要用到接口的页面引入
      在这里插入图片描述
    4. 在页面用调用你的接口这里我用的是async await进行调用的如果不会使用建议去看一下相关内容
      在这里插入图片描述
    展开全文
  • vue请求封装

    2018-12-17 10:33:24
    vue前端http配置请求头、请求地址、对请求参数进行统一处理;
  • vue前端基础之组件封装(树组件的封装附带增删改查方法)组件封装的意义树的封装对于组件的引用组件的使用效果图子组件向父组件传值 组件封装的意义 组件封装的意义其实很好理解,对于一段复用性极高的代码,就需要...

    vue前端基础之组件封装(树组件的封装附带增删改查方法)

    组件封装的意义

    组件封装的意义其实很好理解,对于一段复用性极高的代码,就需要进行组件封装以减少冗余代码。

    树的封装

    <template>
      <el-aside width="180px">
        <h3 class="el-icon-folder" style="margin: 0px">
          {{ name }}
        </h3>
        <el-tree
          ref="tree"
          :data="setTree"
          :props="defaultProps"
          node-key="id"
          style="margin-top:20px"
          accordion
          @node-contextmenu="rihgtClick"
        >
          <span slot-scope="{ node, data }" class="span-ellipsis">
            <span v-show="!node.isEdit">
              <span v-show="data.children && data.children.length >= 1">
                <span :title="node.label">{{ node.label }}</span>
              </span>
              <span v-show="!data.children || data.children.length == 0">
                <span :title="node.label"> {{ node.label }}</span>
              </span>
            </span>
          </span>
        </el-tree>
        <!--鼠标右键点击出现页面-->
        <div v-show="menuVisible">
          <el-menu
            id="rightClickMenu"
            class="el-menu-vertical"
            text-color="#000000"
            active-text-color="#000000"
            @select="handleRightSelect"
          >
            <el-menu-item index="1" :hidden="showQuery" class="menuItem">
              <span slot="title">查询</span>
            </el-menu-item>
            <el-menu-item index="2" :hidden="showSave" class="menuItem">
              <span slot="title">添加</span>
            </el-menu-item>
            <el-menu-item index="3" :hidden="showUpdate" class="menuItem">
              <span slot="title">修改</span>
            </el-menu-item>
            <el-menu-item index="4" :hidden="showDelete" class="menuItem">
              <span slot="title">删除</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
    </template>
    <script>
    export default {
      name: 'Tree',
      props: {
        treeData: {
          type: Array,
          required: true
        },
        treeName: {
          type: String,
          required: true,
          default: '树'
        },
        isHiddenQuery: {
          type: Boolean,
          required: false,
          default: true
        },
        isHiddenSave: {
          type: Boolean,
          required: false,
          default: false
        },
        isHiddenUpdate: {
          type: Boolean,
          required: false,
          default: false
        },
        isHiddenDelete: {
          type: Boolean,
          required: false,
          default: false
        }
      },
      data() {
        return {
          setTree: this.treeData,
          showQuery: this.isHiddenQuery,
          showSave: this.isHiddenSave,
          showUpdate: this.isHiddenUpdate,
          showDelete: this.isHiddenDelete,
          name: this.treeName,
          TREEDATA: {
            DATA: null,
            NODE: null
          },
          isLoadingTree: true, // 是否加载节点树
          objectID: null,
          defaultProps: {
            children: 'children',
            label: 'name'
          },
          menuVisible: this.menuVisible
        }
      },
      watch: {
        treeData(val) {
          this.setTree = val
        },
        treeName(val) {
          this.name = val
        }
      },
      methods: {
        handleRightSelect(key) {
          if (key === '1') {
            this.$emit('NodeQuery', this.TREEDATA)
            this.menuVisible = false
          } else if (key === '2') {
            this.$emit('NodeAdd', this.TREEDATA)
            this.menuVisible = false
          } else if (key === '3') {
            this.$emit('NodeUpdate', this.TREEDATA)
            this.menuVisible = false
          } else if (key === '4') {
            this.$emit('NodeDel', this.TREEDATA)
            this.menuVisible = false
          }
        },
        rihgtClick(event, object, value, element) {
          if (this.objectID !== object.id) {
            this.objectID = object.id
            this.menuVisible = true
            this.TREEDATA.DATA = object
            this.TREEDATA.NODE = value
          } else {
            this.menuVisible = !this.menuVisible
          }
          document.addEventListener('click', e => {
            this.menuVisible = false
          })
          const menu = document.querySelector('#rightClickMenu')
          /* 菜单定位基于鼠标点击位置 */
          menu.style.left = event.clientX - 180 + 'px'
          menu.style.top = event.clientY - 100 + 'px'
          menu.style.position = 'absolute' //  为新创建的DIV指定绝对定位
          menu.style.width = 120 + 'px'
        }
      }
    }
    
    </script>
    
    <style lang="scss" scoped>
    .span-ellipsis {
      width: 100%;
      overflow: hidden;
      margin-left: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    </style>
    
    

    对于组件的引用

    import tree from '@/components/Tree/index'
    export default {
    	components: { tree },
    	data() {}
    	......
    

    组件的使用

    <tree
      :tree-data="setTree"
      :tree-name="treeName"
      @NodeAdd="NodeAdd"
      @NodeUpdate="NodeUpdate"
      @NodeDel="NodeDel"
    />
    

    setTree是要给树赋予的值,treeName是树的标题(可不要),后面是需要的树的右键操作我启用了增删改

    效果图

    在这里插入图片描述

    子组件向父组件传值

    handleRightSelect(key) {
      if (key === '1') {
        this.$emit('NodeQuery', this.TREEDATA)
        this.menuVisible = false
      } else if (key === '2') {
        this.$emit('NodeAdd', this.TREEDATA)
        this.menuVisible = false
      } else if (key === '3') {
        this.$emit('NodeUpdate', this.TREEDATA)
        this.menuVisible = false
      } else if (key === '4') {
        this.$emit('NodeDel', this.TREEDATA)
        this.menuVisible = false
      }
    }
    
    展开全文
  • 使用promise封装思路详解 首先先创建三个js文件 ,分别是core.js(核心文件) config.js(配置文件) index.js(入口文件) (1)、在核心文件中首先创建一个axios实例 里面写baseURl(请求头)和超时时间 2、抛出去一个...

    使用promise封装思路详解

    首先先创建三个js文件 ,分别是core.js(核心文件) config.js(配置文件) index.js(入口文件)

    (1)、在核心文件中首先创建一个axios实例 里面写baseURl(请求头)和超时时间 2、抛出去一个函数作用判断是
    get请求还是post请求 3、封装返回请求的方式,4、 在核心文件里面引入配置文件里面的请求的封装方式; (
    2)在配置文件中
    1、封装请求方式 2、封装请求路径
    (3)在入口文件中 1、 引入核心文件 和配置文件 2、在一个对象里面封装一个函数
    return返回请求方式和请求地址和参数 ;3、 抛出去这个对象;

    (4)、最后把入口文件里面的对象引入到man.js 里面,全局注册一下, Vue.prototype.$函数名=函数名

    如果不理解可以看这篇博客 如何封装promise

    展开全文
  • VUE前端cookie简单操作

    2020-08-29 03:14:20
    主要为大家详细介绍了VUE前端cookie简单操作代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • headers: { "Content-Type": "application/json" },

    在这里插入图片描述

        headers: {
          "Content-Type": "application/json"
        },
    
    展开全文
  • 此项目集成了vuevue-cli,axios(进行了二次封装),element-ui,router
  • GitHub优质开源项目-Vue前端项目

    千次阅读 多人点赞 2020-01-03 15:35:43
    GitHub优质开源项目-Vue前端项目 GitHub优质开源项目-Vue前端项目 GitHub优质开源项目-Vue前端项目 GitHub优质开源项目-Vue前端项目 GitHub优质开源项目-Vue前端项目 ...
  • Vue前端项目增量更新

    2021-01-12 11:57:17
    Vue前端项目打包时会将项目页面代码封装成一个个的js和css,命名规则为chunk+哈希值。 当页面代码有变动并重新打包时,webpack只会更新有变动的文件,并更新文件名称里的哈希值,其他的文件并不会更新,根据这一特性...
  • 使用Vue组件封装Echart柱状图,直接引用组件js,并且在需要展示的地方,进行Vue数据传值,支持多坐标轴。本案例非Webpack打包,直接引用JS即可。适用于部分页面使用Vue功能,或者想尝试Vue功能的同学。该组件使用...
  • 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等),今天我们主要讲解Ajax部分。 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,...
  • vue前端异常监控sentry实践

    千次阅读 2019-03-23 12:25:14
    vue前端异常监控sentry实践 文章目录vue前端异常监控sentry实践1. 监控原理1.1 onerror1.2 promise1.3 上报1.4 使用sentry1.5 与vue结合2. 安装raven3. 初始化sentry4. 手动上报5. 封装异常上报类 Report.js6. 调用 ...
  • Vue 组件封装之 Tab 切换

    千次阅读 多人点赞 2019-07-25 17:22:27
    实战 Vue 第5天:封装一个tab切换组件前言使用现存组件面临的问题封装 tab 组件的思路封装 tab 组件代码总结 前言 以上 tab 切换功能在前端开发中司空见惯。各种现存的组件也随手拈来。在 Vue 中,有配套的 element-...
  • vue组件封装】ECharts组件封装随笔

    万次阅读 2020-09-05 20:18:11
    内容 记录组件封装思路 实现ECharts 组件的封装
  • vue如何封装一个组件

    千次阅读 2019-12-26 14:46:07
    vue如何封装一个组件 1.新增子组件 在工程src->components目录下新建一个文件夹用于存放组件。 我封装了一个树组件,文件夹名称为va-tree,里面有一个va-tree.vue文件,写了树组件的具体内容,包括组件样式、组件...
  • ant-design-vue Table封装

    千次阅读 2020-10-21 18:52:25
    ant-design-vue Table封装 ant-design-vue Table 封装表格主要功能: 1、表格加载(数据支持数据数组和接口访问方法) 2、表格分页 3、表格伸缩列 4、支持单击选中行 5、表格支持列显示和隐藏(同时也可以查看AVue,...
  • 祝你前端开发愉快 import axios from "axios"; //导入axios cmd安装 => 淘宝镜像 ? cnpm install axios -S : npm install axios -S const backendPath = "http://127.0.0.1", //...
  • 主要给大家介绍了关于Vue管理系统前端之组件拆分封装的相关资料,文中通过实例代码结束的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 本篇文章主要介绍了详解Vue 2.0封装axios笔记小编觉得挺不错的现在分享给大家也给大家做个参考一起 随小编过来看看吧 前前言言 单页面应用大多采用前后端分离开发思路我们知道前端和后端交互有多中方式(服务器端渲染...
  • Vue封装自定义步骤条 实现上下一步 效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了; 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条组件; 设计原理:当...
  • vue封装自己的日历组件-高级篇视频 封装自己的组件
  • 1)架构 本项目采取了前后端分离,后端是node.js+express,前端是vue.js,数据库是mysql 源码分为三大块:API端、H5端、管理后台...车辆管理vue前端+node做后端+mysql,很完善有地图定位上传图片接口封装,admin,admin.
  • vue项目封装axios

    万次阅读 2017-12-12 22:36:47
    还是直奔主题吧,因为官方不推荐使用vue-resource,而是推荐axios,所以这篇文章分享给大家我在自己的项目里如何封装axios,虽说将axios设置为全局变量(Vue.prototype.$http = axios(main.js)),直接用最原始的...
  • vue怎么封装和调用公共方法

    万次阅读 多人点赞 2021-04-01 16:36:40
    业务中经常会碰见同一方法需要多次调用,这时候如何每次都写一遍就显得代码不够优雅了,所以封装公共方法是非常有必要的 第一步: 封装公共方法 1.在vue项目中src/assets/js/创建js文件 例:common.js 2.在main.js ...
  • Vue封装公用变量以及方法

    千次阅读 2020-01-05 20:41:10
    写久了Flutter,前端的知识真的是忘得差不多了,今天就来复习一下Vue中如何封装公用变量以及公用方法 以封装一个正则表达式为例! 第一步 创建我们的公用文件夹 我们来看一下utils.js中的代码 class PublicMethods{...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,763
精华内容 15,505
关键字:

vue的前端封装

vue 订阅