前端、后端聯(lián)系知識(shí)梳理

• 以打開(kāi)瀏覽器,訪問(wèn)login為栗
• 打開(kāi)瀏覽器,訪問(wèn)localhost:8080/#/login
• src/router/index.js 會(huì)根據(jù) /login 找到對(duì)應(yīng)的Login(src/components/pages/Login.vue)組件, 然后渲染到瀏覽器
• 當(dāng)輸入用戶名和密碼,點(diǎn)擊登錄按鈕后
• 根據(jù)Login組件中配置的axios請(qǐng)求向后端發(fā)送請(qǐng)求.
• 請(qǐng)求的url是: http://localhost:3001/login
• 后端監(jiān)聽(tīng)該url的代碼如下

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

• 后端監(jiān)聽(tīng)到該路由請(qǐng)求后,會(huì)用請(qǐng)求的參數(shù)和數(shù)據(jù)庫(kù)進(jìn)行比對(duì).
• 使用mongoose連接數(shù)據(jù)庫(kù)的代碼如下

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) =>{// 斷線重連,最大重連次數(shù)3次if(maxConnectTimes <= 3){maxConnectTImes++;mongoose.connect(db);} else{reject(err);throw new Error('[connect error] 數(shù)據(jù)庫(kù)連接失敗')}});// 失敗mongoose.connection.in('error', () =>{console.log('[error] 數(shù)據(jù)庫(kù)出錯(cuò)');mongoose.connect(db);})// 成功打開(kāi)mongoose.connection.once('open', () =>{console.log('[ok] MongoDB connected successfully');resovle();})}) }

• 導(dǎo)入各個(gè)集合規(guī)則
• 使用glob

const glob = require('glob'); const { resolve } = require('path');export.initSchemas = () =>{glob.sync(resolve(__dirname, './schema', '**/*.js')).forEach(require); } // 此時(shí),會(huì)連接到數(shù)據(jù)庫(kù),并初始化各個(gè)表的規(guī)則.

• 使用mongoose查找數(shù)據(jù)

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

• koa返回?cái)?shù)據(jù)給前端

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。