Nodejs-畢業設計4-登入頁面

標籤：方法   module   sql   不一致   軟體   pos   cli   伺服器端   登陸   

1.我們在首頁先實現一個簡單的登入頁面

靜態檔案包括樣式，指令碼，圖片放在

2.先看看成果（自己可以加樣式，檢驗是否為空白的指令碼）

 

 3.要與後台進行互動了，登入的思路：把使用者名稱和密碼提交，在資料庫的使用者表查詢使用者名稱為***的密碼，如果沒有則說明使用者名稱不存在，如果密碼和輸入不一致則密碼錯誤，如果密碼一致則登入成功跳轉至首頁。

4.在index.js的頭部加入

var mysql = require(‘mysql‘);
var usr=require(‘dao/Connect‘);
var moment = require(‘moment‘);
var bodyParser = require(‘body-parser‘);
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

紅色圈著的就是訪問mysql資料庫的關鍵，根據路徑，我們在項目下的node_modules檔案夾下建立dao檔案夾，再在dao裡建立Connect.js

5.在Connect.js裡寫上資料庫的配置，使用者名稱密碼和資料表，記得最後要exports匯出方法。

 

6.開啟mysql軟體，在開始輸入搜尋cmd並以管理員身份開啟cmd，開啟後輸入net start mysql啟動資料庫

7.在mysql裡建立串連

 

8.在smartCampus右鍵建立資料庫，名為smartcampus，建立一個admin表

 

先填一個資料

這樣資料庫就可以了。接下來我們來做互動

9.先寫好路徑，get是擷取這個頁面，如果我們要在頁面上提交資料，則要用post，登入就是要把使用者名稱密碼提交。

index.js使用router.post(‘/‘,function(req,res){});如下

router.post(‘/‘,function(req,res){
client=usr.connect();
var admin_id = req.body.admin_id;
var admin_psd = req.body.admin_psd;
usr.loginFun(client,admin_id, function (results) {
if(results==‘‘){
res.locals.error = ‘使用者不存在‘;
res.render(‘index‘, { title: ‘smartCampus‘ });
return;
}else{
if(results[0].admin_psd==admin_psd){
res.locals.islogin=admin_id;//記錄登入使用者名稱
res.cookie(‘islogin‘,res.locals.islogin,{maxAge:60000});
res.redirect(‘success‘);
return;
}else{
res.locals.error = ‘密碼錯誤‘;
res.render(‘index‘, { title: ‘smartCampus‘ });
return;
}
}
});
});

 10.在Connect.js寫登入方法並匯出

 11.成功跳轉頁面，在index.js

router.get(‘/success‘, function(req, res, next) {
res.send(‘成功登陸‘);
});

12.為了更好使用者體驗，當使用者名稱不存在或密碼不正確時，我們在頁面上提示。在index.ejs的form表單下面寫上

<% if (locals.error) { %>
<p><%= error %></p><br>
<% } %>

我們在伺服器端設定了res.locals.error = ‘密碼錯誤‘;，所以渲染到頁面時，就會判斷有沒有error這個值，有的話就顯示

13.現在我們來看看效果

14.密碼錯誤

15.成功登陸，跳轉到success頁面

 

Nodejs-畢業設計4-登入頁面