前端学习（1389）:多人管理项目9登录功能具体实现
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1389）:多人管理项目9登录功能具体实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
blog.js
const express = require('express'); //創建網站服務器 const app = express(); //開放靜態資源文件 const path = require('path'); require('./model/connect')//告訴express框架模板所在的位置 app.set('views', path.join(__dirname, 'views')); //告訴express框架模板的后綴是什么 app.set('view engine', 'art'); //當渲染后綴為art的時候 搜索引擎是什么 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('服務器啟動成功');admingeyao.js
//管理頁面 //展示頁面 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
//展示頁面 const express = require('express');const home = express.Router();home.get('/', (req, res) => {res.send('歡迎來到博客首頁'); });module.exports = home;?connect.js
// 引入mongoose第三方模塊 const mongoose = require('mongoose'); // 連接數據庫 mongoose.connect('mongodb://localhost/blog', {useNewUrlParser: true }).then(() => console.log('數據庫連接成功')).catch(() => console.log('數據庫連接失敗'))user.js
// 創建用戶集合 // 引入mongoose第三方模塊 const mongoose = require('mongoose'); // 導入bcrypt const bcrypt = require('bcrypt'); // 引入joi模塊 const Joi = require('joi'); // 創建用戶集合規則 const userSchema = new mongoose.Schema({username: {type: String,required: true,minlength: 2,maxlength: 20},email: {type: String,// 保證郵箱地址在插入數據庫時不重復unique: true,required: true},password: {type: String,required: true},// admin 超級管理員// normal 普通用戶role: {type: String,required: true},// 0 啟用狀態// 1 禁用狀態state: {type: Number,default: 0} });// 創建集合 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();// 驗證用戶信息 const validateUser = user => {// 定義對象的驗證規則const schema = {username: Joi.string().min(2).max(12).required().error(new Error('用戶名不符合驗證規則')),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('狀態值非法'))};// 實施驗證return Joi.validate(user, schema); }// 將用戶集合做為模塊成員進行導出 module.exports = {User,validateUser }login.art
<!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="請輸入郵件地址"></div><div class="form-group"><label>密碼</label><input name="password" type="password" class="form-control" placeholder="請輸入密碼"></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 () {// 獲取到表單中用戶輸入的內容var result = serializeToJson($(this))// 如果用戶沒有輸入郵件地址的話if (result.email.trim().length == 0) {alert('請輸入郵件地址');// 阻止程序向下執行return false;}// 如果用戶沒有輸入密碼if (result.password.trim().length == 0) {alert('請輸入密碼')// 阻止程序向下執行return false;}});</script> </body> </html>運行結果
總結
以上是生活随笔為你收集整理的前端学习（1389）:多人管理项目9登录功能具体实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PDG转PDF全攻略
- 下一篇： 前端学习（611）：js组成