Shulou(Shulou.com)06/02 Report--

Most people do not understand the knowledge of this article "how WeChat Mini Programs connects to the MySQL database", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how WeChat Mini Programs connects to the MySQL database" article.

Preparatory work

1 、 node.js

2. Wechat developer tools

3. MySQL database

MySQL configuration database, data sheet

Through the visual Workbench, you can easily build your own database and data table. Just take a screenshot here.

Recommend a tool, Navicat for MySQL, through which you can connect to your own database in the future

Directory structure

Client code implementation

Index.wxml (not much changed, with jump button added)

Learn more about goods {{item.text}} {{}} Total submission: {{result}}

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 (little changed, with jump function added)

/ / pages/index/index.jsPage (initial data of {/ * page * / data: {skill: [{name:'01',value:600,checked:false,text:' Uchiha Sasuke\ nPrice: 600.00'}, {name:'02',value:300,checked:false,text:' Uchiha Itachi\ nPrice: 300.00'}, {name:'03',value:500,checked:false Text:' flag wood Kakashi\ nPrice: 500.00'}, {name:'04',value:700,checked:false,text:' Luffy, Red hair Red-Haired Shanks\ nPrice: 700.00'}, {name:'07',value:350,checked:true,text:' Sauron\ nPrice: 350.00'}, {name:'08',value:799,checked:true,text:' Luffy\ nPrice: 799.00'},] Result: [], names: []}, / * Life cycle function-- listen to page load * / 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})})}, / * Lifecycle function-first rendering of listening page completed * / onReady: function () {}, / * Lifecycle function-listening page display * / onShow: function () {} / * Lifecycle function-- listening to Page Hidden * / onHide: function () {}, / * Lifecycle function-listening to Page unloading * / onUnload: function () {}, / * Page related event handling function-listening for user drop-down actions * / onPullDownRefresh: function () {} / * Handler function for pull bottom event on the page * / onReachBottom: function () {}, / * user clicks the upper right corner to share * / 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) / / Sum calculation 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 (unmodified)

About.wxml

Check their details! Search results: {{text [0] .detail}} returned

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.jsPage (initial data of {/ * page * / data: {text: {}}, / * Lifecycle function-listening Page loading * / onLoad: function (options) {}, / * Lifecycle function-listening Page initial rendering completed * / onReady: function () {} / * Lifecycle function-listener page display * / onShow: function () {}, / * Lifecycle function-listener Page Hidden * / onHide: function () {}, / * Lifecycle function-listener Page Unload * / onUnload: function () {} / * Page-related event handler function-listens for user drop-down action * / onPullDownRefresh: function () {}, / * Handler function for pull-down event on the page * / onReachBottom: function () {}, / * user clicks on the upper right corner to share * / onShareAppMessage: function () {}, back:function () {wx.navigateBack ()} / / submit 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": "details", "navigationBarTextStyle": "black", "usingComponents": {}} server-side code implementation

Server.js

Const express=require ('express') const bodyParser = require (' body-parser') const app=express () const mysql = require ('mysql') app.use (bodyParser.json ()) / / process post request 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:' your user name', password:' your password', database:' database name'}) 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:' your user name', password:' your password', database:' database name'}); connection.connect (); / / find all person names and return them to the client. There is no need for (testing) 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')}) effect display)

Main interface

Jump interface

The above is about the content of this article on "how WeChat Mini Programs connects to the MySQL database". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.