首頁>技術>

前端漸漸趨向後端化,工程化,自動化開發,掌握一門後端語言成了我們必備的不可少階段,Node的出現讓我們能夠搭建了簡單運算的後臺,實現全棧的開發,現在通過幾個階段來開發一套基於VUE開發的Node後臺系統,區塊式的記錄一些乾貨。

基於Node介面搭建-登入註冊1. express搭建伺服器安裝: npm install express引用: const express = require("express");複製程式碼

設定埠號

const app = express(); const port = process.env.PORT || 5000;app.listen(port,()=>{ console.log(`Server running on port ${port}`);})複製程式碼

在控制檯中執行node server.js,即可以開出http://localhost:5000的請求連線,那麼我們可以根據請求連線編寫出第一個請求介面

app.get("/",(req,res) => { res.send("Hellow World!")})複製程式碼

由於每次儲存都要重新執行命令,故我們可以安裝npm install nodemon -g避免每次初始執行

2. 連線MongoDB資料庫

有了第一步的操作我們已經能夠成功訪問到了一個自定義介面資料了,那麼現在我們需要根據資料庫的資料執行我們的介面,在Node中運用封裝好的MongoDB進行操作(此處如有不明白可以看下之前總結的推文)

安裝:npm install mongoose引用: const MongoClient = require("mongodb").MongoClient;複製程式碼

建立一個檔案keys.js我們將資料庫連線全部編寫進去,方便後期直接呼叫

module.exports = { url: 'mongodb://localhost:27017', dbName: 'restful-api-prod', secretOrkey: 'secret' //token 呼叫}複製程式碼

在server.js頁面中進行引入進行連線mongodb

class Mongodb{ constructor(conf) { //class原型下的建構函式 //儲存conf到構造的集合中 this.conf=conf //成員變數 //連線 this.client = new MongoClient(conf.url,{useNewUrlParser: true}) //建立客戶端 this.client.connect( err => { //有自動重連的機制 if(err) { throw err } console.log('連線資料庫成功'); }); }}module.exports = new Mongodb(conf);複製程式碼3. 搭建路由和資料模型

建立users.js,此處頁面編寫將會涉及到 登入,註冊,設定Token,密碼加密,使用者,郵箱是否存在判斷,Token識別獲取資訊等。

引入router進行介面路由編寫

const express = require("express");const router = express.Router(); //介面請求// api/users/testrouter.get("/test",(req,res) => { res.json({msg:"login works"})})module.exports = router;複製程式碼

建立的檔案需要到server.js中引用

const users = require("./routes/api/users");app.use("/api/users",users);複製程式碼

Schema的資料模型建立

const mongoose = require('mongoose');const Schema = mongoose.Schema;// Create Schemaconst UserSchema = new Schema({ name: { type: String, required: true }, email: { type: String, required: true }, password: { type: String, required: true }, avatar: { //頭像 type: String }, identity: { type: String, required: true }, date: { type: Date, default: Date.now }});module.exports = User = mongoose.model('users', UserSchema);複製程式碼4. 搭建註冊介面並存儲資料

方便後期介面除錯的需要安裝下postman,接下來的請求是POST請求,也是相對get請求比較麻煩的一點,POST的請求需要安裝第三方的模組

npm i body-parser複製程式碼

在 server.js 中引用

const bodyParser = require("body-parser"); //使用body-parser中介軟體 app.use(bodyParser.urlencoded({extended:false})); //開啟往post傳送資料 app.use(bodyParser.json()); //讓資料json化複製程式碼

引入Schema建立的資料模型 如果引用了那麼我們可以根據模型直接 User.findOne 就能在資料庫中查詢,但是未知原因,在執行時一直沒進去,便接下來都使用了封裝的Promise請求進行操作

註冊

router.post("/register",async(req,res) => {})

判斷註冊郵箱是否存在var userFind = mongoHelper.findOne("test",{email: req.body.email});複製程式碼羅列填寫的資料 const newUser = new User({ name: req.body.name, email: req.body.email, avatar, password:req.body.password, identity:req.body.identity })複製程式碼密碼處理

密碼加密操作安裝(使用參考npm) npm install bcrypt -S

資料儲存await mongoHelper.insertOne("test",newUser);return res.status(200).json(newUser); //列印在控制檯的資料複製程式碼avatar的獲取全國通用頭像的連結安裝:npm i gravatarconst avatar = gravatar.url(req.body.email, {s: '200', r: 'pg', d: 'mm'});複製程式碼登入(獲取token)

router.post("/login",async(req,res) => {})

查詢資料庫,判斷使用者是否存在mongoHelper.findOne("test",{email}).then(user => {})複製程式碼密碼是否匹配(bcrypt.compare)Token 設定安裝 npm install jsonwebtoken複製程式碼

在判斷匹配密碼成功後進行操作,此處需要注意到的是 token: "Bearer "+token

jwt.sign("規則","加密名字","過期時間","箭頭函式")

const rule = { id:user.id, name:user.name, avatar:user.avatar, identity: user.identity, }; jwt.sign(rule,keys.secretOrkey,{expiresIn: 3600},(err,token) => { if(err) throw err; res.json({ success: true, token: "Bearer "+token })})複製程式碼使用passport-jwt驗證token(運用在需要請求使用者資訊的介面)

安裝 npm i passport-jwt passport

引用 const passport = require("passport"); //對請求進行身份驗證

初始化 app.use(passport.initialize());

程式碼抽離模式 require("./config/passport")(passport); //傳物件過去

router.get("/current","驗證token",(req,res) => { res.json(req.user);})複製程式碼

建立passport檔案直接在這個頁面操作再丟擲,在passport-jwt官網中引用需要的資料

const JwtStrategy = require('passport-jwt').Strategy, ExtractJwt = require('passport-jwt').ExtractJwt;const mongoose = require("mongoose");// const User = mongoose.model("users");const keys =require("../config/keys");const mongoHelper = require('../models/mongoHelper')const opts = {}opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();opts.secretOrKey = keys.secretOrkey;複製程式碼//serverrouter.get("/current",passport.authenticate("jwt",{session:false}),(req,res) => { res.json(req.user);})//passport.authenticate 驗證token複製程式碼許可權管理(identity)

註冊

登入

根據token在請求頭的資料請求到使用者的資訊

已更新了下集 實現全棧收銀系統(Node+Vue)(下)

程式碼已上傳github

https://github.com/lin593/node-app

請給star,後續繼續更新,多謝支援

  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 越來越難找到工作的5種語言