微信小程序python django前后端分离实现计算器

源博客地址

计算器

计算器
这个作业属于拿个课程	https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里	https://bbs.csdn.net/topics/617377308
这个作业的目标	继续完善计算器并且实现前后端分离
其他参考文献	无

代码连接

前端代码链接
后端代码链接

PSP表格

P2P	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	15	15
• Estimate:	• 估计这个任务需要多少时间	5	5
Development	开发	300	280
• Analysis	• 需求分析 (包括学习新技术）	60	30
• Design Spec	• 生成设计文档	10	10
• Design Review	• 设计复审	10	10
• Coding Standard:	• 代码规范 (为目前的开发制定合适的规范)	5	5
• Design	• 具体设计	40	40
• Coding	• 具体编码	200	210
• Code Review:	• 代码复审	20	20
• Test	• 测试（自我测试，修改代码，提交修改）	30	20
Reporting	报告	30	40
• Test Repor:	• 测试报告:	5	5
:• Size Measurement	• 计算工作量	10	10
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	10	10
	合计	750	700

成品展示

• 计算功能 历史记录 清零回退
  

• 报错信息
  

• 利率计算
  

• 利率修改
  

实践设计过程

• 思维导图

• 原型设计
  

• 前端

前端此次采用微信小程序，导入vantapp作为UI库

• 后端

后端使用python语言，使用Django框架，数据库使用mysql,数据库管理工具使用sqlyog

代码说明

前端

前端向后端发送post请求并把算式传过去，根据后端返回结果进行不同处理

commit() {
        let that = this
        wx.request({
            url: 'http://127.0.0.1:8000/user/first/',
            data: {
                "mathematical_formula": that.data.formula
            },
            header: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            method: 'POST',
            success: (res) => {
                if (res.data.code == 200) {
                    this.setData({
                        result: res.data.result
                    })
                } else if (res.data.code == 401) {
                    Toast.fail('0不能作为除数')
                    this.setData({
                        result: 'error'
                    })
                } else if (res.data.code == 402) {
                    Toast.fail('括号匹配有误')
                    this.setData({
                        result: 'error'
                    })
                } else if (res.data.code == 400) {
                    Toast.fail('算式错误')
                    this.setData({
                        result: 'error'
                    })
                }
            }
        })
    },

使用vantapp库中的组件进行设计

            <van-tab title="贷款利率">
                <van-cell-group custom-class="tabs">
                    <van-field wx:for="{{loan}}" wx:key="index" label="{{item.title}}" custom-class="tabs_field" model:value="{{item.rate}}" input-align="right" disabled="{{disabled == true}}" bind:input              ="input_rate_m" data-title="{{item.title}}">
                    </van-field>
                </van-cell-group>
            </van-tab>

后端

构建表（例）

class Deposit(models.Model):
    live = models.CharField(max_length=100)
    three_month = models.CharField(max_length=100)
    half_year = models.CharField(max_length=100)
    one_year = models.CharField(max_length=100)
    two_year = models.CharField(max_length=100)
    three_year = models.CharField(max_length=100)
    five_year = models.CharField(max_length=100)

编写视图函数

class SecondView(GenericAPIView):
    queryset = Deposit.objects.all()
    serializer_class = DepositSerialzer
    def get(self,request):
        list = self.get_queryset()
        ser = self.get_serializer(list, many=True)
        data = ser.data
        Cquery = request.query_params.get("data")
        lenght = len(data)
        result = data[lenght - 1]
        if Cquery == None:
            return Response({"code":200,"data":result})
        print(result[Cquery])
        return Response({"code":200,"data":result[Cquery]}) #getattr(result,Cquery)

    def post(self,request):
        data = request.data.copy()
        ser = self.get_serializer(data=data)
        if ser.is_valid():
            ser.save()
            code = 200
        else:
            code = 400
        return Response({"code": code, "result": 'ok'})

把视图函数绑定到路由上

from django.urls import path
from user import views


urlpatterns = [
    path('first/',views.FirstView.as_view()),
    path('second/',views.SecondView.as_view()),
    path('three/',views.ThreeView.as_view())
]

数据库

算式记录

利率表

心路历程和收获

通过这次实验，我更加熟悉了前后端分离的对接流程，同时对微信小程序的开发以及python的Django框架更加熟悉了，进一步提高了对前后端分离的理解，这对我之后进一步学习有很大帮助