在Nuxt3中如何减少import model声明及初始化加载models快速开发秘诀

前端  /  管理员 发布于 1年前   513

使用nuxt3开发，虽然Nuxt都靠定死的路径自动化，但是就是没做好一样东西，也就是自动 models, 上网查了，竟然没有人问这问题？

也找不到一个接近的样本，于是我花了有点时间探索最后被我发现一些秘诀，

要 load 所有的 models, 可以在 server/middleware/loadModels.js 

那边靠 fs.readdir 来 load 所有的 sequelize/mongoose models.

条件是：

1.需要用到 import, 和 .js 需换去 .mjs 才有效 import 所有的 model mjs 文件，否则会报错。

2.由于 middleware 是自动化 loading, 为了减轻加载负担，请用 POST 来判断，
  需要 useFetch method:POST 来读取资料，使用 POST 也相对安全一些。

3.import 得到的，必须打入对象 {}, 比如 const models = {}, 
  把 modelName 最为对象的 key, 比如 models [‘member’]，
  过后每次查询就这样，const res = await models [‘member’].findAll () 就可以了。

4.pathToFileUR 这里的转换是为了支持 windows 和 ios，否则 windows 会报错。

代码示例：

middleware/loadModel.js

import fs from 'fs/promises';
import path from 'path';
import { pathToFileURL } from 'url';
// data 是 model 文件夹
// 比如：/models/data/menu.mjs
const dir = 'data';
const __dirname = path.resolve();
const modelsDirectory = path.join(__dirname, 'models', dir);
// console.log(modelsDirectory);
export default fromNodeMiddleware(async (req, res, next) => {
    // console.log(req.url);
    // console.log(req.method);
    if(req.method === 'POST'){
        try {
            const models = {};
            // Read all files in the models directory
            const files = await fs.readdir(modelsDirectory);
            await Promise.all(
                files.map(async (file) => {
                    const modelPath = path.join(modelsDirectory, file);
                    // console.log("modelPath", modelPath);
                    const {href: importModelPath} = pathToFileURL(modelPath);
                    // console.log("importModelPath", importModelPath);
                    // const { sync } = await import(importModelPath);
                    const { sync } = await import(importModelPath);
                    const model = sync();
                    const m = new model;
                    models[m.constructor.name] = model;
                })
            );
            req.models = models;
            // console.log("models", models);
        } 
        catch (error) {
            console.error('Error importing models:', error);
        }
    }
    next();
});

server/api/menu.post.js

export default defineEventHandler(async (event) => {
    const models = event.node.req.models;
    const model = models['menu'];
    const results = await model.findAll({
        attributes: ['id', 'iconName', 'link', 'title'],
        order: [
            ['ordering', 'ASC']
        ]
    });
    return {
        code: 200,
        msg: 'success',
        data: results
    }
})

components/menu.vue

const menus = ref([]);
sync function loadMenus(){
  try {
    const { data: response } = await useFetch(`/api/menu`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    if (response.value.code === 200) {
      menus.value = response.value.data;
    } else {
      console.error('Error: load menu error!');
    }
  } catch (error) {
    console.error('An error occurred while making the request:', error);
  }
}
await loadMenus();

models/data/menu.mjs

import { Model, DataTypes, Sequelize } from 'sequelize';
import { sequelize } from './database.mjs';
class Menu extends Model {
}
Menu.init({
    id: {
        field: 'MenuID_PK',
        type: DataTypes.INTEGER,
        primaryKey: true,
        autoIncrement: true,
        comment: 'Menu ID',
    },
    iconName: {
        field: 'IconName',
        type: DataTypes.STRING(40),
        allowNull: false,
    },
    link: {
        field: 'Link',
        type: DataTypes.STRING(60),
        allowNull: false,
    },
    title: {
        field: 'Title',
        type: DataTypes.STRING(60),
        allowNull: false,
    },
    ordering: {
        field: 'Ordering',
        type: DataTypes.DECIMAL(6, 2),
        allowNull: false,
    },
    createdAt: {
        field: 'CreatedAt',
        type: DataTypes.DATE,
        defaultValue: Sequelize.literal('NOW()'),
    },
    updatedAt: {
        field: 'UpdatedAt',
        type: DataTypes.DATE,
        defaultValue: Sequelize.literal('NOW()'),
    },
}, {
    sequelize,
    modelName: 'menu',
    tableName: 'menus',
    timestamps: false,
});
function sync(){
    return Menu;
}
export { sync, sequelize };