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

各位好，接上期，今天分享一个通过本地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文件怎么建立这里就不赘述了，上期说的很齐全：

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

整体预览一下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必须重新启动，不然无效

五.功能测试

原数据：

增：

删：

改：

查：

如上即为全文内容~