一步一步开发微信小程序（Django+Mysql）

前提：假设你已经安装好Anaconda，微信开发者工具，MySQL数据库，IDE等工具

工具下载地址：

Anaconda：https://www.anaconda.com/download

MySQL：https://dev.mysql.com/downloads/mysql/

微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

CodeIDE：VSCode：https://code.visualstudio.com/Download

​ Pycharm：https://www.jetbrains.com/pycharm/download/?section=windows（可能需要安装学习版）

Postman：https://www.postman.com/downloads/

配置相关环境：

# 创建环境
conda create --name SEClass(替换成自己想设置的名称) python=3.9# 激活环境
conda activate SEClass# 安装库
pip install Django
pip install djangorestframework（API接口开发库）
pip install mysqlclient

MySQL:

假设此时已经安装好mysql客户端

# 登录mysql
mysql -u root -p# 创建项目所使用的数据库(注意名字要符合要求，如不能使用-)
CREATE DATABASE your_database_name;# 进入刚刚创建的数据库
USE your_database_name;# 查看当前所在数据库：
SELECT DATABASE();

连接数据库：（使用数据库管理工具连接，如Navicat Premium）

（Navicat Premium官方下载地址：https://www.navicat.com/en/download/navicat-premium）

连接设置：

本地主机：localhost（或远程数据库主机地址）

端口：3306（默认端口号）

用户名：root（或其它创建的用户名）

密码：（输入你自己在安装mysql的时候设置的密码）

Django：

Django官网：https://www.djangoproject.com

官方教程：https://docs.djangoproject.com/zh-hans/4.2/intro/（墙裂建议跟着敲一遍）

创建项目：

$ django-admin startproject mysite(项目名称，自行设置)

项目结构（创建项目的时候会自动生成基础文件）：

  • 最外层的 mysite/ 根目录只是你项目的容器， 根目录名称对 Django 没有影响，你可以将它重命名为任何你喜欢的名称。

  • manage.py: 一个让你用各种方式管理 Django 项目的命令行工具。你可以阅读 django-admin 和 manage.py 获取所有 manage.py 的细节。

  • 里面一层的 mysite/ 目录包含你的项目，它是一个纯 Python 包。它的名字就是当你引用它内部任何东西时需要用到的 Python 包名。 (比如 mysite.urls).

  • mysite/__init__.py：一个空文件，告诉 Python 这个目录应该被认为是一个 Python 包。如果你是 Python 初学者，阅读官方文档中的 更多关于包的知识。

  • mysite/settings.py：Django 项目的配置文件。如果你想知道这个文件是如何工作的，请查看 Django 配置 了解细节。

  • mysite/urls.py：Django 项目的 URL 声明，就像你网站的“目录”。阅读 URL调度器 文档来获取更多关于 URL 的内容。

  • mysite/asgi.py：作为你的项目的运行在 ASGI 兼容的 Web 服务器上的入口。阅读 如何使用 ASGI 来部署 了解更多细节。

  • mysite/wsgi.py：作为你的项目的运行在 WSGI 兼容的Web服务器上的入口。阅读 如何使用 WSGI 进行部署 了解更多细节。

（使用IDE进行Django项目的配置环境）

项目配置：（在根目录的settings.py中进行配置）

数据库配置：
DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'class-0912(你创建的mysql数据库名称)','USER': 'root','HOST': 'localhost','PORT': '3306','PASSWORD': '','OPTIONS': {'charset': 'utf8mb4'},}
}
API接口库配置：
INSTALLED_APPS = [...'rest_framework',"rest_framework.authtoken",
]

# 此项需要单独添加在settings.py文件末尾额外增加
REST_FRAMEWORK = {# Use Django's standard `django.contrib.auth` permissions,# or allow read-only access for unauthenticated users.'DEFAULT_PERMISSION_CLASSES': ['rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'],'DEFAULT_AUTHENTICATION_CLASSES': ['rest_framework.authentication.TokenAuthentication',],
}
url路径配置：
from django.urls import includeurlpatterns = [# 配置后台管理页面path('admin/', admin.site.urls),# 包含应用的URL配置（此时你可能还没有创建your_app）path('your_app_name/', include('your_app_name.urls')),
]

启动项目：

# 默认端口
$ python manage.py runserver (默认端口为8000)# 更换其它端口
$ python manage.py runserver 8080

创建App模块（每个模块实现某项任务，模块设计根据实际需求进行设计）：

$ python manage.py startapp your_app_name

设计模型：(在你创建App后，项目文件夹中会出现一个新的App文件夹，其中的model.py为设计模型的地方)

from django.db import modelsclass Reporter(models.Model):full_name = models.CharField(max_length=70)def __str__(self):return self.full_nameclass Article(models.Model):pub_date = models.DateField()headline = models.CharField(max_length=200)content = models.TextField()reporter = models.ForeignKey(Reporter, on_delete=models.CASCADE)def __str__(self):return self.headline

激活模型：

#根项目setting.py中修改
INSTALLED_APPS = [...,'your_app_name.apps.TestappConfig',
]

应用数据模型：（设计好模型后，需要进行数据库迁移，此时Django会根据你激活的模型里的设计，自动的创建数据库）

# 每次进行数据库迁移请按顺序执行下列代码
$ python manage.py makemigrations
$ python manage.py migrate

创建一个管理员账号：（输入后按提示进行创建）

python manage.py createsuperuser

在管理站点上注册模型:

your_app_name/admin.py:

from django.contrib import admin# Register your models here.
from .models import Reporter, Articleadmin.site.register(Reporter)
admin.site.register(Article)

编写视图:

视图函数的执行结果只可能有两种：返回一个包含请求页面元素的 [HttpResponse]对象，或者是抛出 [Http404]这类异常。至于执行过程中的其它的动作则由你决定。

from django.shortcuts import render
from .models import Articledef year_archive(request, year):a_list = Article.objects.filter(pub_date__year=year)context = {"year": year, "article_list": a_list}return render(request, "news/year_archive.html", context)

规划 URLs:

your_app_name/urls.py:

from django.urls import path
from . import viewsurlpatterns = [path("articles/<int:year>/", views.year_archive),
]

设计模板(可选，微信小程序开发用不太上):

上面的代码加载了 your_app_name/year_archive.html` 模板，可对该模版进行自定义设计

your_app_name/year_archive.html:

{% extends "base.html" %}{% block title %}Articles for {{ year }}{% endblock %}{% block content %}
<h1>Articles for {{ year }}</h1>{% for article in article_list %}<p>{{ article.headline }}</p><p>By {{ article.reporter.full_name }}</p><p>Published {{ article.pub_date|date:"F j, Y" }}</p>
{% endfor %}
{% endblock %}

编写API接口：

API接口的开发涉及最基础的三个文件：serializers.py（此文件需要你自行创建）、views.py和urls.py

serializers.py：此文件创建你想要进行序列化的模型字段
views.py：此文件创建你想要开发的API接口的试图逻辑，可自行根据业务需求进行设计，如接收GET/POST/PATCH等请求，解析request请求数据，根据请求数据进行业务逻辑设计，设计所需返回的response字段，将response字段根据serializers.py中定义的序列化函数进行序列化，返回API接口的状态码
urls.py：对你开发的API接口的试图进行url路径注册
your_app_name/serializers.py:from rest_framework import serializers
from your_app_name.models import yourModel# 此Serializer返回yourModel模型的指定或全部序列化字段
class myModelSerializer(serializers.ModelSerializer):class Meta:model = yourModelfields = '__all__'  # 返回全部或者指定您想要序列化的字段# fields = ['phone_number', 'avatar', 'resume']# 此Serializer返回需要自定义处理的字段，无需被模型字段限制
class customFieldSerializer(serializers.Serializer):old_password = serializers.CharField(required=True)new_password = serializers.CharField(required=True)

your_app_name/views.py:from rest_framework import generics
from rest_framework.response import Response
from rest_framework import status
from rest_framework.views import APIView
from .serializers import mySerializer
from .models import Reporter, Article# 通用View
class myGeneralListView(generics.ListAPIView):queryset = Reporter.objects.all()serializer_class = mySerializer# 自定义View
class articleCustomListView(APIView):# 未做异常处理，请自行完成def get(self, request):articles = Article.objects.all()articles_serializer = ArticleSerializer(articles, many=True)return Response({'articles': articles_serializer.data}, status=status.HTTP_200_OK)

your_app_name/urls.py:from django.urls import path
from .views import CustomListViewurlpatterns = [# path('userlogin/', UserLoginView.as_view(), name='user-login'),# ...其他URL配置...path('article-info/', articleCustomListView.as_view(), name='customlist'),
]

微信小程序：

官网文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

官方教程：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a（不了解的墙裂建议跟着过一遍）

组件库推荐：Vant Weapp（也可使用其它组件库，详细搜微信小程序组件库）

官方地址：https://youzan.github.io/vant-weapp/#/home（可打开网站扫码查看预览小程序）

#注意：组件库推荐使用npm命令进行构建，使用npm命令需要在环境安装node# 安装 node
Macos端：
# 使用brew命令安装 或 去官网地址下载软件包（同windows端）进行安装
# brew命令的使用需要提前安装，见网址：https://brew.sh
# 终端输入：/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"终端输入：brew install nodeWindows端：
# 官网地址下载软件包进行安装：https://nodejs.org/en/download# 检查npm是否安装
npm -v# 通过 npm 安装 
npm i @vant/weapp -S --production# 修改 app.json
将创建的微信小程序中的 app.json 中的 "style": "v2" 去除，因为小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱#构建npm项目
npm install# 构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件# 引入组件
以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}# 使用组件
引入组件后，可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Web前端—CSS高级（定位、高级技巧、CSS修饰属性、综合案例：购物网站轮播图）

Web前端—CSS高级（定位、高级技巧、CSS修饰属性、综合案例：购物网站轮播图）

版本说明 当前版本号[20231108]。 版本修改说明20231107初版20231108对知识点&#xff08;圆点&#xff09;进行补充 目录 文章目录 版本说明目录day08-CSS高级01-定位相对定位绝对定位定位居中固定定位堆叠层级 z-index定位总结 02-高级技巧CSS精灵案例-京东服务HTML结构CS…
阅读更多...
JavaEE-部署项目到服务器

JavaEE-部署项目到服务器

本部分内容为&#xff1a;安装依赖&#xff1a;JDK&#xff0c;Tomcat&#xff0c;Mysql&#xff1b;部署项目到服务器 什么是Tomcat Tomcat简单的说就是一个运行JAVA的网络服务器&#xff0c;底层是Socket的一个程序&#xff0c;它也是JSP和Serlvet的一个容器。 为什么我们需要…
阅读更多...
Python 如何实践 Builder(生成器) 对象创建型设计模式？

Python 如何实践 Builder(生成器) 对象创建型设计模式？

开始之前&#xff0c;我们先介绍一下该模型的基本信息。 生成器&#xff08;Builder&#xff09;设计模式是一种创建型设计模式&#xff0c;它用于创建复杂对象&#xff0c;将对象的构建过程与表示分离。这种分离可以让我们创建不同类型或配置的对象&#xff0c;同时避免构造函…
阅读更多...
FRC-EP系列--你的汽车数据一站式管家

FRC-EP系列--你的汽车数据一站式管家

FRC-EP系列产品主要面向汽车动力总成测试的客户&#xff0c;主要应用方向为残余总线仿真及网关。本文将详细介绍FRC-EP的产品特性和应用场景。 应用场景&#xff1a; 汽车电子生成研发过程中&#xff0c;需要对汽车各个控制器进行仿真测试&#xff0c;典型的测试对象有&#…
阅读更多...
宝塔常见进程守护方法, 进程守护脚本

宝塔常见进程守护方法, 进程守护脚本

添加MySQL进程守护脚本方法 pgrep -x mysqld &> /dev/null if [ $? -ne 0 ];then bash /www/server/panel/script/rememory.sh /etc/init.d/mysqld start fi 添加Apache进程守护脚本方法 pgrep -x httpd &> /dev/null if [ $? -ne 0 ];then bash /www/server/…
阅读更多...
数据中台之数据建模工程实操

数据中台之数据建模工程实操

目录 理论部分 工程实操 生成表结构 UI界面建表 DDL建表语句 ​编辑 Excel导入建表
阅读更多...
把wpf的窗体保存为png图片

把wpf的窗体保存为png图片

昨晚在stack overflow刷问题时看到有这个问题&#xff0c;今天早上刚好来尝试学习一下 stack overflow的链接如下&#xff1a; c# - How to render a WPF UserControl to a bitmap without creating a window - Stack Overflow 测试步骤如下&#xff1a; 1 新建.net frame…
阅读更多...
VM17虚拟机设置网络，本地使用工具连接虚拟机

VM17虚拟机设置网络，本地使用工具连接虚拟机

VM17虚拟机设置网络&#xff0c;本地使用工具连接虚拟机 下载及安装虚拟机不再说明&#xff0c;网络一堆教程。此处只对VM17设置网路及本地使用工具连接虚拟机操作&#xff0c;进行说明。 我下载的是VM17&#xff0c;网上有说VM16是较稳定的版本。想尝尝鲜&#xff0c;结果耗…
阅读更多...
Flutter android和ios闪屏页配置

Flutter android和ios闪屏页配置

一.概念理解 闪屏页 1.当点击app开始的一瞬间&#xff0c;所呈现出来的页面就是闪屏页。 2.为什么会有闪屏也&#xff0c;由于app启动需要加载代码&#xff0c;这个过程需要耗时&#xff0c;在没有加载完成之前&#xff0c;是看不到app真正的页面。所以app在没有完全加载完时…
阅读更多...
Yakit工具篇：WebFuzzer模块之序列操作

Yakit工具篇：WebFuzzer模块之序列操作

简介 Web Fuzzer 序列就是将多个 Web Fuzzer 节点串联起来&#xff0c;实现更复杂的逻辑与功能。例如我们需要先进行登录&#xff0c;然后再进行其他操作&#xff0c;这时候我们就可以使用 Web Fuzzer 序列功能。或者是我们在一次渗透测试中需要好几个步骤才能验证是否有漏洞这…
阅读更多...
使用mod_rewrite时常用的服务器变量： RewriteRule规则表达式的说明：

使用mod_rewrite时常用的服务器变量： RewriteRule规则表达式的说明：

使用mod_rewrite时常用的服务器变量&#xff1a; HTTP headers:HTTP_USER_AGENT, HTTP_REFERER, HTTP_COOKIE, HTTP_HOST, HTTP_ACCEPT connection & request: REMOTE_ADDR, QUERY_STRING server internals: DOCUMENT_ROOT, SERVER_PORT, SERVER_PROTOCOL system stuff: TI…
阅读更多...
vue中实现千位分隔符

vue中实现千位分隔符

vue中实现千位分隔符有两种&#xff0c;一种是某一个字段转换&#xff0c;一种是表格table中的整列字段转换 比如将3236634.12&#xff0c;经过转换后变为 3,236,634.12 1. 某一个字段转换 写js方法&#xff1a; export function numberExchange(value){if (!value) return…
阅读更多...
高压放大器在铁电测试中的用途有哪些

高压放大器在铁电测试中的用途有哪些

高压放大器在铁电测试中有多种重要用途。铁电材料是指具有自发极化的晶体材料&#xff0c;具有一系列特殊的电学和物理性质。铁电测试是研究铁电材料性质的关键实验手段之一。下面安泰电子将介绍高压放大器在铁电测试中的几个主要用途。 极化场施加&#xff1a;铁电材料的最显著…
阅读更多...
ARM---CAN2.0B读取 汽车BMS报文

ARM---CAN2.0B读取 汽车BMS报文

Qt CAN编程1- CAN总线整体介绍 - 简书 STM32---CAN2.0B读取新能源汽车BMS报文-CSDN博客 CAN通信标准帧和扩展帧介绍_can扩展帧-CSDN博客 【精选】详解CAN 2.0协议_can2.0-CSDN博客 QT实现CAN通信_五个板栗的技术博客_51CTO博客 linux CAN通讯基于Qt代码编写_pf_can-CSDN博客…
阅读更多...
【Mac开发环境搭建】安装HomeBrew、HomeBrew安装Docker、Docker安装Mysql5.7和8

【Mac开发环境搭建】安装HomeBrew、HomeBrew安装Docker、Docker安装Mysql5.7和8

文章目录 HomeBrew安装相关命令安装包卸载包查询可用的包更新所有包更新指定包查看已经安装的包查看包的信息清理包查看brew的版本更新brew获取brew的帮助信息 Brew安装DockerDocker常用命令镜像相关查看已经拉取的所有镜像删除镜像 容器相关停止运行容器启动容器重启容器删除容…
阅读更多...
【第2章 Node.js基础】2.2 Node.js回调函数

【第2章 Node.js基础】2.2 Node.js回调函数

学习目标 &#xff08;1&#xff09;理解Node.js的回调函数&#xff1b; &#xff08;2&#xff09;掌握回调函数的使用。 什么是回调函数 回调函数是一种特殊的函数&#xff0c;它作为参数传递给另一个函数&#xff0c;并在特定的事件或条件发生时被调用。回调函数通常用于异…
阅读更多...
快手直播弹幕websocket protobuf序列化与反序列化

快手直播弹幕websocket protobuf序列化与反序列化

系列文章目录 websocket训练地址：https://www.qiulianmao.com，正在搭建中 基础-websocket逆向基础-http拦截基础-websocket拦截基础-base64编码与解码基础-python实现protobuf序列化与反序列化基础-前端js实现protobuf序列化与反序列化基础-protobufjs实现protobuf序列化与反…
阅读更多...
一行命令让你的服务器命令行亮起来！！！！

一行命令让你的服务器命令行亮起来！！！！

if [ "$(whoami)" "root" ]; then echo "PS1${debian_chroot:($debian_chroot)}\[\033[01;32m\]\u\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]# " >> /root/.bashrc; source /root/.bashrc; echo "已为root用户设置提示符以#结尾…
阅读更多...
vue2 集成 - 超图 - SuperMap iClient3D for WebGL 及常用方法

vue2 集成 - 超图 - SuperMap iClient3D for WebGL 及常用方法

文章目录 1：下载SuperMap iClient3D for WebGL2：格式化项目中所用的依赖包3：vue2 项目引入4：vue2 页面使用常见方法4.1 创建三维场景，引入在线地图资源，定位到指定位置4.2 坐标拾取4.3 用户输入事件4.4 拾取实体4.5 实体改变监听事件4.6 双击全屏4.7 相机移动事件4.8 添加…
阅读更多...
kotlin 基本语法

kotlin 基本语法

const val INFO "ZZZ is Success Result" fun main(){ var name: String? "zzz" name null name?.capitalize() //?问号的意思是如果name是null ,后面的方法不执行&#xff0c;如果name不是null&#xff0c;后面方法执行 var name: String? &q…
阅读更多...
最新文章

Copyright @ 2022~2023