毕设微信小程序之访问ssm后台连接数据库

选毕业设计项目的时候阴差阳错选了微信小程序，就想着毕业搞点新东西（其实微信小程序也推出好久年了，就是学校做的人比较小而已）。那时候（也就是几个月前）啥也不会，就会一点数据库，选了小程序之后第一个反应就是数据要怎么存取?折腾了一段时间后发现了两种方式，云开发和通过后端与数据库交互。云开发比较方便，但是数据库主要是用nosql，可能不是所有人都了解，所以本篇主要是介绍如何通过访问后台与Mysql数据库交互实现数据存储。
前置条件：微信小程序开发者工具；成功搭建ssm环境；Mysql5.7；Ajax

下载安装微信开发者工具

链接：https://pan.baidu.com/s/10asK_UXmIJpPRHRnvs37bw
提取码：gzb3

微信扫码授权登录

创建小程序

• 目录可以自定义，建议不要放在C盘；
• 这里主要是简单演示一下流程，所有AppID选择“使用测试号”，后端服务选择“不使用云服务”；
• 但是自己开发小程序的时候建议还是注册一个AppID，可以使用微信提供的云函数等功能；
  
  初始的模样，hello world
  

index.js	逻辑代码文件，处理小程序的业务逻辑
index.json	配置文件，小程序的导航栏样式，窗口样式等
index.wxml	相当于html文件，编写页面
index.wxss	相当于css文件，编写页面样式

新建test目录

1. pages右键-新建目录-text
2. text目录右键-新建pages-text
   
   打开app.json将“pages/text/text”放到首行，这样默认优先显示的就是text目录的内容了
   

创建测试表account

打开mysql数据库>创建数据库eesy(随便命名)>创建表account(随便命名)

创建实体类

这里默认ssm已经搭建好并且连接数据库了，创建account实体类映射数据库的表

package com.ssm.domain;

import java.io.Serializable;

/**
 * @author 自定义
 * date 2020-03-29
 */
public class Account implements Serializable {
    private Integer id;
    private String name;
    private Float money;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Float getMoney() {
        return money;
    }

    public void setMoney(Float money) {
        this.money = money;
    }

    @Override
    public String toString() {
        return "Account{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", money=" + money +
                '}';
    }
}

编写dao接口方法

简单的查询所有

package com.ssm.dao;

import com.ssm.domain.Account;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
 * @author 自定义
 * date 2020-03-29
 */
@Repository
public interface IAccountDao {
    /**
     * 查询所有账户
     * @return
     */
	@Select("select * from account")
    List<Account> findAll();
  }

编写service接口方法及实现类

service接口

package com.ssm.service;

import com.ssm.domain.Account;
import java.util.List;

/**
 * @author 自定义
 * date 2020-03-29
 */
public interface IAccountService {
    /**
     * 查询所有账户
     * @return
     */
    List<Account> findAll();
}

service实现类

package com.ssm.service.Impl;

import com.ssm.dao.IAccountDao;
import com.ssm.domain.Account;
import com.ssm.service.IAccountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author 自定义
 * date 2020-03-29
 */
@Service("accountService")
public class IAccountServiceImpl implements IAccountService {
    @Autowired
    private IAccountDao accountDao;
    @Override
    public List<Account> findAll() {
        return accountDao.findAll();
    }
}

编写控制器方法

package com.ssm.controller;

import com.ssm.domain.Account;
import com.ssm.service.IAccountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

/**
 * @author 自定义
 * date 2020-02-16
 */
@Controller
@RequestMapping("/account")
public class AccountController {
    @Autowired
    private IAccountService accountService;

    @RequestMapping("/findAll2")
    public @ResponseBody List findAll2(){
        List<Account> all = accountService.findAll();
        return all;
    }
}

假如报500错误
maven导入

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.9.0</version>
    </dependency>

springMVC.xml开启框架注解支持

<mvc:annotation-driven >
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="com.fasterxml.jackson.databind.ObjectMapper">
                        <property name="dateFormat">
                            <bean class="java.text.SimpleDateFormat">
                                <constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss" />
                            </bean>
                        </property>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

小程序发送请求

app.js>globalData>添加后台访问路径

test.js文件中引用app.js

编写getaccount函数请求后台获取account数据，console.log()在控制台打印出来

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getaccount()
  },
getaccount(){
  var that=this
  wx.request({
    url: app.globalData.baseUrl + '/account/findAll2',
    header: {
      'content-type': 'application/json' // 默认值,get方法   
    },
    success: function (res) {
      console.log(res.data)
    }
  })
},

小程序页面显示数据

初始化accountlist数组

将请求成功的数据出入accountlist数组中

getaccount(){
  var that=this
  wx.request({
    url: app.globalData.baseUrl + '/account/findAll2',
    header: {
      'content-type': 'application/json' // 默认值,get方法   
    },
    success: function (res) {

      for(var i=0;i<res.data.length;i++){
        var string='accountlist['+i+']'
        that.setData({
          [string]:{
            name:res.data[i].name,money:res.data[i].money
          }
        })
      }
      console.log(that.data.accountlist)
    }
  })
},

text.wxml
循环读取accountlist的数据

<!--pages/text/text.wxml-->
<view wx:for="{{accountlist}}" wx:for-item="item">
  <text>{{item.name}}</text>
  <text>{{item.money}}</text>
</view>

结尾

简单介绍了如何通过ajax实现请求后端查询数据库的数据，新增删除更新数据库数据也是一样的原理，美化页面的样式可以编写wxss文件。好久没写博客了，忙着准备答辩，答辩没想象中难，主要还是要对自己的项目熟悉吧。

感觉有用就点个赞呗~