當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

前端学习（1389）:多人管理项目9登录功能具体实现

發(fā)布時(shí)間：2023/12/10 HTML 35 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习（1389）:多人管理项目9登录功能具体实现小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

blog.js

const express = require('express'); //創(chuàng)建網(wǎng)站服務(wù)器 const app = express(); //開(kāi)放靜態(tài)資源文件 const path = require('path'); require('./model/connect')//告訴express框架模板所在的位置 app.set('views', path.join(__dirname, 'views')); //告訴express框架模板的后綴是什么 app.set('view engine', 'art'); //當(dāng)渲染后綴為art的時(shí)候搜索引擎是什么 app.engine('art', require('express-art-template'))app.use(express.static(path.join(__dirname, 'public'))); //引入路由模塊const home = require('./homegeyao'); const admin = require('./admingeyao');app.use('/home', home); app.use('/admin', admin); app.listen(3000);console.log('服務(wù)器啟動(dòng)成功');

admingeyao.js

//管理頁(yè)面 //展示頁(yè)面 const express = require('express');const admin = express.Router();admin.get('/login', (req, res) => {res.render('admin/login') }); admin.get('/user', (req, res) => {res.render('admin/user') });module.exports = admin;

homegeyao.js

//展示頁(yè)面 const express = require('express');const home = express.Router();home.get('/', (req, res) => {res.send('歡迎來(lái)到博客首頁(yè)'); });module.exports = home;

?connect.js

// 引入mongoose第三方模塊 const mongoose = require('mongoose'); // 連接數(shù)據(jù)庫(kù) mongoose.connect('mongodb://localhost/blog', {useNewUrlParser: true }).then(() => console.log('數(shù)據(jù)庫(kù)連接成功')).catch(() => console.log('數(shù)據(jù)庫(kù)連接失敗'))

user.js

// 創(chuàng)建用戶集合 // 引入mongoose第三方模塊 const mongoose = require('mongoose'); // 導(dǎo)入bcrypt const bcrypt = require('bcrypt'); // 引入joi模塊 const Joi = require('joi'); // 創(chuàng)建用戶集合規(guī)則 const userSchema = new mongoose.Schema({username: {type: String,required: true,minlength: 2,maxlength: 20},email: {type: String,// 保證郵箱地址在插入數(shù)據(jù)庫(kù)時(shí)不重復(fù)unique: true,required: true},password: {type: String,required: true},// admin 超級(jí)管理員// normal 普通用戶role: {type: String,required: true},// 0 啟用狀態(tài)// 1 禁用狀態(tài)state: {type: Number,default: 0} });// 創(chuàng)建集合 const User = mongoose.model('User', userSchema);async function createUser () {const salt = await bcrypt.genSalt(10);const pass = await bcrypt.hash('123456', salt);const user = await User.create({username: 'iteheima',email: 'itheima@itcast.cn',password: pass,role: 'admin',state: 0}); }// createUser();// 驗(yàn)證用戶信息 const validateUser = user => {// 定義對(duì)象的驗(yàn)證規(guī)則const schema = {username: Joi.string().min(2).max(12).required().error(new Error('用戶名不符合驗(yàn)證規(guī)則')),email: Joi.string().email().required().error(new Error('郵箱格式不符合要求')),password: Joi.string().regex(/^[a-zA-Z0-9]{3,30}$/).required().error(new Error('密碼格式不符合要求')),role: Joi.string().valid('normal', 'admin').required().error(new Error('角色值非法')),state: Joi.number().valid(0, 1).required().error(new Error('狀態(tài)值非法'))};// 實(shí)施驗(yàn)證return Joi.validate(user, schema); }// 將用戶集合做為模塊成員進(jìn)行導(dǎo)出 module.exports = {User,validateUser }

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>用戶登錄</title><link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="/admin/css/base.css"> </head><body><div class="login-body"><div class="login-container"><h4 class="title">黑馬程序員 - 博客管理員登錄</h4><div class="login"><form action="/admin/login" method="post" id="loginForm"><div class="form-group"><label>郵件</label><input name="email" type="email" class="form-control" placeholder="請(qǐng)輸入郵件地址"></div><div class="form-group"><label>密碼</label><input name="password" type="password" class="form-control" placeholder="請(qǐng)輸入密碼"></div><button type="submit" class="btn btn-primary">登錄</button></form></div><div class="tips"></div></div></div><script src="/admin/lib/jquery/dist/jquery.min.js"></script><script src="/admin/lib/bootstrap/js/bootstrap.min.js"></script><script src="/admin/js/common.js"></script><script type="text/javascript">// 為表單添加提交事件$('#loginForm').on('submit', function () {// 獲取到表單中用戶輸入的內(nèi)容var result = serializeToJson($(this))// 如果用戶沒(méi)有輸入郵件地址的話if (result.email.trim().length == 0) {alert('請(qǐng)輸入郵件地址');// 阻止程序向下執(zhí)行return false;}// 如果用戶沒(méi)有輸入密碼if (result.password.trim().length == 0) {alert('請(qǐng)輸入密碼')// 阻止程序向下執(zhí)行return false;}});</script> </body> </html>

運(yùn)行結(jié)果

總結(jié)

以上是生活随笔為你收集整理的前端学习（1389）:多人管理项目9登录功能具体实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。