【微信小程序系列】微信小程序连接后端数据库（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）案例相关推荐

【微信小程序系列】小程序简单连接后端数据库完整示例（附免费下载的源码）（Servlet）
[微信小程序系列]小程序简单连接后端数据库完整示例(附免费下载的源码)(Servlet) 登录页面 login.wxml <view class="page">< ...
微信小程序系列2——小程序页面渲染和逻辑的关系
前言小程序是基于双线程模型的,在这个模型中,小程序的逻辑层与渲染层分开在不同的线程运行,这跟传统的Web 单线程模型有很大的不同,使得小程序架构上多了一些复杂度,也多了一些限制,同时具备渲染快. ...
微信社交小程序服务器,Day12-微信小程序实战-交友小程序-搭建服务器与上传文件到后端...
要搞一个小型的cms内容发布系统因为小程序上线之后,直接对数据库进行操作的话,慧出问题的,所以一般都会做一个管理系统,让工作人员通过这个管理系统来对这个数据库进行增删改查微信小程序其实给我们提供了 ...
微信小程序本地mysql_微信小程序系列之使用缓存在本地模拟服务器数据库
微信小程序系列之使用缓存在本地模拟服务器数据库现在将data.js这个文件视作是本地数据库的初始化数据,要做的第一件事就是讲这些初始化数据装进缓存中,以形成数据库的初始化数据整个应用程序的生命周期 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
【微信小程序系列：一】携带参数跳转半屏微信小程序先 A-＞B 后 B -＞A
一.前言 hello,打算以后弄个微信小程序的常用技巧的文章系列,这是第一篇~ 以后会持续更二.概念普通的小程序里跳转其它小程序大家都知道,用wx.navigateToMiniProgram,而跳 ...
微信小程序开发-微信支付功能【WxMaService 获取openid，WxPayService建微信订单，接收微信支付异步通知回调方法，附有完整前后端代码】
前提:对小程序开发有一定的基础:小程序已发布使用,已开通微信支付,关联商户号. 微信小程序平台:小程序平台微信开发者文档:开发者文档微信小程序支付API 地址:微信支付文档地址微信支付平台:微信 ...
微信小程序之微信登陆 —— 微信小程序教程系列（20）
简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...
微信小程序获取手机号登录(Java后端)
1.添加依赖 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok< ...

【微信小程序系列】微信小程序连接后端数据库（SSM）案例

【微信小程序系列】微信小程序连接后端数据库（SSM）案例

登录页面

主页

后端Controller代码

运行截图

登录页面

数据显示页面

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

【微信小程序系列】微信小程序连接后端数据库（SSM）案例相关推荐

最新文章

热门文章