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
相关阅读 >>
phpmyadmin #1045错误无法登录mysql服务器怎么办?
更多相关阅读请进入《mysql》频道 >>

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