vue-admin-template小型后端管理系统node访问小程序云函数步骤流程(系列五)
该文章紧接上一篇《vscode后端koa框架http API调用云函数步骤流程(系列四)》进入我的主页左侧可以查看整个系列。
vue-admin-template小型后端管理系统node访问小程序云函数步骤流程(系列五)
所需软件：
vscode，官网链接下载：https://code.visualstudio.com/；
node.js，官网链接下载：http://nodejs.cn/
git，官网链接下载：https://git-scm.com/
安装自己电脑的合适版本即可。
安装这些一般直接点击下一步即可，对于一些国外的软件注意安装目录中最好不要有中文路径，以免出现问题。
进入后端项目还要安装koa，终端输入npm install koa
进入后端项目还要安装request，终端输入npm install request
进入后端项目还要安装request-promise，终端输入npm install request-promise
进入后端项目还要安装koa-router（koa路由），终端输入npm install koa-router
1.首先我们进入vue-admin-template项目目录（如何创建请看我的主页当前系列文章《***创建vue-admin-template小型后端管理系统node项目步骤流程***(系列一)》），找到src目录中的api文件夹中创建名：getsum.js并写入代码，因为我们这个是获取后端服务的所以尽量写在api的文件夹中。
2.我们在getsum.js里面敲入代码如下：
import request from '@/utils/request' // 引入当前自带的request请求，@表示当前项目的src目录
const url = 'http://localhost:3000' // 定义url访问的链接
export function getsum(params) {
// 创建方法params为传入的参数，返回的是promise对象
return request({
params, // 从前端接收，传入给后端的参数
url: `${
url}/consum/sum`, // 访问的链接
method: 'get' // 请求用get，如果后端定义为post那也要用post
})
}
3.然后进入到src目录的views文件夹创建我们页面名：“sum”的文件夹里面再创建sum.vue文件，之后再进入到路径src文件夹下的router目录下的index.js，添加我们刚刚创建文件的路由，在index.js里面找到constantRoutes的对象数组，在里面添加上路由，代码：
{
path: '/sum',//路径名
component: Layout,
redirect: '/sum',
children: [{
path: 'sum',
name: 'sum',
component: () => import('@/views/sum/sum'),//引入的路径
meta: {
title: '小程序云函数加法', icon: 'dashboard' }
}]
},//可以对照的其他路由写法来尝试
4.我们再进入刚刚我们创建sum文件夹中的sum.vue里面写入代码：
当前框架里面有用饿了吗ui大家可以去官网查看直接使用，链接：https://element.eleme.cn/2.0/#/zh-CN/component/form
// 显示界面（html代码）
<template>
<div v-loading="loading">
<el-form :inline="true" class="input">
<el-form-item label="访问小程序云函数的加法运算">
<el-col :span="9">
<el-input v-model="inputone" placeholder="第一个数" />
</el-col>
<el-col style="text-align:center;" :span="3">+</el-col>
<el-col :span="9">
<el-input v-model="inputtwo" placeholder="第二个数" />
</el-col>
<el-col style="text-align:center;" :span="2">=</el-col>
<el-col style="text-align:center;" :span="1">{
{
value }}</el-col>
</el-form-item>
<el-button type="primary" @click="getsumf">访问</el-button>
</el-form>
</div>
</template>
<script>
// js代码
import {
getsum } from '@/api/getsum' // 引入我们之前写好的请求后台的代码
export default {
data() {
// data数据
return {
loading: false, // 界面是否显示加载中，可在饿了吗查看
inputone: '', // 存放当前第一个数的值
inputtwo: '', // 存放当前第二个数的值
value: 0 // 当前的结果
}
},
created() {
// 组件启动生命周期函数
},
methods: {
// 方法都写在这里面
getsumf() {
// 创建一个函数
if (this.inputone && this.inputtwo) {
// 判断当前是否有值，大家可以再用正则加强判断一下
this.loading = true // 页面开启正在加载中
getsum({
// 调用执行刚刚引入的方法
a: this.inputone, // 传入过去的数据
b: this.inputtwo
}).then(res => {
// 调用成功返回
this.loading = false // 结束当前正在加载的界面
this.value = res.data.res.sum // 设置当前的显示的value值
console.log(res)//可以先输入来看看
})
} else {
// 否则弹出警告框（具体可以查看饿了吗框架）
this.$message({
showClose: true, // 是否显示关闭按钮
message: '输入框不能为空哦！', // 弹出内容
type: 'error' // 弹出样式
})
}
}
}
}
</script>
<style>
.input{
margin:10px;
}
body{
margin: 0;
}
</style>
5.保存，然后在终端输入：npm run dev启动运行后，页面左侧导航栏应该会显示我们刚刚添加的导航，我们点击进入看看
页面的console会出现跨域问题，我们切换到后端代码：
进入sum.js文件并修改一下代码，代码如下：
我们先查看小程序官网文档的http API的调用链接：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/functions/invokeCloudFunction.html
（该代码就是我们前端发送请求的后端路由，具体可以看看进入我的主页查看《vscode后端koa框架如何调用HTTPAPI小程序云函数步骤流程(四)》，小程序云函数的代码也在里面）
const Router = require('koa-router')//引用koa-router
const router = new Router()//创建路由实例
const rp = require('request-promise')//引用request-promise
const accesstoken = require('../utils/getAccessToken.js')//引用之前写的获取accesstoken（可以在我上一篇文章中找到）
const ENV = 'laile-lmrme'//小程序环境名
router.get('/sum', async (ctx, next) => {
//用get方法创建路由
const access_token = await accesstoken()//调用accesstoken获取到accesstoken，详情代码在下面的链接
const url = `https://api.weixin.qq.com/tcb/invokecloudfunction?access_token=${
access_token}&env=${
ENV}&name=sum`
//访问腾讯服务器传入的参数可以查看小程序官网文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/functions/invokeCloudFunction.html
const options = {
//定义使用request-promise传入的对象
method: 'POST',//小程序规定需要用post传输
uri: url,//传入我们定义的url地址
body: {
//向小程序云函数传入的数据
a: 1,
b: 3
},
json: true // 自动将正文字符串为JSON
};
//ctx.body是返回值
const data = await rp(options)//写好传入对象后执行rp获取数据，因为是异步所以要加await才能赋值
.then((res) => {
//调用成功res
// console.log(res)
return JSON.parse(res.resp_data)//转成对象
})
.catch((err) => {
// POST failed...
});
ctx.body={
data
}
})
module.exports = router//将路由暴露出去
accesstoken的代码《node.js后端koa获取微信access_token详细步骤流程(系列三)》
言归正传
解决跨域，我这里使用koa2-cors来解决，在后端项目进入终端安装npm install koa2-cors（记得在终端进入对应的项目目录在安装），然后引用再设置，以下是app.js主文件代码：
const Koa=require('koa')//引用koa框架
const app=new Koa()//创建koa框架实例
const Router=require('koa-router')//引用koa路由
const router=new Router()//创建koa路由实例
const cors=require('koa2-cors')
app.use(cors({
//设置cors策略，切记要写在倒入路由代码前面！！！
origin:['http://localhost:9528'],//匹配我们前端的网站白名单
credentials:true,
}))
const sum=require('./controller/sum.js')//倒入路由节点文件
router.use('/consum',sum.routes())//定义路由方法
app.use(router.routes())//申明路由
app.use(router.allowedMethods())//运行get、post方法实现
app.use(async (ctx)=>{
//首页显示内容
ctx.body="首页显示内容"
})
app.listen(3000,()=>{
//设置项目端口号，开启成功执行回调
console.log('项目开启成功')
})
6.小程序云函数代码（大家可以根据自己的需求进行修改）：
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
return {
//返回传入来的a加b
sum: event.a + event.b
}
}
7.然后我们终端输入：node app.js启动后端项目（每次修改了后端代码需要重启服务器），然后我们再回到vue管理系统进行刷新看看跨域问题应该能解决，大致的流程就是：首先我们的前端网页vue后端管理系统向当前后端发送请求，然后当前后端再向小程序云函数发送请求，得到小程序云函数的返回值后，再一起返回给前端。如果还有问题大家可以在底下评论留言，大家一起讨论一下。
欢迎大家继续看我下一篇文章：《node进一步优化koa2后端访问小程序云函数流程步骤(系列六)》
本文章是我一个字一个字的打出来，图也是我自己做，也是按照我一个初学者的理解思维去写的，本人也是正在看各种视频学习进步中，发现一些好的会写出来也算给自己加深印象吧，顺便记录一下代码，如果有说的不对的地方还望指出，万分感激！
谢谢谢谢