5.1【微信小程序全栈开发课程】首页完善(一)--点击记录插入数据库

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: 目前,我们在首页实现了点击+1、+5、-1、-5的按钮,总分会发生变化。但是重新打开小程序,总分又变成0了如果想要继续在之前总分的基础上加减分数,就需要数据库来辅助。这节我们实现点击加减分数按钮,同时产生对应记录插入到数据库中要开始操作首页了,我们在app.json中将首页放在pages的第一个

目前,我们在首页实现了点击+1、+5、-1、-5的按钮,总分会发生变化。但是重新打开小程序,总分又变成0了


如果想要继续在之前总分的基础上加减分数,就需要数据库来辅助。


这节我们实现点击加减分数按钮,同时产生对应记录插入到数据库中


要开始操作首页了,我们在app.json中将首页放在pages的第一个

"pages": [
    "pages/index/main",
    "pages/me/main",
    "pages/instruction/main",
    "pages/opinion/main"
],


1、创建records数据表


(1)records数据表的字段


image.png


(2)创建records数据表


//登录数据库
~/WeChatProjects/truth_hold$ mysql -uroot -p
//登录成功之后,选择cAuth表
mysql> use cAuth;
//在数据库中粘贴下面代码,直接回车,records表就创建好了
DROP TABLE IF EXISTS `records`;
CREATE TABLE `records` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `openid` varchar(100) NOT NULL,
  `add` int(11) NOT NULL,
  `mark` int(11) NOT NULL,
  `note` varchar(100) DEFAULT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;


查看当前数据库中的表,已经有opinions数据表了


mysql> show tables;
+-----------------+
| Tables_in_cauth |
+-----------------+
| cSessionInfo    |
| opinions        |
| records        |
+-----------------+
3 rows in set (0.00 sec)


2、创建文件并添加路由


(1)创建操作文件createrecord.js


先在后端server/controllers文件夹中创建操作文件createrecord.js,用来将从前端页面提交的数据,插入到records表中


(2)添加路由


在路由管理文件server/routes/index.js文件中添加路由


//需要添加的代码
router.post('/createrecord', controllers.createrecord)
//参考代码,无需粘贴
//module.exports = router


3、在前端添加提交方法


1)编辑src/pages/index/index.vue文件,引入util.js文件中的post、get等工具函数


//参考代码,无需粘贴
//<script>
//需要添加的部分
import {showSuccess,showModal,post,get} from '@/util'

(2)打开src/pages/index/index.vue文件,编辑methods函数中的addMark方法


在方法前面添加async,涉及到后端数据库的操作,一般前面都要加上async异步方法


//原代码
//addMark (add) {
//this.mark = this.mark + add
//  console.log("mark为:",this.mark)  
//},
//编辑后
async addMark (add) {
  try{
    const data = {
      openid: this.userinfo.openId,
      add:add
    }
    //请求后端,找到server/controllers/createrecord.js文件
    const res = await post('/weapp/createrecord', data)
    console.log("从后端返回的执行正确的信息是:",res)
    this.mark = this.mark + add
  }catch(e){
    showModal('失败',"请重试哦~")
    console.log("从后端返回的执行错误的信息是:",e)
  }
},


4、编辑后端操作文件


这里的后端操作文件也就是server/controllers/createopinion.js文件,在这个文件中添加下面的代码:


const {mysql} = require('../qcloud')
module.exports = async (ctx) => {
  const {openid,add} = ctx.request.body
  try{
    //查找出最后一条记录
    const res = await mysql('records')
        .where("openid",openid)
        .select('mark')
        .orderBy('id','desc').first()
    //得到最后一条记录的分数
    if(res){
      var mark = res.mark
    }else{
      var mark = 0
    }
    //当前总分 = 最后一条记录的分数 + 本次操作的分数
    mark = mark + add
    console.log("当前分数为:",mark)
    //将openid、本次操作的分数、当前总分
    await mysql('records').insert({
      openid, add, mark
    })
    //执行成功返回到前端的数据
    ctx.state.data = {
      code: 0,
      msg: 'success'
    }
    console.log("执行成功")
  }catch(e){
    console.log("执行错误:",e)
    //执行失败返回到前端的数据
    ctx.state = {
      code: -1,
      data: {
        msg: '添加失败' + e.sqlMessage
      }
    }
  }
}


5、点击按钮测试


(1)点击按钮,控制台会出现反馈信息。


如果控制台没有反应,就看一下是否正确import了util.js文件


image.png


(2)查看数据库中添加的数据,可以看到刚刚添加的数据


//登录到数据库
~/WeChatProjects/truth_hold $ mysql -uroot -p
Enter password:
//选择cAuth数据库
mysql> use cAuth;
Database changed
//输入select * from records;语句,能查出刚刚插入的数据
mysql> select * from records;
+----+------------------------------+-----+------+----------------+---------------------+
| id | openid                       | add | mark | note           | create_time         |
+----+------------------------------+-----+------+----------------+———------------------+
| 1  | oQPCO4ol5Y_-yL0MnCGxwbiHbSek |   1 |    1 | NULL           | 2019-09-30 22:42:23 |
+----+------------------------------+-----+------+----------------+---------------------+
1 rows in set (0.00 sec)
相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
打赏
0
0
0
0
3311
分享
相关文章
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
994 7
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
942 1
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
286 7
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
117 6
小程序全栈开发中的WebSocket实时通信实践
【10月更文挑战第3天】随着移动互联网的发展,小程序因便捷的用户体验和社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的WebSocket实时通信实践,包括其实时通信、长连接及双向通信的特点,并通过实时聊天、推送、游戏和监控等功能的实现,展示了WebSocket在小程序中的应用。开发者需注意安全性、性能及兼容性等问题,以保障小程序的稳定运行和用户体验。
88 7
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
341 1
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
146 5
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
101 5
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1772 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
学成在线笔记+踩坑(3)——【内容模块】课程分类查询、课程增改删、课程计划增删改查,统一异常处理+JSR303校验
课程分类查询、课程新增、统一异常处理、统一封装结果类、JSR303校验、修改课程、查询课程计划、新增/修改课程计划
学成在线笔记+踩坑(3)——【内容模块】课程分类查询、课程增改删、课程计划增删改查,统一异常处理+JSR303校验

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等