Nodejs-畢業設計4-登錄頁面
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-登錄頁面