（HTTPAPI后端如何查询修改小程序云数据库）vue-admin-template小型后端管理系统node.jskoa2框架访问查询、修改小程序云数据库步骤流程(系列七)

该文章紧接上一篇《进一步node优化koa2后端访问小程序云函数流程步骤(系列六)》进入我的主页左侧可以查看整个系列。

vue-admin-template小型后端管理系统node.jskoa2框架访问查询、修改小程序云数据库步骤流程(系列七)

所需软件：

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代码

我们进入vue-admin-template项目，到src文件夹中的views文件夹，创建文件夹并创建名为calldb.vue文件（记得到router文件夹的index中constantRoutes数组添加路由哦），由于用到饿了吗ui框架大家可以看看官方文档（https://element.eleme.cn/2.0/#/zh-CN/component/message），来看看代码：

<template>
  <div v-loading="loading" class="input">
    <el-form>
      <el-form-item>
        <el-col :span="6">
          <el-input v-model="inputone" placeholder="输入查询内容" />
        </el-col>
        <el-col :span="2">年龄：{
   {
    queryvalue.age }}</el-col>
        <el-col :span="4">
          <el-button type="primary" @click="callfn">查询数据库</el-button>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="6">
          <el-input v-model="inputtwo" placeholder="输入更新内容" />
        </el-col>
        <el-col :span="2">年龄：{
   {
    updatavalue }}</el-col>
        <el-col :span="4">
          <el-button type="primary" @click="updata">更新数据库</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// js代码
import {
    calldbquery, calldbupdata } from '@/api/getsum' // 引入我们之前写好的请求后台的代码，代码在下面
export default {
   
  data() {
   
    // data数据
    return {
   
      loading: false, // 界面是否显示加载中，可在饿了吗查看
      inputone: '', // 存放需要查找的数据
      inputtwo: '', // 存放需要修改的数据
      quer