20230424----重返学习-elementUi使用-vue与后端数据交互

最新推荐文章于 2023-09-25 06:37:39 发布

方朝端

最新推荐文章于 2023-09-25 06:37:39 发布

阅读量547

点赞数

分类专栏： vue 重返学习文章标签： vue.js 学习 elementui

本文链接：https://blog.csdn.net/seetoyou/article/details/130354911

版权

重返学习同时被 2 个专栏收录

126 篇文章 4 订阅

订阅专栏

vue

37 篇文章 0 订阅

订阅专栏

day-056-fifty-six-20230424-elementUi使用-vue与后端数据交互

elementUi使用

elementUi初步安装并使用

安装element-ui
- 使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用
```
npm i element-ui -S
//yarn add element-ui//yarn
```

引入并使用

必须先安装好element-ui才可以

完整引入

在/src/main.js中加入这几行

import ElementUI from "element-ui";//ElementUI的js功能引入;
import "element-ui/lib/theme-chalk/index.css";//ElementUI中的css文件引入;
Vue.use(ElementUI);//将ElementUI插件导入,目的是将ElementUI中的组件变成全局组件;

按照文档使用element-ui的组件，直接在vue组件模版中使用就行了

<template>
  <div class="home">
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
  </div>
</template>

按需引入*

借助 babel-plugin-component 插件，我们可以只引入需要的组件，以达到减小项目体积的目的。

安装 babel-plugin-component插件

npm install babel-plugin-component -D
//yarn add babel-plugin-component -D//yarn

在/babel.config.js或/.babelrc中配置

在/.babelrc中配置

这个是vue配置中使用全部安装到/package.json时才会使用的。

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在/babel.config.js中配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],

  //使用babel相关的插件。这个是新增的。
  "plugins": [
    [
      "component",//使用babel-plugin-component插件。
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

按需使用

先单独引入并设置为全局组件

element-ui 快速上手

可以在/src/main.js中直接写

全局组件式写法-单个普通引入。无链式写法

个人推荐用这种，好理解相关的引入。

import { Button } from "element-ui";
Vue.component(Button.name, Button);//1. 全局组件式写法-单个普通引入。无链式写法；

import { Tag } from "element-ui";
Vue.component(Tag.name, Tag);

插件式写法-单个普通引入。

import { Button } from "element-ui";
Vue.use(Button);//2. 插件式写法-单个普通引入。

import { Tag } from "element-ui";
Vue.use(Tag);

插件式写法-链式写法。

项目一般用这种，代码行数少

import { Button, Tag, Table, TableColumn, Link } from "element-ui";
Vue.use(Button).use(Tag).use(Table).use(TableColumn).use(Link);//3. 插件式写法-链式写法。

一般单独使用/src/element/index.js

在/src/element/index.js中写

全局组件式写法-单个普通引入。无链式写法

个人推荐用这种，好理解相关的引入。

import { Button } from "element-ui";
Vue.component(Button.name, Button);//1. 全局组件式写法-单个普通引入。无链式写法；

import { Tag } from "element-ui";
Vue.component(Tag.name, Tag);

插件式写法-单个普通引入。

import { Button } from "element-ui";
Vue.use(Button);//2. 插件式写法-单个普通引入。

import { Tag } from "element-ui";
Vue.use(Tag);

插件式写法-链式写法。

项目一般用这种，代码行数少

import { Button, Tag, Table, TableColumn, Link } from "element-ui";
Vue.use(Button).use(Tag).use(Table).use(TableColumn).use(Link);//3. 插件式写法-链式写法。

在/src/main.js中导入
```
import "./element/index.js"
```

页面中使用组件

<template>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
  </el-row>
</template>

修改样式

单文件组件中style样式标签要加scoped属性及lang属性。

scoped属性用于让样式只在当前vue组件中生效。
lang属性一般就是自己所配置的css预处理器，如less或scss等。

<style lang="less" scoped></style>

引入第三方vue组件后，样式可能不生效

一般先试着加!important

后面加穿透，这个是因为加了scoped属性，导致样式只生效于当前组件中。

:deep() 新写法

这个好像只能在穿透开始第一层中写，如果穿透开始里层写，就会导致不生效。

生效

.home {
  :deep(.el-dialog__wrapper) {
    .el-dialog__header {
      display: flex;
      justify-content: space-around;
    }

    .el-dialog__body {
      text-align: left;
    }
    .el-form-item__label {
      display: block;
      float: none;
      text-align: left;
    }

    .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}

不生效

.home {
  :deep(.el-dialog__wrapper) {
    :deep(.el-dialog__header) {
      display: flex;
      justify-content: space-around;
    }

    :deep(.el-dialog__body) {
      text-align: left;
    }
    :deep(.el-form-item__label) {
      display: block;
      float: none;
      text-align: left;
    }

    :deep(.el-form-item__content) {
      margin-left: 0px !important;
    }
  }
}

/deep/ 老写法

这个好像都可以，里层和外层都可以随意写。

生效

.home {
  /deep/.el-dialog__wrapper {
    .el-dialog__header {
      display: flex;
      justify-content: space-around;
    }

    .el-dialog__body {
      text-align: left;
    }
    .el-form-item__label {
      display: block;
      float: none;
      text-align: left;
    }

    .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}

生效

.home {
  /deep/.el-dialog__wrapper {
    /deep/.el-dialog__header {
      display: flex;
      justify-content: space-around;
    }

    /deep/.el-dialog__body {
      text-align: left;
    }
    /deep/.el-form-item__label {
      display: block;
      float: none;
      text-align: left;
    }

    /deep/.el-form-item__content {
      margin-left: 0px !important;
    }
  }
}

目前2023年不太推荐用这种方法了

vue与后端数据交互

一般vue项目中，前端客户端端口号与后端服务器端口号是不一样的。
- 如：
  - 后台服务的端口号： http://127.0.0.1:9000/getTaskList
  - 客户端：http://localhost:8081/#/
- 也就是说，需要进行跨域
- 跨域的方式有三种
  - nodejs – 设置CORS
  - webpack – 配置devServe
  - nginx – 配置server中对应网址

vue跨域

vue2对应的vue-cli是基于webpack的，所以里面的校验类似于webpack。

需要配置跨域，对/vue.config.js文件进行配置

对于vue-cli创建的项目来说，/vue.config.js类似于webpack创建的项目的/webpack.config.js文件。

const { defineConfig } = require("@vue/cli-service");
// 配置类的东西，重新改了之后，要重新启动项目。
module.exports = defineConfig({
  // transpileDependencies: true,//babel-loader是否对node_modules中的文件转译，用于提高兼容性。

  // 和webpack配置差不多。
  devServer: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:9000",
        ws: true, //是否支持websocket
        changeOrigin: true, //伪装访问源。

        //路径重置，改写路径。
        pathRewrite: {
          "^/api": "", //将路径中多余的前方开头的`/api`配置为空字符串``
        },
      },

      // 也可以配置多个跨域。
      // "/foo": {
      //   target: "<other_url>",
      // },
    },
  },
});

配置文件修改好之后，一定要重新启动当前vue项目。
之后就可以发起ajax类请求或fetch()请求了。
- ajax类
  - 原生ajax，即XML。
  - jQuery.ajax()。
  - axios。

使用axios

发送请求，一般使用axios。

安装axios
```
npm i axios
```

在/src/目录里面创建一个/api/目录–即/src/api/目录，专门放置发送ajax请求的js文件。

/src/api/目录有两个文件

/src/api/http.js axios的二次封装文件（需要qs-- npm i qs )

// axios的二次封装文件--把公共部分，如拦截器之类

import axios from "axios";
import { Message } from "element-ui";//这个前提是要下载element-ui，要不会有问题。
import qs from "qs";//需要下载
import _ from "@/assets/utils";//这个也需要引入，要在`/src/assets/utils.js`中导出一个工具对象。

// 相当于axios.defaults;
const http = axios.create({
  baseURL: "/api",
  timeout: 60000,
  transformRequest: (data) => {
    if (_.isPlainObject(data)) {
      data = qs.stringify(data);
    }
    return data;
  },
});

http.interceptors.request.use((config) => {
  return config;
});
http.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (reason) => {
    Message.error("当前网络繁忙，请您稍后再试~");
    return Promise.reject(reason);
  }
);
export default http;

/src/api/index.js 基于二次封装好的axios实例对象http发送的所有请求组成的对象，即用来导出封装的所有的方法。

//1. 导入axios二次封装文件，用于提取一些公共文件之类的。
import http from "./http.js";

//2. 封装请求
//获取任务列表信息
const getTaskList = function getTaskList(state = 0) {
  // return 返回一个Promise的实例，调用函数就可以继续async await/then catch
  return http.get("/getTaskList", {
    params: {
      limit: 100, //每一页展示的数量(默认100条)
      page: 1, //当前展示第几页(默认第1页)
      state, //任务状态(0全部[默认] 1未完成 2已完成)
    },
  });
};

// 增加新任务
const addTask = function addTask(task, time) {
  // return 返回一个Promise的实例，调用函数就可以继续async await/then catch
  return http.post("/addTask", {
    task,
    time,
  });
};

// 删除任务
const removeTask = function removeTask(id) {
  // return 返回一个Promise的实例，调用函数就可以继续async await/then catch
  return http.get("/removeTask", {
    params: {
      id,
    },
  });
};

// 完成任务
const completeTask = function completeTask(id) {
  // return 返回一个Promise的实例，调用函数就可以继续async await/then catch
  return http.get("/completeTask", {
    params: {
      id,
    },
  });
};

//3. 导出封装好的方法
export default {
  getTaskList,
  addTask,
  removeTask,
  completeTask,
};

在/src/main.js中导入所有封装的请求函数

import api from "./api/index.js";
Vue.prototype.$api = api; //挂载到Vue.prototype上的$api属性，以便让所有的组件都可以沿着原型链通过this.$api访问并使用到它，进而调用它身上的方法或属性。
// console.log(`api-->`, api, Vue);

进阶参考

方朝端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
20230424----重返学习-elementUi使用-vue与后端数据交互

安装element-ui引入并使用完整引入在中加入这几行按照文档使用element-ui的组件，直接在vue组件模版中使用就行了按需引入*安装 babel-plugin-component插件在或/.babelrc中配置在/.babelrc中配置这个是vue配置中使用全部安装到时才会使用的。在中配置按需使用先单独引入并设置为全局组件可以在中直接写全局组件式写法-单个普通引入。无链式写法插件式写法-单个普通引入。插件式写法-链式写法。一般单独使用在中写全局组件式写法-单个普通引入。无链式写法。
复制链接

扫一扫

专栏目录