论坛 › 其它 › 【工程实战篇】简单封装和组件库使用及第一个通信

李恒道 发表于 2022-4-20 09:30:47

【工程实战篇】简单封装和组件库使用及第一个通信

我们对网页match然后赋予gmxhr权限
```js
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @descriptiontry to take over the world!
// @author       You
// @match      http://localhost:8081/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.localhost
// @grant      unsafeWindow
// @run-at       document-start
// @grant      GM_xmlhttpRequest
// ==/UserScript==
unsafeWindow.GM_xmlhttpRequest=GM_xmlhttpRequest;
```
然后对post和get进行简易封装
之所以用promise是为了保证可维护性，以后后期如果需要修改替换post和get函数即可
然后我们开始画页面
这里我选择了element-plus
NPM
$ npm install element-plus --save
安装element-plus
然后配置自动导入
npm install -D unplugin-vue-components unplugin-auto-import
然后去vue.config.js
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
配置一下
```js
configureWebpack: {
    plugins: [
      AutoImport({
      resolvers: ,
      }),
      Components({
      resolvers: ,
      }),
    ],
},
```
接下来我们先写一个最简单的函数
获取学校信息的
```js
    async function GetSchoolList() {
      let postdata = {
      service: "alioth.login.customer.listValid",
      deviceCode: 2,
      tenantCode: "",
      };
      post(
      "https://xueqiplus.chinaedu.net/aliothprovider/router",
      await GeneratePostData(postdata)
      ).then((response) => {
      if (response.code === "0") {
          let payload = JSON.parse(response.data);
          let school = [];
          payload.forEach((item) => {
            item.customerList.forEach((customer) => {
            school.push({
                label: customer.name,
                value: JSON.stringify(customer),
            });
            });
          });
          schoollist.value = school;
      }
      });
    }
    GetSchoolList();
```
这里首先设置了最基础的三个数据
然后调用post提交
在提交之前先调用GeneratePostData
这里用了promise，也是为了以后后期更方便修改
GeneratePostData做了三件事
1.拓展对象自身属性
2.计算sign
3.对象转为字符串格式
首先拓展对象属性
然后获取sign
最后根据obj的service构造不同的固定字符串
其实我们可以使用库的，但是我担心生成的格式跟他的不一致，所以决定干脆统一使用switch和case做这部分了
返回内容处理在
```js
      if (response.code === "0") {
          let payload = JSON.parse(response.data);
          let school = [];
          payload.forEach((item) => {
            item.customerList.forEach((customer) => {
            school.push({
                label: customer.name,
                value: JSON.stringify(customer),
            });
            });
          });
          schoollist.value = school;
      }
```
这里forEach遍历，并且往输入投递了label和字符串value值
因为根据我测试element-plus无法绑定对象...为啥我也不知道....
设置value-key也不定
感觉官方文档有点缺失
所以脏了一下
然后我们简单画一下页面
```html
      <div>
      <el-form
          :model="info"
          ref="ruleFormRef"
          :rules="rules"
          label-width="120px"
      >
          <el-form-item prop="school" label="选择学校">
            <el-select-v2
            placeholder="请选择学校"
            style="width: 100%"
            filterable
            v-model="info.school"
            :options="schoollist"
            />
          </el-form-item>
          <el-form-item prop="username" label="请输入账户">
            <el-input v-model="info.username" />
          </el-form-item>
          <el-form-item prop="password" label="请输入密码">
            <el-input type="password" show-password v-model="info.password" />
          </el-form-item>
          <el-form-item>
            <el-button
            style="width: 100%"
            type="primary"
            @click="submitForm(ruleFormRef)"
            >登录账号</el-button
            >
          </el-form-item>
      </el-form>
      </div>
```
设置一下校验规则，就做好最基本的项目了
# 结语
撒花~

极品小猫 发表于 2022-4-20 13:29:45

不明觉厉~ggnb!

李恒道 发表于 2022-4-20 14:01:43

极品小猫 发表于 2022-4-20 13:29
不明觉厉~ggnb!

猫猫姐姐比我强多了！

执念e1 发表于 2022-4-20 17:19:06

我为哥哥举大旗，斩尽世间一切敌，看谁敢与道为敌！！！{:4_94:}{:4_94:}{:4_94:}

李恒道 发表于 2022-4-20 17:38:06

执念e1 发表于 2022-4-20 17:19
我为哥哥举大旗，斩尽世间一切敌，看谁敢与道为敌！！！ ...

呜呜呜呜，感谢哥哥，安排！

查看完整版本: 【工程实战篇】简单封装和组件库使用及第一个通信