微信小程序系列小程序简单连接后端数据库完整示例（附免费下载的源码）（Servlet）
Posted Tuerlechat，
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序系列小程序简单连接后端数据库完整示例（附免费下载的源码）（Servlet）相关的知识，希望对你有一定的参考价值。
【微信小程序系列】小程序简单连接后端数据库完整示例（附免费下载的源码）（Servlet）
登录页面
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 = this
if (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/web_servlet/LoginServlet',
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 = this
inputs['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"一、项目介绍二、相关技术 三、小程序效果图 四、后台管理效果图 五、代码块
一、项目介绍
1. 小程序主要有首页、商品详情、购物车、个人中心等模块。
2. 管理端主要有人员管理、商品管理、订单管理等模块。
二、相关技术
1. html+css+js：微信小程序界面。
2. .NetCore框架+C#程序语言：小程序及后台管理系统API的实现。
3. Layui前端框架：web后台管理界面样式及数据渲染框架。
4. SqlServer数据库：数据支持。
三、小程序效果图
四、后台管理效果图
五、代码块
<!-- 自定义顶部 start -->
<view class="yx-custom" style="padding-top:statusBarHeightpx;background-image: linear-gradient(43deg, #12C206,#00C90F);">
<view class="headerBox">
<view class="leftAddress">
<image class="leftAddressIcon" src="imgUrl/upload/20220608/addressIcon.png" lazy-load="true"></image>
<view class="leftAddressText little">橘猫餐厅</view>
<image class="rightJtIcon" src="imgUrl/upload/20220608/jtBottom.png" lazy-load="true"></image>
</view>
<view class="appletsTitle"></view>
</view>
</view>
<!-- 自定义顶部 占位标签 -->
<view class="yx-empty_custom" style="padding-top:statusBarHeightpx;"></view>
<!-- banner图 -->
<view style="background: url(imgUrl/upload/20220608/topBackImg.png);background-size: 100% 100%;width:750rpx;height:324rpx;">
<view class="bannerBottom"></view>
</view>
<!-- 分类及商品 -->
<view class="containerBox" style="height:nowEquipmentHeight-((statusBarHeight*2)+162)px;">
<scroll-view class="menu-left" scroll-y="true" style="height:nowEquipmentHeight-((statusBarHeight*2)+162)px;">
<view wx:for="menuList" class="little menuIndex==index?'menu-item-check':'menu-item' item.prevClass item.nextClass"
bindtap="clickMenu" data-index="index">item.title</view>
<view class="bottomHeightBox"></view>
</scroll-view>
<scroll-view class="menu-right" scroll-y="true" style="height:nowEquipmentHeight-((statusBarHeight*2)+162)px;">
<view class="menuTitleBox">
<text>热门推荐</text>
</view>
<view class="productContainer">
<view class="productItem" wx:for="20" bindtap="goDetail">
<view class="productImage" style="background: url(imgUrl/upload/20220608/ky.jpg);background-size: 100% 100%;"></view>
<view class="productName little">超级无敌好吃美味烤鸭</view>
<view class="productPriceBox">
<view class="salePrice">
<text style="font-size:22rpx;">￥</text>
<text>58.88</text>
<text style="font-weight:400;">/g</text>
</view>
<view class="oldPrice middleLine">￥98</view>
</view>
</view>
</view>
<view class="bottomHeightBox"></view>
</scroll-view>
</view>
<!-- <image class="scanIcon" src="imgUrl/Areas/dfapi/Content/images/cp.png" lazy-load="true"></image> -->
<image class="scanIcon" src="imgUrlscanUrl" lazy-load="true" bindtap="scanTableCode"></image>
<!--pages/productDetail/index.wxml-->
<!-- 商品轮播图 -->
<view class="product-banner">
<swiper class="product-banner" bindchange='onSlideChange' indicator-dots="indicatorDots" autoplay="autoplay"
interval="interval" duration="duration" circular="circular">
<block wx:for="productBanner" wx:key="id">
<swiper-item>
<view>
<image src="item" class="product-banner" alt="" lazy-load="true" />
</view>
</swiper-item>
</block>
</swiper>
</view>
<!-- 秒杀商品展示 -->
<view wx:if="productActiviType==0" class="activeBox"
style="background: url(imgUrl/upload/20220608/kill-pro-back.png);background-size: 100% 100%;">
<view class="kill-leftBox">
<view class="product-priceBox">
<view style="height:35rpx;line-height: 35rpx;">
<text class="symbol-kill">￥</text>
<text class="price-kill">58.8</text>
<text class="throuth-kill">￥98</text>
</view>
<view class="num-kill displayBox">限量200份</view>
</view>
<view class="justNum-kill">
<text>已售198份</text><text
class="just-rightText">每人限购1份</text>
</view>
</view>
<view class="kill-rightBox">
<view class="just-text">距秒杀结束仅剩</view>
<view class="kill-timeBox">
<view class="clockBox margin-one displayBox">hour</view>
<view class="littleClock">:</view>
<view class="clockBox displayBox">min</view>
<view class="littleClock">:</view>
<view class="clockBox displayBox">second</view>
</view>
</view>
</view>
<!-- 商品名称 -->
<view class="productName-box littleTwo">
超级无敌好吃美味烤鸭
</view>
<!-- 商品描述 -->
<view class="productDesc-box littleTwo">
色泽红艳，肉质细嫩，味道醇厚，肥而不腻
</view>
<!-- 分享奖励 -->
<view class="productShare-money" bindtap="shareProduct">
<view class="left-Share">
<text>该商品分享可得奖励￥10</text>
</view>
<view class="right-Share">
<image src="imgUrl/upload/20220608/share.png" lazy-load="true"></image>
<text>立即分享</text>
</view>
</view>
<!-- 商品配置规格 -->
<!-- <view class="productInfoBox">
<view class="heightInfo"></view>
<view class="Distribution" bindtap="chouseAddress">
<view class="title-info">配送</view>
<view class="chouseSpe">请选择收货地址</view>
<image src="imgUrl/upload/20220608/rightJt.png" lazy-load="true"></image>
</view>
</view> -->
<!-- 服务 -->
<view class="services-box">
<view class="services-left">服务</view>
<view class="services-right">新鲜品质 配送到家 售后无忧</view>
</view>
<!-- 商品评价 -->
<view class="product-reply" >
<view class="reply-title">
<view class="leftReolyCount">
评价(2824)
</view>
<view class="middleSeeMore">
<view>查看全部评价</view>
</view>
<image class="grayRight" src="imgUrl/upload/20220608/rightJt.png" lazy-load="true"></image>
</view>
<view class="replyUserInfo">
<image class="replyUserHead" src="imgUrl/upload/20220608/jocker.jpg" lazy-load="true"></image>
<view class="rightUserName">
<view class="userName little">橘猫大侠</view>
<view class="starBox">
<image src="imgUrl/upload/20220608/star5.png" class="starImg">
</image>
</view>
</view>
</view>
<view class="replyContet littleTwo">
味道好，配送快，值得信赖！
</view>
</view>
<!-- 商品详情 -->
<image class="proImgDetail" src="imgUrl/upload/20220608/prodetailImg.png" lazy-load="true"></image>
<view style="height:56rpx;"></view>
<view class="productDetailTable" wx:if="spuList.length>0">
<view wx:if="!isShowDetail">
<view class="productTableTr">
<view class="leftTr">
<view class="little leftTrText"&g以上是关于微信小程序系列小程序简单连接后端数据库完整示例（附免费下载的源码）（Servlet）的主要内容，如果未能解决你的问题，请参考以下文章
✨ 实战系列 ✨ 1️⃣ 微信小程序自动化测试实践（附 Python 源码）❤️