微信小程序連接MySQL數(shù)據(jù)庫(kù)的全過程
更新時(shí)間：2022年01月21日 11:42:50 作者：mentality_sx
微信小程序是不能直接連接數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)操作的,這是出于安全的考慮,下面這篇文章主要給大家介紹了關(guān)于微信小程序連接MySQL數(shù)據(jù)庫(kù)的全過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
簡(jiǎn)要說明：
承接上一個(gè)商品列表頁(yè)，在服務(wù)器端連接MySQL數(shù)據(jù)庫(kù)，通過條件匹配查尋數(shù)據(jù)并顯示在客戶端
準(zhǔn)備工作
1、node.js
2、微信開發(fā)者工具
3、MySQL數(shù)據(jù)庫(kù)
MySQL配置數(shù)據(jù)庫(kù)、數(shù)據(jù)表
通過可視化的Workbench，可以很容易的建立自己的數(shù)據(jù)庫(kù)、數(shù)據(jù)表。這里直接截個(gè)圖就好了
推薦一個(gè)工具 Navicat for MySQL,以后可以通過它連接自己的數(shù)據(jù)庫(kù)
目錄結(jié)構(gòu)
客戶端代碼實(shí)現(xiàn)
index.wxml (變化不大，加了跳轉(zhuǎn)按鈕）
<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>{{item.text}}{{}}</text></view>
</checkbox>
</label>
</checkbox-group>
</view>
<button form-type="submit">提交</button>
<text id="sum">合計(jì):{{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 (變化不大，加了跳轉(zhuǎn)函數(shù)）
// pages/index/index.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
skill: [
{name:'01',value:600,checked:false,text:'宇智波佐助\n價(jià)格: 600.00'},
{name:'02',value:300,checked:false,text:'宇智波鼬\n價(jià)格: 300.00'},
{name:'03',value:500,checked:false,text:'旗木卡卡西\n價(jià)格: 500.00'},
{name:'04',value:700,checked:false,text:'路飛、紅發(fā)香克斯\n價(jià)格: 700.00'},
{name:'07',value:350,checked:true,text:'索隆\n價(jià)格: 350.00'},
{name:'08',value:799,checked:true,text:'路飛\n價(jià)格: 799.00'},
],
result:[],
names:[]
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
var that =this
wx.request({
url: 'http://127.0.0.1:3000/',
success:function(res){
// console.log(res.data)
that.setData({names:res.data})
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
},
submit:function(e){
var that=this
wx.request({
method:'POST',
url: 'http://127.0.0.1:3000',
data:e.detail.value,
success:function (res){
const a=res.data.skills
console.log(a)
//求和計(jì)算
const reducer=(accumlator,currentValue)=>parseInt(accumlator)+parseInt(currentValue)
console.log(a.reduce(reducer))
const sum=a.reduce(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>查看一下他們的詳細(xì)資料吧!</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>搜索結(jié)果：</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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
text:{}
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
},
back:function(){
wx.navigateBack()
},
//提交
submit:function(e){
var that=this
wx.request({
method:'POST',
data:e.detail.value,
url: 'http://127.0.0.1:3000/show',
success:function(res){
// console.log(res.data)
that.setData({text:res.data})
}
})
}
})
about.json
{
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"詳情",
"navigationBarTextStyle":"black",
"usingComponents": {}
}
服務(wù)器端代碼實(shí)現(xiàn)
server.js
const express=require('express')
const bodyParser =require('body-parser')
const app=express()
const mysql = require('mysql')
app.use(bodyParser.json())
//處理post請(qǐng)求
app.post('/',(req,res) => {
console.log(req.body)
res.json(req.body)
})
app.post('/show',(req,res)=>{
console.log(req.body.name)
const a=req.body.name
var connection=mysql.createConnection({
host:'localhost',
user:'你的用戶名',
password:'你的密碼',
database:'數(shù)據(jù)庫(kù)名字'
})
connection.connect();
connection.query("select detail from price where name='"+a+"'",function(error,results,fields){
if(error) throw console.error;
res.json(results)
console.log(results)
})
connection.end();
})
app.get('/',(req,res)=>{
var connection = mysql.createConnection({
host:'localhost',
user:'你的用戶名',
password:'你的密碼',
database:'數(shù)據(jù)庫(kù)名字'
});
connection.connect();
//查找所有的人物名字返回給客戶端。其實(shí)沒必要（測(cè)試用的）
connection.query('select name from price',function(error,results,fields){
if(error) throw error;
res.json(results)
// console.log(results)
})
connection.end();
})
app.listen(3000,()=>{
console.log('server running at http://127.0.0.1:3000')
})
效果展示
主界面
跳轉(zhuǎn)界面
界面有點(diǎn)丑，慢慢優(yōu)化
總結(jié)
到此這篇關(guān)于微信小程序連接MySQL數(shù)據(jù)庫(kù)的文章就介紹到這了,更多相關(guān)微信小程序連接MySQL內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Js+Ajax,Get和Post在使用上的區(qū)別小結(jié)
下面小編就為大家?guī)?lái)一篇Js+Ajax,Get和Post在使用上的區(qū)別小結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06
JS實(shí)現(xiàn)判斷對(duì)象是否為空對(duì)象的5種方法
這篇文章主要介紹了JS實(shí)現(xiàn)判斷對(duì)象是否為空對(duì)象的5種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
JS for...in 遍歷語(yǔ)句用法實(shí)例分析
這篇文章主要介紹了JS for...in 遍歷語(yǔ)句用法,結(jié)合實(shí)例形式分析了javascript的for...in語(yǔ)句進(jìn)行數(shù)組遍歷的具體流程與使用技巧,需要的朋友可以參考下2016-08-08
探索JavaScript函數(shù)的無(wú)限可能(函數(shù)基本概念)
JavaScript中的函數(shù)是一種重要的編程概念，它允許我們封裝可重用的代碼塊，并在需要時(shí)進(jìn)行調(diào)用，本文將深入介紹JavaScript函數(shù)的各個(gè)方面，包括函數(shù)定義和調(diào)用、參數(shù)和返回值、作用域和閉包、高階函數(shù)以及常見的函數(shù)應(yīng)用場(chǎng)景，感興趣的朋友一起看看吧2023-08-08
BootStrap下拉框在firefox瀏覽器界面不友好的解決方案
BootStrap下拉框在firefox瀏覽器界面很不友好，在firefix瀏覽器打開鏈接就會(huì)發(fā)現(xiàn)里面有個(gè)小容器，怎么處理呢，下面看下小編給大家分享的有關(guān)這個(gè)問題的處理方案2016-08-08
這篇文章主要介紹了js/jq仿window文件夾框選操作插件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
詳解js跨域請(qǐng)求的兩種方式，支持post請(qǐng)求
原先一直以為要實(shí)現(xiàn)跨域請(qǐng)求只能用jsonp，只能支持GET請(qǐng)求，后來(lái)了解到使用POST請(qǐng)求也可以實(shí)現(xiàn)跨域，但是需要在服務(wù)器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers頭，下面說明下兩個(gè)不同的方法實(shí)現(xiàn)的方式和原理。2018-05-05
JavaScript實(shí)現(xiàn)檢查頁(yè)面上的廣告是否被AdBlock屏蔽了的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)檢查頁(yè)面上的廣告是否被AdBlock屏蔽了的方法,其實(shí)就是利用JS檢測(cè)div的名稱和樣式名稱實(shí)現(xiàn),需要的朋友可以參考下2014-11-11
bootstrap daterangepicker雙日歷時(shí)間段選擇控件詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap daterangepicker雙日歷時(shí)間段選擇控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JS腳本實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)秒殺點(diǎn)擊
本篇文章主要教給大家如何用JS寫一些商城中秒殺等自動(dòng)點(diǎn)擊功能，有這方面需要的朋友趕快學(xué)習(xí)下思路吧。2018-01-01