前端、后端聯系知識梳理

• 以打開瀏覽器,訪問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
}