创建页面代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title></title>
<script src="jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td>页面名称：</td>
<td colspan="8"><input id="pagename" type="text"></td>
</tr>
<tr>
<td>生成页面路径：</td>
<td colspan="8"><input id="createPath" type="text"></td>
</tr>
<tr>
<td>表单字段：</td>
<td colspan="8">
<button id="add">增加</button>
</td>
</tr>
<tr id="first" class="line">
<td>中文名称：</td>
<td><input name="label" type="text"></td>
<td>字段：</td>
<td><input name="name" type="text"></td>
<td>类型：</td>
<td>
<select name="type">
<option value="1">文本</option>
<option value="2">下拉</option>
<option value="3">日期</option>
</select>
</td>
<!-- <td>校验规则：</td>
<td>
<select name="jiaoyan">
<option value="1">非空</option>
<option value="2">数字</option>
<option value="3">英文</option>
<option value="4">邮箱</option>
<option value="5">手机号</option>
</select>
</td> -->
<td> <button class="delete">删除</button></td>
</tr>
</table>
<table>
<tr>
<td><input type="radio" name="a" value="1" id="" ></td>
<td>生成页面</td>
<td><input type="radio" name="a" value="2" id="" ></td>
<td>返回表格列数据</td>
<td><input type="radio" name="a" value="3" id="" ></td>
<td>生成表单html</td>
</tr>
</table>
<button id="create">生成</button>
<textarea style="width:500px;height:200px" id="res"></textarea width="500px" >
<script>
var first=$("#first").prop("outerHTML");
$("#add").click(function () {
$("#table").append(first)
})
$(document).on("click",".delete",function () {
$(this).closest('tr').remove()
})
var arr=[]
$("#create").click(function () {
arr=[]
$(".line").each(function(){
var label=$(this).find("[name=label]").val()
var name=$(this).find("[name=name]").val()
var type=$(this).find("[name=type]").val()
arr.push({'label':label,'name':name,'type':type})
})
var retype=""
$("[name=a]").each(function(){
if($(this).is(":checked")){
retype=$(this).val()
}
})
var param={"pagename":$("#pagename").val(),'form':arr,"createPath":$("#createPath").val(),"retype":retype};
console.log(param)
$.ajax({
//请求方式
type : "POST",
//请求地址
url : "/create",
//数据，json字符串
data : param,
//请求成功
success : function(result) {
//console.log(result);
$("#res").val(result)
},
});
})
</script>
</body>
</html>
var express = require('express');
var fs = require("fs"); //操作文件
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer'); // v1.0.5
var upload = multer(); // for parsing multipart/form-data
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({
extended: true
})); // for parsing application/x-www-form-urlencoded
app.post('/create', function (req, res) {
var data = req.body;
var pageName = data.pagename;
var createPath = data.createPath;
var form = data.form;
var createStr = ""
var searchStr = ""
var retype=data.retype;
var searchObj = {}
var columns = []
var formNames = {}
columns.push({
title: "序号",
key: "index",
})
for (var i = 0; i < form.length; i++) {
var label = form[i]['label'];
var name = form[i]['name'];
var type = form[i]['type'];
searchObj[name] = ""
formNames[name] = label
//if(i%2==0){
createStr += "<tr>"
///}
columns.push({
title: label,
key: name,
})
if (type == 1) {
createStr += searchStr = `<td class="required">${label}：</td>`
createStr += searchStr = `<td><Input placeholder v-model.trim="form.${name}" /></td>`
}
if (type == 2) {
createStr += searchStr = `<td class="required">${label}：</td>`
createStr += searchStr = `<td><Select v-model="form.${name}">
<Option>请选择</Option>
</Select></td>`
}
if (type == 3) {
createStr += searchStr = `<td class="required">${label}：</td>`
createStr += searchStr = `<td><DatePicker v-model="form.${name}" type="datetime" placeholder></DatePicker></td>`
}
//if(i%2!=0){
createStr += "</tr>"
// }
// createStr+="</tr>"
}
searchStr = createStr.replace(/<tr>|<\/tr>/gi, "")
columns.push({
title: "操作",
slot: "handler",
})
searchObj = JSON.stringify(searchObj, null, 4)
columns = JSON.stringify(columns, null, 4)
formNames = JSON.stringify(formNames, null, 4)
var str = `
<template>
<div class="pad20">
<Modal v-model="createModel" title="新建" width="70%">
<table class="createTable">
${createStr}
</table>
<div slot="footer">
<Button type="primary" @click="createTask">确定</Button>
</div>
</Modal>
<Button type="primary" @click="goCreate">新建</Button>
<br />
<table class="search">
<tr>
${searchStr}
<td>
<Button type="primary" @click="searchTaskList(1)">查询</Button>
</td>
</tr>
</table>
<Row>
<Table size="small" border :columns="columns" :data="taskList">
<template slot-scope="{ row, index }" slot="handler">
<div>
<span class="underline" @click="goDetail(row)">详情</span>
<span class="underline" @click="goEditById(row)">编辑</span>
<span class="underline" @click="deleteById(row)">删除</span>
</div>
</template>
</Table>
<br />
<Page :total="total" :current="current" show-elevator @on-change="pageChange" />
<div></div>
</Row>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "${pageName}",
components: {},
data() {
return {
total: 0,
current: 1,
createModel: false,
search:${searchObj},
form:${searchObj},
taskList: [],
columns:${columns}
};
},
created() {
var that = this;
},
mounted() {
var that = this;
that.searchPageList(1);
},
computed: {
...mapGetters(["device"])
},
methods: {
...mapActions(["ToggleDevice"]),
createTask: function() {
var that = this;
var form = that.form;
var formNames = ${formNames};
for (var key in formNames) {
if (!form[key]) {
that.$Modal.warning({ title: formNames[key] + "不能为空" });
return;
}
}
var data = form;
that
.ajax({
method: "post",
url: that.apis.tideTaskCreate,
data: data
})
.then(function(res) {
var code = res.data.code;
var msg = res.data.msg;
var data = res.data.data;
if (code == 10000) {
setTimeout(function(){
that.$Modal.success({ title: "创建成功" });
},500)
that.createModel = false;
that.searchTaskList(1);
} else {
setTimeout(function(){
that.$Modal.warning({ title: msg });
},500)
}
});
},
//去创建
goCreate: function() {
var that = this;
this.createModel = true;
for (var key in that.form) {
that.form[key] = "";
}
},
goEditById:function(row){
var that = this;
this.createModel = true;
for (var key in that.form) {
that.form[key] = "";
}
},
goDetail:function(row){
this.$router.push({ path: '/'+pageName+'Detail/'+row.id });
},
deleteById:function(row){
var that=this;
that
.ajax({
type:'single',
method: "get",
url: that.apis,
data: row.id
})
.then(function(res) {
var code = res.data.code;
var msg = res.data.msg;
var data = res.data.data;
if (code == 10000) {
setTimeout(function(){
that.$Modal.success({ title: msg });
},500)
} else {
setTimeout(function(){
that.$Modal.warning({ title: msg });
},500)
}
});
},
pageChange: function(e) {
var that = this;
that.searchPageList(e);
},
searchPageList: function(pageNum) {
var that = this;
var params = {};
if (typeof pageNum == "object") {
params["pageNum"] = 1;
} else {
params["pageNum"] = pageNum;
}
params["pageSize"] = 10;
Object.assign(params, that.search);
that.getTaskList(params);
},
getTaskList: function(data) {
var that = this;
if (!data) {
data = {};
}
that
.ajax({
method: "get",
url: that.apis.tideTaskPageList,
data: data
})
.then(function(res) {
var code = res.data.code;
var msg = res.data.msg;
var data = res.data.data;
if (code == 10000) {
that.taskList = data.dataList;
that.taskTotal = data.total;
that.current = data.pageNum;
for (var i = 0; i < that.taskList.length; i++) {
that.taskList[i]["index"] = (+data.pageNum - 1) * 10 + (i + 1);
}
} else {
setTimeout(function(){
that.$Modal.warning({ title: msg });
},500)
}
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.createWidth {
width: 100%;
}
.ivu-layout-header {
background: white;
}
.searchInput {
width: 250px;
}
.searchCon {
position: relative;
}
.pop {
position: absolute;
left: 0;
bottom: -2px;
}
.popin {
width: 250px;
}
.seletItem {
cursor: pointer;
}
.cardCon {
padding-left: 20px;
}
.wordline {
font-size: 12px;
}
.barChart {
width: 100%;
height: 250px;
}
.formteshu table td {
padding: 3px 7px;
text-align: right;
}
.search {
width: 100%;
margin-bottom: 10px;
}
.search td {
padding: 4px 5px;
}
.underline {
text-decoration: underline;
cursor: pointer;
color: #2d8cf0;
margin-right: 10px;
}
.createTable {
width: 100%;
}
.createTable td {
padding-bottom: 20px;
}
.createTable td:first-child {
text-align: right;
}
.createTable td:nth-child(3) {
text-align: right;
}
</style>
`
if(retype==1){
fs.writeFileSync(createPath, str)
res.send("页面生成成功")
}
if(retype==2){
res.send(columns+" "+searchObj)
}
if(retype==3){
res.send(createStr+" "+formNames)
}
})
app.use(express.static(__dirname + '/dist'));
app.listen(3000);
请爱好前端技术的朋友，联系我，有问题大家一起讨论
