微信小程序 + thinkjs + mongoDB 实现简单的前后端交互

说明：这段时间跟老师学习了一下mongodb数据库，这次也是第一次搭建后台服务，出了不少差错，特此来复盘一下，非常感谢对我提供帮助的同学~

一、使用 thinkjs + mongodb 创建后台服务

1.安装 thinkjs

安装thinkjs工具包

npm install -g think-cli

2.创建 thinkjs 项目

thinkjs new demo;
cd demo;
npm install;
npm start;

3.让框架支持 mongo 模型

在demo项目的config文件夹中的extend.js文件中添加think-mongo模块

const mongo = require('think-mongo');

module.exports = [
    mongo(think.app)
]

4.连接 mongodb

安装think-mongo

npm install think-mongo

修改config文件夹下的adapter.js文件的数据库

exports.model = {
    type: 'mongo',
    common: {
        logConnect: isDev,
        logger: msg => think.logger.info(msg)
    },
    mongo: {
        host: '127.0.0.1',
        database: 'mytest',  // 自己创建的数据库名字
        port: 27017,
        user: '',
        password: ''
    }
};

5.创建 mongodb 数据库

在demo项目根目录下新建一个db文件夹，用于存放数据，并开启数据库服务。

注意：以后也要在此文件夹下开启服务，不然后台连接不到数据库

mkdir db
cd db
mongod --dbpath=./

windows用户这里使用powershell终端，请勿使用cmd命令窗口。

6.添加路由

修改 index 控制器

进入controller文件夹中的index文件夹当中，修改返回数据

module.exports = class extends Base {
    indexAction() {
        return this.json({nihao: '\'nihao\''});
    }
};

7.添加自己的控制器

新建一个任意名字的.js文件，然后自定义控制器返回的内容

const Base = require('./base.js');

module.exports = class extends Base {
    async indexAction() {
        // 获取从微信小程序传过来的 data 数据
        const data1 = this.post('data');
        // 将获取的数据 data1 添加到 student 表中
        const a = await this.mongo('student').add(data);
        // 从控制台输出 a 的地址
        console.log(a);
        return this.success('success');
    }
    
    async addAction() {
        const test = 'hello, world';
        return this.json({test});
    }
}

8.添加一个 mongodb 的控制器

在controller文件夹新建一个user.js文件，里面写入控制器的内容

const Base = require('./base.js');

module.exports = class extends Base {
    async indexAction() {
        // controller 中实例化模型
        const user = await this.mongo('user').find();
        if (think.isEmpty(user)) {
            return this.fail();
        } else {
            return this.success(user);
        }
    }
};

9.添加 model 文件

对每个模型进行各种操作，例如这里读取数据

module.exports = class extends think.Mongo {
    find() {
        return this.model('user').select();
    };
}

二、配置微信小程序

微信小程序的注册与创建这里就不赘述了，直接进入主题

1.在页面加载函数中加入wx.request

在创建的微信小程序的index.js文件中加入如下代码

Page({
    onLoad: function() {
        wx.request({
            // 这里的 test 是上面第7步创建的自己的控制器的名字
            url: 'http://127.0.0.1:8360/test/index'
            method: 'POST',
            data: {
                data: 'hello'
            },
            success: function (res) {
                console.log(res.data)
            }
        })
    }
})

三、检验前后端交互

1.开启demo服务

在demo项目目录下

npm start;

2.开启mongodb数据库

在demo目录下的db文件夹内开启数据库服务

cd db
mongod --dbpath=./

创建数据库和集合

use database
db.createCollection("collection")

3.编译微信小程序

结束

预期结果：

数据库中出现了微信小程序中添加的 data 数据，则前端数据成功发送给后台存入数据库；

微信小程序成功接收到后台返回的success信息；

demo项目控制台输出了一串接收数据的变量的地址。

至此，就完成了一个简单的前后端交互啦~

转载于:https://www.cnblogs.com/xpcloud/p/11409072.html