技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-4.使用axios,并创建接口上传数据到mongodb数据库

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介: 根据我的业务范围,设想网站内容分为三类,设计、开发、小程序,设计中有二级分类平面设计、UI设计,平面设计又有三级分类包括VI设计、名片设计、LOGO设计…之后网站发布的不管是文章还是合作订单,全部归属到这些类别中,这样就需要用到数据的关联。

根据我的业务范围,设想网站内容分为三类,设计、开发、小程序,设计中有二级分类平面设计、UI设计,平面设计又有三级分类包括VI设计、名片设计、LOGO设计...之后网站发布的不管是文章还是合作订单,全部归属到这些类别中,这样就需要用到数据的关联

1.进入思路,做出分类页面

在这里插入图片描述
首先设置分类接口,后续其他接口都可以方便关联此接口。同时,设置二级分类时也需要用到关联,分类的一套接口实现后,我们就基本学会了接口的创建和数据的上传。
第一步,创建分类页面CatogorySet.vue。

常见的英文翻译是class,item等,但我们书写的代码中这些词非常常见,为了避免程序的错误和视觉的难以区分,一般以“类别category”来进行分类的命名。什么时候用单数还是复数看我们自己喜好。

命名使用驼峰命名法,名字为设置,因为后续修改也用这个页面。
下方代码为CatogorySet.vue页面,其中包括:element-ui表单、vue的model双向绑定和form表单的submit提交事件。

<template>
    <div>
        <h1>创建分类</h1>
        <el-form label-width="80px" style="margin-top:20px;" @submit.native.prevent="save">
            <!-- submit事件中使用提交方法save,native是找到js原生表单,prevent是指阻止提交时默认跳转页面 -->
            <el-form-item label="分类名">
                <el-input v-model="model.name"></el-input>
                <!-- 双向绑定model -->
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return {
            model: {}
        }
    },
    methods: {
        save(){
            //这里放axios方法,用来提交数据
        }
    }
}
</script>

在router的index.js引入路由CategorySet.vue。
在这里插入图片描述

2.安装axios并使用,编写提交方法

终端输入:

cd admin
npm i axios

在这里插入图片描述
此时安装axios完成。
为了代码的清晰,避免main.js混乱,专门在main.js同级给axios创建一个js文件存放axios的接口,名为http.js,后在main.js引入。
引入axios包,同时创建一个axios实例,发送地址为服务器端server的admin/api接口下,此处直译为admin后台的api接口,稍后在服务端创建此地址。
http.js:

// 引入axios
import axios from 'axios'

// 创建axios实例,添加api路径
const http = axios.create({
    baseURL:'http://localhost:3000/admin/api'
})

// 将文件变量导出,导出到main.js
export default http

main.js:
在这里插入图片描述
此时http实例已经在vue实例属性中,我们可以直接在方法中用this.$http使用axios。
回到CategorySet.js,提交数据我们用POST方法:
在这里插入图片描述
方法已经写好,紧接着我们要到服务端server中创建接口,创建好后再到save方法里修改。

3.创建接口

终端新建页面输入:

cd server
npm run serve

此时我们进入到server端,什么都没有,我们要安装一些常用的模块,最终使用方法就与server一样了。
(1)同时安装三个模块包:express(NodeJS最流行的轻量web开发框架),mongoose(连接到mongodb数据库的模块)cors(允许跨域的模块)
终端再次新建页面,输入:

cd server
npm i express@next mongoose cors

在这里插入图片描述
(2)安装完成后,到server的index.js文件中引入express框架,同时app引用express实例。
使用express实例启动项目,监听3000端口。
index.js:

const express = require('express')

const app = express()

app.listen(3000, () => {
    console.log('http://localhost:3000');
})

(3)此时我们要创建上面的admin/api接口,把接口放入路由,定义地址。因为admin、web端的接口路由如果都写在index.js就会非常乱,所以把两端的接口路由分开存放在server端的routes。
创建routes文件夹,在routes中再创建两个文件夹,分别是admin和web,用于存放接口文件,再在admin中创建一个index.js文件,此index.js为具体路由编写位置。
在这里插入图片描述
routes/admin/index.js中,导出一个函数app,这个app的内容来源于最外层server的index.js中的app,给app设置路由。index.js:

module.exports = app => {
    // 要想使用express,该文件就需要引入express
    const express = require('express')

    // 定义路由方法,将我们定义的路由挂载到express
    const router = express.Router()

    // router挂载post方法,因为表单传值时用的就是post传值
    // 接口地址是categories,接收的是分类功能(创建分类、修改分类、查询分类列表)的操作
    // 之后其他功能实现与此模板相同,与此功能平级
    router.post('/categories', async(req, res) => {
        // 在里边放该接口的具体操作,所有操作同级放置

    })

    // 定义“admin/api”路由方法,挂载存入到router
    app.use('/admin/api', router)
}

将admin接口路由引入server的index.js,由于引用的内容为函数,所以我们要执行这个admin接口并传值。写法:
在这里插入图片描述

4.接口使用mongodb数据库

我们编写接口将数据传输到数据库,把数据库调用语句写到下图位置:
在这里插入图片描述
(1)引入mongoose插件
在创建接口时一并下载了mongoose(连接mongodb数据库的模块插件)这时候我们就要把数据库引入到项目中了。
创建文件夹和文件plugins/db.js在server文件夹:
在这里插入图片描述
在server下的index.js中引入db.js:
在这里插入图片描述
在db.js中引入该插件,与创建接口的书写方法类似,都使用到主文件中的app内容:

module.exports = app =>{
    // 引入mongoose
    const mongoose = require('mongoose')

    // 使用mongoose方法连接mongodb数据库
    // 格式为mongodb:数据库地址:端口号/数据库名
    // 数据库名自动创建
    mongoose.connect('mongodb://127.0.0.1:27017/node-mine',{
        // 必加参数
        useNewUrlParser: true
    })
}

此时app没有呗使用到,但后期我们有可能会使用。到此插件写好了。
(2)建立数据模型,方便调用数据库
建立分类功能的数据模型,稍后接口传值时直接调用该模型。server下创建models文件夹,再创建Category.js模块文件。
在这里插入图片描述
Category.js:

// 引入mongoose插件,插件db.js已经用require引入到server的最高层文件index.js,所以可以直接引用
const mongoose = require('mongoose')

// 使用mongoose的架构方法定义此数据表category,定义字段和类型
const schema = new mongoose.Schema({
    name: { type: String }
})

// 导出mongoose模型
module.exports = mongoose.model('Category', schema)

此时我们就可以在接口调用模型进行上传信息到数据库了。

(3)引入模型到admin/api接口
找到该接口文件,server/routes/admin/index.js,引入模型:
在这里插入图片描述
(4)操作接口,调用数据库模型进行信息上传。
在接口操作处编写接收信息并上传的命令。
在这里插入图片描述

        // 数据来源是接受到的req中的body
        // 为避免阻塞,要用异步操作,故加入await
        const model = await Category.create(req.body)
        // 接收返回值
        res.send(model)

这里由于我们是从admin端上传信息到server端,所以需要跨域,需要用到之前下载的cors跨域模块包。同时前端数据接收的是json数据,故引入express的json方法。都在server下主文件index.js中引入。
在这里插入图片描述
到这里后台接口就已经完成,此时到前端使用axios发起接口请求测试。

5.使用axios发起接口请求

在这里插入图片描述
回到我们之前的save方法,将方法同样改为异步请求:

methods: {
    async save(){
        // 这里放axios方法,用来提交数据
        const res = await this.$http.post('categories', this.model)
        console.log(res)
        // 操作完成后跳转到categories地址
        this.$router.push('/categories/list')
        // 提示信息
        this.$message({
            type: 'success',
            message: '保存成功'
        })
    }
}

测试:在这里插入图片描述
成功跳转到categories/list
在这里插入图片描述
注意上面server/routes/admin/index.js文件中异步接收文件时我写了两个res,测试时我发现了这个问题并改正了,但代码已经写好就不改图了,大家查看文章时请跳过这个问题。
在这里插入图片描述
到此该功能就已经实现了,这篇比较长,我们下篇再做list页面和相关查询接口,同时设置子分类实现数据的关联。

相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。 &nbsp; 相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
14天前
|
存储 JSON NoSQL
学习 MongoDB:打开强大的数据库技术大门
MongoDB 是一个基于分布式文件存储的文档数据库,由 C++ 编写,旨在为 Web 应用提供可扩展的高性能数据存储解决方案。它与 MySQL 类似,但使用文档结构而非表结构。核心概念包括:数据库(Database)、集合(Collection)、文档(Document)和字段(Field)。MongoDB 使用 BSON 格式存储数据,支持多种数据类型,如字符串、整数、数组等,并通过二进制编码实现高效存储和传输。BSON 文档结构类似 JSON,但更紧凑,适合网络传输。
51 15
|
22天前
|
存储 NoSQL 关系型数据库
阿里云数据库MongoDB版助力信也科技 打造互联网金融企业样板
我们的风控系统引入阿里云数据库MongoDB版后,解决了特征类字段灵活加减的问题,大大提高了开发效率,极大的提升了业务用户体验,获得了非常好的效果
阿里云数据库MongoDB版助力信也科技 打造互联网金融企业样板
|
2月前
|
NoSQL Cloud Native atlas
探索云原生数据库:MongoDB Atlas 的实践与思考
【10月更文挑战第21天】本文探讨了MongoDB Atlas的核心特性、实践应用及对云原生数据库未来的思考。MongoDB Atlas作为MongoDB的云原生版本,提供全球分布式、完全托管、弹性伸缩和安全合规等优势,支持快速部署、数据全球化、自动化运维和灵活定价。文章还讨论了云原生数据库的未来趋势,如架构灵活性、智能化运维和混合云支持,并分享了实施MongoDB Atlas的最佳实践。
|
3月前
|
NoSQL Cloud Native atlas
探索云原生数据库:MongoDB Atlas 的实践与思考
【10月更文挑战第20天】本文探讨了MongoDB Atlas的核心特性、实践应用及对未来云原生数据库的思考。MongoDB Atlas作为云原生数据库服务,具备全球分布、完全托管、弹性伸缩和安全合规等优势,支持快速部署、数据全球化、自动化运维和灵活定价。文章还讨论了实施MongoDB Atlas的最佳实践和职业心得,展望了云原生数据库的发展趋势。
|
3月前
|
存储 NoSQL MongoDB
MongoDB 数据库引用
10月更文挑战第20天
27 1
|
3月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
3月前
|
存储 NoSQL MongoDB
mongodb的数据库表怎么创建
在此过程中,理解并掌握这些基本操作,是深入探索MongoDB魅力,乃至构建高效数据解决方案的关键所在。通过实践,您将更加深刻地体会到这种随需应变的数据管理模式带来的便利与效率提升。
54 0
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
207 2
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
58 0
|
3月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。