脚手架的可视化操作

可视化操作界面

上一章节我们介绍了通过终端命名的方式去拉取一个项目,一个个的配置都是我们通过终端命令来进行操作的,现在我们要做就是通过终端来打开浏览器界面,然后用户填入文件名和对应的接口地址,可以帮我们根据返回结果自动生成 TS 类

用 Node 打开浏览器窗口

有了上面的构想,我们首先要做的:

通过终端接受打开浏览器窗口的命名
用Node 打开浏览器窗口
在可视化页面上进行操作
调用Node进行一系列操作
浏览器窗口关闭,Node退出

接受命名我们上章节已经定义好了

 program.option('json2ts', '输入接口地址,自动生成TypeScript类 🥱')
 json2ts() {
        createServer()
    },

打开浏览器窗口也很简单,我们只要使用 Node 的 child_process 模块即可

const { exec } = require('child_process')
const localhost = 'http:127.0.0.1:8088/'

switch (process.platform) {
    mac系统使用 一下命令打开url在浏览器
    case "darwin":
        exec(`open ${localhost}`);
    win系统使用 一下命令打开url在浏览器
    case "win32":
        exec(`start ${localhost}`);
     默认mac系统
    default:
        exec(`open ${localhost}`);
}

OK,现在我们成功的打开了浏览器界面,但是你会说是空的啊,别急,我们慢慢往下整.

说到可使用页面,那肯定我们少不了 HTML 页面,OK, 我们在新建 views/index.html,随便写点内容

main.js

 http.createServer(function (req, res) {
     if (req.url === "/") {
         const pathname = `${path.join(process.cwd(), '../')}views/index.html`
         fs.exists(pathname, function (exists) {
             if (exists) {
                 res.writeHead(200, { "Content-Type": "text/html" });
             }
             fs.readFile(pathname, function (err, data) {
                 console.log(data);
                 if (err) {
                     console.log("服务异常");
                     process.exit(-1)
                 }
                 res.end(data)
             })
         })
     } 
     else {
         res.end("404")
     }

 }).listen(8088, "127.0.0.1")

// 自动打开默认浏览器
...

现在执行发现我们的浏览器能顺利打开,我们的 HTML 也能打开了.

接入 Koa

别问,问就是 koa,用原生操作是在是太麻烦了，不多说

npm install koa koa-router koa-static koa-swig child_process

koa-swig 是一个模板引擎,具有很多强大的功能,

配置一下

app.context.render = wrap(
    render({
        root: viewDir,
        autoescape: true,
        cache: false,
        ext: 'html',
        varControls: ['[[', ']]'],
        writeBody: false,
    })
);

OK,我们现在要做的就是用户在页面,填完文件名,接口地址点击确定,把请求发送到本地 Koa

router.post('/download', async (ctx) => {
    const { list = [] } = ctx.request.body

    const spinner = ora(`⏰ ${chalk.gray(`正在生成接口文档中 ⌛️`)}`).start();
    const promises = []
    list.forEach(({ dirName, url }) => {
        const promise = new Promise((resolve) => {
            axios.get(url)
                .then(res => resolve({ data: res.data, dirName: dirName }))
                .catch(resolve);
        });
        promises.push(promise);
    });

    try {
        const datas = await Promise.all(promises)
        for (const data of datas) {
            await generateTsJson(data.data, data.dirName, spinner)
        }
        ctx.body = {
            status: 200
        }
        setTimeout(() => {
            process.exit()
        }, 1500);
    } catch (error) {
        console.log(error);
        spinner.fail(chalk.red('生成接口文档失败 😭'))
        process.exit(-1)
    }
})

安装 json2ts

json2ts可把 JSON 对象转成 ts 接口类

npm install json2ts

generateTsJson

function generateTsJson(jsonContent, dirName, spinner) {

    const result = json2ts.convert(JSON.stringify(jsonContent, null, 4))
    try {
        //  判断是否存在目录
        if (fs.existsSync(dir)) {
            xshell.cd(dir)
            writeFile(dirName, result, spinner)
        } else {
            fs.mkdirSync('docs')
            xshell.cd(dir)
            writeFile(dirName, result, spinner)
        }
    } catch (error) {
        console.log(error);
        spinner.fail(chalk.red('生成接口文档失败 😭'))
        process.exit(-1)
    }
}

function writeFile(dirName, result, spinner) {
    fs.writeFile(`${dirName}.ts`, result, 'utf-8', function (err) {
        if (err) {
            spinner.fail(chalk.red('生成接口文档失败 😭'))
            process.exit(-1)
        }
        spinner.succeed(`${chalk.green(`生成文档${dirName}.ts 成功 😄`)}`)
    })
}

首先我们接受一个数组, 里面的对象有 dirName:保存的文件名,url 要请求的接口地址

然后依次发送请求,拿到结果后使用 json2ts 来生成 .ts 文件到 docs/ 目录下