Separate front and rear end Calculator
Basic information
| The Link Your Class | 2301-MUSE社区-CSDN社区云 |
|---|---|
| The Link of Requirement of This Assignment** | Second assignment-- Back-end separation calculator programming-CSDN社区 |
| The Aim of This Assignment | Develop a front - end separate calculator to achieve scientific calculation and history access |
| MU STU ID and FZU STU ID | 21125422_832101225 |
Introduction
This blog mainly introduces me in the first job Wechat small program calculator on the basis of adding back-end functions. To achieve basic operations, including addition, subtraction, multiplication, division, power sum and scientific calculation, in the following will introduce some related background and design process and code, and finally the product display.
Link to the finished project code：jolinYao/EE301-Assignment2: EE301 | Assignment2 Separate front and rear end Calculator (github.com)
PSP Table
| Personal Software Process Stages | Estimated Time（minutes） | Actual Time（minutes） |
|---|---|---|
| Planning | 20 | 25 |
| • Estimate | 20 | 25 |
| Development | 435 | 675 |
| • Analysis | 30 | 30 |
| • Design Spec | 5 | 5 |
| • Design Review | 10 | 10 |
| • Coding Standard | 40 | 40 |
| • Design | 60 | 80 |
| • Coding | 200 | 400 |
| • Code Review | 60 | 80 |
| • Test | 30 | 30 |
| Reporting | 100 | 125 |
| • Test Repor | 60 | 75 |
| • Size Measurement | 10 | 20 |
| • Postmortem & Process Improvement Plan | 30 | 30 |
| Sum | 555 | 825 |
Work Present
1. Four basic operations
Four Arithmetic Operations and Remainder，Implement bracket computation
2. Access historical data
Reading History Records
3.Realize scientific computing
Design implementation Process
1. Flow chart
On the basis of the last wechat mini program native, add history access. The back end can be processed with the cloud development that comes with the wechat mini program. Only slightly more cumbersome is the need to write a user login to implement historical computation data storage.
2.Function realization
-
Front-end development:
I used wechat mini program framework for front-end development, WXML and WXSS to build the user interface, and JavaScript to handle user interaction. I wrote event handlers to capture the user’s input and perform the corresponding calculations. -
Back-end development:
For back-end development, I used wechat cloud development. Wechat Cloud Development provides built-in back-end support for small programs, including cloud functions and databases, without the need to configure your own server. I wrote cloud functions to handle front-end requests, perform related calculations, and then return the results to the front-end. -
The use of wechat cloud development makes the backend development of small programs more simplified, without having to build their own servers or maintain complex backend architecture. It provides powerful features and a convenient way to handle back-end logic and data storage. This integration helps to quickly build feature-rich wechat mini program applications.
Code specification
1. Front end
In this operation, the main change of the front end is to add two independent event keys, namely, the data upload cloud key and the key to jump to the historical data interface. Then I made some simple Settings for the historical data interface.
Historical data interface：
WXSS: Historical data style file
/* pages/sujv/sujv.wxss */
.line{
width:100%;
height:2rpx;
background:#aaa;
}
WXML：Historical data configuration file
<!--pages/sujv/sujv.wxml-->
<view wx:for="{{strArr}}" wx:for-item="items" wx:for-index="indexs" wx:key="indexs">
<view>
{{items.str}}
</view>
<view class="line"></view>
</view>
JS: Historical data configuration file
// pages/sujv/sujv.js
Page({
/**
* 页面的初始数据
*/
data: {
strArr:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(){
let that= this
//固定写法,用于获取当前数据库中goods这个表的实例对象
wx.cloud.database().collection('jilu')
//查询操作
.get({
//请求成功
success(res){
console.log('请求成功',res)
let result = res.data
that.setData({
strArr:result
})
console.log(result);
},
//请求失败
fail(err){
console.log('请求失败',err)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
New buttons are added on the home screen：
WXML: New button configuration on the home screen
<view style="position: absolute; top: 0; right: 0; background-color: bisque; border-radius: 20rpx; padding: 10rpx; opacity: 0.8; color: royalblue; font-weight: 800;" bindtap="lishi">历史</view>
<image style="position: absolute; top: 350rpx; right: 0; width: 100rpx; height: 100rpx;" bindtap="suby" src="/asset/images/a.png" mode=""/>
JS: New button logic on the home screen
onsole.log(this.data.inputs);
if(!this.data.inputs){
wx.showModal({
title: '提示',
content: '您没有输入内容哦~',
})
return
}
if(!this.data.answer){
wx.showModal({
title: '提示',
content: '您还没有计算结果，无法上传到云端',
})
return
}
userCollection.add({
data: {
str: this.data.inputs+"="+this.data.answer,
}
}).then(res => {
console.log('添加成功',res)
wx.showModal({
title: '提示',
content: '已成功上传云端~',
})
}).catch(err => {
console.log('添加失败',err)//失败提示错误信息
})
2. Rear-End
Cloud development is more convenient than traditional on-premises backend development and can eliminate the hassle of configuring the environment.
First of all, in the small program management background, open the cloud development function. In the applet management background, create a cloud development environment. Each environment has its own database and cloud functions. In a cloud development environment, you can create database collections, define data models, and add, modify, query, and delete data. Develop cloud functions to handle requests and business logic on the applet side. Cloud functions can be activated by triggers, HTTP requests, applets, etc.
JS: Write the corresponding logic in the corresponding JS file on the page to handle the back-end operation
// pages/sujv/sujv.js
Page({
/**
* 页面的初始数据
*/
data: {
strArr:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(){
let that= this
//固定写法,用于获取当前数据库中goods这个表的实例对象
wx.cloud.database().collection('jilu')
//查询操作
.get({
//请求成功
success(res){
console.log('请求成功',res)
let result = res.data
that.setData({
strArr:result
})
console.log(result);
},
//请求失败
fail(err){
console.log('请求失败',err)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
lishi:function(){
wx.navigateTo({
url: '/pages/sujv/sujv'
})
},
suby:function(){
let db = wx.cloud.database() //设置数据库
let userCollection = db.collection('jilu') //单引号里为刚刚新建的集合名
console.log(this.data.inputs);
if(!this.data.inputs){
wx.showModal({
title: '提示',
content: '您没有输入内容哦~',
})
return
}
if(!this.data.answer){
wx.showModal({
title: '提示',
content: '您还没有计算结果，无法上传到云端',
})
return
}
userCollection.add({
data: {
str: this.data.inputs+"="+this.data.answer,
}
}).then(res => {
console.log('添加成功',res)
wx.showModal({
title: '提示',
content: '已成功上传云端~',
})
}).catch(err => {
console.log('添加失败',err)//失败提示错误信息
})
Background data access：
Summary
The process of developing a wechat mini program calculator project with front-end separation brought me a lot of gains and insights, both in terms of technology and understanding of the development process. Here are some takeaways and insights:
- Technical Enhancement: Through practical projects, you can strengthen your front-end and back-end development skills. On the front end, you learned how to use small program frameworks to build user interfaces and handle user input; On the back end, you learn how to build services, process requests, and perform computational logic.
- API design and communication: You learned how to design simple and effective API interfaces and how to communicate data between the front end and the back end. This is also very useful for building other projects.
- Security and error handling: Learn about front-end and back-end security issues such as data validation, user authentication, and error handling. This helps improve the stability and security of your application.
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
