上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5085

    回帖

    5959

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5959

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-4-20 09:30:47 | 显示全部楼层 | 阅读模式

    我们对网页match然后赋予gmxhr权限

    // ==UserScript==
    // @name         New Userscript
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  try 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进行简易封装
    图片.png
    之所以用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");
    配置一下

      configureWebpack: {
        plugins: [
          AutoImport({
            resolvers: [ElementPlusResolver()],
          }),
          Components({
            resolvers: [ElementPlusResolver()],
          }),
        ],
      },

    图片.png
    接下来我们先写一个最简单的函数
    获取学校信息的

        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();

    这里首先设置了最基础的三个数据
    图片.png
    然后调用post提交
    图片.png
    在提交之前先调用GeneratePostData
    这里用了promise,也是为了以后后期更方便修改
    GeneratePostData做了三件事
    1.拓展对象自身属性
    2.计算sign
    3.对象转为字符串格式
    图片.png
    首先拓展对象属性
    图片.png
    然后获取sign
    图片.png
    最后根据obj的service构造不同的固定字符串
    图片.png
    其实我们可以使用库的,但是我担心生成的格式跟他的不一致,所以决定干脆统一使用switch和case做这部分了
    返回内容处理在

            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也不定
    感觉官方文档有点缺失
    所以脏了一下
    然后我们简单画一下页面

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

    设置一下校验规则,就做好最基本的项目了
    图片.png

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情

    2023-10-19 09:35
  • 签到天数: 66 天

    [LV.6]常住居民II

    6

    主题

    126

    回帖

    219

    积分

    高级工程师

    积分
    219

    油中2周年生态建设者

    发表于 2022-4-20 13:29:45 | 显示全部楼层
    不明觉厉~ggnb!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5085

    回帖

    5959

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5959

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-4-20 14:01:43 | 显示全部楼层

    猫猫姐姐比我强多了!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情

    2023-12-8 22:55
  • 签到天数: 37 天

    [LV.5]常住居民I

    15

    主题

    145

    回帖

    153

    积分

    荣誉开发者

    积分
    153

    荣誉开发者

    发表于 2022-4-20 17:19:06 | 显示全部楼层
    我为哥哥举大旗,斩尽世间一切敌,看谁敢与道为敌!!!
    摸鱼中
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5085

    回帖

    5959

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5959

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-4-20 17:38:06 | 显示全部楼层
    执念e1 发表于 2022-4-20 17:19
    我为哥哥举大旗,斩尽世间一切敌,看谁敢与道为敌!!! ...

    呜呜呜呜,感谢哥哥,安排!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表