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

2024-06-17 小程序 0

各位好，接上期，今天分享一个通过本地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=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）

<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=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）

<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=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）

<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=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文件怎么建立这里就不赘述了，上期说的很齐全：

干货！微信小程序通过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.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')})