⼩程序连接MySQL数据库的全过程⽬录
简要说明：
准备⼯作
MySQL配置数据库、数据表
⽬录结构
客户端代码实现
服务器端代码实现
效果展⽰
总结
简要说明：
承接上⼀个商品列表页，在服务器端连接MySQL数据库，通过条件匹配查寻数据并显⽰在客户端
准备⼯作
1、node.js
2、开发者⼯具
3、MySQL数据库
MySQL配置数据库、数据表
通过可视化的Workbench，可以很容易的建⽴⾃⼰的数据库、数据表。这⾥直接截个图就好了
推荐⼀个⼯具 Navicat for MySQL，以后可以通过它连接⾃⼰的数据库
⽬录结构
客户端代码实现
index.wxml (变化不⼤，加了跳转按钮）
<view class="contain">
<form bindsubmit="submit">
<view>
<text id="top">商品</text>
<text id="r" bindtap="jump">了解更多</text>
<!-- <button type="default" bindtap="jump">了解更多</button> -->    <!-- <button>详情</button> -->
<checkbox-group name="skills">
<label wx:for="{{skill}}" wx:key="value">
<checkbox value="{{item.value}}" checked="{{item.checked}}">          <!-- {{item.name}} -->
<image id="img" src="../image/{{item.name}}.jpg"></image>
<view><text>{{}}{{}}</text></view>
</checkbox>
</label>
</checkbox-group>
</view>
<button form-type="submit">提交</button>
<text id="sum">合计:{{result}}</text>
</form>
</view>
index.wxss
/* pages/index/index.wxss */
.contain{
/* background-color: aqua; */
margin: 15px auto;
}
#top{
/* margin:0 auto; */
margin-left: 20px;
}
#r{
margin-left: 150px;
}
#img{
/* float: left; */
width: 120px;
height: 120px;
}
label{
height: 150px;
position: relative;
display: block;
margin-left: 20px;
}
label view{
position: absolute;
display: inline;
padding-right: 20px;
padding-top: 50px;
}
#sum{
margin-left: 20px;
}
index.js (变化不⼤，加了跳转函数）
// pages/index/index.js
Page({
/**
* 页⾯的初始数据
*/
data: {
skill: [
mysql下载后的初次使用
{name:'01',value:600,checked:false,text:'宇智波佐助\n价格: 600.00'},
{name:'02',value:300,checked:false,text:'宇智波鼬\n价格: 300.00'},
{name:'03',value:500,checked:false,text:'旗⽊卡卡西\n价格: 500.00'},
{name:'04',value:700,checked:false,text:'路飞、红发⾹克斯\n价格: 700.00'},      {name:'07',value:350,checked:true,text:'索隆\n价格: 350.00'},
{name:'08',value:799,checked:true,text:'路飞\n价格: 799.00'},
],
result:[],
names:[]
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
var that =this
url: '127.0.0.1:3000/',
success:function(res){
// console.log(res.data)
that.setData({names:res.data})
}
})
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/
**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function () {
},
submit:function(e){
var that=this
method:'POST',
url: '127.0.0.1:3000',
data:e.detail.value,
success:function (res){
const a=res.data.skills
console.log(a)
//求和计算
const reducer=(accumlator,currentValue)=>parseInt(accumlator)+parseInt(currentValue)        console.duce(reducer))
const duce(reducer)
that.setData({result:sum})
}
})
},
jump:function(){
wx.navigateTo({
url: '../about/about',
})
}
})
index.json (未做修改）
about.wxml
<!--pages/about/about.wxml-->
<view>
<view id="look">
<text>查看⼀下他们的详细资料吧!</text>
</view>
<form bindsubmit="submit">
<view class="select">
<input id="input" name="name" type="text"  value="路飞"/>
<button form-type="submit" id="btn">搜索</button>
</view>
</form>
<view id="result">
<text>搜索结果：</text>
<textarea name="" id="out" cols="30" rows="10">{{text[0].detail}}</textarea>  </view>
<button id="bottom" bindtap="back">返回</button>
</view>
about.wxss
/* pages/about/about.wxss */
#look{
margin-top: 20px;
margin-bottom: 20px;
}
#input{
border: 1px solid gray;
}
#btn{
margin-top: 10px;
}
#out{
border: 1px solid gray;
}
#bottom{
margin-top: 50px;
}
#result{
margin-top: 20px;
}
about.js
/
/ pages/about/about.js
Page({
/**
* 页⾯的初始数据
*/
data: {
text:{}
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。