微信小程序连接MySQL数据库的全过程


当前第2页 返回上一页

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 () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  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": {}
}

服务器端代码实现

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:'数据库名字'
  })
  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:'数据库名字'
  });
  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')
})


效果展示

主界面

跳转界面

界面有点丑,慢慢优化

总结

到此这篇关于微信小程序连接MySQL数据库的文章就介绍到这了,更多相关微信小程序连接MySQL内容请搜索

更多Mysql内容来自木庄网络博客


标签:Mysql

返回前面的内容

相关阅读 >>

mysql中select和where子句优化的总结

分享几个简单mysql优化小妙招

mysql实现查看与创建以及删除索引的方法介绍

mysql创建表操作命令分享

phpmyadmin #1045错误无法登录mysql服务器怎么办?

mysql日志与备份还原详解

mysql日志文件详解

mysql与navicat建立连接出现1251错误怎么解决

mysql数据库用户权限管理

mysql安装不了怎么办

更多相关阅读请进入《mysql》频道 >>


数据库系统概念 第6版
书籍

数据库系统概念 第6版

机械工业出版社

本书主要讲述了数据模型、基于对象的数据库和XML、数据存储和查询、事务管理、体系结构等方面的内容。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...