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

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

文章目录

下载安装微信开发者工具
创建小程序
新建test目录
创建测试表account
创建实体类
编写dao接口方法
编写service接口方法及实现类
编写控制器方法
小程序发送请求
小程序页面显示数据
结尾

下载安装微信开发者工具

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

微信扫码授权登录

创建小程序

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

初始的模样，hello world


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

新建test目录

pages右键-新建目录-text
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;}@Overridepublic 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 {@Autowiredprivate IAccountDao accountDao;@Overridepublic 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 {@Autowiredprivate 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=thiswx.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=thiswx.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文件。好久没写博客了，忙着准备答辩，答辩没想象中难，主要还是要对自己的项目熟悉吧。

感觉有用就点个赞呗~