<tbody id="5gck7"></tbody>
  • <tbody id="5gck7"></tbody>
    <bdo id="5gck7"></bdo>
    1. <menuitem id="5gck7"><optgroup id="5gck7"></optgroup></menuitem>
    2. <bdo id="5gck7"><dfn id="5gck7"><menu id="5gck7"></menu></dfn></bdo>
      <track id="5gck7"><div id="5gck7"></div></track>
      <nobr id="5gck7"><optgroup id="5gck7"></optgroup></nobr>

      實現全棧收銀系統(Node+Vue)(上)

      Echa攻城獅 2020-03-19 05:18:19

      前端漸漸趨向后端化,工程化,自動化開發,掌握一門后端語言成了我們必備的不可少階段,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/test
      router.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 Schema
      const 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) => {})

      1. 判斷注冊郵箱是否存在
      var userFind = mongoHelper.findOne("test",{email: req.body.email});
      復制代碼
      1. 羅列填寫的數據
       const newUser = new User({
             name: req.body.name,
             email: req.body.email,
             avatar,
             password:req.body.password,
             identity:req.body.identity
         })
      復制代碼
      1. 密碼處理

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

      1. 數據儲存
      await mongoHelper.insertOne("test",newUser);
      return res.status(200).json(newUser); //打印在控制臺的數據
      復制代碼
      1. avatar的獲取全國通用頭像的鏈接
      安裝:npm i gravatar
      const avatar = gravatar.url(req.body.email, {s: '200', r: 'pg', d: 'mm'});
      復制代碼

      登錄(獲取token)

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

      1. 查詢數據庫,判斷用戶是否存在
      mongoHelper.findOne("test",{email}).then(user => {})
      復制代碼
      1. 密碼是否匹配(bcrypt.compare)
      2. 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;
      
      復制代碼
      //server
      router.get("/current",passport.authenticate("jwt",{session:false}),(req,res) => {
          res.json(req.user);
      })
      //passport.authenticate  驗證token
      復制代碼

      權限管理(identity)

      注冊

      實現全棧收銀系統(Node+Vue)(上)

      登錄

      實現全棧收銀系統(Node+Vue)(上)

      根據token在請求頭的數據請求到用戶的信息

      實現全棧收銀系統(Node+Vue)(上)


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

      代碼已上傳github

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

      請給star,后續繼續更新,多謝支持

      成人综合伊人五月婷久久| 亚洲 精品 综合 精品 自拍| 人妻夜夜爽天天爽三区麻豆AV| 无码人妻丰满熟妇区毛片| 欧洲美熟女乱又伦AA片试看| 亚洲精品无码成人久久久| 久久AV无码精品人妻出轨| 丰满人妻无码AⅤ一区二区| 漂亮人妻洗澡被公强 日日躁| 无码国产精成人午夜视频一区二区| 精品人妻一区二区三区四区在线| 亚洲色精品三区二区一区|
      成人综合伊人五月婷久久| 亚洲 精品 综合 精品 自拍| 人妻夜夜爽天天爽三区麻豆AV| 无码人妻丰满熟妇区毛片| 欧洲美熟女乱又伦AA片试看| 亚洲精品无码成人久久久| 久久AV无码精品人妻出轨| 丰满人妻无码AⅤ一区二区| 漂亮人妻洗澡被公强 日日躁| 无码国产精成人午夜视频一区二区| 精品人妻一区二区三区四区在线| 亚洲色精品三区二区一区|