本章項目是使用express+mongodb制作一個簡單的項目發(fā)布系統(tǒng)。
關(guān)于系統(tǒng)中和用戶的相關(guān)路由配置都寫的routes文件夾下面的users.js中
var express = require('express');var router = express.Router();/* GET users listing. */router.get('/', function(req, res, next) { res.send('respond with a resource');});//注冊router.get('/register',function(req,res,next){ res.render('user/register');});//注冊的最好選用post方法,此處先用get做演示用module.exports = router;
注意:
app.js文件中引入了routes中的users.js,var usersRouter = require(‘./routes/users’);并且使用app.use()將應(yīng)用掛載到app應(yīng)用上app.use(‘/users’, usersRouter);所以在訪問register這個路徑時就要變成/users/register
頁面很多,所以我們在views下面新建user文件夾,將和用戶相關(guān)的頁面都放在user中然后在views/user下面新建register.ejs書寫注冊的頁面,頁面采用的bootstrap
register.ejs頁面中的代碼
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標(biāo)簽*必須*放在最前面,任何其他內(nèi)容都*必須*跟隨其后! --> <meta name="description" content="register"> <meta name="author" content="pangtong"> <title>注冊</title> <!-- Bootstrap core CSS --> <link rel="stylesheet"> <!-- Custom styles for this template --> <link href="/stylesheets/user/register.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--></head><body><div class="container"> <form class="form-signin"> <h2 class="form-signin-heading">請注冊</h2> <label for="username" class="sr-only">用戶名</label> <input type="text" name="username" id="username" class="form-control" placeholder="請輸入用戶名" required autofocus> <label for="pwd" class="sr-only">密碼</label> <input type="password" name="pwd" id="pwd" class="form-control" placeholder="請輸入密碼" required> <button class="btn btn-lg btn-primary btn-block" type="submit">注冊</button> </form></div></body></html>
樣式、圖片和js都放在public文件夾下面,register對應(yīng)的css內(nèi)容如下,有需要可以自行修改
/*注冊頁面樣式*/body{ background:#e5e5e5;}.container{ width:400px; margin:300px auto; background:#fff; border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; box-shadow:3px 3px 10px #000000; text-align:center;}.form-signin .form-signin-heading{ margin:20px auto; font-weight:bold;}.form-signin .form-control { display:block; width:350px; margin:20px auto; height:auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; padding:10px; font-size:16px;}.form-signin .form-control:focus { z-index:2;}.form-signin input[type="txt"] { border-bottom-right-radius: 0; border-bottom-left-radius: 0;}.form-signin input[type="password"] { border-top-left-radius: 0; border-top-right-radius: 0;}.form-signin .btn-block{ display:block; width:350px !important; margin:30px auto;}
現(xiàn)在通過在自己電腦輸入http://localhost:3000/users/register可查看到注冊頁面
register.ejs中的form表單要指定提交方法和提交到哪個頁面
routes文件夾下users.js下面輸入注冊的路由
var express = require('express');var router = express.Router();/* GET users listing. */router.get('/', function(req, res, next) { res.send('respond with a resource');});//注冊router.get('/register',function(req,res,next){ res.render('user/register');});router.post('/register',function(req,res,next){ //獲取請求到的用戶名和密碼 console.log(req.body.username); console.log(req.body.pwd); res.send("注冊成功");});module.exports = router;
測試效果,在localhost:3000/users/register的注冊頁面中輸入用戶名xiaolaofu,密碼123456,點擊注冊,可以在命令行看到打印出來的用戶名和密碼
首先,express是一個MVC類型的框架,V可以理解為views視圖層,C可以理解為routes,至于M,我們在項目文件下新建一個model文件夾來綁定數(shù)據(jù)
在model文件夾下面新建User.js
//首先引入mongoosevar mongoose = require('mongoose');//連接本地數(shù)據(jù)庫mongoose.connect('mongodb://localhost/user'); //鏈接本地的user數(shù)據(jù)庫mongoose.Promise = global.Promise;//定義一個schemavar userSchema = mongoose.Schema({ name:String, pwd:Number})//創(chuàng)建一個model//把schema轉(zhuǎn)換為一個model,使用mongoose.model(modelName, schema) 函數(shù)var User = mongoose.model('User',userSchema);module.exports = Student;