1.开发工具WebStorm 10.0.4
2.打开WebStorm 10.0.4新建项目:
ejs的特性:
1、缓存功能,能够缓存已经解析好的html模版;
2、<% code %>用于执行其中javascript代码;
3、<%= code %>会对code进行html转义;
4、<%- code %>将不会进行转义;
5、支持自定义标签,比如'<%'可以使用'{{','%>'用'}}'代替;
6、提供一些辅助函数,用于模版中使用
7、利用<%- include filename %>加载其他页面模版;
可以根据个人喜好选择相应的模板
3.在app.js中:将圈起来的代码注释掉,写上箭头下的代码
artTemplate不仅可以作为前端引擎,还可以作为后端引擎使用。
artTemplate是出色的javascript引擎,搭配出色的javascript运行时环境node.js一起使用,将会非常顺畅。
4.在Terminal下
完成这个后你的node_modules文件夹下会相应多出一个 art-template 文件夹,
5.配置你的dbHelper
6.和4 一样 npm install mssql
7.
8.users.js代码
var express = require('express'); var router = express.Router(); var dbHelper = require('../modules/utils/dbHelper.js'); /* GET home page. */ //查询所有用户信息 router.get('/', function(req, res, next) { dbHelper.selectAll('dbo.users',function(err,result){ if(!err){ res.render('users',{datas:result}); } }); }); //执行删除 router.get('/delete/:id',function(req, res, next){ var id=req.param("id"); dbHelper.del("where id = @id",{id:id},"dbo.users",function(err,recordset){ if(!err){ //res.render('users',{datas:recordset}); res.redirect('/users'); } else{ res.end(); } }); }); //根据id拿信息 router.get('/toupdate/:id',function(req, res, next){ var id=req.param("id"); dbHelper.select("dbo.users",1,"where id=@id",{id:id},"order by id",function(err,recordset){ if(!err){ res.render('update',{datas:recordset}); } else{ res.end(); } }); }); //执行修改 router.get('/update/:id/:name',function(req, res, next){ var id=req.param("id"); var name=req.param("name"); dbHelper.update({name:name},{id:id},"dbo.users",function(err,recordset){ if(!err){ res.redirect('/users'); } else{ res.end(); } }); }); //跳转到添加用户信息界面 router.get('/toaddurl',function(req,res,next){ res.render('add'); }); //执行添加 router.get('/add/:name',function(req, res, next){ var name=req.param("name"); dbHelper.add({name:name},"dbo.users",function(err,recordset){ if(!err){ res.redirect('/users'); } else{ res.end(); } }); }); module.exports = router;
9.users.html代码
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>用户信息主页面</title> </head> <body> <table> <tr> <th>编号</th> <th>姓名</th> <th>操作</th> <th><a href="/users/toaddurl">添加用户</a></th> </tr> {{each datas as value }} <tr> <td>{{value.id}}</td> <td>{{value.name}}</td> <td><a href="/users/delete/{{value.id}}">删除</a></td> <td><a href="/users/toupdate/{{value.id}}">修改</a></td> </tr> {{/each}} </table> </body> </html>
10.update.html代码
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>修改用户信息页面</title> <script type="text/javascript"> function update(){ var id = document.getElementById("id").value; var name = document.getElementById("name").value; window.location.href = "/users/update/" + id + "/" + name; } </script> </head> <body> <table> <form method="post"> {{each datas as val index}} <tr> <td><input type="hidden" value="{{val.id}}" id="id" /></td> </tr> <tr> <td>姓名:</td> <td><input type="text" id="name" value="{{val.name}}"></td> </tr> <tr> <td><input type="button" value="修改" onclick="javascript:update()"></td> </tr> {{/each}} </form> </table> </body> </html>
11.add.html代码
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function update(){ var name = document.getElementById("name").value; window.location.href = "/users/add/"+ name; } </script> </head> <body> 用户名称: <input type="text" id="name"> <input type="button" value="添加" onclick="javascript:update()"> </body> </html>
12.最终页面