各位好,接上期,今天分享一个通过本地MySQL+Nodejs服务器实现CRUD功能的微信小程序,一起来看看吧~
目录
前言
- 前端:原生微信小程序
- 后端:Nodejs服务器
- 数据库:MySQL8.0.35
本帖只是一个在技术角度攻坚克难的整理总结,并不是可以直接拿出手的高大上项目,不过只要底层原理清楚,修改前端还是很容易的------即本帖提供一个微信小程序版CRUD系统的框架,大家可以自行改善!博主最近忙着冲毕设,之后要是有时间,回来分享一个升级版。
一.Mysql数据库准备
没什么好说的,先建一张表:
sql
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)
结构及样式如下:
html
<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>
css
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代码:
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=this
wx.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)
html
<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基本上都一样,用上一个就行~
javascript
submit:function(e){
var that=this
wx.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)
html
<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>
javascript
add:function(e){
var that=this
console.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)
html
<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>
javascript
update1:function(e){
var that=this
wx.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文件怎么建立这里就不赘述了,上期说的很齐全:
整体预览一下Server.js的内容:(可以直接沾)
javascript
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.body
var 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.name
var 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.name
var 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.body
const id=req.body.id
const name=req.body.name
var 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')
})
- form表单用什么方式传参就调用app的什么方法,路径即为wx.request中的url最后一级,必须保持对应!
- 在query方法里面输入SQL语句,传参记得用占位符,上面4种基础业务已经给大家写好了,自行品味。另外就是单引号和双引号别用串!
- 每次使用前记得先启动node服务器,别犯低级错误;修改了server.js必须重新启动,不然无效
五.功能测试
原数据:
增:
删:
改:
查:
如上即为全文内容~