artTemplate

Node.js(day4)

守給你的承諾、 提交于 2020-12-23 15:13:51
一、一些小问题 1.文件操作路径和模块读取路径的问题 我们使用fs核心模块系统进行文件操作时一般这样书写路径 fs.readFile('./views/index.html');//读取views目录下的idnex.html文件 我们使用require()进行自定义模块加载时的路径一般这样写 require('js/main.js');//加载js目录下的main.js 注意区分两者的区别, ./ 的含义是相对路径,代表当前目录。 文件操作路径不可以省略,而模块读取路径可以省略 。另外如果忽略 . 写成'/',那么 / 代表的是磁盘根目录。 2.让服务器自动重启的第三方模块nodemon 每次都要更新js后都需要手动重新启动服务器,比较麻烦,我们可以使用 nodemon 第三方模块来实现服务器自启动。 安装nodemon npm insatll --save nodemon -g 使用 在命令行中使用nodemon代替node命令即可: 当执行的js被执行保存时服务器就会重新启动。 二、在express中使用art-template art-template专门为express配套了第三方模块: express-art-template ,可参考官方文档进行使用: express-art-template 安装 npm insatll --save art-template npm

node.js小案例_留言板

痞子三分冷 提交于 2020-12-23 14:06:04
一、前言 通过这个案例复习: 1、node.js中模板引擎的使用 2、node.js中的页面跳转和重定向 二、主要内容 1 、 案列演示: 2、案列源码: https://github.com/4561231/feedback 3、具体实现: 1、项目结构:项目名称feedback ,为了方便管理,将页面内请求的资源统一放到一个公共的public目录下,view中放跳转的页面 2、创建app.js 先搭建一个基本服务器,用户输入地址请求的时候默认跳到首页 var http = require( 'http' ); var fs= require( 'fs' ); var server = http.createServer(); server.on( 'request' , function (req, res){ var pathname = req.url; // 如果 请求/返回的是/index.html if (url === '/' ) { fs.readFile( './views/index.html' , function (err, data) { res.end(data); }) } }); server.listen( 3000, function (){ console.log( 'server is running' ); }) 3、

常用网站记录

泪湿孤枕 提交于 2020-12-05 10:52:00
在Linux服务器上安装Jenkins:https://www.jianshu.com/p/c517f09df025 码云:https://gitee.com python生成requirement 使用requirements.txt安装类库:https://www.cnblogs.com/zhaoyingjie/p/6645811.html 在线UTF-8编码转换工具:http://www.ecjson.com/utf8/ jQuery选择器语法:http://www.360doc.com/content/18/0515/15/55624432_754145608.shtml jQuery插件库插件搜索:https://www.jq22.com/search?seo=多选下拉框 jQuery之家:http://www.htmleaf.co jQuery的父子兄弟节点查找,节点的子节点循环:https://www.cnblogs.com/mingforyou/p/4410054.html 测试用LinuxIP阻隔模拟断网方法:https://blog.csdn.net/xiaoguanyusb/article/details/81112523 Highcharts 图标插件:https://www.highcharts.com/demo Bootstrap弹出输入框:https:

lodop+art-template实现web端漂亮的小票样式打印

北慕城南 提交于 2020-11-30 02:29:15
一. 现状 由于之前采用Lodop打印控件(商业版付费,可以使用免费版 但是会有水印)去打印小票,是一行一行的打印,但是不满足UI给到复杂布局的小票样式,所以得重新考虑如何来实现。 二. 介绍 art-template介绍 art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。 在线速度测试 。 中文文档: art-template中文文档 跟着文档首先熟悉一下,然后看一下语法,跟着语法去实践一下,很快就可以上手完成功能。 Lodop打印控件介绍 Lodop是支持浏览器端的web打印控件, 功能挺强大的。 官网地址: http://www.lodop.net/ 目前客户端有很多是基于浏览器内核套的壳,那么在需要特殊打印的场景下,可以试下这个控件。 三. 方案选择 方案一:用html+css进行网页布局,html2canvas.js 来实现将网页转换成图片,然后直接用Lodop打印图片, 但是经过测试,打印出来的图片模糊不清,而且html2canvas.js的兼容性IE>8,所以不符合 方案二:将这部分功能让后端去完成模板+数据渲染并生成图片去打印,但是发现跟方案一有相似的地方,解决不了图片打印模糊不清,但是可以解决兼容性问题,依然不符合 方案三

ajax配合art-template模板引擎的使用

风格不统一 提交于 2020-07-28 03:57:57
最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错。今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的JsonResult,将数据存放在data中,前台通过ajax配合模板引擎进行一个调用然后以表格的形式显示数据。 前台html代码: <a href="#" onclick="GetData()">获取数据</a> <table class="table"> <tr> <td>姓名</td> <td>年龄</td> <td>说明</td> </tr> <tbody id="tb"> </tbody> </table> js代码:当然首先你得先导入art-template.js 下载地址: http://aui.github.io/art-template/ 重点来说说这里: 首先第一步:加载art-template.js的文件 第二步:定义模板引擎并在里面进行数据的加载吧(个人理解),在网上也找了一下资料,说script type的值不能是text/script,不然会造成无法解析。也就是说除开text/script应该都可以,这里我用的是text/template(原谅我不去度娘)。 第三步:就是处理请求回来的数据怎么显示了

node.js(node.js+mongoose小案例)_实现简单的注册登录退出

纵然是瞬间 提交于 2020-04-28 03:20:27
一、前言 通过node.js基本知识对node.js基本知识的一个简单应用 1、注册 2、登录 3、退出 二、基本内容 1、项目结构搭建如图所示 2、这个小案列中用到了art-template子模板以及模板的继承 可以参考官网:art-template.org 发现很多网站的页面的头部和尾部都是一样的,所以我们可以将头部和尾部提取出来,用art-template子模板,弄到一个单独页面中,其他页面继承这个页面 <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>{{block 'title' }}默认标题{{ / block}}< / title> <link rel= "stylesheet" href= "/node_modules/bootstrap/dist/css/bootstrap.css" > {{block 'head' }}{{ / block}} < / head> <body> {{include '../_partials/header.html' }} <!--用子模板引入头部--> {{block 'body' }}{{ / block}} {{include '../_partials/footer.html' }} <!--用子模板引入尾部-->

前端开发常用网站

牧云@^-^@ 提交于 2020-04-07 13:40:13
一、基础学习类网站 MDN开发者文档:https://developer.mozilla.org/zh-CN/ 菜鸟教程:https://www.runoob.com/ W3CSchool:http://www.w3school.com.cn/ JavaScript教程网:https://zh.javascript.info/ 谷歌开发者工具教程:https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn&authuser=2 Linux整体学习:https://man.linuxde.net/rm 渐进式web应用程序核对表:https://developers.google.cn/web/progressive-web-apps/checklist 开发者中心: https://dev.dcloud.net.cn/ CSS参考笔记:http://css.doyoe.com/ Bootstrap官网:https://www.bootcss.com/ CSS优质内容网站:https://css-tricks.com/ CSS 优质内容网站:https://css-weekly.com/ HTML 优质内容网站:https://www.html5rocks.com/en/ JS 优质内容:http://www

artTemplate 原生 js 模板语法版

拜拜、爱过 提交于 2020-01-22 03:45:55
在页面中引用模板引擎: <script src="dist/template-native.js"></script> 下载 表达式 <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。 输出表达式 对内容编码输出: <%=content%> 不编码输出: <%=#content%> 编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。 逻辑 支持使用 js 原生语法 <h1><%=title%></h1> <ul> <%for(i = 0; i < list.length; i ++) {%> <li>条目内容 <%=i + 1%> :<%=list[i]%></li> <%}%> </ul> 模板不能访问全局对象,公用的方法请参见文档 辅助方法 章节 模板包含表达式 用于嵌入子模板。 <% include('template_name') %> 子模板默认共享当前数据,亦可以指定数据: <% include('template_name', news_list) %> 辅助方法 使用 template.helper(name, callback) 注册公用辅助方法,例如一个基本的 UBB 替换方法: template.helper('$ubb2html', function (content) { // 处理字符串... return content; });

artTemplate 简介语法模板

a 夏天 提交于 2020-01-22 03:44:09
1.编辑模板,template(id, data) 根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。 如果没有 data 参数,那么将返回一渲染函数。data参数的类型是object。 有 data 那么就返回 Html。 var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; <script id="test" type="text/html"> <h1>{{title}}</h1>//直接使用data里的属性title <ul> {{each list as value i}}//直接可遍历data里面的list属性,list是一个数组 <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </script> //渲染数据 var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template(

Node学习笔记 函数自调用和crud增删改查

坚强是说给别人听的谎言 提交于 2019-12-12 16:52:53
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 函数自调用 一般情况下,把函数作为参数的目的是为了获取函数内部的异步操作结果 下方代码是一个 同步示例 function add (x + y) { // 函数方法 return x + y } add(10, 20) // 调用函数 下方代码是一个 异步函数 console.log('setTimeout external before') setTimeout(function () { console.log('setTimeout inside before') console.log('setTimeout inside after') }, 0) console.log('setTimeout external after') 由于 setTimeout 是异步函数,所以在运行时浏览器不会等待(哪怕是执行时间为 0 )函数执行,所以最终输出结果为 setTimeout external before setTimeout external after setTimeout inside before setTimeout inside after 之所于得出以上结果,是由于 javascript 是单线程的 获取异步函数内部的操作结果 function add (x, y) { setTimeout