uni-app 广告页前后台设计

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 广告页前后台设计

广告页前端设计要求：

  1. 可以插入文字、图片（多图）、视频等。
  2. 带有提交表单，可自动提取一部分信息。
  3. 根据访问情况绑定微信等。
  4. 实现页面包括小程序和H5
  5. 短信验证、微信、短信通过等等。

后台管理页面：

  1. 发布信息，包括CURD，查看、统计反馈信息等。
  2. 自动扣费等。
  3. 用户管理基本信息，包括个人信息设计、积分管理等。
  4. 用户审核等。

要求前端、后端分开核算，可分开承包。

Harmonyos Next教程
2 回复

这个还蛮简单的，我可以当作私活干，我的微信是cwj15262160637


在设计一个基于uni-app的广告页前后台系统时，我们需要考虑前端展示和后端管理的协同工作。以下是一个简化的代码案例，展示如何实现这一设计。

前端（uni-app）

首先，在pages目录下创建一个adPage文件夹，并在其中创建adPage.vue文件作为广告页的前端展示。

<template>
  <view class="container">
    <image :src="adImage" mode="aspectFill" class="ad-image"></image>
    <button @click="closeAd">关闭广告</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      adImage: '' // 广告图片URL
    };
  },
  mounted() {
    this.fetchAdData();
  },
  methods: {
    fetchAdData() {
      uni.request({
        url: 'https://your-backend-api/getAd', // 后端广告数据接口
        success: (res) => {
          if (res.data && res.data.image) {
            this.adImage = res.data.image;
          }
        }
      });
    },
    closeAd() {
      uni.redirectTo({
        url: '/pages/home/home' // 跳转到首页或其他页面
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.ad-image {
  width: 90%;
  height: auto;
}
button {
  position: absolute;
  bottom: 20px;
}
</style>

后端（Node.js + Express）

在后端，我们使用Node.js和Express框架来搭建一个简单的广告数据接口。

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

const ads = [
  { id: 1, image: 'https://example.com/ad1.jpg' },
  { id: 2, image: 'https://example.com/ad2.jpg' }
];

app.get('/getAd', (req, res) => {
  // 简单起见，这里直接返回第一个广告
  res.json(ads[0]);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

总结

以上代码展示了如何使用uni-app构建前端广告页，并通过Node.js + Express搭建后端广告数据接口。前端通过uni.request请求后端广告数据，并在页面上展示广告图片。后端提供一个简单的API接口返回广告数据。在实际项目中，你可能需要处理更多的逻辑，比如广告轮播、用户点击行为记录等，这可以根据具体需求进行扩展。

回到顶部