Cara menggunakan Vue3+ts untuk membangunkan ProTable-View.js-php.cn

Pelaksanaan bahagian hadapan

Kesan pencapaian

Cara menggunakan Vue3+ts untuk membangunkan ProTable

Timbunan teknologi

vue3 + skrip taip + elemen-tambah

Cara menggunakan

<template>
  <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane
    :label="item.label"
    v-for="(item, index) in templateConfig"
    :key="index" :name="item.name"
    lazy
    >
    <!--所有的 slot内容都在表格内部处理好， columnsType进行区分-->
    <pro-table
      :columns="item.columns"
      :type="item.name"
      :request-url="requestUrl"
    >
    </pro-table>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from &#39;vue&#39;
import ProTable from &#39;./components/ProTable/index.vue&#39;
import { ColumnProps, RequestUrl } from &#39;./components/ProTable/types&#39;
import { projectConfig, projectConfigBatchDelete } from &#39;./service/api&#39;
const activeName = ref(&#39;user&#39;)
interface TemplateConfig {
  name: string
  label: string
  columns: ColumnProps[],
}
const requestUrl: RequestUrl = {
  create: projectConfig,
  list: projectConfig,
  update: projectConfig,
  destroy: projectConfig,
  batchDelete: projectConfigBatchDelete
}
const templateConfig = ref<TemplateConfig[]>([
  {
    label: &#39;ProTable&#39;,
    name: &#39;user&#39;,
    columns: [
      {
        key: &#39;userName&#39;,
        title: &#39;用户名&#39;,
        searchType: &#39;el-input&#39;
      },
      {
        key: &#39;password&#39;,
        title: &#39;密码&#39;,
        searchType: &#39;el-input&#39;
      },
      {
        key: &#39;email&#39;,
        title: &#39;邮箱&#39;,
        searchType: &#39;el-input&#39;
      },
      {
        key: &#39;phone&#39;,
        title: &#39;手机号&#39;,
        searchType: &#39;el-input&#39;
      },
      {
        key: &#39;role&#39;,
        title: &#39;角色&#39;,
        searchType: &#39;z-select&#39;,
        attrs: {
          options: [
            {
              label: &#39;管理员&#39;,
              value: &#39;admin&#39;
            },
            {
              label: &#39;普通用户&#39;,
              value: &#39;user&#39;
            }
          ]
        }
      },
      {
        key: &#39;status&#39;,
        title: &#39;状态&#39;,
        searchType: &#39;z-select&#39;,
        attrs: {
          options: [
            {
              label: &#39;启用&#39;,
              value: 1
            },
            {
              label: &#39;禁用&#39;,
              value: 0
            }
          ]
        },
        columnType: &#39;status&#39;
      },
      {
        key: &#39;hasUseArray&#39;,
        title: &#39;是否使用数组参数?&#39;,
        search: false,
        searchType: &#39;useExpandField&#39;,
        show: false,
        add: false
      },
      {
        key: &#39;arrayParams&#39;,
        title: &#39;数组参数&#39;,
        searchType: &#39;z-array&#39;,
        search: false,
        width: 120,
        add: false,
        show: false
      },
      {
        key: &#39;hasUseArray&#39;,
        title: &#39;是否使用JSON参数?&#39;,
        search: false,
        searchType: &#39;useExpandField&#39;,
        show: false,
        add: false
      },
      {
        key: &#39;jsonParams&#39;,
        title: &#39;JSON参数&#39;,
        searchType: &#39;z-json&#39;,
        search: false,
        width: 120,
        add: false,
        show: false
      },
      {
        key: &#39;createdAt&#39;,
        title: &#39;创建时间&#39;,
        width: 180,
        searchType: &#39;el-date-picker&#39;,
        add: false
      },
      {
        key: &#39;updatedAt&#39;,
        title: &#39;更新时间&#39;,
        width: 180,
        searchType: &#39;el-date-picker&#39;,
        add: false
      },
      {
        key: &#39;action&#39;,
        title: &#39;操作&#39;,
        search: false,
        add: false,
        width: 150
      }
    ]
  }
])
</script>
<style lang="less">
</style>

Salin selepas log masuk

Idea reka bentuk ProTable

Halaman dibahagikan kepada 5 kawasan,

Borang carian kawasan
Kawasan butang fungsi jadual
Kawasan operasi di sudut kanan atas meja
Jadual kawasan tema
Kawasan kelui meja

Isu untuk dipertimbangkan?

Kawasan mana yang patut menyokong slot masuk?
Adakah slot asal borang diserahkan kepada pengguna untuk penghantaran, atau adakah ia perlu dikapsulkan secara dalaman? Contohnya, apabila colum ialah status, ia perlu dipetakan kepada tag, apabila ia adalah jenis 数组, ia dipetakan ke jadual, dan apabila ia json, ia perlu diklik untuk melihat butiran? Ia akan menjadi terlalu menyusahkan untuk memproses setiap jadual Kami berharap untuk mengawalnya melalui medan.
Adakah lajur dengan column perlu disalin?
Medan lajur perlu diedit?

Apakah butiran dalam proses pelaksanaan?

Ketinggian meja, biarkan pengguna mengawal saiz kawasan yang boleh dilihat boleh jadual dan letakkan butang operasi kelompok di bahagian bawah (fixed kedudukan). Dengan cara ini pengguna boleh melihat kandungan jadual di kawasan terbesar.

Gaya pengekodan

Jika terdapat lebih daripada tiga atribut pada komponen, bungkusnya dalam baris baharu
Gunakan eslint ialah gaya standard.

petua css

<div class=&#39;box&#39;>
  <div class=&#39;z&#39;></div>
</div>

Salin selepas log masuk

*{
  box-sizing: border-box;
}
.box{
  display: inline-block;
    vertical-align: top;
}
.z{
  height: 32px;
  border: 1px solid;
  width: 100px;
  display: inline-block;
}

Salin selepas log masuk

Jika kotak ditukar menjadi elemen 行内, jika ia masih elemen sebaris, akan ada jurang, yang akan menyebabkan Ketinggiannya berbeza daripada ketinggian elemen induk. seperti berikut.

Cara menggunakan Vue3+ts untuk membangunkan ProTable

Penyelesaiannya juga sangat mudah Anda perlu menetapkan atribut vertical-align elemen anaknya, atau tetapkan font-size: 0 Sebab asasnya ialah teks tengah elemen juga menduduki Lokasi. Atau jika anda tidak menggunakan inline-block dan menggunakan atribut inline-flex, tiada masalah sama sekali, kerana atribut ini juga digunakan secara meluas dalam pustaka komponen element-plus, dan keserasian juga sangat bagus. Penyelesaian untuk

telah diketahui sejak sekian lama, tetapi hubungan antara vertical-algin dan line-height masih agak kabur, dan saya tidak pernah mendalaminya.

Cara menggunakan Vue3+ts untuk membangunkan ProTable

Letakkan dua artikel

Atribut penjajaran menegak CSS

Saya juga memikirkan baselineperkara ini dalamflex, selaraskan -item atribut: Atribut pada paksi silang adalah serupa.

Penjelasan terperinci tentang tutorial sintaks reka letak fleksibel

Operasi jadual

Selepas menambah data, apabila mendapatkan semula data, pageIndex hendaklah ditetapkan semula kepada 1 dan dipadam Begitu juga dengan data.
Apabila mengedit data, pageIndex kekal tidak berubah dan kekal sebagai nombor halaman semasa.
Ringkasnya, apabila bilangan item data berubah, pageIndex akan ditetapkan semula kepada 1. Apabila operasi pengguna tidak menjejaskan jumlah data, pageSize kekal tidak berubah.

Ringkasan

menggunakan pustaka yang boleh memantau perubahan dalam saiz elemen dom, ubah saiz-pemerhati-polyfill.
Dalam 3.x, jika elemen mentakrifkan kedua-dua v-bind="object" dan atribut bebas yang serupa. Pembangun boleh memilih yang mana satu untuk disimpan.

Alamat dokumen # tingkah laku gabungan v-bind

Artikel rujukan

JavaScript API——ResizeObserver penggunaan

Fungsi kemudian pemprosesan perhubungan antara medan

lanjutan belum difikirkan lagi.
Kembangkan slot
dan seterusnya. .

Lelaran....

Cara menggunakan Vue3+ts untuk membangunkan ProTable

Pelaksanaan latar belakang

Pangkalan data mysql

I The yang digunakan di sini dipasang oleh xampp, mari semak versi. Apakah versi ini? Ia palsu, adakah ia benar-benar 10? Jangan risau tentangnya buat masa ini, selagi ia berkesan.

Cara menggunakan Vue3+ts untuk membangunkan ProTable

Buat jadual

CREATE TABLE `project_config`  (
  `id` int NOT NULL AUTO_INCREMENT COMMENT &#39;主键&#39;,
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT &#39;配置类型&#39;,
  `value` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT &#39;配置的json字符串&#39;,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL DEFAULT &#39;0000-00-00 00:00:00&#39; ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 65 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = COMPACT;

Salin selepas log masuk

Projek baharu

npm init egg --type=simple

Salin selepas log masuk

Direktori projek secara kasarnya seperti berikut,

Cara menggunakan Vue3+ts untuk membangunkan ProTable

RESTful 风格的 URL 定义

Cara menggunakan Vue3+ts untuk membangunkan ProTable

Sequelize

npm install --save egg-sequelize mysql2

Salin selepas log masuk

在 config/plugin.js 中引入 egg-sequelize 插件，这里我们引入了一个库egg-cors来帮我们实现cors。

&#39;use strict&#39;;
/** @type Egg.EggPlugin */
exports.sequelize = {
  enable: true,
  package: &#39;egg-sequelize&#39;,
};
exports.cors = {
  enable: true,
  package: &#39;egg-cors&#39;,
};

Salin selepas log masuk

在 config/config.default.js 中编写 sequelize 配置

/* eslint valid-jsdoc: "off" */
&#39;use strict&#39;;
/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {};
  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + &#39;_1655529530112_7627&#39;;
  // add your middleware config here
  config.middleware = [];
  config.security = {
    csrf: {
      enable: false,
      ignoreJSON: true,
    },
  };
  config.cors = {
    origin: &#39;*&#39;,
    allowMethods: &#39;GET,HEAD,PUT,POST,DELETE,PATCH&#39;,
  };
  // add your user config here
  const userConfig = {
    // myAppName: &#39;egg&#39;,
  };
  // sequelize
  const sequelize = {
    dialect: &#39;mysql&#39;,
    host: &#39;127.0.0.1&#39;,
    port: 3306,
    username: &#39;root&#39;,
    password: &#39;123456&#39;,
    database: &#39;test_database&#39;,
    timezone: &#39;+08:00&#39;,
    dialectOptions: {
      dateStrings: true,
      typeCast: true,
    },
    define: {
      freezeTableName: true, // 模型名强制和表明一致
      underscored: true, // 字段以下划线（_）来分割（默认是驼峰命名风格）
    },
  };
  return {
    ...config,
    ...userConfig,
    sequelize,
  };
};

Salin selepas log masuk

1、时间格式化

类型需要采用：Sequelize.DATE

初始化Sequelize的时候传入dialectOptions参数，及timezone

timezone: &#39;+08:00&#39;,  // 改为标准时区
dialectOptions: {
  dateStrings: true,
  typeCast: true,
},

Salin selepas log masuk

下面就开始编写

controller

对这块需要安装lodash，懂的都懂。

controller/ProjectConfig.js

&#39;use strict&#39;;
const { success } = require(&#39;../utils/res&#39;);
const { omit, pick } = require(&#39;lodash&#39;);
const Controller = require(&#39;egg&#39;).Controller;
class ProjectConfigController extends Controller {
  async index() {
    const { ctx } = this;
    const { pageSize, pageIndex } = ctx.query;
    const { Op, fn, col, where, literal } = this.app.Sequelize;
    // 固定的查询参数
    const stableQuery = pick(ctx.query, [ &#39;type&#39;, &#39;createdAt&#39;, &#39;updatedAt&#39; ]);
    const stableQueryArgs = Object.keys(stableQuery)
      .filter(key => Boolean(stableQuery[key]))
      .map(key => {
        return {
          [key]: stableQuery[key],
        };
      });
    const whereCondition = omit(ctx.query, [ &#39;pageIndex&#39;, &#39;pageSize&#39;, &#39;type&#39;, &#39;createdAt&#39;, &#39;updatedAt&#39; ]);
    // 需要模糊查询的参数
    const whereArgs = Object.keys(whereCondition)
      .filter(key => Boolean(whereCondition[key]))
      .map(key => {
        return where(fn(&#39;json_extract&#39;, col(&#39;value&#39;), literal(`\&#39;$.${key}\&#39;`)), {
          [Op.like]: `%${whereCondition[key]}%`,
        });
      });
    const query = {
      where: {
        [Op.and]: [
          ...stableQueryArgs,
          ...whereArgs,
        ],
      },
      order: [
        [ &#39;createdAt&#39;, &#39;DESC&#39; ],
      ],
      limit: Number(pageSize), // 每页显示数量
      offset: (pageIndex - 1) * pageSize, // 当前页数
    };
    const data = await ctx.model.ProjectConfig.findAndCountAll(query);
    ctx.body = success(data);
  }
  async create() {
    const { ctx } = this;
    const { type, value } = ctx.request.body;
    const data = await ctx.model.ProjectConfig.create({ type, value });
    ctx.body = success(data);
  }
  async update() {
    const { ctx } = this;
    const { type, value } = ctx.request.body;
    const { id } = ctx.params;
    const data = await ctx.model.ProjectConfig.update({ type, value }, { where: { id } });
    ctx.body = success(data);
  }
  async destroy() {
    const { ctx } = this;
    const { id } = ctx.params;
    console.log(id);
    const data = await ctx.model.ProjectConfig.destroy({ where: { id } });
    ctx.body = success(data);
  }
  async batchDestroy() {
    const { ctx } = this;
    const { ids } = ctx.request.body;
    console.log(ids);
    const { Op } = this.app.Sequelize;
    const data = await ctx.model.ProjectConfig.destroy({
      where: {
        id: {
          [Op.in]: ids,
        },
      },
    });
    ctx.body = success(data);
  }
}
module.exports = ProjectConfigController;

Salin selepas log masuk

模糊查询

SELECT json_extract(字段名,&#39;$.json结构&#39;) FROM 表名;

Salin selepas log masuk

sequelize高级查询

Post.findAll({
  where: sequelize.where(sequelize.fn(&#39;char_length&#39;, sequelize.col(&#39;content&#39;)), 7)
});
// SELECT ... FROM "posts" AS "post" WHERE char_length("content") = 7

Salin selepas log masuk

中文文档，英文看的吃力，看中文的也无妨，不寒碜。^_^

model

model/project_config.js

&#39;use strict&#39;;
module.exports = app => {
  const { STRING, INTEGER, TEXT, DATE } = app.Sequelize;
  const ProjectConfig = app.model.define(&#39;project_config&#39;, {
    id: { type: INTEGER, primaryKey: true, autoIncrement: true },
    type: { type: STRING },
    value: {
      type: TEXT,
      get() {
        return this.getDataValue(&#39;value&#39;) ? JSON.parse(this.getDataValue(&#39;value&#39;)) : null;
      },
      set(value) {
        this.setDataValue(&#39;value&#39;, JSON.stringify(value));
      },
    },
    createdAt: { type: DATE },
    updatedAt: { type: DATE },
  });
  return ProjectConfig;
};

Salin selepas log masuk

router.js

&#39;use strict&#39;;
/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get(&#39;/api/projectConfig&#39;, controller.projectConfig.index);
  router.post(&#39;/api/projectConfig&#39;, controller.projectConfig.create);
  router.put(&#39;/api/projectConfig/:id&#39;, controller.projectConfig.update);
  router.delete(&#39;/api/projectConfig/:id&#39;, controller.projectConfig.destroy);
  router.post(&#39;/api/projectConfig/batchDelete&#39;, controller.projectConfig.batchDestroy);
};

Salin selepas log masuk

API 文档 Apifox

先快速测试一把，然后去对前端代码。

Cara menggunakan Vue3+ts untuk membangunkan ProTable

ts用到的一些

在类型别名（type alias）的声明中可以使用 keyof、typeof、in 等关键字来进行一些强大的类型操作

interface A {
  x: number;
  y: string;
}
// 拿到 A 类型的 key 字面量枚举类型，相当于 type B = &#39;x&#39; | &#39;y&#39;
type B = keyof A;
const json = { foo: 1, bar: &#39;hi&#39; };
// 根据 ts 的类型推论生成一个类型。此时 C 的类型为 { foo: number; bar: string; }
type C = typeof json;
// 根据已有类型生成相关新类型，此处将 A 类型的所有成员变成了可选项，相当于 type D = { x?: number; y?: string; };
type D = {
  [T in keyof A]?: A[T];
};

Salin selepas log masuk

在比如用一个联合类型来约束对象的key，用interface我就没实现，貌似.

export type FormItemType = &#39;el-input&#39; | &#39;z-select&#39; | &#39;el-date-picker&#39;
// 目前发现 interface 的key 只能是三种 string number symbol   keyof any
type IPlaceholderMapping = {
  [key in FormItemType]: string
}
export const placeholderMapping: IPlaceholderMapping = {
  &#39;el-input&#39;: &#39;请输入&#39;,
  &#39;z-select&#39;: &#39;请选择&#39;,
  &#39;el-date-picker&#39;: &#39;请选择日期&#39;
}

Salin selepas log masuk

Atas ialah kandungan terperinci Cara menggunakan Vue3+ts untuk membangunkan ProTable. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!