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

最近,闲来无事,打算学一下uniapp小程序

于是在跟着某站上学着做了一个小程序,主要是为了学uniapp和vue某站黑马优购

完成的功能主要有:首页、搜索、分类和购物车。

有人问了为什么没有登录、和添加订单呢?问的很好,下次别再问了

其实我也想跟着视频做,但视频是2021年的,一些uniapp的方法早就更新了,出现了很多问题。

  1. 如uni.getUserProfile,获取不到头像和昵称,然后查了很多方法才知道,这个方法已经不返回头像和昵称了 最新方法获取头像和昵称在这里

  2. 然后去调用登录接口去获取token,我也迟迟获取不成功。
    https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin

然后就开始烦躁。就那种跟着视频做也做不出来,满脑子都是为什么不一样呀。

于是我想为什么不自己做一个呢?

于是我就开干,前端的话,不想用黑马优购(看着就来气) ,于是就去找一个类似uniapp商城的模板,还真找到了。

但里面数据都是静态的

这时就有一个大问题了,后端服务我可以自己写,数据库我也可以自己创建,但是最重要的数据,不知道从哪里拿,总不能一张一张从网上下载啊!!!!

爬虫获取数据

于是乎我想起来了,很久以前用python学的爬虫,爬一点点数据下来,黑马大佬应该不介意吧

如果大家没学过爬虫,也不用介意,可以看看这篇简单爬取图片数据文章批量爬取图片

如果不想看,也没关系,问题不大,直接上代码。

python 复制代码
import json
import urllib.request
import urllib.parse
import pymysql

url = 'https://api-hmugo-web.itheima.net/api/public/v1/categories'
request = urllib.request.Request(url = url)
#获取响应数据
response = urllib.request.urlopen(request)

response = response.read().decode('utf-8')
array = json.loads(response)

array = array['message']
conn = pymysql.connect(host="127.0.0.1", user="", password="", database="yun_mall")

# 插入数据
cursor = conn.cursor()
#一级分类数据
for item in array:
    #获取二级分类数据
    secondArray = item["children"]
    id = item["cat_id"]
    name = item["cat_name"]
    pid = item["cat_pid"]
    level = item["cat_level"]
    image = item["cat_icon"]
    cursor.execute(
        "INSERT INTO category (id, cat_name, cat_level,cat_image,cat_pid) VALUES (%s, %s, %s,%s, %s)",
        (id, name, level, image, pid))
    for secondItem in secondArray:
        id = secondItem["cat_id"]
        name = secondItem["cat_name"]
        pid = secondItem["cat_pid"]
        level = secondItem["cat_level"]
        image = secondItem["cat_icon"]
        cursor.execute(
            "INSERT INTO category (id, cat_name, cat_level,cat_image,cat_pid) VALUES (%s, %s, %s,%s, %s)",
            (id, name, level, image, pid))
        try:
            #获取三级分类数据
            thirdArray = secondItem["children"]
        except :
            thirdArray = []
        for thirdItem in thirdArray:
            id = thirdItem["cat_id"]
            name = thirdItem["cat_name"]
            pid = thirdItem["cat_pid"]
            level = thirdItem["cat_level"]
            image = thirdItem["cat_icon"]
            cursor.execute(
                "INSERT INTO category (id, cat_name, cat_level,cat_image,cat_pid) VALUES (%s, %s, %s,%s, %s)",
                (id, name, level, image, pid))

# 提交更改并关闭连接
conn.commit()
cursor.close()
conn.close()

主要的难度就是爬取分类数据,因为黑马优购的分类是三级分类,要想办法如何拿到分类数据,然后根据分类级别插入到数据库中。

这样分类数据就下载自己的本地使用了。

然后就是相关分类的商品数据和商品图片,这里就跟爬取分类数据类似了,这里就不贴代码了

这样数据就大功告成了,就可以写后端服务代码了。

大功告成

再后来 经过漫长的代码编写之旅,终于基本完成了

最后给大家看一下完成的效果图。



经过我的测试,基本上能正常使用,用来做个毕业设计应该问题不大,但是可能还会出现一些我没发现的bug,但bug存在不是很正常的嘛,我就想问哪个软件没有bug呢,

最后

后面打算把这个商城的后台管理系统干出来,目前找到了一个成熟的后台管理系统,打算在此基础上面改。

后面如果有可能的话(资金够的话 ),想部署到云服务器上。大家如果有需要的源码,可以来找我哦,至于有偿还是无偿都可以商量,

相关推荐
Mintopia12 小时前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia13 小时前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲1 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
大米饭消灭者2 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
HashTang3 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ3 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理3 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
TT_Close3 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化
FliPPeDround3 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround3 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp