干货!微信小程序通过NodeJs连接MySQL数据库

2024-06-04 8780阅读

        

干货!微信小程序通过NodeJs连接MySQL数据库 第1张

        在前后端+数据库架构的思维中,微信小程序的生态地位是充当前端,后端和数据库还需开发者另外准备。微信开放社区提供强悍的云函数、云数据库、CMS内容管理,无疑为开发小程序的功能提供了不少便捷。

干货!微信小程序通过NodeJs连接MySQL数据库 第2张

        当我们在开发PC端的系统时,常见的SSM框架或者SpringBoot混合Vue,使用的数据库多为MySQL,这时如果我们想开发一套多端同步的系统,使用云开发会导致数据无法同步到PC端。因此一个解决方案是:微信小程序也使用MySQL作为数据库。如果使用MySQL数据库,那么后端的服务器也需要我们自行准备, 此处我们使用nodejs来搭建~


一.环境准备

        首先安装nodejs,这里博主就不带领大家了,比较简单,资料也很多——安装完成后在终端键入:node-v,检查版本~

干货!微信小程序通过NodeJs连接MySQL数据库 第3张

        接下来,任意找一个目录来搭建服务器——此处博主起的名是:NodeMyServer。然后以系统管理员身份运行Node.js command prompt,并切换到这个目录来~ 

干货!微信小程序通过NodeJs连接MySQL数据库 第4张

干货!微信小程序通过NodeJs连接MySQL数据库 第5张

然后,依次输入如下命令:

  • 初始化项目,将会自动创建package.json配置文件
    npm init -y
    
    • 安装Express框架,用于快速创建HTTP服务器
      npm install express --save
      
      •  安装nodemon监控文件修改
        npm install nodemon -g
        
        •  安装mysql的软件包
          npm install mysql --save
          

          执行成功后会出现如下目录(前3个):然后自己再创建一个server.js文件(名字可以自定义~)

          干货!微信小程序通过NodeJs连接MySQL数据库 第6张

          const express=require('express')
          const bodyParser =require('body-parser')
          const app=express()
          const mysql = require('mysql')
          app.use(bodyParser.json())
          app.post('/',(req,res) => {
            console.log(req.body)
            res.json(req.body)
          })
          app.post('/show',(req,res)=>{
            console.log(req.body.name)
            const a=req.body.name
            var connection=mysql.createConnection({
              host:'localhost',
              user:'xxx',           //改成你的用户名
              password:'xxxxxx',   //改成你的密码
              database:'xxx'      //改成你的数据库名
            })
            connection.connect();
            connection.query("select * from tb_user",function(error,results,fields){  //改成你的表名和字段名
              if(error) throw console.error;
              res.json(results)
              console.log(results)
              
            })
            connection.end();
            
          })
          app.get('/',(req,res)=>{
            var connection = mysql.createConnection({
              host:'localhost',
              user:'xxx',           //改成你的用户名
              password:'xxxxxx',   //改成你的密码
              database:'xxx'      //改成你的数据库名
            });
            connection.connect();
            connection.query('select * from tb_user',function(error,results,fields){    //改成你的表名和字段名
              if(error) throw error;
              res.json(results)
              // console.log(results)
            })
            connection.end();
          })
          app.listen(3000,()=>{
            console.log('server running at http://127.0.0.1:3000')
          })
          

           将如上代码粘进server.js,记得改成你自己的配置信息!

          干货!微信小程序通过NodeJs连接MySQL数据库 第7张

          如上,键入node server.js,即可运行服务器~ 

          二.项目部署

          创建一个小程序项目,如下:

          干货!微信小程序通过NodeJs连接MySQL数据库 第8张

          server文件夹是自己补进去的,此处为了方便使用,直接将刚刚自己定义的nodemyserver文件夹中的全部文件全拷贝过去!

          干货!微信小程序通过NodeJs连接MySQL数据库 第9张

          右键点击server.js,在内建终端中打开~

          干货!微信小程序通过NodeJs连接MySQL数据库 第10张

          依旧是键入刚刚的命令:

          干货!微信小程序通过NodeJs连接MySQL数据库 第11张 

                  此刻,博主给首页的按钮绑定了一个selectall的方法,并在方法中键入对应业务逻辑,各位可以直接将其站到onshow或者onload方法中,也可以完成测试~

          selectAll(){
                  var that=this
                  wx.request({
                      url: 'http://127.0.0.1:3000/',
                      success: function (res) {
                          console.log(res.data)
                          that.setData({ names: res.data })
                      }
                  })
            }

          如下,关闭域名检验! 

           

          干货!微信小程序通过NodeJs连接MySQL数据库 第12张

          点击按钮,查询到的数据输出到了控制台~

          干货!微信小程序通过NodeJs连接MySQL数据库 第13张 

          与博主本地PC中的数据一致,测试连接成功~ 

           干货!微信小程序通过NodeJs连接MySQL数据库 第14张

           


          下期预告:博主分享一个基于MySQL的微信小程序CRUD项目,大家敬请期待,一起进步~

           


    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]