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

最新推荐文章于 2024-01-27 18:28:53 发布

perfect Yang

最新推荐文章于 2024-01-27 18:28:53 发布

阅读量2.2k

点赞数 2

分类专栏：软件开发文章标签：微信小程序 django mysql

本文链接：https://blog.csdn.net/perfectzxiny/article/details/134300793

版权

软件开发专栏收录该内容

2 篇文章 2 订阅

订阅专栏

前提：假设你已经安装好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 include

urlpatterns = [
  	# 配置后台管理页面
    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 models

class Reporter(models.Model):
    full_name = models.CharField(max_length=70)
    
    def __str__(self):
        return self.full_name
      
class 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, Article


admin.site.register(Reporter)
admin.site.register(Article)

编写视图:

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

from django.shortcuts import render
from .models import Article


def 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 views

urlpatterns = [
    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 = yourModel
        fields = '__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 CustomListView

urlpatterns = [
    # 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 node

Windows端：
# 官网地址下载软件包进行安装：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>