實現全棧收銀系統(Node+Vue)(上)
前端漸漸趨向后端化,工程化,自動化開發,掌握一門后端語言成了我們必備的不可少階段,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) => {})
- 判斷注冊郵箱是否存在
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 gravatar
const 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;
復制代碼
//server
router.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,后續繼續更新,多謝支持
国产边摸边吃奶边做叫床视频,吃奶呻吟打开双腿做受动态图,掀开奶罩边躁狠狠躁视频