免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
Node.js實戰(zhàn)項目

Node.js實戰(zhàn)項目–簡單的項目發(fā)布系統(tǒng)

本章項目是使用express+mongodb制作一個簡單的項目發(fā)布系統(tǒng)。

項目前準(zhǔn)備

  • 安裝node.js
  • 安裝express
  • 安裝mongoDB
  • 安裝studio 3T

項目結(jié)構(gòu)初始化

  • 第一步:首先新建express站點,express publish-system -e -c less,這些我們新建的項目名稱是publish-system,選擇ejs模板,使用less進(jìn)行預(yù)編譯,如果小伙伴們不知道express的這些指令,可以通過express –help查看(插一句,在這之前確保已經(jīng)安裝了 express)
  • 第二步:進(jìn)入到這個項目目錄 cd publish-system
  • 第三步:安裝依賴 npm install
  • 第四步:啟動這個項目 SET DEBUG=publish-system:* & npm start,這里如果你安裝了pm2,也可以使用pm2啟動
  • 第五步:命令行會提示在哪個端口監(jiān)聽,如果想改默認(rèn)端口號,在bin文件夾下面的www文件進(jìn)行修改
  • 第六步:打開瀏覽器進(jìn)行查看 localhost:3000(默認(rèn))

注冊頁面+功能實現(xiàn)

【1】配置注冊頁面的路由
關(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

【2】完成注冊頁面
頁面很多,所以我們在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可查看到注冊頁面

【3】注冊頁面功能的實現(xiàn)
首先獲取到注冊中請求的用戶名和密碼

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,點擊注冊,可以在命令行看到打印出來的用戶名和密碼



下面問題來了,如果能將注冊的數(shù)據(jù)保存在數(shù)據(jù)庫中呢?

首先,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;
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Modernizr.js:為HTML5和CSS3而生! | 前端開發(fā)博客
JS彈窗 JS彈出DIV并使整個頁面背景變暗功能的實現(xiàn)代碼
巧用beini強制釣取wifi密碼
橋梁剪貼畫
css3 漸變邊框如何實現(xiàn)圓角效果
PhoneGAP實現(xiàn)帶進(jìn)度條的文件上傳(支持任意類型文件)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服