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

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

elementUi使用

elementUi初步安装并使用

1. 安装element-ui

   • 使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用

   npm i element-ui -S
   //yarn add element-ui//yarn
   

2. 引入并使用

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

   1. 完整引入

      1. 在/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中的组件变成全局组件;
         

      2. 按照文档使用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>
         

   2. 按需引入*

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

      1. 安装 babel-plugin-component插件

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

      2. 在/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"
                 }
               ]
             ]
           }
           

      3. 按需使用

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

            • element-ui 快速上手

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

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

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

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

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

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

               3. 插件式写法-链式写法。

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

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

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

               1. 在/src/element/index.js中写

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

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

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

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

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

                  3. 插件式写法-链式写法。

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

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

               2. 在/src/main.js中导入

                  import "./element/index.js"
                  

         2. 页面中使用组件

            <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。

  1. 需要配置跨域，对/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>",
           // },
         },
       },
     });
     

  2. 配置文件修改好之后，一定要重新启动当前vue项目。

  3. 之后就可以发起ajax类请求或fetch()请求了。

     • ajax类
       • 原生ajax，即XML。
       • jQuery.ajax()。
       • axios。

使用axios

• 发送请求，一般使用axios。

  1. 安装axios

     npm i axios
     

  2. 在/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,
         };
         

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

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

进阶参考