企业在数字化转型中如何利用常用前端框架提高开发效率并确保安全合规？
579
2023-11-11
微信小程序连接MySQL数据库的全过程
−目录简要说明：准备工作MySQL配置数据库、数据表目录结构客户端代码实现服务器端代码实现效果展示总结
简要说明：
承接上一个商品列表页，在服务器端连接MySQL数据库，通过条件匹配查寻数据并显示在客户端
准备工作
1、node.js
2、微信开发者工具
3、MySQL数据库
MySQL配置数据库、数据表
通过可视化的Workbench，可以很容易的建立自己的数据库、数据表。这里直接截个图就好了
推荐一个工具 Navicat for MySQL,以后可以通过它连接自己的数据库
目录结构
客户端代码实现
index.wxml (变化不大，加了跳转按钮）
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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
index.js (变化不大，加了跳转函数）
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// 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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// 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
?
1
2
3
4
5
6
{
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"详情",
"navigationBarTextStyle":"black",
"usingComponents": {}
}
服务器端代码实现
server.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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)
})
效果展示
主界面
跳转界面
界面有点丑，慢慢优化
总结
之家！
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
- 企业在数字化转型中如何利用常用前端框架提高开发效率并确保安全合规？
- 洞察在金融行业，前端桌面框架如何融合小程序技术以提升跨平台操作的灵活性和安全性？
- 洞察探索如何在跨平台小程序开发中选择最合适的ide开发工具，提升企业的数字化转型效率和降低开发成本
- 小程序开发安全管理的最佳实践与合规要求
- 企业如何利用敏捷开发工具提升跨平台应用的效率？
- 企业如何利用FinClip的跨平台小程序技术实现数字化转型并优化flutter开发app
- 洞察抓住fintech行业机遇，如何利用flutter框架开发安全合规的跨平台app
- 洞察如何利用智慧屏第三方App安装提升跨平台小程序的用户体验和安全性
- 洞察企业如何通过智慧屏幕App开发提高业务效率与用户体验
- 智慧屏安装APP的最佳实践与跨平台小程序开发的结合
推荐文章
热评文章
暂时没有评论，来抢沙发吧~