前端、后端聯系知識梳理

• 以打開瀏覽器,訪問login為栗
• 打開瀏覽器,訪問localhost:8080/#/login
• src/router/index.js 會根據 /login 找到對應的Login(src/components/pages/Login.vue)組件, 然后渲染到瀏覽器
• 當輸入用戶名和密碼,點擊登錄按鈕后
• 根據Login組件中配置的axios請求向后端發送請求.
• 請求的url是: http://localhost:3001/login
• 后端監聽該url的代碼如下

const Router = require('koa-router'); let router = new Router();router.post('/login', async(ctx)=>{// 此處是邏輯實現代碼 })

• 后端監聽到該路由請求后,會用請求的參數和數據庫進行比對.
• 使用mongoose連接數據庫的代碼如下

const mongoose = require('mongoose'); const { resolve } = require('path'); const db = 'mongodb://localhost/smile-vue'exports.connect = () =>{mongoose.connect(db);let maxConnectTimes = 0;return new Promise((resolve, reject) =>{mongoose.connection.on('disconnected', (err) =>{// 斷線重連,最大重連次數3次if(maxConnectTimes <= 3){maxConnectTImes++;mongoose.connect(db);} else{reject(err);throw new Error('[connect error] 數據庫連接失敗')}});// 失敗mongoose.connection.in('error', () =>{console.log('[error] 數據庫出錯');mongoose.connect(db);})// 成功打開mongoose.connection.once('open', () =>{console.log('[ok] MongoDB connected successfully');resovle();})}) }

• 導入各個集合規則
• 使用glob

const glob = require('glob'); const { resolve } = require('path');export.initSchemas = () =>{glob.sync(resolve(__dirname, './schema', '**/*.js')).forEach(require); } // 此時,會連接到數據庫,并初始化各個表的規則.

• 使用mongoose查找數據

const User = mongoose.model('User');User.findOne({ userName: username }).exec().then(async (result) =>{console.log(result); })

• koa返回數據給前端

ctx.body = {code:200,message:msg }

總結

以上是生活随笔為你收集整理的node --- koa、Mongoose、vue联系知识梳理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。