开源django+mysql+vue3前后端分离商城baykeShop使用指南

news2024/12/24 8:08:30

logo

baykeShop开源商城系统

项目简介

baykeShop(拜客商城系统)是一款全开源Python栈商城系统,管理后台完全前后端分离重写以适配项目,前后端100%开源,后台前端采用开源SCUI开源库对接开发,美观、易用、符合当前时下流行的技术栈,后端依托django强大的框架体系,深度结合rest_framework第三方包,使得前后端共用一套接口体系分发扩展,商城PC端采用接口数据可视化的方式采用html渲染还原页面,使其更符合web端的需求,更利于SEO优化,摆脱了前后端分离所带来的打包过程,以及上手难度,更易维护,开发,学习!

本项目融合了django的传统模版体系,同时结合了前后端分离的开发方式,在不同场景选择了不同的技术栈,使其更具学习和研究价值,是python django初学者开发上手学习的不二选择!

项目演示

商城PC端前台:http://s.bayke.shop

商城管理后台:http://s.bayke.shop/baykeadmin

演示账号:demo 密码:123456

备注:前后台用户通用

快速上手

一、 拉取项目

将本仓库拉取到本地,也就是当前你看到的分支main

git clone https://gitee.com/bayke/bayke-shop.git

二、 创建虚拟环境

在项目根目录中,也就是在manage.py的同级创建,命令如下:

python -m venv venv

运行该命令之后会创建一个venv的文件夹,此时虚拟环境则创建成功!

三、 激活虚拟环境,安装依赖

3.1 激活虚拟环境:

# windows系统
venv\Scripts\activate

# Liunx系统
source venv/bin/activate

激活成功后在终端命令行最开始会出现(venv)则代表激活成功,注意,后边所有的操作都是在激活虚拟环境的状态下进行的

3.2 安装项目依赖:

在安装依赖之前有必要先对项目的配置有个简单的了解。

项目目录为bayke目录,其中将配置文件拆分成了三部分:

  1. settings.py为共用配置,也就是在开发环境和生产环境共同的配置项

  2. development.py为开发环境配置,当前的默认配置

  3. production.py为生产环境配置,部署上线时尽量启用该配置(非必须)

备注:为了使用简便,降低开发者理解难度,我们仅是通过引入包的方式 from .development import *将开发环境或生产环境配置引入到了settings.py中,也就是说你可以在开发时随意引入他们两个的任何一个,没有局限,不同之处是production.py中启用了mysql数据库和redis,需要安装对应的依赖,已包含在依赖列表requirements.txt中!

由于mysql数据库的依赖包mysqlclient在不同的环境下安装时会常出现安装失败的现象,目前测试在windows和ubuntu中都没有问题,但在Centos系统中会出现莫名其妙的错误,导致安装失败,由于每个人出现的错误可能不一样,没有一个通用的行之有效的解决方案,目前暂时建议开发环境选择windows或ubuntu其中一个,部署系统选择Ubuntu即可!

如果不启用mysql,则可以在requirements.txt中注释掉mysqlclient依赖项之后再运行安装命令!

安装依赖:pip install -r requirements.txt

注意:当启用了mysql之后,需在根目录的mysql.cnf配置中配置自己的数据库信息!

[client]
database = baykedb
user = root
password = 123456
host = 127.0.0.1
port = 3306
default-character-set = utf8

四、初始化项目

4.1 同步数据库并建表

python manage.py redb

该命令会清空新建app中应用的迁移文件并重新生成,然后自动向数据库执行建表操作,也就是说他会自动执行makemigrations和migrate命令!

5.1 导入初始化数据及权限接口数据

python manage.py pushdata

注意:与之对应的有一个exportdata的导出命令,当你改变了后台的扩展配置、后台菜单、接口管理中的任何一项,则可以使用到处命令进行备份,以便在别的地方部署时及时导入,这几个数据是本项目运行的必要数据,所以必须要有!(其他数据备份的方式自行决定!)

五、创建超级管理员运行项目

5.1 创建超级管理员

python manage.py createsuperuser

5.2 运行项目后端

python manage.py runserver 3000

到这里项目的后端接口就已经运行起来了,PC端商城也可以预览了,但管理后台采用了前后端分离的方式开发,需要再配置运行一下前端!

六、后台前端运行

后台前端源码目录在根目录的fronted/scui中,标准的vue项目,选择scui这个开源项目就是因为其上手简单易使用组件众多,便于开发,没有使用TS,徒增心智负担,对很多项目来说都是没有必要的!

这里启动和运行可以参考scui本身的文档:介绍 | SCUI

在这里再次感谢scui开源作者的辛苦付出!

注意:开发环境由于前端和后端不同域,会存在跨域问题,后端需要再配置文件的CORS_ALLOWED_ORIGINSCSRF_TRUSTED_ORIGINS配置中放行前端地址!如下所示:

# 配置允许跨域访问的站点列表
CORS_ALLOWED_ORIGINS = [
    'http://192.168.31.174',
    'http://127.0.0.1:2800'
]

# csrf可信来源
CSRF_TRUSTED_ORIGINS = [
    'http://192.168.31.174',
    'http://127.0.0.1:2800'
]

支付宝支付配置

为了简化支付宝的配置难度,本项目将支付宝的配置项内置到了管理后台系统设置的扩展配置当中,仅超级管理员拥有该权限!

如上图所示,目前该配置仅允许超级管理员增删改查,虽然内置了删除功能但最好不要删除,扩展配置均是代码运行过程中需要调用的配置,作为开发者除非你非常清楚你知道某个配置项的作用以及调用位置,否则不建议删除和修改配置项的key值!

  • alipay_app_id 支付宝支付APPID

  • alipay_private_key 支付宝支付私钥pivate_key

  • alipay_public_key 支付宝公钥alipay_public_key

这里需要注意的是支付宝一般的配置流程是,下载官方的支付宝开放平台秘钥工具,首先生成秘钥,此时就得到了应用的公钥和私钥,然后用应用公钥去支付宝后台加签换取支付宝公钥,将支付宝公钥对应的配置到后台,应用私钥还要经过一个步骤,就是需要将得到的应用私钥进行一次格式转换,在支付宝开放平台秘钥工具中操作,将转换后的私钥,配置到后台对应的私钥项,配置APPID,支付宝配置即完成!

异步通知及同步通知不需要在支付宝后台配置,代码中已经配置好了,支付完之后会自动跳转和通知回调修改订单状态!

  1. 生成应用公钥和私钥 

  2. 用应用公钥加签换取支付宝公钥

  3. 转换应用私钥格式 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/957284.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入探索C语言自定义类型:打造你的编程世界

一、什么是自定义类型 C语言提供了丰富的内置类型,常见的有int, char, float, double, 以及各种指针。 除此之外,我们还能自己创建一些类型,这些类型称为自定义类型,如数组,结构体,枚举类型和联合体类型。 …

软件架构模式+系统架构

架构模式对比 分层模式 一般信息系统中最常见的4层划分如下: Presentation layer 表示层(也就是UI层)Application layer 应用层(也就是服务层)Business logic layer 业务逻辑层(也就是领域层)…

NS2安装及入门实例——(ns2.35 / Ubuntu20.04)

文章目录 一、ns2安装1、更新系统源2、准备工作3、下载安装包4、安装5、问题① 问题1② 问题2③ 问题3 6、安装成功7、环境配置 二、nam安装1、安装2、问题 三、实例 一、ns2安装 1、更新系统源 sudo apt-get update sudo apt-get upgrade2、准备工作 sudo apt-get install …

图像生成模型【自编码器、RNN、VAE、GAN、Diffusion、AIGC等】

目录 监督学习 与 无监督学习 生成模型 自编码器 从线性维度压缩角度: 2D->1D 线性维度压缩: 3D->2D 推广线性维度压缩 流形 自编码器:流形数据的维度压缩 全图像空间 自然图像流形 自编码器的去噪效果 自编码器的问题 图像预测 (“结构化预测”…

CSS判断手机暗黑模式

手机有个功能到了晚上会自动变成深色也就是暗黑模式.这种情况下网页会自动变颜色.如果想自由控制暗黑模式下的html样式的话,可以用如下方式: media (prefers-color-scheme: dark) {/*html, body {*//*filter: invert(1) hue-rotate(180deg);*//*}*/.maill{margin-left: 0;marg…

哪吒汽车“三头六臂”之「浩智电驱」

撰文 / 翟悦 编审 / 吴晰 8月21日,在哪吒汽车科技日上,哪吒汽车发布“浩智战略2025”以及浩智技术品牌2.0。根据公开信息,主编梳理了以下几点:◎浩智滑板底盘支持400V/800V双平台◎浩智电驱包括180kW 400V电驱系统和250kW 800…

Python的装饰器详解:提升接口自动化测试效率

在接口自动化测试中,我们经常会遇到一些共用的功能,例如请求日志记录、接口鉴权、性能监控等。为了避免在每个接口函数中重复编写这些功能的代码,Python提供了装饰器(Decorator)的功能,它能够在不修改原有函…

SAP MM学习笔记26- SAP中 振替转记(转移过账)和 在库转送(库存转储)4- Plant间在库转送 之 在库转送Order(有出荷)

SAP 中在库移动 不仅有入库(GR),出库(GI),也可以是单纯内部的转记或转送。 1,振替转记(转移过账) 2,在库转送(库存转储) 1&#xff…

Web安全——信息收集下篇

Web安全 一、网络空间搜索引擎二、扫描敏感目录/文件1、御剑2、7kbstorm3、bbscan4、dirmap5、dirsearch6、gobuster7、网站文件 三、扫描网页备份四、网站头信息收集五、敏感文件搜索1、GitHub搜索2、Google-hacking3、wooyun漏洞库4、网盘搜索5、社工库6、网站注册信息7、js敏…

Vue学习笔记一(2019)

1.Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用…

【移动机器人】基于JADE改进差分算法的多AGV轨迹规划

最近帮同学做个东西,但是问题在于是之前从没接触过的领域–移动机器人轨迹规划,虽然也是搞机器人的,但是对 AGV 那边的情况是一无所知,这次能完成也算是挑战成功。此次任务目的是多辆AGV小车搬运货物,保证搬运总时间最…

Git学习part1

02.尚硅谷_Git&GitHub_为什么要使用版本控制_哔哩哔哩_bilibili 1.Git必要性 记录代码开发的历史状态 ,允许很多人同时修改文件(分布式)且不会丢失记录 2.版本控制工具应该具备的功能 1)协同修改 多人并行不悖的修改服务器端…

MinIO分布式存储k8s集群部署

一、MinIO是什么 MinIO是go开发的,高性能分布式存储;基于GNU AGPL v3开源,可免费使用; 官网:https://min.io/ github: https://github.com/minio/minio 官网宣传MinIO是世界上速度最快的分布式对象存储; …

Typora导出的PDF目录标题自动加编号

Typora导出的PDF目录标题自动加编号 在Typora主题文件夹增加如下文件后,标题便自动加上了编号: https://gitcode.net/as604049322/blog_data/-/blob/master/base.user.css 例如: 但是导出的PDF中,目录却没有编号: 这…

ConsoleApplication17_2项目免杀(Fiber+VEH Hook Load)

加载方式FiberVEH Hook Load Fiber是纤程免杀,VEH是异常报错,hook使用detours来hook VirtualAlloc和sleep,通过异常报错调用实现主动hook 纤程Fiber的概念:纤程是比线程的更小的一个运行单位。可以把一个线程拆分成多个纤程&#…

高可用集群介绍

一、高可用集群概念 高可用集群( High Availability Cluster, HA 集群),其中高可用的含义是最大限度地可以使用。从集群 的名字上可以看出,此类集群实现的功能是保障用户的应用程序持久、不间断地提供服务。当应用程序出现故障或…

XSSchallenge1-20

test1 第一题直接在test插入XSS代码即可 test2 第二关对内容进行”“包裹 这里可以采用”>来绕过 test3 代码审计发现这里用了htmlspecialchars函数&#xff0c;这个函数对<>和’ “等进行了转义&#xff0c;这里可以用事件来绕过 test4 这里用了str_replace&a…

vue+elementUI el-table实现单选

if (selection.length > 1) {this.$refs.table.clearSelection();this.$refs.table.toggleRowSelection(selection.pop());}

Kubernetes技术--k8s核心技术持久化存储

有时候需要在集群中进行一些重要的数据进行持久化存储,然后需要的时候再进行挂载,那么下面我们一起来看看如何实现数据的持久化存储操作。 1.nfs网络存储 -1.找一台服务器做nfs的服务端,安装nfs。(这里我们直接在master上实现)。 这里应该找再单独的搭建一个node节点做持…

Linux多线程同步机制(下)

文章目录 前言一、读写锁二、条件变量总结 前言 一、读写锁 多线程同步机制中的读写锁&#xff08;Read-Write Lock&#xff09;是一种特殊的锁机制&#xff0c;用于控制对共享资源的读写访问。读写锁允许多个线程同时读取共享资源&#xff0c;但在写操作时需要独占访问。 读…