一步一步开发微信小程序(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 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//", 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 中直接使用组件
按钮

你可能感兴趣的:(软件开发,微信小程序,django,mysql)