保姆级教学：从0搭建微信小程序SpringBoot+Vue（一）

云边的小卖部会卖糖

已于 2024-09-26 15:33:09 修改

阅读量671

点赞数 7

文章标签：微信小程序 spring boot vue.js java

于 2024-09-24 17:43:35 首次发布

本文链接：https://blog.csdn.net/weixin_44545610/article/details/142491302

版权

保姆级教学：从0搭建微信小程序SpringBoot+Vue(一)

目标：实现一个微信小程序从后端数据库MySQL获取的商品展示页。
框架：后端采用SpringBoot，前端采用Vue,数据库MySQL。
开发工具：IntelliJ IDEA 2024.2专业版+HbuilderX+Node+微信开发者工具，jdk1.8已安装

一、创建SpringBoot项目

1.创建一个新项目

File→New→Project
20240923152137424

2.项目环境配置

左侧选择Spring Boot；

更换数据源:将start.spring.io替换为start.aliyun.com。
20240923152246222

修改Name→选择Type：Maven→Java：8→Next

提示：因为自己的Java版本是1.8，若不更换，无法选择Java8。
20240923154237853

选择依赖，后期可以根据需要手动添加（pom.xml文件中点击标签旁的Edit Starters，位置详见6.代码报错）
20240923154350378

3.项目结构

20240923154938759
点击右下角Load Maven Project，加载完主类图标就会有变化，如下。
20240923155032352

4.修改配置

将resources文件夹下的application.properties文件后缀改为yml，如图所示。
20240923155101735
application.yml 配置后续模块使用的公共参数，主要配置端口号，数据库连接信息等，一般配置如下内容：

server:
  port: 80
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/xiaomaibu?serverTimezone=Asia/Shanghai&characterEncoding=utf-8
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis: 
  #config-location: classpath:mybatis/mybatis-config.xml  #可以不配置
  mapper-locations: classpath:mybatis/mapper/*.xml
  type-aliases-package: org.example.xiaomaibu.mybatis.entity

server:配置访问后端的端口号

datasource:配置数据库，需要替换为自己的数据库名称以及用户密码

mybatis:配置路径（p.s. 由于springboot框架整合了Mybatis，因此可以没有Mybatis全局配置文件mybatis-config.xml，在 application.yml 配置即可）

5.web页面测试

打开目录结构resources/static/index.html，可以编辑页面内容（例如hello world）

打开org.example.xiaomaibu/XiaoMaiBuApplication 主程序，点击上方三角运行。
20240905104625920
执行成功，下方终端会有如下输出
20240905143604608

同时浏览器输入localhost:80,会显示static下的index文件内容。
在这里插入图片描述

6.代码报错

①如果主程序代码引用报错，如图
20240904155548933
修改pom.xml，标签旁有按钮Edit Starters
在这里插入图片描述
点击弹出如下窗口，将Server URL修改为https://start.aliyun.com，点击ok, ok。

点击右边maven，选中项目右键，Reload project 重新加载一下就可以。
20240905104353789

②如果访问测试localhost:80错误，或者访问失败，通过查看日志可以发现端口配置未生效（下图console），检查application配置。
20240905142127741
保证application.yml配置正确，可以通过查看颜色对比，如果显示黄色就配置正确，如下图。
20240905172734589

二、数据库设计

打开MySQL，建立属于自己的表，这里总计建两张表，注意表和字段需要用``不能用英文单引号。

1.类别表

drop TABLE if EXISTS `xmb_menu`;
CREATE TABLE `xmb_menu`(
`id` int(10) NOT NULL auto_increment,
`name` VARCHAR(30) DEFAULT NULL,
PRIMARY KEY (`id`)
)ENGINE=INNODB auto_increment=6 DEFAULT CHARSET=utf8;
INSERT INTO `xmb_menu`(`id`,`name`) VALUES
(1,'素菜类'),(2,'荤菜类'),(3,'酒水类'),(4,'水果类'),(5,'甜点类');

20240906140636731

建完如图所示。

2.商品表

drop TABLE if EXISTS `xmb_dish`;
CREATE TABLE `xmb_dish`(
`id` int(10) NOT NULL auto_increment,
`name` VARCHAR(30) DEFAULT NULL COMMENT '菜品名称',
`image` VARCHAR(50) DEFAULT NULL COMMENT '菜品图片',
`typeid` int(10) DEFAULT NULL COMMENT '菜品类别',
`price` DECIMAL(6,2) DEFAULT NULL COMMENT '菜品价格',
`unit` VARCHAR(10) DEFAULT NULL COMMENT '菜品单位',
PRIMARY KEY (`id`)
)ENGINE=INNODB auto_increment=6 DEFAULT CHARSET=utf8;
INSERT INTO `xmb_dish`(`id`,`name`,`image`,`typeid`,`price`,`unit`) VALUES
(1,'土豆丝','001.jpg',1,15,'盘'),(2,'番茄炒鸡蛋','002.jpg',1,20,'碗'),(3,'韭菜鸡蛋','003.jpg',1,18,'盘'),(4,'炒豆芽','004.jpg',1,10,'碗'),(5,'青柠脆皮鸡','005.jpg',2,30,'盘'),(6,'滋补羊肉锅','006.jpg',2,50,'锅'),(7,'青岛啤酒','007.jpg',3,3,'瓶'),(8,'可乐','008.jpg',3,2,'瓶');

20240906140659330

第二张表建完，typeid对应类别表id。其中，因为会考虑后续功能上传图片，所以加上图片，需要提前准备对应图片。

至此，前期功能的数据库设计完成。

三、后端核心代码实现

1.了解框架

这里，我们先了解SpringBoot框架。

SpringBoot由 Pivotal 团队提供的全新框架，其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发者能够快速构建生产级别的应用。其优点是：

创建独立的 Spring 应用。
直接嵌入的 Tomcat，无需部署 WAR 文件。
简化 Maven 配置。
自动配置 Spring。
提供生产级别的监控和管理功能。
无需配置 XML，开箱即用。

其中，SpringBoot的结构主要有4层：

展示层/Controller层: 一般由Controller组成，展示层负责处理HTTP请求，将JSON参数转换为对象，并对请求进行身份验证并将其传输到业务层，最后再将处理结果封装成JSON响应对象返回前端。
业务层/Service层: 业务层处理所有业务逻辑，包含 Service 接口及其实现类（ServiceImpl）组成，处理核心业务逻辑。
数据库层/Mapper层: 在数据库层中， CRUD (创建，检索，更新，删除），由Mapper 接口和 Mapper.xml 文件组成。
持久层/Entity层（pojo): 持久层包含所有存储逻辑，并将业务对象与数据库行进行相互转换。

因此，我们的核心代码层也是基本和其结构类似。

2.构建Entity层

entity层代表数据库中的表，字段对应表的列，用于数据传输和映射。这里的变量要与数据库的字段一一对应。

①创建两个Java文件，结构如图所示：
20240906171037944
②xmb_menu.java

package org.example.xiaomaibu.entity;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import java.util.List;

@TableName("xmb_menu")
@Data
public class xmb_menu {
    private Integer id;// 编号

    private String name;//类别名称

    @TableField(select = false) //查询不显示
    private List<xmb_dish> dishList;//拥有的菜品

}

③xmb_dish.java

package org.example.xiaomaibu.entity;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;

@TableName("xmb_dish")
@Data
public class xmb_dish {
    private Integer id; //编号
    private String name; //菜品名称
    private String image; //图片
    @TableField(select = false) //查询不显示
    private Integer typeid; //类别
    private Float price; //价格
    private String unit; //单位
}

@DATA注解是lombok提供的，可以为类提供get()和set()方法，还有equals()等。
@TableName注解用于指定实体类与数据库表的映射，简化数据库操作。
@TableField注解用于指定非主键的一些属性。

打开pom.xml，在dependency中加入下述依赖。

      <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.2</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

添加后，点击旁边Load Maven Changes重新加载。
20240906170346402

3.构建Mapper层

右键一个新的package，新建MenuMapper、DishMapper文件。
20240909092322974
①MenuMapper.java

package org.example.xiaomaibu.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.example.xiaomaibu.entity.xmb_menu;
import java.util.Map;

public interface MenuMapper extends BaseMapper<xmb_menu> {

    Long getTotal(Map<String,Object> map);

    xmb_menu findById(Integer id);
}

②DishMapper.java

package org.example.xiaomaibu.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.example.xiaomaibu.entity.xmb_dish;
import java.util.List;
import java.util.Map;

public interface DishMapper extends BaseMapper<xmb_dish> {
    
    List<xmb_dish> list(Map<String,Object> map);
    
    Long getTotal(Map<String,Object> map);
}

4.构建Service层

20240909104911064

①MenuService.java

package org.example.xiaomaibu.service;

import com.baomidou.mybatisplus.extension.service.IService;
import org.example.xiaomaibu.entity.xmb_menu;
import java.util.Map;

public interface MenuService extends IService<xmb_menu> {
    
    public Long getTotal(Map<String,Object> map);
    
}

②DishService.java

package org.example.xiaomaibu.service;

import com.baomidou.mybatisplus.extension.service.IService;
import org.example.xiaomaibu.entity.xmb_dish;
import java.util.List;
import java.util.Map;

public interface DishService extends IService<xmb_dish> {
    
    public List<xmb_dish> list(Map<String, Object> map);
    
    public Long getTotal(Map<String, Object> map);
}

③MenuServiceImpl.java

package org.example.xiaomaibu.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.example.xiaomaibu.entity.xmb_menu;
import org.example.xiaomaibu.service.MenuService;
import org.example.xiaomaibu.mapper.MenuMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.Map;

@Service("MenuService")
public class MenuServiceImpl extends ServiceImpl<MenuMapper, xmb_menu> implements MenuService {
    
    @Autowired
    private MenuMapper menuMapper;
    
    @Override
    public Long getTotal(Map<String, Object> map) {return menuMapper.getTotal(map);}
    
}

④DishServiceImpl.java

package org.example.xiaomaibu.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.example.xiaomaibu.entity.xmb_dish;
import org.example.xiaomaibu.mapper.DishMapper;
import org.example.xiaomaibu.service.DishService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

@Service("DishService")
public class DishServiceImpl extends ServiceImpl<DishMapper,xmb_dish> implements DishService {
    
    @Autowired
    private DishMapper dishMapper;
    
    @Override
    public List<xmb_dish> list(Map<String,Object> map) {return dishMapper.list(map);}
    
    @Override
    public Long getTotal(Map<String,Object> map) {return dishMapper.getTotal(map);}
    
}

其中，@Autowired报错，提示：Could not autowire. No beans of ‘MenuMapper’ type found. 因为扫描不到Mapper，暂时忽略，后面处理。

5.构建Controller层

新建两个MenuController.java和DishController.java

package org.example.xiaomaibu.controller;

import org.example.xiaomaibu.entity.xmb_menu;
import org.example.xiaomaibu.service.MenuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
import java.util.Map;
import java.util.HashMap;

@RestController
@RequestMapping("/menu")
public class MenuController {

    @Autowired
    private MenuService menuService;

    @RequestMapping("/ListAll")
    public Map<String, Object> ListAll(){
        List<xmb_menu> list=menuService.list();
        Map<String,Object> map=new HashMap<>();
        map.put("menulistall",list);
        return map;
    }
}

package org.example.xiaomaibu.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import org.example.xiaomaibu.entity.xmb_dish;
import org.example.xiaomaibu.entity.xmb_menu;
import org.example.xiaomaibu.service.DishService;
import org.example.xiaomaibu.service.MenuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
import java.util.Map;
import java.util.HashMap;

@RestController
@RequestMapping("/dish")
public class DishController {

    @Autowired
    private DishService dishService;

    @Autowired
    private MenuService menuService;

    @RequestMapping("/ListAll")
    public Map<String, Object> ListAll(){
        List<xmb_menu> menuList = menuService.list();
        for(xmb_menu menu : menuList){
            List<xmb_dish> dishList = dishService.list(new QueryWrapper<xmb_dish>().eq("typeid",menu.getId()));
            menu.setDishList(dishList);
        }
        Map<String,Object> map = new HashMap<>();
        map.put("dishList",menuList);
        return map;
    }
}

至此，后端核心代码已完成，总体结构如下图所示。
20240910094518757

四、前端PC端页面测试

①在主程序入口处添加一句@MapperScan注解，添加全局扫描，解决在构建@Autowired报错的问题。

package org.example.xiaomaibu;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("org.example.xiaomaibu.mapper")
public class XiaoMaiBuApplication {

    public static void main(String[] args) {
        SpringApplication.run(XiaoMaiBuApplication.class, args);
    }

}

②在static底下的index.html添加测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<button style="display: block;margin: 20px auto;width: 160px;height: 60px;" onclick="getAll()">查看信息</button>
<div class="result" id="result"></div>
<script>
    function getAll(){
        $.ajax({
            type: "get",
            url: "dish/ListAll",
            data: {
            },
            success:function (data) {
                console.log(data)
            },
        });
    }
</script>
</body>
</html>