微信小程序开发五(与springboot整合)

embedded/2024/9/24 9:55:07/

首先在微信开发者工具中开启不校验合法域名,这个才能本地访问

实现一个小功能:

       展示数据信息,每条数据的颜色不一样

后端:springboot+mybatisplus+mysql

    依赖:

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.2</version></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.20</version></dependency>

     数据库表信息:

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (`id` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '唯一标识',`nickname` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '用户名称',`color` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('843232', '李哪吒', '#FF44AA');
INSERT INTO `user` VALUES ('994343', '杨戬', '#A20055');
INSERT INTO `user` VALUES ('894394', '张三', '#CC6600');
INSERT INTO `user` VALUES ('323232', '李四', '#BBBB00');
INSERT INTO `user` VALUES ('3325233', '王五', '#008800');SET FOREIGN_KEY_CHECKS = 1;

      实体类:

@Data
@TableName("user")
public class UserColor {private String nickname;private String color;
}

     mapper层、service层和service实现类就不写了

    controller层:

@RestController
@RequestMapping("/wx")
public class WxController {@Autowiredprivate UserService userService;@GetMapping("/color")public List color(){List<UserColor> list = this.userService.list();return list;}
}

小程序>微信小程序代码:

      js文件找到onLoad(options) 方法:

 wx.request({url: 'http://localhost:8089/wx/color',method:"get",success:(res)=>{this.setData({msg:res.data});}})

      wxml文件:

<view style="color:{{user.color}}" wx:for="{{msg}}" wx:key="ids" wx:for-item="user" wx:for-index="ids">{{user.nickname}}</view>

     得到结果:

  


http://www.ppmy.cn/embedded/10764.html

相关文章

Spark Standalone模式部署

准备至少2台虚拟机&#xff0c;装好linux系统&#xff0c;我装的是Ubuntu20.04。 1.修改主机名&#xff08;每台&#xff09; 1&#xff09;修改/etc/hostsname内容&#xff0c;主节点改为master&#xff0c;子节点改为slaver1 sudo vim /etc/hostname 2&#xff09;在/etc/…

在ELF 1开发环境中使用Qt Creator进行远程调试

Qt Creator是一款跨平台集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要适用于支持Qt框架的各类应用程序开发。其内置的远程调试机制使得开发者能够在本地开发环境中对部署在远程设备上的代码进行调试&#xff0c;无需直接对远程设备进行操作。Qt Creator会通过网络连…

【大语言模型】如何让ChatGPT等LLM拥有记忆

我们现在在跟ChatGPT等生成式人工智能聊天时&#xff0c;都需要我们给定一个上下文&#xff0c;生成式AI才会根据我们问题结合上下文给出回答&#xff0c;他们并没有任何记忆。想象一下未来我们有一个AI机器人在我们的身边&#xff0c;每天它的记忆都会归零&#xff0c;你必须跟…

【机器学习300问】76、早停法(Early Stopping)是如何防止过拟合的?

本文带大家介绍一个非常简单的防止过拟合的方法——早停&#xff08;Early Stopping&#xff09;&#xff0c;首先给出概念&#xff0c;然后通过损失图像来加深对它的理解。 一、早停是什么呀&#xff1f; 早停&#xff08;Early Stopping&#xff09;是一种常用的深度学习模型…

stm32开发之netxduo组件之mqtt客户端的使用记录

前言 1使用mqtt协议的简单示例记录 代码 MQTT服务端(C# 编写,使用MQTTnet提供的示例代码) 主程序 namespace ConsoleApp1;public class Program {public static async Task Main(string[] args){await Run_Server_With_Logging();}}public static async Task Run_Server_Wi…

uniapp微信小程序(商城项目)

最近&#xff0c;闲来无事&#xff0c;打算学一下uniapp小程序 于是在跟着某站上学着做了一个小程序&#xff0c;主要是为了学uniapp和vue。某站黑马优购 完成的功能主要有&#xff1a;首页、搜索、分类和购物车。 有人问了为什么没有登录、和添加订单呢&#xff1f;问的很好…

Unity3D 分块编辑小AStar地图详解

前言 A算法是一种经典的寻路算法&#xff0c;能够帮助游戏中的角色找到最短路径。在本文中&#xff0c;我们将介绍如何在Unity3D中使用分块编辑的方式创建一个小的A地图&#xff0c;并实现A*算法来实现角色的寻路。 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;希…

修复msvcp140.dll文件的靠谱方法分享,3分钟解决msvcp140.dll缺失问题

出现msvcp140.dll文件缺失的问题确实是一个常见的情况&#xff0c;因为很多软件在运行时都需要调用这个动态链接库&#xff08;DLL&#xff09;文件。如果这个文件丢失了&#xff0c;电脑上的相应程序可能就无法正常启动&#xff0c;这会对电脑用户的日常使用造成不便。若遭遇到…