Node.js(day6)

摘要： 初始化準備工作 初始化目錄 nmp init -y 安裝基本的第三方外掛 express npm install express --save ...

初始化準備工作

• 初始化目錄

  nmp init -y

• 安裝基本的第三方外掛

  express

  npm install express --save

  art-template

  npm install art-template express-art-template --save

  jquery

  npm intsall jquery --save

  bootstrap

  npm install bootstap --save

  body-parser

  npm install body-parser --save

• 頁面檔案

  新建public 資料夾，將寫好的頁面資原始檔放進去。

• 測試

  /*模組*/
  var express = require('express');
  var app = express();
  var path= require('path');
  var template = require('express-art-template');
  
  /*元件、配置*/
  app.use('/public/', express.static(path.join(__dirname, './public')));//靜態資原始檔
  
  /*伺服器*/
  app.listen(8080, () => {
  console.log('8080 okk');
  });

Path模組相關知識

Path模組是Node中專門用來操作路徑字串 的模組，可以避免手動操作字串的一些錯誤，且跨平臺。

一般的路徑字串如：/foo/bar/baz/asdf/quux.html ，可以發現一些共性：

• 目錄名
• 檔名
• 副檔名
• 是否為絕對路徑

所以path最基本的就是獲取這些共性資訊。

path.dirname(pathStr)

path.dirname('/foo/bar/baz/asdf/quux.html');//--- /foo/bar/baz/asdf

path.basename(pathStr [,ext])

path.basename('/foo/bar/baz/asdf/quux.html');//--- quux.html
path.basename('/foo/bar/baz/asdf/quux');//--- quux
path.basename('/foo/bar/baz/asdf/quux.html', '.html');//--- quux
path.basename('/foo/bar/baz/asdf/quux.html', '.htm');//--- quux.html

path.extname(pathStr)

path.extname('/foo/bar/baz/asdf/quux.html');//--- .html
path.extname('/foo/bar/baz/asdf/quux');//--- 
path.extname('/foo/bar/baz/asdf/quux.');//--- .

path.isAbsolute(pathStr)

path.isAbsolute('/foo/bar'); // true
path.isAbsolute('/baz/..');// true
path.isAbsolute('qux/');// false
path.isAbsolute('.');// false

此外，path還提供了一些常用的功能，比如

• 將路徑字串轉化為路徑物件

  path.parse(pathStr)
  

  path.parse('/foo/bar/baz/asdf/quux.html');
  /*
  { root: '/',
  dir: '/foo/bar/baz/asdf',
  base: 'quux.html',
  ext: '.html',
  name: 'quux' }
  */

• 將物件轉化為路徑

  path.format(pathObj)
  

  path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
  //--- /foo/bar/baz/asdf

• 路徑拼接

  path.join([...paths])
  

Node中的關於絕對路徑 的兩個引數，__dirname 和__filename 。

__dirname
__fielname

由於相對路徑會在檔案移動後導致程式出現一些問題，所以我們在操作路徑時儘量使用絕對路徑代替相對路徑。

art-template的使用

子模板

子摸版的應用場景是很多網頁都有相同的頭部和尾部，那麼這部分重複的html程式碼我們可以單獨寫在一個html檔案中，在需要的地方引入即可，這個html就是子檔案。

在art-template 中子模板的語法就是用來實現這個模板檔案的引入問題的。標準語法如下：

{{include './header.art'}}{{include './header.art' data}}

具體可參考官方文件：https://aui.github.io/art-template/zh-cn/docs/syntax.html#%E5%AD%90%E6%A8%A1%E6%9D%BF

摸版繼承

模板繼承顧名思義，很多網頁的結構大致相同，那麼我們就可以編寫一個父模板html檔案，讓類似結構的檔案繼承 之，並可編寫繼承的內容。art-template 中的模板繼承語法實現了這種思路。

在父模板中：

{{block 'head'}} ... {{/block}}

可規定繼承塊。

在自模板中，先繼承，再修改繼承的模板內容

{{extend './layout.art'}}

{{block 'head'}} ... {{/block}}

更多內容請參考官方文件：https://aui.github.io/art-template/zh-cn/docs/syntax.html#%E6%A8%A1%E6%9D%BF%E7%BB%A7%E6%89%BF

路由設計

暫時設計一個簡單的請求訪問的跳轉：

/*模組*/
var express = require('express');
var router = express.Router();

/*路由設計*/

router.get('/',(req,res) => {
res.render('./index.html');
});

router.get('/login',(req,res) => {
res.render('./login.html');
});

router.post('/login',(req,res) => {
res.render('./login.html');
});

router.get('/register',(req,res) => {
res.render('./register.html');
});

router.post('/register',(req,res) => {
//讀取表單資料
var data = req.body;

});

router.get('/logout',(req,res) => {
res.render('./register.html');
});

module.exports = router;

然後在app.js 中使用路由：

/*模組*/
var express = require('express');
var app = express();
var path= require('path');
var template = require('express-art-template');
var bodyParser = require('body-parser');
var router = require('./router.js');

/*元件、配置*/
app.use('/public/', express.static(path.join(__dirname, './public')));//靜態資原始檔
app.use('/node_modules/',express.static(path.join(__dirname,'./node_modules')));//靜態資原始檔

app.engine('html', template);//配置模板引擎(設定的目錄檔案下的html檔案自動渲染)

app.use(bodyParser.urlencoded({ extended: false }));// parse application/x-www-form-urlencoded
app.use(bodyParser.json());// parse application/json

app.use(router);

/*伺服器*/
app.listen(8080, () => {
console.log('8080 okk');
});

退出登入邏輯

完善路由設計中的退出登入邏輯。

註冊功能

1.資料庫

註冊就需要儲存使用者資訊，這裡使用mongodb 資料庫來儲存使用者資訊。所以先安裝mongoose ：

npm install mongoose --save

使用新的檔案模板來設計使用者表：比如user.js

var mongoose = require('mongoose');

//連線資料庫
mongoose.connect('mongodb://localhost/test', {
useMongoClient: true
});

//設計使用者表
var Schema = mongoose.Schema;
var userSchema = new Schema({
email: {
type: String,
required: true
},
nickname: {
type: String,
required: true
},
password: {
type: String,
required: true
},
create_time: {
type: Date,
default: Date.now
},
last_modify_time: {
type: Date,
default: Date,now
},
avatar: {
type: String,
default: '/public/img/avatar-default.png'
},
bio: {
type: String,
default: ''
},
gender: {
type: Number,
enum: [-1, 0, 1],
default: -1
},
brithday: {
type: Date
},
status: {
type: Number,
enum: [0, 1, 2],
default: 0
}
});

module.exports = mongoose.model('User', userSchema);