微信小程序:基于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数据库准备

没什么好说的,先建一张表:

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必须重新启动,不然无效

五.功能测试

原数据:

增:


删:


改:


查:


如上即为全文内容~

相关推荐
逐·風6 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
师太,答应老衲吧11 分钟前
SQL实战训练之,力扣:2020. 无流量的帐户数(递归)
数据库·sql·leetcode
Devil枫36 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
码农小旋风40 分钟前
详解K8S--声明式API
后端
Peter_chq41 分钟前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
Yaml41 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
小小小妮子~1 小时前
Spring Boot详解:从入门到精通
java·spring boot·后端
ftswsfb1 小时前
【系统架构设计师(第2版)】七、系统架构设计基础知识
系统架构
hong1616881 小时前
Spring Boot中实现多数据源连接和切换的方案
java·spring boot·后端
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app