微信小程序 + 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

• 点赞
• 收藏
• 分享
• 文章举报

ayp86300 发布了0 篇原创文章 · 获赞 0 · 访问量 277 私信 关注