uni-app搭建后台链接数据库

原创已于 2025-08-23 19:28:34 修改 · 735 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#数据库 #uni-app #服务器

于 2025-08-14 08:15:00 首次发布

uniapp和HbuildX 专栏收录该内容

12 篇文章

订阅专栏

文章目录

一、创建表smbms_user
二、后端使用springboot搭建项目
三、配置uniapp网络请求
四、发请求测试
五、封装全局请求提示的方法

一、创建表smbms_user

CREATE TABLE `smbms_user`  (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `userCode` varchar(15) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT NULL COMMENT '用户编码',
  `userName` varchar(15) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT NULL COMMENT '用户名称',
  `userPassword` varchar(15) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT '0000000' COMMENT '用户密码',
  `gender` int NULL DEFAULT NULL COMMENT '性别（1:女、 2:男）',
  `birthday` datetime NULL DEFAULT NULL COMMENT '出生日期',
  `phone` varchar(15) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT NULL COMMENT '手机',
  `address` varchar(30) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT NULL COMMENT '地址',
  `userRole` bigint NULL DEFAULT NULL COMMENT '用户角色（取自角色表-角色id）',
  `createdBy` bigint NULL DEFAULT NULL COMMENT '创建者（userId）',
  `creationDate` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `modifyBy` bigint NULL DEFAULT NULL COMMENT '更新者（userId）',
  `modifyDate` datetime NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 111 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_unicode_ci ROW_FORMAT = Dynamic;


--  向smbms_user表添加数据
INSERT INTO `smbms_user` VALUES (1, 'admin', '系统管理员', '1234567', 1, '1983-10-10 00:00:00', '13688889999', '北京市海淀区成府路207号', 1, 1, '2013-03-21 16:52:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (2, 'liming', '李明', '0000000', 2, '1983-12-10 00:00:00', '13688884457', '北京市东城区前门东大街9号', 2, 1, '2014-12-31 19:52:09', NULL, NULL);
INSERT INTO `smbms_user` VALUES (5, 'hanlubiao', '韩路彪', '0000000', 2, '1984-06-05 00:00:00', '18567542321', '北京市朝阳区北辰中心12号', 2, 1, '2014-12-31 19:52:09', NULL, NULL);
INSERT INTO `smbms_user` VALUES (6, 'zhanghua', '张华', '0000000', 1, '1983-06-15 00:00:00', '13544561111', '北京市海淀区学院路61号', 3, 1, '2013-02-11 10:51:17', NULL, NULL);
INSERT INTO `smbms_user` VALUES (7, 'wangyang', '王洋', '0000000', 2, '1982-12-31 00:00:00', '13444561124', '北京市海淀区西二旗辉煌国际16层', 3, 1, '2014-06-11 19:09:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (8, 'zhaoyan', '赵燕', '0000000', 1, '1986-03-07 00:00:00', '18098764545', '北京市海淀区回龙观小区10号楼', 3, 1, '2016-04-21 13:54:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (10, 'sunlei', '孙磊', '0000000', 2, '1981-01-04 00:00:00', '13387676765', '北京市朝阳区管庄新月小区12楼', 3, 1, '2015-05-06 10:52:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (11, 'sunxing', '孙兴', '0000000', 2, '1978-03-12 00:00:00', '13367890900', '北京市朝阳区建国门南大街10号', 3, 1, '2016-11-09 16:51:17', NULL, NULL);
INSERT INTO `smbms_user` VALUES (12, 'zhangchen', '张晨', '0000000', 1, '1986-03-28 00:00:00', '18098765434', '朝阳区管庄路口北柏林爱乐三期13号楼', 3, 1, '2016-08-09 05:52:37', 1, '2016-04-14 14:15:36');
INSERT INTO `smbms_user` VALUES (13, 'dengchao', '邓超', '0000000', 2, '1981-11-04 00:00:00', '13689674534', '北京市海淀区北航家属院10号楼', 3, 1, '2016-07-11 08:02:47', NULL, NULL);
INSERT INTO `smbms_user` VALUES (14, 'yangguo', '杨过', '0000000', 2, '1980-01-01 00:00:00', '13388886623', '北京市朝阳区北苑家园茉莉园20号楼', 3, 1, '2015-02-01 03:52:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (15, 'zhaomin', '赵敏1', '0000000', 1, '1992-01-01 00:00:00', '18099897657', '北京市昌平区天通苑3区12号楼', 2, 1, '2015-09-12 12:02:12', NULL, NULL);
INSERT INTO `smbms_user` VALUES (103, '1', '1', '1', 1, '2025-07-17 16:34:35', '1', '1', 1, 1, '2025-07-17 16:34:35', 1, '2025-07-17 16:34:35');
INSERT INTO `smbms_user` VALUES (104, '1', '1', '1', 1, '2025-07-17 16:35:57', '1', '1', 1, 1, '2025-07-17 16:35:57', 1, '2025-07-17 16:35:57');
INSERT INTO `smbms_user` VALUES (105, '1', '1', '1', 1, '2025-07-17 16:36:11', '1', '1', 1, 1, '2025-07-17 16:36:11', 1, '2025-07-17 16:36:11');
INSERT INTO `smbms_user` VALUES (109, '张三33', '李明娜那', NULL, 1, '2009-07-01 00:00:00', '18454652145', '还上课回访客户哭', 2, NULL, '2025-08-05 14:23:26', NULL, '2025-08-05 14:28:11');

二、后端使用springboot搭建项目

关于springboot的项目创建可以参考我之前的博客==> 创建springboot项目

注意: 上面我是基于sqpringboot写的。大家可以使用ssm或者javaweb进行搭建

2.0 项目结构目录如下

在这里插入图片描述

2.1 application.properties

#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.hsh.mybatis.entity
# 应用服务 WEB 访问端口
server.port=8080

# 数据库连接信息
spring.datasource.url=jdbc:mysql://localhost:3306/smbms?useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

2.2 pojo

2.2.1 user

package com.hsh.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.time.LocalDateTime;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private static final long serialVersionUID = -51406178192925231L;
    /**
     * 主键ID
     */
    private Long id;
    /**
     * 用户编码
     */
    private String userCode;
    /**
     * 用户名称
     */
    private String userName;
    /**
     * 用户密码
     */
    private String userPassword;
    /**
     * 性别（1:女、 2:男）
     */
    private Integer gender;
    /**
     * 出生日期
     */
    private LocalDateTime birthday;
    /**
     * 手机
     */
    private String phone;
    /**
     * 地址
     */
    private String address;
    /**
     * 用户角色（取自角色表-角色id）
     */
    private Long userRole;
    /**
     * 创建者（userId）
     */
    private Long createdBy;
    /**
     * 创建时间
     */
    private LocalDateTime creationDate;
    /**
     * 更新者（userId）
     */
    private Long modifyBy;
    /**
     * 更新时间
     */
    private LocalDateTime modifyDate;

}

2.2.2 RespResult

package com.hsh.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class RespResult {
    private String code;
    private String msg;
    private Object data;
    public static RespResult ok(Object data){
        return new RespResult("200","操作成功",data);
    }
    public static RespResult error(String msg){
        return new RespResult("500",msg,null);
    }
}

2.3 mapper

package com.hsh.mapper;

import com.hsh.pojo.User;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface UserMapper {
    /**
     * 获取所有用户
     * @return 所有用户
     */
    @Select("select * from smbms_user")
    List<User> getAllUsers();
}

2.4 Service层

2.4.1 UserService

package com.hsh.service;

import com.hsh.pojo.User;
import org.springframework.stereotype.Service;

import java.util.List;

public interface UserService {
    public List<User> getAllUsers();
}

2.4.2 UserServiceImpl

package com.hsh.service.impl;

import com.hsh.mapper.UserMapper;
import com.hsh.pojo.User;
import com.hsh.service.UserService;
import jakarta.annotation.Resource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Override
    public List<User> getAllUsers() {
        List<User> allUsers = userMapper.getAllUsers();
        return allUsers;
    }
}

2.5 controller层

package com.hsh.controller;

import com.hsh.pojo.RespResult;
import com.hsh.pojo.User;
import com.hsh.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class UserController {
    @Autowired
    private UserService userService;
    @GetMapping("/user")
    public RespResult getUser(){
        List<User> users = userService.getAllUsers();
        System.out.println(users);
        return RespResult.ok(users);
    }
}

2.6 编写启动类

@MapperScan("com.hsh.mapper")
在这里插入图片描述

2.7 测试

打开网页输入http://127.0.0.1:8080/user
在这里插入图片描述

三、配置uniapp网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 uni.request(object) API 功能较为简单，不支持拦截器等全局定制的功能。
原生的api大家可以看看uni-app官网了解一下https://uniapp.dcloud.net.cn/api/request/request.html

因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用
官方文档：https://www.npm.com/package/@escook/request-miniprogram

下面演示如何去安装包 @escook/request-miniprogram

打开自己的项目，右击根目录，选择外部资源管理器
输入cmd
在命令行窗口执行npm init -y。请确保你的电脑已安装node.。否则该指令不生效。运行结果如下

注意：运行出上面结果后，你的uni-app将会出现一个package.on的文件夹
执行指令npm install @escook/request-miniprogram安装@escook/request-miniprogram 第三方包

注意。安装完成会在你的项目中多出三个包。
最终，在项目的 main. 入口文件中，通过如下的方式进行配置：

import { $http } from '@escook/request-miniprogram'

// 给$http起别名
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://127.0.0.1:8080'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // 这里的uni.  就相当于wx.。  一般微信有的api uni都有
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

将上述代码融合到main.中如下

import App from './App'
import { $http } from '@escook/request-miniprogram'

// 给$http起别名
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://127.0.0.1:8080'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // 这里的uni.  就相当于wx.。  一般微信有的api uni都有
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

四、发请求测试

home.vue 如下

<template>
  <view>
    首页
  </view>
</template>

<script>
  export default {
    data() {
      return {
        resList:[],
      };
    },
    // 等价于Vue的 created()方法
    onLoad() {
      this.getResList()
    },
    methods: {
      async getResList(){
        const res = await uni.$http.get('/user')
        this.resList = res.data
        console.log(this.resList)
      }
    }
  }
</script>

< lang="scss">
</>

运行结果如下：
在这里插入图片描述

五、封装全局请求提示的方法

当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

在 main. 中，为 uni 对象挂载自定义的 $showMsg() 方法：

// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon: 'none',
  })
}

今后，在需要提示消息的时候，直接调用 uni.$showMsg() 方法即可：

async getSwiperList() {
   const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
   if (res.meta.status !== 200) return uni.$showMsg()
   this.swiperList = res.message
}