当前位置: 首页 > 后端技术 > Node.js

记得一次mpa多页申请处理

时间:2023-04-03 19:50:35 Node.js

原因是国内搜索引擎对单页应用不友好,所以一般的网站都是多页应用。当然,PHP是世界上最好的语言。一开始我也想做这个,但是我在写这篇文章的时候,我是一个前端开发人员。考虑到可维护性,其他前端不一定能看懂PHP代码,所以我还是选择nodejs。我觉得nodejs这个大名鼎鼎的express挺适合的,但是最终部署的生产环境是虚拟主机,不支持node环境。-_-||所以只能想办法生成多个静态html文件,也就是网站是静态的。基于以上考虑,最终选择使用express开发,最终生成静态页面。准备工作1、新建Project文件夹mpa,运行npminit,填写该填的内容,然后一路回车,得到package.json2。安装express,npmiexpress--save3。安装ejs,npmiejs--saveejs是一个模板引擎,因为express默认的模板引擎是jade,jade和html的语法差别很大,所以我们需要安装ejs,也算是一个混合html语言+js4.安装supervisor,npmisupervisor--save-devnodejssupervisor是一个热部署工具,直接运行express项目只会监听模板文件的修改,js文件的修改需要停止并重新启动才能生效。使用supervisor启动它会监控所有文件的修改。一旦有文件修改,立即重启,实现热部署。配置目录项目需要包含路由、国际化、模板、静态文件、布局文件,所以目录设置如下:|-langs//国际化文件夹|-zh_CN.js|-en_US.js|-layouts//layouttemplatefilesFolder|-header.html|-footer.html|-public//静态资源文件夹|-static|-css|-js|-img|-vendor|-views//内容模板文件夹|-*.html|-index.js//主启动程序|-build.js//打包成静态文件程序|-tools.js//自定义功能工具文件主启动程序写代码在index.jsconstexpress=require('express')constfs=require('fs')constpath=require('path')constapp=express()varejs=require('ejs');consttools=require('./tools')app.engine('html',ejs.__express);//配置模板引擎app.set('viewengine','html')app.use(express.static(path.join(__dirname,'public')));//配置varCONFIG={port:100,lang:'zh_CN'}varlangs=require('./langs/'+CONFIG.lang);//中间件varsetLang=(req,res,next)=>{//根据get加载对应的国际化文件参数if(req.query.lang){CONFIG.lang=req.query.langlangs=require('./langs/'+CONFIG.lang);}else{langs=require('./langs/zh_CN');}console.log(req.url+''+(newDate()))next()}app.use(setLang)fs.readdirSync(path.join(__dirname,'views')).map(file=>{//遍历views文件夹下的模板文件,根据模板文件名生成对应的路由//routeletroute=file.substring(0,file.lastIndexOf('.'))if(route==='index'){app.get('/',(req,res)=>{//处理/和index首页路由,代码差不多,这个可以优化res.render(file,{...langs[route],header:langs['header'],footer:langs['footer'],url:tools.url(langs.lang)})//传递必要的参数})}app.get('/'+route,(req,res)=>{res.render(file,{...langs[route],header:langs['header'],footer:langs['footer'],url:tools.url(langs.lang)})})console.log(file.substring(0,file.lastIndexOf('.')))})//服务启动app.listen(CONFIG.port,()=>console.log(`applisteningonport${CONFIG.port}!`))打包程序的打包步骤如下1.遍历langs文件,根据里面的国际化文件生成几个国际化文件夹分别是2.遍历views文件,根据国际化文件渲染模板,输出html文件到对应的国际化文件夹3.复制静态文件到打包目录下varejs=require('ejs');varfs=require('fs');varpath=require('path');//分析需要遍历的文件夹consttools=require('./tools')vardistType=1if(global.process.env.npm_config_argv){让npmConfig=JSON.parse(global.process.env.npm_config_argv)if(npmConfig['original'][2]&&npmConfig['original'][2]==='t2'){distType=2;}}functiondelDir(path){letfiles=[];如果(fs.existsSync(路径)){files=fs.readdirSync(路径);files.forEach((file,index)=>{letcurPath=path+"/"+file;if(fs.statSync(curPath).isDirectory()){delDir(curPath);//发送删除文件夹}else{fs.unlinkSync(curPath);//删除文件}});fs.rmdirSync(路径);}}varviewPath=path.join(__dirname,'views');varoutputPath=path.join(__dirname,'dist');delDir(outputPath);//process.exit();if(!fs.existsSync(outputPath)){fs.mkdirSync(outputPath)}constview=(filename)=>{returnpath.join(viewPath,filename+'.html');}varlangFiles=fs.readdirSync(path.join(__dirname,'langs'));if(distType===1){langFiles.forEach((file)=>{varlangPath=path.join(outputPath,file.substring(0,file.lastIndexOf('.')))如果(!fs.existsSync(langPath)){fs.mkdirSync(langPath)}})fs.readdir(viewPath,(err,files)=>{files.forEach((file)=>{letstats=fs.statSync(path.join(viewPath,file));if(stats.isFile()){langFiles.forEach((langFile)=>{varlocal=langFile.substring(0,langFile.lastIndexOf('.'))varlangs=require('./langs/'+local);让name=file.substring(0,file.lastIndexOf('.'))ejs.renderFile(view(name),{...langs[name],header:langs['header'],footer:langs['footer'],url:tools.url(langs.lang)},(err,str)=>{fs.writeFile(path.join(outputPath,local,file),str,(err)=>{如果(err){console.log(`创建${path.join(outputPath,local,file)}失败`)}else{console.log(`创建${path.join(outputPath,local,file)}成功`)}})});})}})})}elseif(distType===2){fs.readdir(viewPath,(err,files)=>{files.forEach((file)=>{letstats=fs.statSync(path.join(viewPath,file));if(stats.isFile()){langFiles.forEach((langFile)=>{varlocal=langFile.substring(0,langFile.lastIndexOf('.'))varlangs=require('./langs/'+local);letname=file.substring(0,file.lastIndexOf('.'))lettplPtah=path.join(outputPath,name)if(!fs.existsSync(tplPtah)){fs.mkdirSync(tplPtah)}lettplLangPath=path.join(tplPtah,local)if(!fs.existsSync(tplLangPath)){fs.mkdirSync(tplLangPath)}lettplLangPathFile=path.join(tplLangPath,'index.html')ejs.renderFile(视图(名称),{...语言[名称],header:langs['header'],footer:langs['footer'],url:tools.url(langs.lang)},(err,str)=>{fs.writeFile(tplLangPathFile,str,(err)=>{if(err){console.log(`创建${tplLangPathFile}失败`)}else{console.log(`创建${tplLangPathFile}成功`)}})});})}})})}constmovePath=(fromPath,toPath)=>{if(!fs.existsSync(toPath)){fs.mkdirSync(toPath)}fs.readdir(fromPath,(err,files)=>{files.forEach((file)=>{letfilePath=path.join(fromPath,file)if(fs.statSync(filePath).isDirectory()){movePath(path.join(fromPath,file),path.join(toPath,file));}else{fs.readFile(filePath,(err,str)=>{如果(错误){console.log(`无法复制${filePath}`)}else{fs.writeFile(path.join(toPath,file),str,(err)=>{if(err){console.log(`create${path.join(toPath,file)}failed`)}else{console.log(`Creating${path.join(toPath,file)}succeeded`)}})}})}})})}movePath(path.join(__dirname,'public','static'),path.join(outputPath,'static'))配置命令主要是配置package.json文件的启动命令和打包命令"scripts":{"start":"supervisorindex.js","build":"nodebuild.js"}脚手架搭建完成,可以愉快开发了^_^