[TOC] # 最后的項目 ### 新建文件夾 ~~~ (c) 2015 Microsoft Corporation。保留所有權利。 C:\Users\zxyslt>d: D:\>mkdir demo D:\>cd demo D:\demo>express -h Usage: express [options] [dir] Options: -h, --help output usage information -V, --version output the version number -e, --ejs add ejs engine support (defaults to jade) --hbs add handlebars engine support -H, --hogan add hogan.js engine support -c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css) --git add .gitignore -f, --force force on non-empty directory ~~~ #### 提示 最新express4.0版本中將命令工具分家出來了(項目地址:https://github.com/expressjs/generator), 所以我們還需要安裝一個命令工具,命令如下: `npm install -g express-generator` ### 創建項目 ~~~ D:\demo>express -e demo create : demo create : demo/package.json create : demo/app.js create : demo/public/stylesheets create : demo/public/stylesheets/style.css create : demo/public create : demo/views create : demo/views/index.ejs create : demo/views/error.ejs create : demo/routes create : demo/routes/index.js create : demo/routes/users.js create : demo/bin create : demo/bin/www install dependencies: > cd demo && npm install run the app: > SET DEBUG=demo:* & npm start create : demo/public/javascripts create : demo/public/images D:\demo> ~~~ ~~~ D:\demo>cd demo && npm install [ ..............] / fetchMetadata: sill mapToRegistry uri https://registry.npmjs.org/raw-body ~~~ ### 運行 ~~~ D:\demo\demo>set debug=demo:* & npm start > demo@0.0.0 start D:\demo\demo > node ./bin/www demo:server Listening on port 3000 +0ms ~~~ 截圖  ### 用喜歡的編輯器打開文件夾  打開之后  主要在 views 和 routes 下面寫代碼 ### public 和 views 下面替換成我們自己的界面  ### router 關鍵代碼 view 關鍵代碼和 jquer哪里的基本一樣只是請求的路徑不同和一點小坑 ~~~ var express = require('express'); var router = express.Router(); //使用 path.join 時 需要引入 path module var path = require('path'); //使用 mysql 數據庫 需要引入的 mysql module var mysql = require('mysql'); // 數據庫連接信息 var dbinfo = { //主機地址 host: '127.0.0.1', //用戶名 user: 'root', //密碼 password: 'root', //端口 port: '3306', //具體的數據庫 database: 'xj2014' }; //-------------------------------------------------------------------------- 頁面處理 begin //返回主頁面 router.get('/', function(req, res, next) { //讀取靜態文件返回 // path.join()鏈接路徑 // __dirname 內置變量 指 當前文件路徑 //'../views/index.html' 相對路徑 res.sendFile(path.join(__dirname, '../views/index.html')); //直接讀取文件 // res.sendFile('/views/add.html'); //另外的 拼接方式 // res.sendFile('index.html', { root: path.join(__dirname, '../views') }); //直接渲染模板 文件(index.ejs) 傳遞數據 tetle // res.render('index', { title: 'Express' }); }); //返回主頁面 router.get('/index', function(req, res, next) { //讀取靜態文件返回 res.sendFile(path.join(__dirname, '../views/index.html')); }); //返回列表頁面 router.get('/info', function(req, res, next) { //讀取靜態文件返回 res.sendFile(path.join(__dirname, '../views/info.html')); }); //返回添加頁面 router.get('/add', function(req, res, next) { //讀取靜態文件返回 res.sendFile(path.join(__dirname, '../views/add.html')); }); //返回修改頁面 router.get('/edit', function(req, res, next) { //讀取靜態文件返回 res.sendFile(path.join(__dirname, '../views/edit.html')); }); //------------------------------------------------------------------------頁面處理 end //數據處理 //首頁數據 //all ->主要包括 get && post 方便調試 實際項目中需要做限制 router.all('/info/getpage', function(req, res, next) { //添加響應頭的 "Access-Control-Allow-Origin", "*" //允許跨域訪問 * 代表所有 res.header("Access-Control-Allow-Origin", "*"); //準備變量 var resData = {}; //關鍵字 var key; //頁索引 var pi; //每一頁的大小 var ps; //獲取參數--POST 全部大寫 if (req.method == 'POST') { key = req.body.key || ''; //如果轉換成 10進制數失敗則 置為 1 if (isNaN(parseInt(req.body.pi, 10))) { pi = 1; } else { pi = parseInt(req.body.pi, 10); } //如果轉換成 10進制數失敗則 置為 1 if (isNaN(parseInt(req.body.ps, 10))) { ps = 1; } else { ps = parseInt(req.body.ps, 10); } } else { //獲取參數--get key = req.query.key || ''; //如果轉換成 10進制數失敗則置為 1 if (isNaN(parseInt(req.query.pi, 10))) { pi = 1; } else { pi = parseInt(req.query.pi, 10); } //如果轉換成 10進制數失敗則置為 1 if (isNaN(parseInt(req.query.ps, 10))) { ps = 1; } else { ps = parseInt(req.query.ps, 10); } } //創建數據庫連接 var connect = mysql.createConnection(dbinfo); //打開數據庫連接 connect.connect(); //執行數據庫語句 //callback 根據前面的 sql 的不同 會有不同的參數 //connect.query(sql,param,callback) //查詢數據 connect.query('select * from userinfo where name like concat("%",?,"%") limit ?,? ', [key, ps * (pi - 1), ps], function(err, data, fidlds) { if (!err) { //保存數據 resData.data = data; //查詢數據總條數 用來計算分頁 connect.query('select count(*) as counts from userinfo where name like concat("%",?,"%")', [key], function(err1, data1, fidlds1) { if (!err1) { //保存數據總條數 resData.count = data1[0].counts; //關閉數據庫連接 connect.end(); //返回數據給瀏覽器 json res.send({ status: 1, message: resData }); } else { //返回數據給瀏覽器 json res.send({ status: 0, message: err1 }); } }); } else { //返回數據給瀏覽器 json res.send({ status: 0, message: err }); } }); }); //刪除數據 router.post('/info/delinfo', function(req, res, next) { var id; //如果轉換成 10進制數失敗則返回錯誤信息 if (isNaN(parseInt(req.body.id, 10))) { res.send({ status: 0, message: '非法的操作' }); } else { id = parseInt(req.body.id, 10); } //創建數據庫連接 var connect = mysql.createConnection(dbinfo); //打開數據庫連接 connect.connect(); //執行數據庫語句 connect.query('delete from userinfo where id=?', [id], function(err, data, fidlds) { //關閉數據庫連接 connect.end(); //執行沒有出錯 并且 只操作了一條數據--------合理的話應該涉及到 事務回滾 //返回相應的 json格式數據 if (!err && data.affectedRows == 1) { res.send({ status: 1, message: data }); } else { res.send({ status: 0, message: err }); } }); }); //獲取單條數據 router.all('/info/oneinfo', function(req, res, next) { //定義變量 var id; //獲取參數--POST 全部大寫 if (req.method == "POST") { //如果轉換成 10進制數失敗則 置為 0 if (isNaN(parseInt(req.body.id, 10))) { id = 0; } else { id = parseInt(req.body.id, 10); } } else { //get //如果轉換成 10進制數失敗則 置為 0 if (isNaN(parseInt(req.query.id, 10))) { id = 0; } else { id = parseInt(req.query.id, 10); } } //id == 0 則表示出錯了 if (id != 0) { //創建數據庫連接 var connect = mysql.createConnection(dbinfo); //打開數據庫連接 connect.connect(); //執行數據庫語句 connect.query('select * from userinfo where id=?', [id], function(err, data, fidlds) { connect.end(); if (!err && data.length == 1) { //數據返回一個數字 我們查詢的結果只是 第一條數據 res.send({ status: 1, message: data[0] }); } else { res.send({ status: 0, message: "未查詢到相應數據" }); } }); } else { //參數錯誤則返回提示 res.send({ status: 0, message: "參數id錯誤" }); } }); //修改數據 router.post('/edit/updinfo', function(req, res, next) { //post //如果轉換成 10進制數失敗則 返回錯誤信息 if (!isNaN(parseInt(req.body.id, 10))) { var id = parseInt(req.body.id, 10); if (req.body.num && req.body.classs && req.body.name && req.body.sex && req.body.nation && req.body.address) { //創建數據庫連接 var connect = mysql.createConnection(dbinfo); //打開數據庫連接 connect.connect(); //執行數據庫語句 connect.query('update userinfo set num=?,classs=?,name=?,sex=?,nation=?,address=? where id=?', [req.body.num, req.body.classs, req.body.name, req.body.sex, req.body.nation, req.body.address, req.body.id], function(err, data, fidlds) { //關閉連接 connect.end(); //沒有錯誤 并且 影響行數為1--------合理的話應該涉及到 事務回滾 if (!err && data.affectedRows == 1) { res.send({ status: 1, message: data }); } else { res.send({ status: 0, message: err }); } }); } else { res.send({ status: 0, message: "參數錯誤" }); } } else { res.send({ status: 0, message: "參數錯誤" }); } }); //添加數據 router.post('/add', function(req, res, next) { //判斷修改字段是否存在 if (req.body.num && req.body.classs && req.body.name && req.body.sex && req.body.nation && req.body.address) { //創建數據庫連接 var connect = mysql.createConnection(dbinfo); //打開數據庫連接 connect.connect(); //執行數據庫語句 connect.query('insert into userinfo (num,classs,name,sex,nation,address ) values (?,?,?,?,?,?)', [req.body.num, req.body.classs, req.body.name, req.body.sex, req.body.nation, req.body.address], function(err, data, fidlds) { //關閉連接 connect.end(); //沒有錯誤 并且 影響行數為1--------合理的話應該涉及到 事務回滾 if (!err && data.affectedRows == 1) { res.send({ status: 1, message: data }); } else { res.send({ status: 0, message: err }); } }); } else { //不都存在 res.send({ status: 0, message: "參數錯誤" }); } }); module.exports = router; ~~~ ### 源代碼 包括數據庫文件 [源代碼](http://pan.baidu.com/s/1jIz3CvO) [數據庫](http://pan.baidu.com/s/1nv6kscT) ## lx Email:zxysilent@foxmail.om Tel:18284151024 QQ:76387097