Express的模板选择

 ✒️ @halomaster 📅 30 Jul 2022, 11:21 GMT⋮ 【前端开发】 

pug虽然设计的很好,但是不是原生HTML,后面的维护成本极大。 [art-template](https://github.com/aui/art-template) 要好很多了,推荐!


[1] @halomaster • 30 Jul 2022, 11:57 GMT 
node ./node_modules/express-generator/bin/express-cli.js --view=art-template


[2] @halomaster • 30 Jul 2022, 12:50 GMT 
express.js目前默认的模板引擎还是pug,所以需要 ``` bash yarn add express yarn add express-generator yarn add art-template yarn add express-art-template yarn start node ./node_modules/express-generator/bin/express-cli.js --view=art-template ```


[3] @halomaster • 30 Jul 2022, 12:53 GMT 
在views里新建index.html ``` 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"> <title>Document</title> </head> <body> {{ foo }} <ul> {{ each todos }} <li> {{ $value.title }} </li> {{ /each }} </ul> </body> </html> ```


[4] @halomaster • 30 Jul 2022, 12:56 GMT 
<!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"> <title>Document</title> </head> <body> {{ foo }} <ul> {{ each todos }} <li> {{ $value.title }} </li> {{ /each }} </ul> </body> </html>


[5] @halomaster • 30 Jul 2022, 12:57 GMT 
``` js var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); var app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.engine('.html',require('express-art-template')) app.set('view options', { debug: process.env.NODE_ENV !== 'production' }) app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'html') app.use('/', indexRouter); app.use('/users', usersRouter); module.exports = app; ```


[6] @halomaster • 30 Jul 2022, 13:00 GMT 
``` js var express = require('express'); var router = express.Router(); const todos = [ { id: -1, title: '吃饭' }, { id: 0, title: '睡觉' }, { id: 1, title: '健身' }, { id: 2, title: '学习' }, { id: 3, title: '读书' } ] /* GET home page. */ //router.get('/', function(req, res, next) { // res.render('index', { title: 'Express' }); //}); router.get('/', (req, res) => { res.render('index', { todos, foo: '我是foo' }) }) module.exports = router; ```


[7] @halomaster • 30 Jul 2022, 14:17 GMT 
nodemon很不错 ``` javascript "scripts": { "start": "node ./bin/www", "dev": "nodemon --exec node ./bin/www" }, ```


[8] @halomaster • 30 Jul 2022, 14:19 GMT 
成功完成 art模板和amis的集成。


[9] @halomaster • 30 Jul 2022, 19:37 GMT 
https://aui.github.io/art-template/express/


[10] @halomaster • 08 Aug 2022, 00:48 GMT 
https://zhuanlan.zhihu.com/p/25177324 pug教程


1 of 1 pages  10 replies