zoukankan      html  css  js  c++  java
  • node使用art-template生成静态页面

    art-template页面模板

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>{{title}}{{top}}</title>
        <link rel='stylesheet' type='text/css'  href="../views/main.css"></link>
    </head>
    <body>
        <button class="top-button">我要留言</button>
        //这里的语法跟vue有点类似,具体看art-template文档 https://aui.github.io/art-template/docs/
        <h2>{{header}}</h2>
        {{each files}}
        <div class="box">
            <p title={{$value.message}}>{{$value.name}}说:{{$value.message}}</p>
            <p>{{$value.date}}</p>
            <button class="delet"><a href="<%= $value.Id%>.html?Id=<%= $value.Id%>">Delete</a></button>
        </div>
        {{/each}}
    </body>
    </html>
    <script src="../views/main.js"></script>

    node操作传值给页面

    const fs = require('fs')
    const template = require("art-template"); //引用art-template模板引擎
    let listdata = [
      { Id: 6, name: '爱豆1', message: '士大夫敢死队风格', date: '2019-09-14' },
      { Id: 7, name: '米', message: '米米', date: '2019-09-16' },
      { Id: 8, name: '张宝', message: '第三方公司的', date: '2019-09-17' },
      { Id: 10, name: 'REACT', message: '大家好大家好', date: '2019-09-17' },
      { Id: 11, name: '是德国', message: '尔特瑞特为人我', date: '2019-09-18' },
      {Id: 13,name: '他也认同',message: '复合体特反感风波不断的',date: '2019-10-14' }]
       
    fs.readFile(path.join(views, "view.html"), function(err, data) {
      let htmlstr = template.render(data.toString(), {
        top: "标题-关键字",
        header: "评论日志",
        title: "list",
        files: listdata
      });
      fs.writeFile('page/ss.html',htmlstr,function(error){
        if(error){
          console.log(error)
          return false
        }
        console.log('成功')
      })
    })
  • 相关阅读:
    selenium基础--登录简单的网站
    git stash 用法总结和注意点
    爬取网易云超过十万的歌曲
    selenium自动化爬虫测试
    解决selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in P
    抓取网易云音乐的评论
    解释Crypto模块怎么就这么"皮"?No module named "Crypto"
    Windows系统下在Eclipse中集成Python
    bash 判断两个文件相等的代码
    Cassandra学习笔记
  • 原文地址:https://www.cnblogs.com/lguow/p/14016444.html
Copyright © 2011-2022 走看看