微信小程序：基于MySQL+Nodejs的汽车品牌管理系统

各位好，接上期，今天分享一个通过本地MySQL+Nodejs服务器实现CRUD功能的微信小程序，一起来看看吧~

干货！微信小程序通过NodeJs连接MySQL数据库https://jslhyh32.blog.csdn.net/article/details/137890154?spm=1001.2014.3001.5502

前言

一.Mysql数据库准备

二.新建项目

三.CRUD分别对应的前端

四.Nodejs后端代码

五.功能测试

前言

前端：原生微信小程序
后端：Nodejs服务器
数据库：MySQL8.0.35

本帖只是一个在技术角度攻坚克难的整理总结，并不是可以直接拿出手的高大上项目，不过只要底层原理清楚，修改前端还是很容易的——即本帖提供一个微信小程序版CRUD系统的框架，大家可以自行改善！博主最近忙着冲毕设，之后要是有时间，回来分享一个升级版。

一.Mysql数据库准备

没什么好说的，先建一张表：

use db2;
create table car(id int comment '序号',name char(5) comment '品牌',country varchar(5) comment '国籍',description text comment '英文名'
);

然后直接用可视化工具录入如下数据：

二.新建项目

新建一个项目，删除掉模版的全部代码，分别定义4个页面：select、add、update、drop。此外，记得创建名为Server的文件夹~

另外，本项目没有设置跳转函数、tabbar等功能，大家自行改变编译路径即可跳转~

三.CRUD分别对应的前端

1.查（select）

结构及样式如下：

<view><view id="look"><text style="font-size: 55rpx;">查询功能实现：</text></view><form bindsubmit="submit"><view class="select"><input id="input" name="name" type="text"  placeholder="请输入品牌名"/><button form-type="submit" id="btn">搜索</button></view></form><view id="result"><text>国籍：</text><textarea name="" id="out" cols="30" rows="10">{{text[0].country}}</textarea><text>全名：</text><textarea name="" id="out" cols="30" rows="10">{{text[0].description}}</textarea></view>
</view>

textarea{height: 50rpx;width: 100%;
}
#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;
}

完整的JavaScript代码：


Page({data: {text:{}},onLoad: function (options) {},onReady: function () {},onShow: function () {},onHide: function () {},onUnload: function () {},onPullDownRefresh: function () {},onReachBottom: function () {},onShareAppMessage: function () {},//查询
submit:function(e){var that=thiswx.request({method:'POST',data:e.detail.value,url: 'http://127.0.0.1:3000/select',success:function(res){// console.log(res.data)that.setData({text:res.data})}})
}
})

2.删（drop）

<view><view id="look"><text>根据名字删除!</text></view><form bindsubmit="submit"><view class="select"><input id="input" name="name" type="text"  placeholder="品牌"/><button form-type="submit" id="btn">删除</button></view></form><view id="result"><text>搜索结果：</text><textarea name="" id="out" cols="30" rows="10">{{text[0].description}}</textarea></view>
</view>

wxss基本上都一样，用上一个就行~

submit:function(e){var that=thiswx.request({method:'POST',data:e.detail.value,url: 'http://127.0.0.1:3000/drop',success:function(res){// console.log(res.data)that.setData({text:res.data})}})
}

其他部分的JavaScript也一样，这里仅给出绑定了“删除”按钮的函数。

3.增（add）

<view><view id="look"><text>增加一个数据~</text></view><form bindsubmit="add"><view class="select"><input id="input" name="id" type="number"  placeholder="id"/><input id="input" name="name" type="text" placeholder="名字" /><input id="input" name="country" type="text" placeholder="国籍" /><input id="input" name="description" type="text" placeholder="全名" /><button form-type="submit" id="btn">增加</button></view></form>
</view>

add:function(e){var that=thisconsole.log(e.detail.value.name)wx.request({method:'POST',data:{id:e.detail.value.id,name:e.detail.value.name,country:e.detail.value.country,description:e.detail.value.description},url: 'http://127.0.0.1:3000/add',success:function(res){that.setData({text:res.data})}})
}

4.改（update）

<view><view id="look"><text>修改一个数据~</text></view><form bindsubmit="update1"><view class="select"><input id="input" name="name" type="number"  placeholder="名字"/><input id="input" name="id" type="number"  placeholder="id"/><button form-type="submit" id="btn">修改</button></view></form>
</view>

update1:function(e){var that=thiswx.request({method:'POST',data:{id:e.detail.value.id,name:e.detail.value.name},url: 'http://127.0.0.1:3000/update1',success:function(res){that.setData({text:res.data})}})
}

5.tips：

总的来说，查询是最简单的，删除和增加由于需要传参会更复杂一些，改的业务逻辑相当于先查再增——不过如果在sql语句中直接写出来就没有这么复杂了
发送请求的路径一定要写对，这个在第四大节细说：

url: 'http://127.0.0.1:3000/update1',

四.Nodejs后端代码

server文件怎么建立这里就不赘述了，上期说的很齐全：

干货！微信小程序通过NodeJs连接MySQL数据库https://jslhyh32.blog.csdn.net/article/details/137890154?spm=1001.2014.3001.5502

整体预览一下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('/add',(req,res)=>{// console.log(req.body.name)data=req.bodyvar connection=mysql.createConnection({host:'localhost',user:'root',password:'123456',database:'db2'})connection.connect();connection.query('INSERT INTO car SET ?', data, (error, results, fields) => {if (error) throw error;res.json({ message: '数据保存成功' });});connection.end();
})app.post('/show',(req,res)=>{console.log(req.body.name)const a=req.body.namevar connection=mysql.createConnection({host:'localhost',user:'root',password:'123456',database:'db2'})connection.connect();connection.query("select * from car where name='"+a+"'",function(error,results,fields){if(error) throw console.error;res.json(results)console.log(results)})connection.end();
})app.post('/drop',(req,res)=>{console.log(req.body.name)const a=req.body.namevar connection=mysql.createConnection({host:'localhost',user:'root',password:'123456',database:'db2'})connection.connect();connection.query("delete from car where name='"+a+"'",function(error,results,fields){if(error) throw console.error;res.json(results)console.log(results)})connection.end();
})app.post('/update1',(req,res)=>{console.log(req.body.name)data=req.bodyconst id=req.body.idconst name=req.body.namevar connection=mysql.createConnection({host:'localhost',user:'root',password:'123456',database:'db2'})connection.connect();connection.query("update car set id ="+id+" where name='"+name+"'",function(error,results,fields){if(error) throw console.error;res.json(results)console.log(results)})connection.end();
})app.listen(3000,()=>{console.log('server running at http://127.0.0.1:3000')
})