微信小程序+百度人工智能接口+数据库+服务器（小项目心得以及部分过程）

项目总结

最近几天按照要求，独自完成一个微信小程序的项目。
在这个项目当中需要用到数据库，还要连接百度人工智能的接口，以及通过自己的服务器实现接口的调用，在这个小项目当中还用到的技术有底部导航栏tabBar，以及前端页面如何用弹性盒子进行快速排版，设置成九宫格的样式，如何实现对每一个小盒子进行点击以后跳转到不同的分页面中，如何发起网络请求，如何选择本地照片，如何从一个页面跳转到另一个页面，并且如何携带当前页面参数返回到上一个页面，如何设置轮播图。
技术实现：
底部导航栏tabBar的实现

前端页面如何用弹性盒子进行快速排版，设置成九宫格的样式并实现点击不同的小盒子实现跳转到不同的页面

类似这样的格式
首先要存好图片以及title在数组里，不可以少，最外面的是一个大盒子里面的每一个识别是单独的一个小盒子，然后通过循环在小盒子上展示图片以及文字，大盒子样式（最关键）如下：

Wxml文件书写如下：

在设置完排版以后，并且通过循环显示成功以后
有个问题困扰了我一下，如何实现点击不同识别实现跳转到不同的页面中去呢？可以看到用的是循环，点击事件也只设置了一个绑定，这时候就要用到控制台了，观察我们绑定的click函数可以返回一些什么参数，先给click传一个参数，然后再把这个全部打印出来再通过打印的日志，来观察，点击了不同地方之后传回来的参数有没有什么特别的地方，然后就会发现

el是我传递的参数,这两个参数与点击的图标位置有关系，想到可以进行逻辑判断来操作实现不同的页面跳转。Click函数如下：

跳转函数：

如何选择本地照片并发起网络请求
思路：选择本地照片要用到wx.chooseImage函数，然后再在成功回调函数里，通过wx.getFileSystemManager().readFile函数，读取文件并将这个进行转码转成base64，为什么要转成base64？因为使用的百度接口规定，只能接收base64编码的图片，转好以后就需要我们发起网络请求，只不过是向我们自己搭建的服务器发起请求，然后在success回调函数当中得到返回参数，并进行相应的设置即可。
选择照片函数

选择成功以后读取文件并进行转码

转码成功以后就可以发起网络请求

可以在success里面设置值，请求时会到自己的服务器当中请求，由服务器返回值给微信小程序
服务器端
路由端

 router.post('/animal',controller.ai.animal);

Controller层：

 async animal() {
    const {
      ctx
    } = this;
    const res = await ctx.service.ai.animal(ctx.request.body);
    ctx.body = res;
  }

Service层代码如下：

	async animal(data) {
    const {
      ctx
    } = this;
    const access_token = "百度人工智能token码";
    const res = ctx.curl("按照不同的接口有不同的百度网址?access_token=" + access_token, {
    //传输方式
      method: 'POST',
    //数据类型
      dataType: 'json',
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      data: {
        image: data.image
      }
    }).then(jg => {
      console.log(jg);
      return jg;
    }).catch(err => {
      console.log(err)
      return err;
    });
    return res;
  }

由service层处理后得到接口返回的数据，然后在返回给controller层，再由controller层返回给数据请求者，这样数据就从服务器传到前端了。

如何连接数据库
服务器路由方面

router.post('/animaldb',controller.list.animaldb);

控制层：

async animaldb() {
    const {
      ctx
    } = this;
    const res = await ctx.service.list.animaldb(ctx.request.body);
    ctx.body = res;
  }
 

服务层代码：

 async animaldb(data) {
        const {
            ctx
        } = this;
        //   select chazhao
        const res = ctx.app.mysql.select('要找的数据库表名', {
            where: {
            //查找条件，我在数据库中存了state码，用来判断状态的
                state: 1,
            },
            //   order : [
            //       'id','desc'//desc降序  升序asc
            //   ]
        }).then((result) => {
            if (result.length == 0) {
                return {
                    msg: "没找到任何信息"
                };
            } else if (result.length != 0) {
                console.log(result)

                return result
            }

        }).catch((err) => {
            return err;
        });
        return res;
    }

这样只要在前端发起请求就可以了，下面是微信小程序db文件夹下的wxml

onReady: function () {
    // 读取数据库里面的所有数据
    wx.request({
      url: 'http://127.0.0.1:7001/animaldb',
      method: "POST",
      data: {
        state: 1
      },
      success: (res) => {
        console.log(res)
        this.setData({
          obj: res.data
        })
        console.log(res.data)
      }
    })
  },

在生命周期onready函数当中就可以实现，当点击展示数据库中动物照片进行页面跳转的时候直接在下一个页面上就显示出该数据库，该表中存有什么照片。
这时又有一个问题就是点击选择以后如何判断选择的是哪一个数据并且携带这个数据返回上一个页面呢？
这时候还是要依靠点击事件返回的offsetTop的值，如果点击以后进行选择判断

因为offsetTop传回来的是8，58，108，158所以除以50以后再加1就是对应的序号，就可以设置图片路径的值了。
如何实现页面返回？

Pages就是当前的页面，页面是压进栈的当前页面是数组的最后一个，因为数组是从0开始的，所以length-2就是上一个页面，直接.setData就可以设置图片路径了，这样上一个页面的值就发生了变化，但是我们的界面还没回去，再用wx.navigateBack函数返回上一个页面。

连接数据库时需要注意的事项：

1. 要在config.default.js文件中return前输入以下代码，才能连接自己的数据库
   

2. 在plugin.js文件当中输入以下代码：
   
   经过这两步，才能确保自己的数据库可以正常使用。

轮播图的实现
轮播图的实现用到的是swiper以及swiper-item，具体使用方法就不多说了，十分简单：用它就可以简单实现滑动选择了。

以上就是这次做这个小项目用到的一些技术以及如何解决一些自己遇到的问题，通过这次小项目实训我确实对服务器，数据库，前端，有了更深刻的理解。只有自己亲自动手才能够深刻理解认识到该如何去做，遇到问题该怎么去解决，亲自动手确实对自己的成长更有帮助，记忆更加深刻