一回のmpaマルチページの応用処理を覚えます.
8796 ワード
起因
国内の検索エンジンは単ページの応用に対して友好的ではないので、一般サイトのウェブサイトは多ページの応用をしています.
選択
ウェブサイトを作るのはもちろん世界最高の言語PHPです.最初もこのようにしたいですが、この文章を書く時、自分はフロントエンドの開発です.メンテナンス性を考慮して、他のフロントエンドはPHPコードが読めないと思います.だから、nodejsの方面でタイプを選んで、nodejsの有名なexpressがいいと思います.でも、最終的に配置された生産環境は仮想ホストです.node環境をサポートしていません.したがって、複数の静的htmlファイルを生成することしかできません.つまり、ウェブサイトの静的化は、上記の様々な考慮に基づいて、最終的にはexpressで開発し、最終的には静的なページを生成します.
準備
1.新規プロジェクトフォルダ
2.expressをインストールし、
4.supervisorをインストールし、
ディレクトリの設定
プロジェクトにはルート、国際化、テンプレート、静的ファイル、レイアウトファイルが必要です.カタログの設定は以下の通りです.
index.jsでコードを作成します.
包装の手順は以下の通りです.
1.
2.
3.copy静的ファイルをパッケージディレクトリに送ります.
主な構成
国内の検索エンジンは単ページの応用に対して友好的ではないので、一般サイトのウェブサイトは多ページの応用をしています.
選択
ウェブサイトを作るのはもちろん世界最高の言語PHPです.最初もこのようにしたいですが、この文章を書く時、自分はフロントエンドの開発です.メンテナンス性を考慮して、他のフロントエンドはPHPコードが読めないと思います.だから、nodejsの方面でタイプを選んで、nodejsの有名なexpressがいいと思います.でも、最終的に配置された生産環境は仮想ホストです.node環境をサポートしていません.したがって、複数の静的htmlファイルを生成することしかできません.つまり、ウェブサイトの静的化は、上記の様々な考慮に基づいて、最終的にはexpressで開発し、最終的には静的なページを生成します.
準備
1.新規プロジェクトフォルダ
mpaを作成し、npm initを実行し、記入した後、途中で車に戻り、package.jsonを得る.2.expressをインストールし、
npm i express --save3.ejsをインストールして、npm i ejs --save ejsはテンプレートエンジンです.expressのデフォルトのテンプレートエンジンはjade、jadeとhtmlの文法の違いが大きいので、ejsをインストールしたいです.ejsはhtml言語＋jsのミックスと考えられます.4.supervisorをインストールし、
npm i supervisor --save-dev nodejsのsupervisorは熱配置ツールであり、直接expressプロジェクトを実行するとテンプレートファイルの修正を監督するだけで、jsファイルの修正は再起動を停止する必要があります.supervisorを使用して、すべてのファイルの修正を傍受します.ファイル修正があると、すぐに再起動し、熱い配置を実現します.ディレクトリの設定
プロジェクトにはルート、国際化、テンプレート、静的ファイル、レイアウトファイルが必要です.カタログの設定は以下の通りです.
|-langs //
|-zh_CN.js
|-en_US.js
|-layouts //
|-header.html
|-footer.html
|-public //
|-static
|-css
|-js
|-img
|-vendor
|-views //
|-*.html
|-index.js //
|-build.js //
|-tools.js // index.jsでコードを作成します.
const express = require('express')
const fs = require('fs')
const path = require('path')
const app = express()
var ejs = require('ejs');
const tools = require('./tools')
app.engine('html', ejs.__express); //
app.set('view engine', 'html')
app.use(express.static(path.join(__dirname, 'public')));
//
var CONFIG = {
port: 100,
lang: 'zh_CN'
}
var langs = require('./langs/'+CONFIG.lang);
//
var setLang = (req, res, next) => { // get
if (req.query.lang) {
CONFIG.lang = req.query.lang
langs = require('./langs/'+CONFIG.lang);
} else {
langs = require('./langs/zh_CN');
}
console.log(req.url +' '+ (new Date()))
next()
}
app.use(setLang)
fs.readdirSync(path.join(__dirname, 'views')).map(file=>{ // views ，
//
let route = 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(`app listening on port ${CONFIG.port}!`))包装の手順は以下の通りです.
1.
langsファイルを巡回して、いくつかの国際化文書があればいくつかの国際化フォルダを作成します.2.
viewsファイルを巡回し、国際化文書に基づいてテンプレートをレンダリングし、出力するhtmlファイルは国際化フォルダに対応する.3.copy静的ファイルをパッケージディレクトリに送ります.
var ejs = require('ejs');
var fs = require('fs');
var path = require('path');//
const tools = require('./tools')
var distType = 1
if (global.process.env.npm_config_argv) {
let npmConfig = JSON.parse(global.process.env.npm_config_argv)
if (npmConfig['original'][2] && npmConfig['original'][2]==='t2') {
distType = 2;
}
}
function delDir(path){
let files = [];
if(fs.existsSync(path)){
files = fs.readdirSync(path);
files.forEach((file, index) => {
let curPath = path + "/" + file;
if(fs.statSync(curPath).isDirectory()){
delDir(curPath); //
} else {
fs.unlinkSync(curPath); //
}
});
fs.rmdirSync(path);
}
}
var viewPath = path.join( __dirname , 'views');
var outputPath = path.join(__dirname,'dist');
delDir(outputPath);
//process.exit();
if (!fs.existsSync(outputPath)) {
fs.mkdirSync(outputPath)
}
const view = (filename)=>{
return path.join(viewPath,filename + '.html');
}
var langFiles = fs.readdirSync(path.join(__dirname,'langs'));
if (distType===1) {
langFiles.forEach((file)=>{
var langPath = path.join(outputPath,file.substring(0,file.lastIndexOf('.')))
if (!fs.existsSync(langPath)) {
fs.mkdirSync(langPath)
}
})
fs.readdir(viewPath,(err,files)=>{
files.forEach((file) => {
let stats = fs.statSync(path.join(viewPath,file));
if (stats.isFile()) {
langFiles.forEach((langFile)=>{
var local = langFile.substring(0,langFile.lastIndexOf('.'))
var langs = require('./langs/'+local);
let 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)=>{
if (err) {
console.log(` ${path.join(outputPath,local,file)} `)
} else {
console.log(` ${path.join(outputPath,local,file)} `)
}
})
});
})
}
})
})
} else if (distType===2) {
fs.readdir(viewPath,(err,files)=>{
files.forEach((file) => {
let stats = fs.statSync(path.join(viewPath,file));
if (stats.isFile()) {
langFiles.forEach((langFile)=>{
var local = langFile.substring(0,langFile.lastIndexOf('.'))
var langs = require('./langs/'+local);
let name = file.substring(0,file.lastIndexOf('.'))
let tplPtah = path.join(outputPath,name)
if (!fs.existsSync(tplPtah)) {
fs.mkdirSync(tplPtah)
}
let tplLangPath = path.join(tplPtah,local)
if (!fs.existsSync(tplLangPath)) {
fs.mkdirSync(tplLangPath)
}
let tplLangPathFile = path.join(tplLangPath,'index.html')
ejs.renderFile(view(name),{...langs[name],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} `)
}
})
});
})
}
})
})
}
const movePath = (fromPath,toPath)=>{
if (!fs.existsSync(toPath)) {
fs.mkdirSync(toPath)
}
fs.readdir(fromPath,(err,files)=>{
files.forEach((file)=>{
let filePath = path.join(fromPath,file)
if (fs.statSync(filePath).isDirectory()) {
movePath(path.join(fromPath,file),path.join(toPath,file));
} else {
fs.readFile(filePath,(err,str)=>{
if (err) {
console.log(` ${filePath} `)
} else {
fs.writeFile(path.join(toPath,file),str, (err)=>{
if (err) {
console.log(` ${path.join(toPath,file)} `)
} else {
console.log(` ${path.join(toPath,file)} `)
}
})
}
})
}
})
})
}
movePath(path.join(__dirname,'public','static'),path.join(outputPath,'static'))主な構成
package.jsonファイルの起動コマンドとパッキングコマンド"scripts": {
"start": "supervisor index.js",
"build": "node build.js"
}