作者： admin

nodejs基于express框架安装handlebars模版

nodejs的html模板有很多这里我使用handlebars。

1，安装：npm install express-handlebars

2，修改app.js，添加以下代码

var handlebars=require('express-handlebars')
.create({defaultLayout:'main'});
app.engine('handlebars',handlebars.engine);
app.set('view engine','handlebars');

3，创建公用模板views\layouts

//main.handlebars

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <title>
   {{titles}}
 </title>
</head>

<body>
{{{body}}}
</body>
</html>

4，在views\目录下直接创建后缀名为handlebars的文件

//index.handlebars

随便输入点什么  //这里的内容将会被 {{{body}}}调用

5，修改路由即可正常访问

2015 12.02

nodejs登录案例

nodejs连接mysql登录验证例子

HTML：

<form method="post" action="/logininfo">
 <p>用户名：<input type="text" name="username"></p>
 <p>密码：<input type="text" name="pass"></p>
 <p><button id="login_bt">登录</button>&nbsp;&nbsp;&nbsp;<button>注册</button></p>
</form>

//logininfo
<table border="1">
 <tr>
 <td>你的帐号</td> <td>{{user}}</td> 
 </tr>
 
 <tr>
 <td>你的密码</td> <td>{{pass}}</td> 
 </tr>
</table>
<a href="/">返回</a>

路由：

router.post('/logininfo',function(req,res){ //请求 响应
     data.query("SELECT liuyan_username,liuyan_userpass FROM nodejs_user WHERE liuyan_username='"+req.body.username+"' AND liuyan_userpass='"+req.body.pass+"' LIMIT 0,1",function(err, rows, fields){ 


 if( typeof rows[0]=='undefined' ){  //输入的帐号密码匹配不到rows[0]=='undefined'
    res.render('logininfo',{
       titles:'登录信息',
       user:'2',
       pass:'2'
    });
 }else{
 if(req.body.username==rows[0].liuyan_username && req.body.pass==rows[0].liuyan_userpass){
    res.render('logininfo',{
      titles:'登录信息',
      user:rows[0].liuyan_username,
      pass:rows[0].liuyan_userpass
    }); 
  }
  } 
 });
});

下载文件：index

2015 12.02

nodejs上传案例

之前写过一个上传的案例有点乱现在重新总结下，只管能完成功能，至于安全性没考虑。

上传需要的模块：

var formidable = require('formidable');  //上传模块
var fs=require('fs');  //文件处理模块
var path=require('path');

路由：

/* GET home page. */
router.get('/', function(req, res, next) {
   res.render('index', { 
     title: '登录'
   });
});

router.post('/', function(req, res, next) { //上传文件以post上传
 
  var form = new formidable.IncomingForm(); //创建上传表单
      form.encoding = 'utf-8'; //设置编辑
      form.uploadDir = './public/images/'; //设置上传目录
      form.keepExtensions = true; //保留后缀
      form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
 
 
   form.parse(req, function(err, fields, files) {
     fs.renameSync(files.fulAvatar.path, 'public/images/1.jpg'); //重命名
   });
 
   res.render('index', {  
      title: '登录'
   });

});

HTML：

 <form method="post" action="/" enctype="multipart/form-data"> 上传文件必加
    <input id="fulAvatar" name="fulAvatar" type="file" class="form-control" />
 </form>

也可以参考下：https://sdeno.com/?p=4480

2015 12.02

css3字体渐变
css3 字体颜色简单

遇到一些白痴客户总能提出一些奇怪的想法字体需要土豪金颜色渐变幸好Chrome或是Safari能实现这样的效果。

background-clip + text-fill-color下的实现

如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面的效果：
```
<h2 class="text-gradient">天赐美妞</h2>
```
```
.text-gradient {
 display: inline-block;
 color: green;
 font-size: 10em; 
 font-family: ´微软雅黑´;
 background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
};
```
结语
由于目前text-fill-color属性貌似就webkit核心的浏览器支持，所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色，IE下就更不用说了。

但是，文字渐变本身就是装饰性的功能，所以，本着渐进增强的原则，我们在实际项目中其实是可以大胆使用的。在不影响原来功能基础上，几行CSS代码，让占有率愈来愈高的Chrome浏览器下有更好的视觉体验效果，何乐而不为呢？
2015 11.26
svg波浪效果

svg波浪波纹水纹效果

wave

2015 11.26

作者： admin

nodejs基于express框架安装handlebars模版

nodejs登录案例

nodejs上传案例

css3字体渐变

svg波浪效果