前端html⾃动⽣成，前端⼯程化-⾃动⽣成页⾯
前⾔
我们的项⽬是基于vue-cli搭建的，每次需要新加⼀个页⾯需要操作以下步骤：
在views⽂件夹下⾯新建⼀个⽂件夹，⽤来存放新页⾯的.vue⽂件。
需要在routes.js⽂件⾥⾯新添加⼀个路由。
按照上述操作以后，才可以正常访问新添加的页⾯，之后才开始对新页⾯进⾏正常开发。但是这样的机械化步骤我们完全可以⽤代码帮我们执⾏，更进⼀步，对于⼀些简单的页⾯，我们甚⾄可以⼀键⽣成页⾯，包括从后端请求数据等操作。
⾃动⽣成页⾯
我们可以按照模板的⽅式⽣成想要的页⾯，我这⾥说两种页⾯，
⼀种是什么都没有的空⽩页，⽣成空⽩页就相当于是初始化⼀个新页⾯然后接着开发。
另⼀种是⽣成⼀些⽐较固定布局的简单页⾯，⽐如我们的业务中经常会有需求是写⼀个页⾯，就⼀个表
格展⽰⼀下后端返回的数据，顶多就是再加个删除，添加和编辑。像这种简单的页⾯，完全可以使⽤代码⾃动⽣成。
我这⾥主要是使⽤配置⽂件的⽅式来设置我们的模板。
⽣成表格页
为了操作⽅便，我们可以在项⽬根⽬录新建⼀个auto-build-page⽂件夹⽤来存放我们之后要写的所有代码和模板。
编辑配置⽂件
我们在auto-build-page⽂件夹下新建⼀个addConfig.js⽂件，⾥⾯存放我们定义的配置：
var addConfig = [
{
// 测试⽣成表格页
open: true, // 参与⽣成 false表⽰改配置不参与⽣成页⾯
helloworld: false, // 是否是空⽩页
desc: '⾃动⽣成表格页', // 页⾯描述
name: 'autoTablepage', // 页⾯名称
getlist: {
// 表格数据请求相关
method: 'GET',
url: 'q/getlist',
},
},
{
// 测试⽣成空⽩页
open: true,
helloworld: true,
desc: '⾃动⽣成空⽩页⾯',
name: 'autoHellopage',
},
]
复制代码
配置的含义在注释中已经详细说明了
按照配置⽂件⽣成页⾯.vue⽂件
我们在auto-build-page⽂件夹下新建⼀个template-table.vue⽂件，存放我们的表格页模版，我们使⽤的是element-ui组件：%title%
{{lumn.property]}}
const CONFIG={
method:"%method%",
geturl:"%geturl%",
};
export default {
data() {
return {
tableData: [],
tableDataHeader: [],
};
},
methods: {
formatOther(row) {
return JSON.stringify(row, null, 2);
},
getList(params={}) {
axios({
method: hod,
url: url,
data: params
}).then(res=>{ // 后端返回的数据需要按照这种格式
console.log(res);
this.tableData=res.data.tableData;
this.tableDataHeader=res.data.tableDataHeader;
});
}
},
mounted(){
}
};
复制代码
可以看见表格页模板⾥⾯有很多两个%包起来的变量，这是等下我们需要按照配置⽂件进⾏替换的变量。我们继续在auto-build-page⽂件夹下新建⼀个build-page.js⽂件，⾥⾯写的是整个⾃动化操作的代码var addConfig = require('./addConfig')
var fs = require('fs')
var path = require('path')
var shell = require('shelljs')
addConfig.forEach((ele) => {
if (ele.open) {
buildPage(ele)
}
})
复制代码
我们循环配置⽂件⾥⾯的配置，⽀持⽣成多个页⾯。对⽂件的操作我们直接使⽤node的fs模块完成。
读取模板⽂件，并根据配置⽂件，对模板⽂件⾥⾯的变量进⾏替换：
function buildPage(config){
var paths = solve(`./src/views/${config.name}`)
mkdirSync(paths, function(){
var str = ''
if (config.helloworld) {
// 新建空⽩页，读取空⽩页模版
str = handleStr(
solve('./template-helloworld.vue')),
config
)
} else {
str = handleStr(
solve('./template-table.vue')),
config
)
}
// 写⼊⽂件
writeF(paths + '/index.vue', str)
html自动弹出公告代码
addRou(`./views/${config.name}/index.vue`, config)
})
}
复制代码
根据配置⽂件替换%包起来的变量：
function handleStr(str, config){
if (config.helloworld) {
return str
}
str = place('%title%', config.desc)
str = place('%method%', hod)
str = place('%geturl%', list.url)
return str
}
复制代码
添加路由
接下来是添加路由，在此之前我们还是需要添加⼀个路由的模板⽂件，在auto-build-page⽂件夹下新建⼀个⽂件：{
path: '%path%',
component: Home,
name: '%name%',
redirect: { path: '%repath%' },
children: [
{
path: '%repath%',
component: (resolve) =>
require(['%requirepath%'], resolve),
name: '%name2%'
}
]
},
复制代码
⾥⾯根据我们路由规则，写⼊模板。
回到build-page.js⽂件，我们继续书写添加路由的操作，我们先读取路由模板：function addRou(paths, config){
var templateStr = handleRouStr(
solve('./')),
config,
paths
)
// 添加到路由⽂件
addToConf(templateStr)
}
function handleRouStr(str, config, paths){
str = place(/%path%/g, `/${config.name}`)
str = place(/%name%/g, config.desc)
str = place(/%name2%/g, `${config.desc}⾸页`)
str = place(/%repath%/g, `/${config.name}/index`)
str = place(/%requirepath%/g, paths)
return str
}
复制代码
将路由添加到vue项⽬src下的routes.js⽂件⾥⾯：
function addToConf(str){
str += '// add-flag' // 添加的位置标记
var confStr = handleConfRouStr(solve('./src/addRoute.js')), str)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。