宠物用品外贸独立站(开发过程)

简介: 前阵子朋友介绍了一个活儿:帮他们搭一个面向国外客户的宠物用品外贸独立站。价格不高,答应下来主要是想练手——预算900元,要求别太高,核心是能看东西、能询盘,还有后台管理。项目技术栈给自己定了个小目标:Python + React + MySQL,既沿用了熟悉的,也尝试点没在主业里实际落地过的新东西。

前阵子朋友介绍了一个活儿:帮他们搭一个面向国外客户的宠物用品外贸独立站。价格不高,答应下来主要是想练手——预算900元,要求别太高,核心是能看东西、能询盘,还有后台管理。项目技术栈给自己定了个小目标:Python + React + MySQL,既沿用了熟悉的,也尝试点没在主业里实际落地过的新东西。

系统演示地址

http://002.fktool.com
home1.jpg

项目启动
第一步和甲方老板确认下需求。他说不用太复杂,简单好用最好。产品大致有两三百种,分不同品类;要求英文界面,客户可以询盘,后台能基础管理(CRUD、订单查阅)。
小作文写完,开始筹划技术方案:

后端:Django Rest Framework(熟练、快速出活,还自带后台管理)
前端:React(create-react-app,上手快,也方便后期交互效果扩展)
数据库:MySQL(开源好用,便于后期数据迁移)
数据库建模
简单画了ER图,主要四张表:

Product(产品表)
Category(品类)
User(管理员/客户)
用Django的models快速生成,再迁移到MySQL。

接口开发
用了Django Rest Framework,写了一套RESTful API。仔细给每个接口写了英文文档,用的是Swagger自动生成的方法,方便给老板(其实是他未来的技术同事)查阅对接。

前端开发
用create-react-app起了项目骨架,四个主页面:

首页(轮播Banner、品类/热品推荐)
产品列表/详情
Backend管理页(登录后可见)
样式用的antd + 自己调色。为保证加载速度,图片SEO做了点小功夫(国外站点,图片尽量CDN+webp)。

功能踩坑
国际化:用了react-intl包,抽取了基础文案。
后台管理:Django admin真香,配个权限完美搞定。
部署上线
用了一台阿里云香港小服务器跑docker一键部署:

Docker Compose一个mysql,一个django,一个nginx转发静态和API
前端build后NGINX静态托管,API转发走Django

目录
相关文章
|
28天前
|
Java Android开发 开发者
什么是字节码以及采用字节码的好处有哪些
字节码是一种中间代码形式,处于源代码和机器码之间。在许多编程语言中,特别是Java语言,字节码发挥着至关重要的作用。下面我们将深入探讨字节码的概念以及采用字节码所带来的好处,并结合应用实例帮助大家更好地理解。
76 10
|
28天前
|
XML JSON 前端开发
XMLHttpRequest细节介绍与Ajax实践
XHR和AJAX结合起来,就能在不刷新页面的情况下,实现数据的神不知鬼不觉的交换,让用户体验如同吃了润滑油的滑梯。简洁而高效,这就是现代web开发的一个闪光点。
54 12
|
23天前
|
人工智能 移动开发 JavaScript
AI + 低代码技术揭秘(十二):开发人员工具和可扩展性
VTJ平台提供开发工具与扩展框架,支持低代码应用的开发与拓展。包含CLI、插件系统及Uni-App集成,结合Vite、TypeScript和Vue优化开发流程。
122 62
|
12天前
|
机器学习/深度学习 人工智能 编解码
魔搭社区模型速递(6.22-7.6)
🙋魔搭ModelScope本期社区进展:📟2662个模型,📁263个数据集,🎨152个创新应用,📄 12 篇内容
191 16
|
15天前
|
前端开发 搜索推荐 开发工具
通义灵码与颜色板生成器,为前端开发提供智能配色解决方案
在前端开发中,色彩搭配对用户体验和界面美观至关重要。通义灵码提供的颜色板生成器通过自动推荐配色方案、随机生成颜色组合及支持自定义调整,帮助开发者高效完成配色任务。该工具支持一键导出为 CSS 样式表,并提供简洁的中文指令交互方式,大大提升开发效率,助力开发者打造美观和谐的用户界面。
|
15天前
|
人工智能 持续交付 开发工具
AI大模型运维开发探索第五篇:GitOps 智能体
本文探讨了如何结合 Manus 的智能体设计理念与 GitOps 持续集成技术,构建低成本、高扩展性的智能体系统。通过借鉴 Manus 的沙箱机制与操作系统交互思路,利用 Git 作为智能体的记忆存储与任务调度核心,实现了推理过程可视化、自进化能力强的智能体架构。文章还分享了具体落地实践与优化经验,展示了其与 Manus 相当的功能表现,并提供了开源代码供进一步探索。
165 20
|
9天前
|
安全 C语言 C++
比较C++的内存分配与管理方式new/delete与C语言中的malloc/realloc/calloc/free。
在实用性方面,C++的内存管理方式提供了面向对象的特性,它是处理构造和析构、需要类型安全和异常处理的首选方案。而C语言的内存管理函数适用于简单的内存分配,例如分配原始内存块或复杂性较低的数据结构,没有构造和析构的要求。当从C迁移到C++,或在C++中使用C代码时,了解两种内存管理方式的差异非常重要。
53 26
|
11天前
|
存储 缓存 监控
手动清除Ubuntu系统中的内存缓存的步骤
此外,只有系统管理员或具有适当权限的用户才能执行这些命令,因为这涉及到系统级的操作。普通用户尝试执行这些操作会因权限不足而失败。
97 22
|
16天前
|
人工智能 自然语言处理 搜索推荐
从输入指令到代码落地:Cline AI 源码浅析
文章揭示了Cline如何将简单的自然语言指令转化为具体的编程任务,并执行相应的代码修改或生成操作。
195 16
从输入指令到代码落地:Cline AI 源码浅析
|
25天前
|
JavaScript 前端开发 安全
JDK1.8 新特性详解及具体使用方法
本文详细介绍了JDK 1.8的新特性及其组件封装方法,涵盖Lambda表达式、Stream API、接口默认与静态方法、Optional类、日期时间API、方法引用、Nashorn JavaScript引擎及类型注解等内容。通过具体代码示例,展示了如何利用这些特性简化代码、提高开发效率。例如,Lambda表达式可替代匿名内部类,Stream API支持集合的函数式操作,Optional类避免空指针异常,新日期时间API提供更强大的时间处理能力。合理运用这些特性,能够显著提升Java代码的简洁性、可读性和可维护性。
250 50