前端、后端联系知识梳理

以打开浏览器,访问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联系知识梳理相关推荐

vue node --- 前后端联系的知识梳理
前端.后端联系知识梳理以打开浏览器,访问login为栗打开浏览器,访问localhost:8080/#/login src/router/index.js 会根据 /login 找到对应的Logi ...
koa+mongoose基础入门
1.mongoose基本使用 1.安装mongodb npm install mongodb 2.引入mongodb数据表,连接mongodb,通过node来对mongodb进行异步的增删改查 con ...
数据结构（C语言版）第六章图知识梳理 + 习题详解
目录一. 图的基本定义和术语一.图的基本概念 1.度 2.连通 (1)连通图 (2)强连通/强连通图 3.回路 4.完全图二.图的三种存储结构 1.邻接矩阵表示法 2.邻接表(链式)表示法 3. ...
数据结构（C语言版）第三章栈与队列知识梳理 + 作业习题详解
目录一.栈 0.栈的基本概念 1.栈的实现 2.栈与递归 3.Hanoi塔问题二.队列 0.队列的基本概念 1.队列的实现 2.循环队列 2.1循环队列的相关条件和公式: 3.链队列 4.链队列完 ...
数据结构（C语言版）第二章线性表知识梳理+作业习题详解
目录一.线性表顺序存储结构(顺序表) 0.线性表的基本概念 1.样例引入:多项式相加二.线性表链式存储结构(链表) 0.链表的基本概念 1.前插法代码实例 2.链表尾插法完整代码附带各种操作三. ...
vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必 ...
[GCN] 图卷积知识梳理 -持续更新
图卷积知识梳理文章目录图卷积知识梳理 1. 为什么 Graph Laplacian L=D−AL=D-AL=D−A --差分的方式理解 2. 为什么是 Graph Laplacian LLL -- ...
欢迎查看Vue总结知识
标题欢迎查看Vue总结知识一. VUE:用于构建用户界面的渐进式框架可以将项目的一部分使用vue实现,也可以使用Vue实现整个项目二. 特点易用:会html.css.js更快上手灵活:不 ...
networkx2.5知识梳理
networkx2.5知识梳理 1.基础知识 1.1.介绍 1.2.作用 1.3.Graph 1.3.1.Graph的定义 1.3.2.Graph的结构 1.3.3.Graph分类 2.基本操作 2. ...

node --- koa、Mongoose、vue联系知识梳理

前端、后端联系知识梳理

node --- koa、Mongoose、vue联系知识梳理相关推荐

最新文章

热门文章