微信小程序连接MySQL数据库的全过程
更新时间：2022年1月21日 16:34 点击：932 作者：mentality_sx
简要说明：
承接上一个商品列表页，在服务器端连接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>{{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 (变化不大，加了跳转函数）
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
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:'路飞、红发香克斯\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
wx.request({
url: 'http://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
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({
/**
* 页面的初始数据
*/
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内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
原文出处：https://blog.csdn.net/sx17860543449/article/details/10931602
上一篇: 微信小程序实现购物车选择规格颜色效果
相关文章
- 这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14
- 新版 Mysql 中加入了对 JSON Document 的支持，可以创建 JSON 类型的字段，并有一套函数支持对JSON的查询、修改等操作，下面就实际体验一下...2016-08-23
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
深入研究mysql中的varchar和limit(容易被忽略的知识)
为什么标题要起这个名字呢？commen sence指的是那些大家都应该知道的事情，但往往大家又会会略这些东西，或者对这些东西一知半解，今天我总结下自己在mysql中遇到的一些commen sense类型的问题。 ...2015-03-15- 这篇文章主要介绍了MySQL 字符串拆分操作(含分隔符的字符串截取)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-22
- 一、先说一下为什么要分表：当一张的数据达到几百万时，你查询一次所花的时间会变多，如果有联合查询的话，有可能会死在那儿了。分表的目的就在于此，减小数据库的负担，缩短查询时间。根据个人经验，mysql执行一个sql的过程如下：1...2014-05-31
- 我们自己鼓捣mysql时，总免不了会遇到这个问题：插入中文字符出现乱码，虽然这是运维先给配好的环境，但是在自己机子上玩的时候咧，总得知道个一二吧，不然以后如何优雅的吹牛B。...2015-03-15
- 这几天在centos下装mysql，这里记录一下安装的过程，方便以后查阅Mysql5.5.37安装需要cmake，5.6版本开始都需要cmake来编译，5.5以后的版本应该也要装这个。安装cmake复制代码 代码如下: [root@local ~]# wget http://www.cm...2015-03-15
- 宿主机使用网线的时候，客户机在Bridged Adapter模式下，使用Atheros AR8131 PCI-E Gigabit Ethernet Controller上网没问题。 宿主机使用无线的时候，客户机在Bridged Adapter模式下，使用可选项里唯一一个WIFI选项，Microsoft Virtual Wifi Miniport Adapter也无法上网，故弃之。...2013-09-19
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14
- 首先要声明一点，大部分情况下，修改MySQL密码是需要有mysql里的root权限的...2013-09-11
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- MySQL命令行导出数据库： 1，进入MySQL目录下的bin文件夹：cd MySQL中到bin文件夹的目录 如我输入的命令行：cd C:/Program Files/MySQL/MySQL Server 4.1/bin (或者直接将windows的环境变量path中添加该目录) ...2013-09-26
- 1.前言 昨天碰到一道关于如何解决有序数组的连接问题，这是一个很常见的问题。但是这里要考虑到代码的效率问题，因为要连接的数组都是有序的，这是一个非常重要的前提条件。2.简单但效率不高的算法 我首先想到的是使用...2013-10-04
- 一、连接Mysql格式： mysql -h主机地址 -u用户名 －p用户密码1、连接到本机上的MYSQL。首先打开DOS窗口，然后进入目录mysql/bin，再键入命令mysql -u root -p，回车后提示你输密码.注意用户名前可以有空格也可以没有空格，但是密...2015-11-08
- Navicat for MySQL注册码用来激活 Navicat for MySQL 软件，只要拥有 Navicat 注册码就能激活相应的 Navicat 产品。这篇文章主要介绍了Navicat for MySQL 11注册码\激活码汇总,需要的朋友可以参考下...2020-11-23
- 这篇文章主要介绍了微信小程序（应用号）开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13