全栈开发学习(Node+Vue+Mongodb)(三)——后台接口与数据库准备

1 前端接口(admin)准备

  • 安装axios用于请求接口提交数据:

    npm i axios

  • 在admin根目录新建http.js文件,在文件中引入axios

    import axios from 'axios'
  • 在http.js中创建实例

    const http=axios.create({
       baseURL:'http://localhost:3000/admin/api'
       //baseURL:process.env.VUE_APP_API_URL || '/admin/api',
    })
  • 导出http变量

    export default http
  • 在main.js中引入变量,并绑定到原型上

    import http from './http'
    Vue.prototype.$http=http

2 服务端接口(server)准备

  • 安装3个必要的模块(express5.0、mongoose[连接数据库]、cors[允许跨域请求]):

    npm i express@next mongoose cors

  • 在server文件夹的index.js中引入刚安装好的模块

    const express=require("express")
    app.use(express.json())
    app.use(require('cors')())
  • 创建express的实例

    const app=express()
  • 启动该实例

    app.listen(3000,()=>{
        console.log('http://localhost:3000')
    });
  • 创建路由文件夹routes/admin,创建文件index.js,在这里写具体的路由

  • 在routes/admin/index.js中创建app的函数,然后在根目录的index.js中引入这个app

    module.exports=app=>{
        const express=require('express')
        const router=express.Router({mergeParams:true})// 创建express的子路由,再挂在router到app上
        }
    require('./routes/admin')(app)

3 数据库准备

  • 创建数据库插件,连接数据库,新建文件plugins/db.js

  • 引入到server/index.js中

    require('./plugins/db')(app)
  • 在db.js中创建函数,在函数中引用mongoose

    module.exports=app=>{
        //连接数据库
        const mongoose=require("mongoose")
        mongoose.connect('mongodb://127.0.0.1:27017/node-vue-wzry',{
            useNewUrlParser:true   //连接参数
        })
        require('require-all')(__dirname + '/../models') //引用了models里所有js
    }

4 创建模型

  • 在server文件夹中创建models,用于存放模型

  • 模型基本格式

    const mongoose=require('mongoose')
    //新建模型
    const schema=new mongoose.Schema({
        **字段以及字段类型**
    })
    module.exports=mongoose.model('Category',schema) //导出模型
  • 创建好后在server/admin/index.js中引入模型

    const xxx(模型名)=require('../../models/模型名')
  • 在router的post接口中返回这个模型

     router.post('/xxxxxx',async(req,res)=>{
            const model=await xxxxx(模型名).create(req.body)
            res.send(model)
        })
    

5 在前端发起请求

具体的Vue组件的methods中(以保存数据为例):

async save(){
   const res=await this.$http.post('xxxxx(接口名)',this.model)
 }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值