使用express生成配置json文件

最新推荐文章于 2024-01-09 11:31:06 发布

-Dayer-

最新推荐文章于 2024-01-09 11:31:06 发布

阅读量687

点赞数 2

分类专栏： JavaScript express vue 文章标签： json 前端 javascript node express

本文链接：https://blog.csdn.net/WDCCSDN/article/details/124667809

版权

JavaScript 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

vue

37 篇文章 0 订阅

订阅专栏

express

3 篇文章 0 订阅

订阅专栏

项目结构如下

app.js 创建node后端服务

saveConfig.js

var fs = require("fs"); // 引入fs模块
function saveData(info) {
  return new Promise(async (resolve, reject) => {
    try {
      let ret = {
        type: -1,
        msg: "暂无信息",
      };
      var TemplateData = JSON.stringify(info);
      console.log(global.projectName, "global.projectName");
      fs.mkdir("../config", function (err) {
        if (err) {
          return console.error(err);
        }
        console.log("目录创建成功。");
      });
      fs.writeFile("../config/config.json", TemplateData, null, function (err) {
        if (err) {
          resolve(err);
        } else {
          resolve(ret);
        }
      });
    } catch (e) {
      reject(e);
    }
  });
}

module.exports = {
  saveData,
};

router下的文件

saveConfig.js

const express = require('express')
const router = express.Router()
const { saveData, } = require('../services/saveConfig')


router.post('/saveData', async(req, res, next) => {
    let info = req.body;
    let ret = await saveData(info);
    res.json(ret);
})

module.exports = router

index.js

const express = require("express");
const saveConfigRouter = require("./saveConfig");

// 注册路由
const router = express.Router();

// 通过 userRouter 来处理 /user 路由，对路由处理进行解耦
router.use("/saveConfig", saveConfigRouter);
router.use((req, res) => {
  res.sendStatus(404);
});

module.exports = router;

serviceConfig.js

module.exports = {
  host: "localhost",
  port: 9010,
};

nodemon.json

{
  "restartable": "rs",
  "ignore": [".git", ".svn", "node_modules/**/node_modules"],
  "verbose": true,
  "execMap": {
    "js": "node --harmony"
  },
  "watch": [],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js json"
}

package.json

{
  "name": "express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon app.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.0",
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "nodemon": "^2.0.16",
    "progress": "^2.0.3"
  }
}

config.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 1. 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 2. 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 3. 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
    <style>
        #app {
          font-family: Avenir, Helvetica, Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          color: #2c3e50;
          margin: 60px;
        }
    </style>
</head>



<body>
    <div id="app">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="活动名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送">
                <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质">
                <el-checkbox-group v-model="form.type">
                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                    <el-checkbox label="地推活动" name="type"></el-checkbox>
                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源">
                <el-radio-group v-model="form.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        },
        methods: {
            onSubmit() {
                let data = {
                    ...this.form
                };
                axios.post(`http://localhost:9010/saveConfig/saveData`, data)
                    .then(res => {
                        console.log('res=>', res);
                    })
            }
        }
    })
</script>

</body>

</html>

运行npm run dev，打开http://127.0.0.1:9010/

效果

然后创建生成的文件

我们前端就可以生成配置文件然后生成别的东西

如果你想通过黑框框输入可以使用node inquirer.js进行交互

-Dayer-

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用express生成配置json文件

项目结构如下app.js 创建node后端服务saveConfig.jsvar fs = require("fs"); // 引入fs模块function saveData(info) { return new Promise(async (resolve, reject) => { try { let ret = { type: -1, msg: "暂无信息", }; var TemplateData
复制链接

扫一扫

专栏目录