【微信小程序系列】微信小程序連接后端數據庫（SSM）案例

登錄頁面

login.wxml

<view class="page"><loading hidden="{{loadingHidden}}" bindchange="loadingChange" bindtap="tapLoading">加載中...</loading><modal no-cancel="true" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">{{modalContent}}</modal><view class="page__hd"></view><view class="page__bd"><form bindsubmit="formSubmit" bindreset="formReset"><view class="section"><view class="section__title">編號</view><input type="number" bindinput="inputChange" id="username" placeholder="請輸入編號"/></view><view class="section"><view class="section__title">密碼</view><input type="number" bindinput="inputChange" id="password" placeholder="請輸入密碼"/></view><view class="btn-area"><view class="button-wrapper"><button type="primary" formType="submit" class="primary">查詢</button></view><view class="button-wrapper"><button type="default" formType="reset">重置</button></view></view></form></view> </view>

login.js

// pages/login/login.js var inputs = {}; Page({/*** 頁面的初始數據*/data: {loadingHidden: true,modalHidden: true,modalContent: '',inputs: {}},//input事件inputChange: function (e) {inputs[e.currentTarget.id] = e.detail.value},//loading組件的綁定事件tapLoading: function () {this.setData({loadingHidden: true})},loading: function () {this.setData({loadingHidden: false})},//重置按鈕formReset: function () {inputs = {}wx.setStorageSync('username', '')wx.setStorageSync('password', '')},//提交按鈕formSubmit: function () {var page = thisif (inputs['username'] == null || inputs['username'] == '') {page.showModal('請輸入編號')return}if (inputs['password'] == null || inputs['password'] == '') {page.showModal('請輸入密碼')return}page.loading()var that = this;wx.request({url: 'http://localhost:8080/ssm1_war/jsp/teacherLogin',method: 'GET', //請求方式header: { "content-type":"application/x-www-form-urlencoded"},data: {teano:inputs['username'],teapwd:inputs['password']},success: function(res) {// ,JSON.stringify(res.data)console.log("獲取到的用戶信息成功: " + res.data);that.setData({list : res.data,})if(res.data == "登錄成功") {wx.hideNavigationBarLoading()wx.navigateTo({// 必須要序列化成字符串，URL編碼自動完成url: '/pages/index2/index2?data=' + JSON.stringify(res.data) + '&username=' + inputs['username']})} else {that.setData({loadingHidden: true})wx.showToast({title: '登錄失敗',icon: 'none',duration: 1500,})}},fail: function() {app.consoleLog("請求數據失敗");},})},/*** 生命周期函數--監聽頁面加載*/onLoad(options) {},//提交按鈕提示showModal: function (msg) {this.setData({modalHidden: false,modalContent: msg})},modalCancel: function () {this.setData({modalHidden: true})},modalConfirm: function () {this.setData({modalHidden: true})},/*** 生命周期函數--監聽頁面加載*/onLoad: function () {// 調用應用實例的方法獲取全局數據var that = thisinputs['username'] = wx.getStorageSync('username')inputs['password'] = wx.getStorageSync('password') // 這里沒有加密安全性較低this.setData({inputs: inputs})},})

login.wxss

/**index.wxss**/ .userinfo {display: flex;flex-direction: column;align-items: center; }.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%; }.userinfo-nickname {color: #aaa; }.usermotto {margin-top: 200px; }

app.wxss

page {background-color: #fbf9fe;height: 100%; } .container {display: flex;flex-direction: column;min-height: 100%;justify-content: space-between; } .page-header {display: flex;font-size: 32rpx;color: #aaa;margin-top: 50rpx;flex-direction: column;align-items: center; } .page-header-text {padding: 20rpx 40rpx; } .page-header-line {width: 150rpx;height: 1px;border-bottom: 1px solid #ccc; }.page-body {width: 100%;display: flex;flex-direction: column;align-items: center;flex-grow: 1;overflow-x: hidden; } .page-body-wrapper {margin-top: 100rpx;display: flex;flex-direction: column;align-items: center;width: 100%; } .page-body-wrapper form {width: 100%; } .page-body-wording {text-align: center;padding: 200rpx 100rpx; } .page-body-info {display: flex;flex-direction: column;align-items: center;background-color: #fff;margin-bottom: 50rpx;width: 100%;padding: 50rpx 0 150rpx 0; } .page-body-title {margin-bottom: 100rpx;font-size: 32rpx; } .page-body-text {font-size: 30rpx;line-height: 26px;color: #ccc; } .page-body-text-small {font-size: 24rpx;color: #000;margin-bottom: 100rpx; } .page-body-form {width: 100%;background-color: #fff;display: flex;flex-direction: column;width: 100%;border: 1px solid #eee; } .page-body-form-item {display: flex;align-items: center;margin-left: 30rpx;border-bottom: 1px solid #eee;height: 88rpx;font-size: 34rpx; } .page-body-form-key {width: 180rpx;color: #000; } .page-body-form-value {flex-grow: 1; } .page-body-form-value .input-placeholder {color: #b2b2b2; }.page-body-form-picker {display: flex;justify-content: space-between;height: 100rpx;align-items: center;font-size: 36rpx;margin-left: 20rpx;padding-right: 20rpx;border-bottom: 1px solid #eee; } .page-body-form-picker-value {color: #ccc; }.page-body-buttons {width: 100%; } .page-body-button {margin: 25rpx; } .page-body-button image {width: 150rpx;height: 150rpx; }.green{color: #09BB07; } .red{color: #F76260; } .blue{color: #10AEFF; } .yellow{color: #FFBE00; } .gray{color: #C9C9C9; }.strong{font-weight: bold; }.bc_green{background-color: #09BB07; } .bc_red{background-color: #F76260; } .bc_blue{background-color: #10AEFF; } .bc_yellow{background-color: #FFBE00; } .bc_gray{background-color: #C9C9C9; }.tc{text-align: center; }.page input,checkbox{padding: 20rpx 30rpx;background-color: #fff; } checkbox, radio{margin-right: 10px; }.btn-area{padding: 0 30px; } .btn-area button{margin-top: 20rpx;margin-bottom: 20rpx; }.page {min-height: 100%;flex: 1;background-color: #FBF9FE;font-size: 32rpx;font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;overflow: hidden; } .page__hd{padding: 50rpx 50rpx 50rpx 50rpx;text-align: center; } .page__title{display: inline-block;padding: 20rpx 40rpx;font-size: 32rpx;color: #AAAAAA;border-bottom: 1px solid #CCCCCC; } .page__info{display: inline-block;font-size: 38rpx;color: #AAAAAA; } .page__desc{display: none;margin-top: 20rpx;font-size: 26rpx;color: #BBBBBB; }.section{margin-bottom: 80rpx; } .section_gap{padding: 0 30rpx; } .section__title{margin-bottom: 16rpx;padding-left: 30rpx;padding-right: 30rpx; } .section_gap .section__title{padding-left: 0;padding-right: 0; }.shading{background-color: #eee;background-image: -moz-linear-gradient(45deg,#fff 25%, transparent 25%, transparent 50%,#fff 50%,#fff 75%, transparent 75%, transparent);background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.2)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.2)),color-stop(75%,rgba(255,255,255,0.2)),color-stop(75%,transparent));background-size: 16px 16px;}

主頁

index2.wxml

<!--pages/index2/index2.wxml--> <view> <text>------獲取數據（單條）------\n編號：</text> <input type="number" bindinput="teanoput" placeholder="請輸入編號"/> <text>\n------獲取數據（多條）------\n是否黨員：</text> <radio-group bindchange="cppchange" class="oneline"><radio value="true">是</radio><text decode="true">&ensp;</text><radio value="false">否</radio> </radio-group> </view> <button bindtap="oneInfo">獲取數據（單條）</button><text>\n</text> <button bindtap="someInfo">獲取數據（多條）</button><text>\n</text> <button bindtap="addInfo">添加數據</button><text>\n</text> <button bindtap="modInfo">修改數據</button><text>\n</text> <button bindtap="delInfo">刪除數據</button><text>\n</text> <button bindtap="selectAll">刷新數據</button> <view wx:for="{{list}}"><view><text>編號:----------{{list[index].teano}}------------\n姓名：{{list[index].teaname}}\n密碼：{{list[index].teapwd}}\n</text><view>圖片：<image src="{{list[index].photo}}"/></view><text>性別: {{list[index].teasex}}\n職稱: {{list[index].title}}\n出生日期：{{list[index].birthday}}\n是否黨員：{{list[index].cpp}}\n薪水：{{list[index].salary}}</text></view> </view>

index2.js

// pages/index2/index2.js Page({/*** 頁面的初始數據*/data: {//用于獲取的編號no: "",//用于添加信息字段teano: "",teapwd: "",teaname: "",teasex: "",title: "",photo: "",birthday: "",cpp: "",salary: "",//數據顯示list:[],},//輸入框事件teanoput:function(e) {this.setData({no:e.detail.value})console.log(e.detail.value);},cppchange:function(e) {this.setData({cpp:e.detail.value})console.log(e.detail.value);},//獲取數據（單條）oneInfo:function() {var that = this;wx.request({url: 'http://localhost:8080/ssm1_war/jsp/teacherSel',method: 'GET', //請求方式data: {no: this.data.no},header: { "content-type":"application/x-www-form-urlencoded"},success: function(res) {// ,JSON.stringify(res.data)console.log("獲取到的用戶信息成功: " + res.data);that.setData({list : res.data,})},fail: function() {app.consoleLog("請求數據失敗");},})},//獲取數據（多條）someInfo:function() {var that = this;wx.request({url: 'http://localhost:8080/ssm1_war/jsp/someSel',method: 'GET', //請求方式data: {cpp:this.data.cpp},header: { "content-type":"application/x-www-form-urlencoded"},success: function(res) {// ,JSON.stringify(res.data)console.log("獲取到的用戶信息成功: " + res.data);that.setData({list : res.data,})},fail: function() {app.consoleLog("請求數據失敗");},})},//添加數據addInfo:function () {var that = this;wx.request({url: 'http://localhost:8080/ssm1_war/jsp/teacherAdd',method: 'GET', //請求方式data: {teano:'333',teapwd:'333',teaname:'張三',teasex:'男',title:'教授',photo:"http://tva3.sinaimg.cn/large/006oOWahly1fprcrxotpkj306o06ojr9.jpg",birthday:'1990-3-4',cpp:'true',salary:'3000.88'},header: { "content-type":"application/x-www-form-urlencoded"},success: function(res) {// ,JSON.stringify(res.data)console.log("獲取到的用戶信息成功: " + res.data);that.setData({list : res.data,})},fail: function() {app.consoleLog("請求數據失敗");},})},//修改數據modInfo:function() {var that = this;wx.request({url: 'http://localhost:8080/ssm1_war/jsp/teacherMod',method: 'GET', //請求方式data: {teano:'333',teaname:'李四',teasex:'女',title:'副教授',},header: { "content-type":"application/x-www-form-urlencoded"},success: function(res) {// ,JSON.stringify(res.data)console.log("獲取到的用戶信息成功: " + res.data);that.setData({list : res.data,})},fail: function() {app.consoleLog("請求數據失敗");},})},//刪除數據delInfo: function() {var that = this;wx.request({url: 'http://localhost:8080/ssm1_war/jsp/teacherDel',method: 'GET', //請求方式data: {no:"333"},header: { "content-type":"application/x-www-form-urlencoded"},success: function(res) {// ,JSON.stringify(res.data)console.log("獲取到的用戶信息成功: " + res.data);that.setData({list : res.data,})},fail: function() {app.consoleLog("請求數據失敗");},})},//刷新數據selectAll: function () {var that = this;wx.request({url: 'http://localhost:8080/ssm1_war/jsp/teacherAll',method: 'GET', //請求方式header: { "content-type":"application/x-www-form-urlencoded"},success: function(res) {// ,JSON.stringify(res.data)console.log("獲取到的用戶信息成功: " + res.data);that.setData({list : res.data,})},fail: function() {app.consoleLog("請求數據失敗");},})},/*** 生命周期函數--監聽頁面加載*/onLoad(options) {var that = this;wx.request({url: 'http://localhost:8080/ssm1_war/jsp/teacherAll',method: 'GET', //請求方式header: { "content-type":"application/x-www-form-urlencoded"},success: function(res) {// ,JSON.stringify(res.data)console.log("獲取到的用戶信息成功: " + res.data);that.setData({list : res.data,})},fail: function() {app.consoleLog("請求數據失敗");},})},})

index2.wxss

/* pages/index2/index2.wxss */ image {width: 150px;height: 150px; } input {display: inline-table; } .oneline {display: inline-table; }

后端Controller代碼

TeacherController.java

@Controller @RequestMapping("/jsp") public class TeacherController {@Resourcepublic TeacherService teacherService;//查詢所有數據@RequestMapping(value="/teacherAll",method = RequestMethod.GET,produces={"application/json;charset=UTF-8"})@ResponseBodypublic List<Teacher> teacherAll() {List<Teacher> teacherlist = new ArrayList();teacherlist = teacherService.getAll();System.out.println("---------------------------------------------------------------"+ Arrays.toString(teacherlist.toArray())); // String json = JSON.toJSONString(teacherlist);return teacherlist;}//按編號查詢數據（單條）@RequestMapping(value="/teacherSel",method = RequestMethod.GET,produces={"application/json;charset=UTF-8"})@ResponseBodypublic List<Teacher> teacherSel(String no) {List<Teacher> teacherlist = new ArrayList();teacherlist = teacherService.findInfo(no);System.out.println("---------------------------------------------------------------"+ Arrays.toString(teacherlist.toArray())); // String json = JSON.toJSONString(teacherlist);return teacherlist;}//按性別查詢數據（多條）@RequestMapping(value="/someSel",method = RequestMethod.GET,produces={"application/json;charset=UTF-8"})@ResponseBodypublic List<Teacher> someSel(boolean cpp) {List<Teacher> teacherlist = new ArrayList();teacherlist = teacherService.someInfo(cpp);System.out.println("---------------------------------------------------------------"+ Arrays.toString(teacherlist.toArray())); // String json = JSON.toJSONString(teacherlist);return teacherlist;}//添加數據@RequestMapping(value="/teacherAdd",method = RequestMethod.GET,produces={"application/json;charset=UTF-8"})@ResponseBodypublic String teacherAdd(Teacher teacher) {int n = 0;n = teacherService.add(teacher);if(n>0){return "添加成功";}return "添加失敗";}//更新數據@RequestMapping(value="/teacherMod",method = RequestMethod.GET,produces={"application/json;charset=UTF-8"})@ResponseBodypublic String teacherMod(Teacher teacher) {int n = 0;n = teacherService.modInfo(teacher);if(n>0){return "修改成功";}return "修改失敗";}//刪除數據@RequestMapping(value="/teacherDel",method = RequestMethod.GET,produces={"application/json;charset=UTF-8"})@ResponseBodypublic String teacherDel(String no) {int n = 0;n = teacherService.delInfo(no);if(n>0){return "刪除成功";}return "刪除失敗";}//登錄@RequestMapping(value="/teacherLogin",method = RequestMethod.GET,produces={"application/json;charset=UTF-8"})@ResponseBodypublic String teacherLogin(Teacher teacher) {Teacher t1 = new Teacher();t1 = teacherService.selectByTeacher(teacher);if (t1 != null) {return "登錄成功";} else {return "登錄失敗";}} }

運行截圖

登錄頁面

輸入正確的賬號和密碼，點擊查詢

兩個字段有空值會相應顯示

輸入錯誤的話會顯示

然后跳轉至數據顯示頁面

數據顯示頁面

（一些前端輸入條件我沒有寫很多，只是寫了兩條來隨便測試一下，自己可以看自己需求來自己設置）

比如選擇一下是黨員的數據，然后點擊獲取數據（多條按鈕），就可以看到下面顯示多條數據

也可以看到顯示的數據都是正確的

同時也可以用瀏覽器訪問一下后端請求來查看一下數據顯示信息

查看后端接口功能是否正常

當接口沒寫好時也可以在瀏覽器調試一下

全部教師信息

是黨員的教師信息

總結

以上是生活随笔為你收集整理的【微信小程序系列】微信小程序连接后端数据库（SSM）案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。