欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序連接MySQL數(shù)據(jù)庫的全過程

 更新時間:2022年01月21日 11:42:50   作者:mentality_sx  
微信小程序是不能直接連接數(shù)據(jù)庫進行數(shù)據(jù)操作的,這是出于安全的考慮,下面這篇文章主要給大家介紹了關于微信小程序連接MySQL數(shù)據(jù)庫的全過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

簡要說明:

承接上一個商品列表頁,在服務器端連接MySQL數(shù)據(jù)庫,通過條件匹配查尋數(shù)據(jù)并顯示在客戶端

準備工作

1、node.js

2、微信開發(fā)者工具

3、MySQL數(shù)據(jù)庫

MySQL配置數(shù)據(jù)庫、數(shù)據(jù)表

通過可視化的Workbench,可以很容易的建立自己的數(shù)據(jù)庫、數(shù)據(jù)表。這里直接截個圖就好了

推薦一個工具 Navicat for MySQL,以后可以通過它連接自己的數(shù)據(jù)庫

目錄結構

客戶端代碼實現(xiàn)

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>{{item.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 (變化不大,加了跳轉函數(shù))

// pages/index/index.js
Page({

  /**
 * 頁面的初始數(shù)據(jù)
   */
  data: {
    skill: [
      {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:'路飛、紅發(fā)香克斯\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:[]
  },

  /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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)聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {

  },

  /**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {

  },

  /**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {

  },

  /**
 * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
 * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
 * 用戶點擊右上角分享
   */
  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)
        //求和計算
        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>查看一下他們的詳細資料吧!</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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    text:{}
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  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": {}
}

服務器端代碼實現(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請求
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ù)庫名字'
  })
  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ù)庫名字'
  });
  connection.connect();
  //查找所有的人物名字返回給客戶端。其實沒必要(測試用的)
  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')
})


效果展示

主界面

跳轉界面

界面有點丑,慢慢優(yōu)化

總結

到此這篇關于微信小程序連接MySQL數(shù)據(jù)庫的文章就介紹到這了,更多相關微信小程序連接MySQL內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 解讀input標簽的value屬性及name屬性

    解讀input標簽的value屬性及name屬性

    這篇文章主要介紹了解讀input標簽的value屬性,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 淺談redux, koa, express 中間件實現(xiàn)對比解析

    淺談redux, koa, express 中間件實現(xiàn)對比解析

    這篇文章主要介紹了淺談redux, koa, express 中間件實現(xiàn)對比解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • javascript css紅色經典選項卡效果實現(xiàn)代碼

    javascript css紅色經典選項卡效果實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了javascript css紅色經典選項卡效果的實現(xiàn)代碼,需要的朋友可以參考下
    2016-05-05
  • 基于javascript實現(xiàn)動態(tài)顯示當前系統(tǒng)時間

    基于javascript實現(xiàn)動態(tài)顯示當前系統(tǒng)時間

    這篇文章主要介紹了基于javascript實現(xiàn)動態(tài)顯示當前系統(tǒng)時間,以一個完整實例形式較為詳細的分析了js動態(tài)顯示當前系統(tǒng)時間的實現(xiàn)技巧,需要的朋友可以參考下
    2016-01-01
  • 微信小程序 云開發(fā)模糊查詢實現(xiàn)解析

    微信小程序 云開發(fā)模糊查詢實現(xiàn)解析

    這篇文章主要介紹了微信小程序 云開發(fā)模糊查詢實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-09-09
  • 詳解微信小程序開發(fā)之formId使用(模板消息)

    詳解微信小程序開發(fā)之formId使用(模板消息)

    這篇文章主要介紹了詳解微信小程序開發(fā)之formId使用(模板消息),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-08-08
  • 原生JS生成九宮格

    原生JS生成九宮格

    這篇文章主要為大家詳細介紹了原生JS生成九宮格,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • 詳解JavaScript實現(xiàn)哈希表

    詳解JavaScript實現(xiàn)哈希表

    哈希表是一種非常重要的數(shù)據(jù)結構,幾乎所有的編程語言都有直接或者間接的應用這種數(shù)據(jù)結構。本文將為大家介紹通過JavaScript如何實現(xiàn)哈希表,以及哈希表的一些常用操作,需要的可以參考一下
    2021-12-12
  • js 判斷文件類型并控制表單提交示例代碼

    js 判斷文件類型并控制表單提交示例代碼

    判斷文件類型控制表單提交這些都是在客戶端實現(xiàn)的,下面有個不錯的示例,感興趣的朋友可以參考下
    2013-11-11
  • JavaScript變量和變換詳情

    JavaScript變量和變換詳情

    這篇文章主要介紹了JavaScript變量和變換詳情,文章基于JavaScript的相關資料展開相關內容需要的小伙伴可以慘一下
    2022-04-04

最新評論