Node.js實(shí)戰(zhàn)項(xiàng)目–簡單的項(xiàng)目發(fā)布系統(tǒng)
本章項(xiàng)目是使用express+mongodb制作一個(gè)簡單的項(xiàng)目發(fā)布系統(tǒng)。
項(xiàng)目前準(zhǔn)備
- 安裝node.js
- 安裝express
- 安裝mongoDB
- 安裝studio 3T
項(xiàng)目結(jié)構(gòu)初始化
- 第一步：首先新建express站點(diǎn)，express publish-system -e -c less，這些我們新建的項(xiàng)目名稱是publish-system，選擇ejs模板，使用less進(jìn)行預(yù)編譯，如果小伙伴們不知道express的這些指令，可以通過express –help查看（插一句，在這之前確保已經(jīng)安裝了 express）
- 第二步：進(jìn)入到這個(gè)項(xiàng)目目錄 cd publish-system
- 第三步：安裝依賴 npm install
- 第四步：啟動(dòng)這個(gè)項(xiàng)目 SET DEBUG=publish-system:* & npm start，這里如果你安裝了pm2，也可以使用pm2啟動(dòng)
- 第五步：命令行會(huì)提示在哪個(gè)端口監(jiān)聽，如果想改默認(rèn)端口號(hào)，在bin文件夾下面的www文件進(jìn)行修改
- 第六步：打開瀏覽器進(jìn)行查看 localhost:3000（默認(rèn)）
注冊(cè)頁面+功能實(shí)現(xiàn)
【1】配置注冊(cè)頁面的路由
關(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');
});
//注冊(cè)
router.get('/register',function(req,res,next){
res.render('user/register');
});
//注冊(cè)的最好選用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這個(gè)路徑時(shí)就要變成/users/register
【2】完成注冊(cè)頁面
頁面很多，所以我們?cè)趘iews下面新建user文件夾，將和用戶相關(guān)的頁面都放在user中
然后在views/user下面新建register.ejs書寫注冊(cè)的頁面，頁面采用的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個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<meta name="description" content="register">
<meta name="author" content="pangtong">
<title>注冊(cè)</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn./bootstrap/3.3.7/css/bootstrap.min.css" 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./html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn./respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">請(qǐng)注冊(cè)</h2>
<label for="username" class="sr-only">用戶名</label>
<input type="text" name="username" id="username" class="form-control"
placeholder="請(qǐng)輸入用戶名" required autofocus>
<label for="pwd" class="sr-only">密碼</label>
<input type="password" name="pwd" id="pwd" class="form-control"
placeholder="請(qǐng)輸入密碼" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">注冊(cè)</button>
</form>
</div>
</body>
</html>
樣式、圖片和js都放在public文件夾下面，register對(duì)應(yīng)的css內(nèi)容如下，有需要可以自行修改
/*注冊(cè)頁面樣式*/
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可查看到注冊(cè)頁面
【3】注冊(cè)頁面功能的實(shí)現(xiàn)
首先獲取到注冊(cè)中請(qǐng)求的用戶名和密碼
register.ejs中的form表單要指定提交方法和提交到哪個(gè)頁面
routes文件夾下users.js下面輸入注冊(cè)的路由
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
//注冊(cè)
router.get('/register',function(req,res,next){
res.render('user/register');
});
router.post('/register',function(req,res,next){
//獲取請(qǐng)求到的用戶名和密碼
console.log(req.body.username);
console.log(req.body.pwd);
res.send("注冊(cè)成功");
});
module.exports = router;
測試效果，在localhost:3000/users/register的注冊(cè)頁面中輸入用戶名xiaolaofu，密碼123456，點(diǎn)擊注冊(cè)，可以在命令行看到打印出來的用戶名和密碼
下面問題來了，如果能將注冊(cè)的數(shù)據(jù)保存在數(shù)據(jù)庫中呢？
首先，express是一個(gè)MVC類型的框架，V可以理解為views視圖層，C可以理解為routes，至于M，我們?cè)陧?xiàng)目文件下新建一個(gè)model文件夾來綁定數(shù)據(jù)
在model文件夾下面新建User.js
//首先引入mongoose
var mongoose = require('mongoose');
//連接本地?cái)?shù)據(jù)庫
mongoose.connect('mongodb://localhost/user'); //鏈接本地的user數(shù)據(jù)庫
mongoose.Promise = global.Promise;
//定義一個(gè)schema
var userSchema = mongoose.Schema({
name:String,
pwd:Number
})
//創(chuàng)建一個(gè)model
//把schema轉(zhuǎn)換為一個(gè)model,使用mongoose.model(modelName, schema) 函數(shù)
var User = mongoose.model('User',userSchema);
module.exports = Student;
|
