前端、后端联系知识梳理

以打开浏览器,访问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
}

vue node --- 前后端联系的知识梳理相关推荐

vue+node前后端实现登录注册功能
使用vue cli3脚手架搭建一个vue项目创建一个vue_cms项目,没安装脚手架全局安装即可,安装过程选择默认的即可 vue create vue_cms 安装路由,axios,完成后启动项目, ...
vue+node前后端分离接口调用（初学者）
一.node编写接口 (设定你已使用Node+express搭建好了项目,可参照我的上一篇博客) 我们就在users.js下进行接口编写 router.get('/getUserInfo',funct ...
记一次Spring boot 和Vue的前后端分离的入门培训
记一次Spring boot 和Vue的前后端分离的入门培训由于公司之前是写C#的,现在要转 Java分布式 + vue,所以进行一次前后端的简单培训. 前端工具和环境: Node.js V10.1 ...
Vue 实现前后端分离项目
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue实现前后端分离项目的初体验经过之前学习的Vue的知识: vue基本指令 vue组件 vue- ...
shiro+php,一套基于SpringBoot+Vue+Shiro 前后端分离开发的代码生成器
一.前言最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...
VUE进行前后端交互
目录一. 跨域 1. 什么是跨域? 2. 什么是本域? 3. 浏览器请求的三种报错二.SpringBoot解决跨域问题+其他前后端跨域请求解决方案 1. SpringBoot上直接添加@Cross ...
视频教程-Python+Vue+Django前后端分离项目实战-Python
Python+Vue+Django前后端分离项目实战教学风格独特,以学员视角出发设计课程,难易适度,重点突出,架构清晰,将实战经验融合到教学中.讲授技术同时传递方法.得到广大学员的高度认可. 王进 ...
视频教程-springboot+Vue整合前后端分离权限后台管理系统-Java
springboot+Vue整合前后端分离权限后台管理系统拥有八年的Java项目开发经验,擅长Java.vue.SpringBoot.springCloud.spring.springmvc.myb ...
视频教程-SpringBoot2+Vue+AntV前后端分离开发项目实战-Java
SpringBoot2+Vue+AntV前后端分离开发项目实战 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独特的培训思 ...

vue node --- 前后端联系的知识梳理

前端、后端联系知识梳理

vue node --- 前后端联系的知识梳理相关推荐

最新文章

热门文章