uniapp调用后台接口

技术栈组合

前端: UniApp (Vue.js语法)
后端: Node.js + Express
数据交互: RESTful API + JSON

前端技术要点

1. 页面结构与组件化

复制代码

<template>
  <!-- 轮播图组件 -->
  <swiper>
    <swiper-item v-for="banner in bannerList"></swiper-item>
  </swiper>
  
  <!-- 自定义组件 -->
  <MenuItemCompVue />
  <ListItemVue />
</template>

核心知识点：

v-for 列表渲染
组件化开发思想
父子组件通信

2. 数据驱动视图

复制代码

data() {
  return {
    bannerList: [],    // 轮播图数据
    menuList: [],      // 菜单数据
    listList: []       // 列表数据
  },
  onLoad() {
			this.initBanners();//轮播图1
			this.initBanns();//轮播图2
			this.initMenus();//金刚区菜单
		}
}

核心知识点：

Vue响应式数据
数据初始化时机（onLoad生命周期）

3. 网络请求处理

复制代码

		methods: {

			initBanners() {
				//发送一个请求到后端，获取数据库中的轮播图列表
				uni.request({
					url: 'http://localhost:3000/bannerList', //接口地址
					method: 'GET'
				}).then(res => {
					const result = res.data
					if (result.code === 0) {
						this.bannerList = result.data
					} else {
						uni.showToast({
							title: result.message,
							icon: 'error'
						})
					}
				})
			}
  }

核心知识点：

Promise异步处理
错误处理机制
状态码规范

后端技术要点

1. 创建一个文件，右键点击在终端打开

输入命令：npm install express body-parser mysql cors --save

用trae打开，创建一个app.js文件

2. Express服务器搭建

复制代码

const express = require("express")
//引入 Express 框架模块。Express 是一个基于 Node.js的 web 应用框架
//，用于快速搭建 web 服务器和 API。

const app = express()
//创建一个 Express 应用实例。这个 app 对象代表整个 web 应用程序，用于配置路由、中间件等。

app.listen(3000, () => {
  console.log('服务已启动')
})
//让 Express 应用在 3000 端口上开始监听传入的 HTTP 请求

3. 中间件配置

复制代码

app.use(cors())                    // 跨域处理
app.use(express.json())           // JSON解析
app.use('/static', express.static()) // 静态资源服务

核心知识点：

中间件执行顺序
CORS跨域解决方案
静态资源托管

4. RESTful API设计

复制代码

// GET请求 - 数据查询
app.get("/bannerList", (req, res) => {
  const banners = [
        { id: 1, url: 'https://img1.baidu.com/it/u=1448912464,2333046905&fm=253&fmt=auto&app=138&f=JPEG', href: '', remark: '天堂' },
        { id: 2, url: 'https://ts1.tc.mm.bing.net/th/id/R-C.1b7c45331683d4f95704b4f3cf6f4320?rik=kr6mRYhPPyRKvg&riu=http%3a%2f%2fimg.thupdi.com%2fproject%2f2018%2f04%2f112-fd9b7092-2488-40e0-982c-618fd849dd0f.jpg&ehk=quMHplNSujKL7NehF0erg%2bU1uUpqZPJb3EeLrXK3Oy4%3d&risl=&pid=ImgRaw&r=0', href: '', remark: '龙门石窟' },
        { id: 3, url: 'https://img2.baidu.com/it/u=1073828452,1348477919&fm=253&fmt=auto&app=138&f=JPEG', href: '', remark: '特色美食' }
    ]
  const result = {
    code: 0,        // 状态码
    data: banners,       // 业务数据
    message: 'success' // 提示信息
  }
  res.json(result)  // JSON响应
})

API设计规范：

统一的响应格式
语义化的URL设计
标准HTTP方法使用

前后端交互流程

完整请求链路

前端组件 → uni.request() → 后端路由 → 数据处理 → JSON响应 → 前端渲染

前端组件 : 发起数据请求，并处理响应以更新用户界面。
uni.request() :创建一个 HTTP 请求，发送到指定的后端接口（API），并接收返回的数据。
后端路由:接收前端请求，并决定由哪个代码块来处理这个请求。

数据处理:执行具体的业务逻辑，包括验证请求、与数据库交互、处理数据等。

JSON响应:一种轻量级的数据交换格式，易于前端解析和处理。

前端渲染:用从后端获取的最新数据来更新视图，完成闭环。

数据流示意图

数据库/模拟数据 → Express API → HTTP响应 → UniApp数据绑定 → 页面渲染

数据库/模拟数据:作为唯一数据源，为API提供原始数据。

Express API:连接数据源和前端的桥梁，提供标准化的数据接口。

HTTP响应:Express API处理完请求后，将数据包装成标准格式返回给客户端。

UniApp数据绑定:前端接收到HTTP响应后，通过数据绑定机制将数据与UI状态关联起来。

页面渲染:UniApp的模板系统根据数据绑定的状态自动更新用户界面。