结合代码-基于财务管理系统微信小程序index页面-对于前端和后端、API接口等的简单理解

于 2024-08-19 13:18:09 发布
阅读量1k 收藏 13
点赞数 28
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81170118/article/details/141322170
版权

什么是前端？

前端是指与用户直接交互的网页或应用界面的那一部分。在Web开发中，前端主要负责设计和实现用户界面的展示，包括网页的布局、颜色、字体、交互效果等，以及通过JavaScript、HTML和CSS等技术实现页面的动态效果和交互功能。

前端技术的发展使得现代网页和应用不再仅仅是静态的信息展示，而是能够提供丰富的用户交互体验，如动态加载数据、视频和音频播放、图形和动画效果、表单验证、地图导航、游戏等等。

构建前端的主要语言包括：

  1. HTML用于构建网页的骨架，定义网页的结构和内容。

  2. CSS用于设置HTML元素的样式，包括颜色、字体、间距、布局等，使得网页更加美观和易于阅读。

  3. JavaScript：一种高级的、解释执行的编程语言，用于实现网页的动态效果和交互功能。通过它可以动态地改变网页内容、响应用户操作等。

前端技术的发展极大地丰富了网页和应用的功能和体验，使得用户能够享受到更加便捷、高效的在线服务。

对应代码<template>和<style>部分：

<template>
  <view class="b-container">
    <!-- 日历 -->
    <view class="calendar-content" id="calendar-content">
      <view class="bg" />
      <view class="date-title">
        <picker
          class="date-picker"
          mode="date"
          @change="onPickerChange"
          fields="month"
          :value="pickerDate"
          :end="pickerEnd"
        >
       
        <!-- 左上角日期显示 -->
          <view class="now-date x-c">
            <text>{{ pickerDateText.year }}年{{ pickerDateText.month }}月</text>
            <i class="iconfont icon-bottom icon-down" />
          </view>
          <!-- <i>: 通常用于显示图标的标签。 -->
        </picker>
        <view class="statement">
          <view class="statement-text">
            <text class="statement-text-title">总收入</text>
            <view class="statement-text-total">
              <text class="statement-text-total-char">￥</text>
              <text>{{ indexStat.income }}</text>
            </view>
          </view>
          <!-- 右上角收入支出显示 -->
          <view class="statement-text">
            <text class="statement-text-title">总支出</text>
            <view class="statement-text-total">
              <text class="statement-text-total-char">￥</text>
              <text>{{ indexStat.expend }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="calendar">
        <mb-ba-calendar
          ref="calendar"
          :expand="expand"
          :tags="bill.indexTags"
          :date="calendarDate"
          @change="onDayChange"
          @changemonth="onMonthChange"
          @sizechange="onSizeChange"
        />
      </view>
    </view>
    
    <!-- 展开、收缩 -->
    <view
      :style="{ height: expandHeight + 'px' }"
      class="calendar-expand"
      @click="onExpandView"
    >
      <i
        style="font-size: 20px"
        :class="['iconfont', 'icon-' + (expand ? 'top' : 'bottom')]"
      />
    </view>
    <!-- 账单列表 -->
    <scroll-view
      class="statement-item"
      :style="{
        height: scrollHeight + 'px',
      }"
      scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="triggered"
      lower-threshold="50"
      @scrolltolower="onLowerBottom"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    >
      <mb-b-day-group :groups="indexBills" />
      <mb-ba-login-hint v-if="!hasLogin" />
      <mb-ba-empty v-if="!indexBills || (indexBills.length <= 0 && hasLogin)" />
      <uni-load-more status="no-more" v-if="hasLogin && indexBills.length>0"></uni-load-more>
    </scroll-view>
   

 <mb-b-day-list-popup
      :height=70
      :show="popShow"
      :date="popDate"
      @change="onBillsOnDayPopup"
    />
    <uni-fab ref="fab" :pattern="pattern" @fabClick="fabClick" horizontal='right' vertical='bottom'/>
  </view>
</template>
<style lang="scss" scoped>
  .test {
    font-size: 240rpx;
    color: $primary-color;
  }
  .calendar-content {
  .bg {
    z-index: -1;
    position: absolute;
    top: 0;
    background-color: $primary-color;
    width: 100%;
    height: 210rpx;
    border-radius: 0 0 30rpx 30rpx;
  }
  .date-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 30rpx;
    align-items: center;
    height: 64rpx;
    .date-picker {
      .now-date {
        font-size: 30rpx;
        font-weight: bold;
        align-items: baseline;
        .icon-down {
          font-size: 20rpx;
          margin-left: 10rpx;
        }
      }
    }
    .statement {
      display: flex;
    }

    .statement-text {
      margin-left: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-title {
        font-size: 30rpx;
      }
      &-total {
        font-size: 35rpx;
        font-weight: bold;
        &-char {
          font-size: 28rpx;
        }
      }
    }
  }
  .calendar {
    margin: 0 20rpx;
  }
}
.calendar-expand {
  width: 100%;
  text-align: center;
}

.statement-item {
  // background: white;
  padding-top: 36rpx;
  border-radius: 30rpx 30rpx 0 0;
  // padding-bottom: 36rpx;
  // margin-bottom: 36rpx;
  // background-color: red;
}

.popup-box {
  .asset {
    height: 700rpx;
  }
}
</style>

什么是后端？

后端在软件开发中，通常指的是那些运行在服务器上的程序和服务，它们负责处理来自前端（如网页或应用）的请求（request），执行必要的业务逻辑，处理数据，并将结果返回给前端。后端是用户不可见的，但它支撑着整个应用的功能和数据的处理。

后端开发主要关注以下几个方面：

  1. 服务器管理：选择合适的服务器和配置环境，部署和管理后端服务。这包括设置服务器操作系统、网络配置、安全策略等。

  2. 数据存储：设计和实现数据库系统，用于存储应用所需的数据。这包括数据库的选择、数据表的设计、索引优化、查询优化等。

  3. 业务逻辑处理：编写代码来实现应用的业务逻辑。这包括处理用户请求、验证数据、执行计算、与数据库交互等。后端代码通常使用一种或多种编程语言编写，如Java、Python等。

  4. API接口开发：为前端或其他服务提供API（应用程序接口），以便它们可以安全、有效地与后端进行通信和数据交换。

  5. 安全和性能：确保后端服务的安全性，防止数据泄露和恶意攻击。同时，优化后端代码和数据库查询，以提高应用的性能和响应速度。

  6. 扩展性和可维护性：设计易于扩展和维护的后端架构，以便在需要时能够轻松地添加新功能或修改现有功能。

在Web开发中，前端和后端通常是通过HTTP请求和响应进行通信的。前端发送请求到后端，后端处理请求并返回响应，前端再根据响应更新用户界面。这种分离使得前端和后端可以独立开发和维护，提高了开发效率和应用的灵活性。

前端和后端之间的联系

  1. 数据交互：
    • 前端负责展示数据给用户，并收集用户的输入。
    • 后端整合这些数据，进行相应的逻辑处理（如验证用户输入、查询数据库、更新数据等），并将处理结果返回给前端。
  2. 请求与响应：
    • 前端通过发送HTTP请求（如GET、POST等）与后端进行通信。
    • 后端接收请求，处理完毕后，通过HTTP响应将结果返回给前端。前端再根据响应内容更新页面内容或展示给用户。
  3. API接口：
    • 前后端通过定义好的API接口进行交互。这些接口规定了数据的格式、请求方式（GET、POST等）以及响应内容。
    • 前端通过调用这些API接口来请求数据或执行操作，后端则负责实现这些接口的具体逻辑。
  4. 前端技术：
    • 前端开发主要涉及HTML、CSS、JavaScript等技术，以及相关的框架和库。
    • 前端通过Ajax、Fetch API等技术发送HTTP请求，与后端进行异步通信。
  5. 后端技术：
    • 后端开发则涉及服务器端编程语言（如Python、Java、Ruby、Node.js等）以及数据库技术（如MySQL、PostgreSQL、MongoDB等）。
    • 后端通过框架和库来快速搭建服务器，处理前端请求，并返回响应。

关于API

API是一组规定和协议，它规定了软件系统中不同组件之间的交互方式，允许不同的软件之间进行交互和通信。它为开发者提供了一种访问软件系统中各种功能和数据的标准化方式，使得开发者可以不必重复编写相似的代码，直接使用API提供的功能，从而节省开发时间和成本。

一、特点与优势

  • 模块化与解耦：API使得应用程序能够分解为互相独立的模块，每个模块提供特定的服务，降低了系统的复杂性和维护成本。
  • 重用性：通过API，已开发的功能可以在多个项目中重用，无需重新编写代码。
  • 安全性：API定义了访问规则，可以限制和控制对系统功能的访问，提升系统的安全性。
  • 易于集成：API使得不同的应用程序和服务可以轻松集成，促进了数据的共享和连接。

二、工作原理

API的工作原理通常包括以下几个步骤：

  1. 请求建立：用户通过开发者编写的API对他们的应用程序发起请求，请求中通常包含数据和调用API的特定参数。
  2. 请求处理：开发人员编写的API服务器收到请求后，根据请求中的特定参数识别所需的操作和数据，并调用相应的代码库执行所需的任务。
  3. 数据返回：一旦请求的任务完成，API将返回数据给调用它的应用程序。

三、类型与分类

根据API提供者和消费者所在的位置，API可以分为本地API和远程API。此外，根据API接口的表现形式，还可以分为多种类型，如RESTful API、SOAP API等。每种类型的API都有其特定的应用场景和优势。

四、安全性考虑

在设计API时，需要考虑安全性因素，如认证、授权、审计、流控和加密等。这些安全措施有助于保护API免受恶意攻击和数据泄露的威胁。API作为软件系统中的桥梁和纽带，在促进不同软件之间的交互和通信方面发挥着重要作用。

本地API和远程API的区别与代码联系

一、位置关系

  • 本地API：当API的提供和使用位于同一台计算机上时，这种API被称为本地API。在这种情况下，API的调用和响应都在同一台机器的内部进行，不涉及网络传输。
  • 远程API：与本地API相反，远程API的提供和使用位于不同的计算机上。这意味着API的调用和响应需要通过网络进行传输，可能涉及跨局域网或互联网的通信。

二、通信方式

  • 本地API：由于提供和使用在同一台机器上，本地API的通信通常不涉及复杂的网络协议和传输层问题。它们可以直接通过内存共享、进程间通信（如管道、消息队列、共享内存等）或本地文件等方式进行数据传输。
  • 远程API：远程API的通信则需要通过网络协议来实现。这通常涉及TCP/IP、HTTP等网络协议，以及可能的加密、认证和授权等安全措施。远程API的调用者需要通过网络发送请求到服务器，服务器处理请求后返回响应给调用者。

三、应用场景

  • 本地API：本地API通常用于同一台机器上的不同程序或组件之间的通信。例如，操作系统提供的API允许应用程序与底层硬件或系统服务进行交互。
  • 远程API：远程API则广泛应用于分布式系统、Web服务、云计算等领域。它们允许不同地理位置的计算机或设备通过网络进行数据传输和交互，从而实现资源共享、业务协同等功能。

四、其他考虑因素

  • 性能：本地API由于不涉及网络传输，通常具有更高的性能和更低的延迟。而远程API的性能则受到网络带宽、延迟和稳定性的影响。
  • 安全性：远程API需要考虑更多的安全因素，如数据加密、身份验证和授权等，以防止数据在传输过程中被窃取或篡改。本地API虽然安全性较高，但也需要考虑访问控制和数据保护等问题。

五、本地API类举例

import { useBillStore } from "@/store/bill";
const bill = useBillStore();

import { useBillStore } from "@/store/bill"; 这行代码从应用的@/store/bill路径导入了useBillStore钩子。这个钩子可能是Vuex的一个自定义组合式API函数，用于在Vue组件中访问和管理bill相关的状态。

关于@/store/bill目录中useBillStore函数定义

export const useBillStore = defineStore('bill', {
  state: () => ({
    indexCurMonth: {
        year:  0,
        month: 0,
    },
    indexStat: {
        expend: 0,
        income: 0,
		count: 0
    },
    indexTags:  [],
    indexBills: [],
    profileStat: {
        expend:  0,
        income:  0,
        surplus: 0,
    },
  }),
  getters: {
  },  
  actions: {
    // 获取首页指定月份账单总金额
    getIndexTotalStat(params) {
        return new Promise((resolve, reject) => {
            //console.log("Total", params);
            api.monthTotalStat({
                month: datetime.getCurDate(new Date(params)).substring(0,7),
            }).then((res) => {
                // console.log("stat", res.data.result);
                if (res.data.code === 0) {
					this.indexStat = res.data.result;
                }
                resolve();
            }).catch((err) => { reject(err) });
        });
    }, 
    // 获取首页指定月份范围内的账单日期
    getIndexBillTags(params) {
        return new Promise((resolve, reject) => {
            // 会涉及跨年，需要处理
            let date = new Date(params);			
            let prev = datetime.getPrevMonth(date);            
			let next = datetime.getNextMonth(date);
            let prevmonth = prev.month.toString()
			let nextmonth = next.month.toString()
			if(prevmonth.length==1) prevmonth = '0'+prevmonth
			if(nextmonth.length==1) nextmonth = '0'+nextmonth
            api.hasBillDays({
                beginDate: `${prev.year}-${prevmonth}`,
                endDate: `${next.year}-${nextmonth}`,
            }).then((res) => {
                // console.log("tags", res);
                if (res.data.code === 0) {
					this.indexTags = res.data.result;
                }
                resolve();
            }).catch((err) => { reject(err) });
        });
    },
	
    // 获取首页账单分页数据，组装数据
    getIndexBills( { date, page, isInit }) {
        return new Promise((resolve, reject) => {
            let _date = datetime.getCurDate(new Date(date)); 			
			let year = datetime.getCurYear(new Date(date));
			let month = datetime.getCurMonth(new Date(date));
			this.indexCurMonth = { year, month };
			// console.log(page);
            api.monthBills({
                month: month,
                ...page,
            }).then((res) => {
                // console.log("list1", res.data);
                if (res.data.code === 0) {
					if (isInit) add_index_bills(this, [] , true)
					let total = res.data.result.total;
                    let items = res.data.result.items;
					if (this.indexBills.length > 0) {
				        add_index_bills(this, items, false )
                    } else {
                        // console.log("list2", items);
						// this.groups = items;
						add_index_bills(this, items, true )
                    }
                    resolve(total);
                 }
             }).catch((err) => { reject(err) });
		});
    },
    
	// 修改首页账单项
    modifyIndexBill( bill, date) {
        // console.log("store edit", bill);
        // 更改后会影响首页的字段：日期、时间、金额、账单类型
        let year = datetime.getCurYear(new Date(date));
        let month = datetime.getCurMonth(new Date(date));
        let day = datetime.getCurDay(new Date(date));
        // console.log("store mut", year, month, day, this.indexCurMonth);		
        if (year == this.indexCurMonth.year && month === this.indexCurMonth.month) { // 年份、月份不变的情况下直接处理
            try {
                this.indexBills.forEach((g) => {
                    g.items.forEach((item, i) => {
                        // 找到元素
                        if (item.id === bill.id) {
                            let source = JSON.parse(JSON.stringify(item));
                            // g.items[i] = bill; // 覆盖源数据，此时item是不受影响的(此处直接覆盖会造成视图不刷新的情况，首页的数据界面不会更新，需要单个赋值)
                            g.items[i].description = bill.description;
                            g.items[i].category = bill.category;
                            g.items[i].categoryIcon = bill.categoryIcon;
                            g.items[i].amount = bill.amount;
                            g.items[i].amountFormat = bill.amountFormat;
                            g.items[i].type = bill.type;
                            g.items[i].time = bill.time;
                            // console.log("source", source, g.items[i], item);
                            // 如果时间不一致，排一下序就行
                            if (g.items[i].time != source.time) {
                                // console.log("进行排序", g.items);
                                g.items = g.items.sort((d1, d2) => {
                                    return new Date(`2000-09-25 ${d1.time}`) < new Date(`2000-09-25 ${d2.time}`) ? 1 : -1
                                });
                            }

                            // 如果金额、账单类型不相等，进行统计调整
                            if (g.items[i].amount != source.amount || g.items[i].type != source.type) {
                                let op = source.amount < g.items[i].amount ? 0 : 1; // 源数据 小于 改后数据，则统计需要增加，否则减少
                                let diff = Math.abs(source.amount - g.items[i].amount);
                                // 确定当前账单类型，没改变类型则只需要更改对应类型的统计
                                if (g.items[i].type == source.type) {
                                    if (g.items[i].type == 0) { // 支出
                                        this.indexStat.expend = calcTotalStat(this.indexStat.expend, diff, op)
                                        this.profileStat.expend = calcTotalStat(this.profileStat.expend, diff, op)
                                    } else if (g.items[i].type == 1) { // 收入
                                        this.indexStat.income = calcTotalStat(this.indexStat.income, diff, op)
                                        this.profileStat.income = calcTotalStat(this.profileStat.income, diff, op)
                                    }
                                } else {
                                    if (g.items[i].type == 0) { // 收入 -> 支出
                                        // 支出直接加上改后的金额
                                        this.indexStat.expend = calcTotalStat(this.indexStat.expend, g.items[i].amount, 0)
                                        this.profileStat.expend = calcTotalStat(this.profileStat.expend, g.items[i].amount, 0)
                                        // 收入直接减去原本的金额
                                        this.indexStat.income = calcTotalStat(this.indexStat.income, source.amount, 1)
                                        this.profileStat.income = calcTotalStat(this.profileStat.income, source.amount, 1)
                                    } else if (g.items[i].type == 1) { // 支出 -> 收入
                                        // 支出直接减去原本的金额
                                        this.indexStat.expend = calcTotalStat(this.indexStat.expend, source.amount, 1)
                                        this.profileStat.expend = calcTotalStat(this.profileStat.expend, source.amount, 1)
                                        // 收入直接加上改后的金额
                                        this.indexStat.income = calcTotalStat(this.indexStat.income, g.items[i].amount, 0)
                                        this.profileStat.income = calcTotalStat(this.profileStat.income, g.items[i], 0)

                                    }
                                }
                                this.profileStat.surplus = calcTotalStat(this.profileStat.income, this.profileStat.expend, 1);
                            }
                            // 如果更改日期（具体几号），先移除，在添加  (整体操作必须在最后做)
                            if (day != g.day) {                                
								del_index_bill(this, bill.id)								
								add_index_bill(this, { bill, date })
                            }
                            throw new Error("Ok"); // 跳出循环
                        }
                    });
                });
            } catch (e) {
            };
        } else { // 变更年份、月份则需要删除            
			del_index_bill(this, bill.id)
        }
    },
    	
	// 获取 我的 本年度账单总金额
    getProfileTotalStat() {
        // console.log("Total", params);
        api.yearTotalStat({
            year: datetime.getCurYear(),
        }).then((res) => {			
            if (res.data.code === 0) {                
				this.profileStat = res.data.result
				//console.log(this.profileStat["income"]);
            }
        });
    },
	delIndexBill(bill){
		del_index_bill(this, bill.id)		
	},
	// 获取搜索分页数据，组装数据
	getSearchBills( { keyword,page, isInit }) {
	    return new Promise((resolve, reject) => {
			// console.log(page);
	        api.searchBills({
	            keyword: keyword,
	            // ...page,
	        }).then((res) => {
	            // console.log("list1", res.data);
	            if (res.data.code === 0) {
					if (isInit) add_index_bills(this, [] , true)
					let total = res.data.result.total;
	                let items = res.data.result.items;
					if (this.indexBills.length > 0) {
				        add_index_bills(this, items, false )
	                } else {
	                    // console.log("list2", items);
						// this.groups = items;
						add_index_bills(this, items, true )
	                }
	                resolve(total);
	             }
	         }).catch((err) => { reject(err) });
		});
	},
  }
})

通过定义自定义组合式API函数，可以在多个组件中共享相同的逻辑，而无需在每个组件中重复编写相同的代码。将复杂的逻辑（如数据获取、状态更新、事件处理等）封装在可重用的函数中，以提高代码的可维护性和可读性。 

对其中几处API代码解析 

api.hasBillDays({
                beginDate: `${prev.year}-${prevmonth}`,
                endDate: `${next.year}-${nextmonth}`,
            }).then((res) => {
                // console.log("tags", res);
                if (res.data.code === 0) {
					this.indexTags = res.data.result;
                }
                resolve();
            }).catch((err) => { reject(err) });
        });

这是一个对api对象的hasBillDays方法的调用。api是一个封装了HTTP请求逻辑的对象，追随到@/api/api目录后我们发现

// import account from './account'
import bill from './bill'
import preOrder from './pre-order'
// import common from './common'
// import file from './file'

export default {
    // ...account,
    ...bill,
    ...preOrder,
    // ...common,
    // ...file
}

在对其中的两个文件进行探查后

./bill

import { http } from './service.js'

const bill = {
    //#region   账单信息

    // 新增账单详情
    addBill(params) {
		// console.log(params);
        return http.post('bill', params )
    },

    // 删除账单详情
    delBill(params) {
        // return http.delete('bill', params)
		return http.post('bill/del/'+params)
    },

    // 编辑账单详情
    editBill(id, params) {
		// console.log(params);
        return http.post('bill/edit', id, params)
    },

    // 获取账单详情
    billDetail(params) {
		// console.log(params);
        return http.get('bill/', { params: params })
    },

    // 获取指定日期账单
    dayBills(params) {
        return http.get('bill/day/', { params: params })
    },

    // 获取指定条件分页账单
    billPages(params) {
        return http.get('bill/pages/', { params: params })
    },
	
    // 获取指定月份账单总金额
    monthTotalStat(params) {
        return http.get('stat/month-total/', { params: params })
    },

    // 获取指定月份账单总金额
    yearTotalStat(params) {
        return http.get('stat/year-total/', { params: params })
    },

    // 获取日期范围内存在账单的日期 tags
    hasBillDays(params) {
        // console.log(params);
		return http.get('stat/has-bill-days/', { params: params })
    },

    // 获取指定月份日分组分页账单
    monthBills(params) {
		// console.log(params);
        return http.post('stat/pages/', params)
    },
	
	
	// 获取搜索分组分页账单
	searchBills(params) {
		// console.log('stat/pages/search?keyword='+params.keyword);
	    return http.get('stat/pages/search/'+params.keyword)
		//http://127.0.0.1:8000/stat/pages/search?keyword=%E7%A7%9F

	},

    //#endregion

    //#region 账单统计

    // 年收支结余统计
    yearSurplus(params) {
        return http.get('stat/year-surplus/', { params: params })
    },

    // 月收支趋势统计
    monthTotalTrend(params) {
        return http.get('stat/trend/month-total/', { params: params })
    },

    // 年收支趋势统计
    yearTotalTrend(params) {
        return http.get('stat/trend/year-total/', { params: params })
    },

    // 收支分类占比统计
    categoryPercent(params) {
        return http.get('stat/percent/category/', { params: params })
    },

    // 收支分类占比分组列表
    categoryPercentGroup(params) {
        return http.get('stat/percent/category/group/', { params: params })
    },

    // 指定条件账单排行列表
    billRanking(params) {
        return http.get('stat/ranking/', { params: params })
    },
	
	// 月收支趋势统计·
	getMonthData() {
	    return http.get('stat/test/month')
	},

	// 年收支趋势统计·
	getYearData() {
	    return http.get('stat/test/year')
	},
	
	// 统计·
	getRankingData() {
	    return http.get('stat/test/ranking')
	},
	
    //#endregion

    //#region 账单分类

    // 获取分组后的账单分类
    getCategoryGroups(params) {
		// console.log('params:', params);
        return http.get('category/groups/', { params: params })
    },

    // 获取全部账单分类
    categoryList(params) {
        return http.get('category/list/', { params: params })
    },

    // 排序账单分类
    sortCategoryGroups(params) {
        return http.post('category/sort/', params)
    },

    // 获取账单分组/分类
    getCategory(params) {
        // return http.get('category/', { params: params })
		return http.get('category/'+params.id)
    },

    // 创建账单分组/分类
    createCategory(params) {        
		return http.post('category/', params)
    },

    // 编辑账单分组/分类
    editCategory(params) {        
		return http.post('category/'+params.id + '/' + params.name + '/' + params.iconPath)
    },

    // 删除账单分组/分类
    delCategory(params) {
        // return http.delete('category', params)
		// console.log('category/del/'+params);
		return http.post('category/del/'+params)
    },

    //#endregion

    //#region 账单账户

    // 获取分组后的账单账户
    getAssetGroups(params) {
		//console.log('getAssetGroups:', params);
        return http.get('asset/groups/', { params: params })
    },

    // 排序账户分组/分类
    sortAssetGroups(params) {
        return http.post('asset/sort/', params)
    },

    // 获取账户分组/分类
    getAsset(params) {
        return http.get('asset/'+params.id)
    },

    // 创建账户分组/分类
    createAsset(params) {
		// console.log('创建账户分组/分类:');
		// console.log(params);
        return http.post('asset/', params)
    },

    // 编辑账户分组/分类
    editAsset(params) {
        return http.post('asset/edit/'+params.id+'/'+params.name+'/'+params.iconPath)
    },

    // 删除账单分组/分类
    delAsset(params) {
		// console.log(params);
        // return http.delete('asset/', params)
		return http.post('asset/del/'+params)
    },

    //#endregion
}

export default bill;

./pre-order

import { http } from './service.js'

const preOrder = {

    //#region 预购分组

    // 新增预购分组 ✔
    addPreOrderGroup(params) {
		return http.post('pre-order/group', params )
    },

    // 编辑预购分组 ✔
    editPreOrderGroup(params) {
        return http.put('pre-order/group/'+params.id, params )
    },

    // 删除预购分组 ✔
    delPreOrderGroup(params) {
        // return http.delete('pre-order/group', params)
		// return http.post('pre-order/group/del/'+ params)
		return http.delete('pre-order/group', {id:params})
    },

    // 预购分组转入账单
    preOrderGroupToBill(params) {
		// console.log(params);
        return http.post('pre-order/group/to-bill', params)
    },

    // 获取预购分组 With 预购单总金额
    getPreOrderGroupWithAmount(params) {
		// console.log(params);
        return http.get('pre-order/group/amount', { params: params })
    },

    // 获取指定月份日分组分页账单 ✔
    monthPreOrderGroups(params) {
		// console.log(params);
        return http.post('pre-order/group/month/pages', params)
    },

    // 获取指定分组预购清单统计
    groupPreOrderStat(params) {
        return http.get('pre-order/group/order/stat', { params: params })
    },

    //#endregion

    //#region 预购

    // 新增预购
    addPreOrder(params) {
		// console.log(params)
        return http.post('pre-order/preorder', params)
    },

    // 编辑预购
    editPreOrder(params) {
        return http.put('pre-order/preorder/'+params.id, params)		
    },

    // 已购，重置预购，实购金额=0
    editPreOrderStatus(params) {
        return http.post('pre-order/preorder/status/', params)
    },

    // 删除预购
    delPreOrder(params) {
        return http.delete('pre-order/preorder', {id:params})
    },

    // 获取预购信息
    getPreOrder(params) {
        return http.get('pre-order', { params: params })
    },

    // 获取指定分组分页预购
    groupPreOrders(params) {
		// console.log(params);
        return http.get('pre-order/pages/'+params.id+'/'+params.page+'/'+params.size)
    },

    // 获取指定分组预购清单统计
	// 获取预购清单首页统计
    indexPreOrderStat(params) {
		// console.log(params);
        return http.get('pre-order/index/stat', { params: params})
    },

    //#endregion

}

export default preOrder;

 两个页面中大部分都是运用HTTP进行API的运用，与数据库和后端的联系

 我们对其中一处进行解读

addPreOrderGroup(params) {
		return http.post('pre-order/group', params )
    }
    • return http.post('pre-order/group', params)：这行代码是函数的核心，它调用了某个名为 http 的对象（或模块）的 post 方法来发起一个HTTP POST请求。http 对象很可能是对某个HTTP客户端库的封装，比如Axios、Fetch API的封装版本，或者是Vue.js项目中常见的Vue Resource、axios等插件。
    • 'pre-order/group'：这是请求的URL路径，表示你想要将数据发送到服务器上的哪个位置。在这个例子中，它可能指向一个处理预订单分组的后端API端点。
    • params：这是 post 方法的第二个参数，表示要随请求发送的数据。这些数据将作为请求体（body）发送给服务器，并且通常会被序列化为JSON格式（具体取决于 http 对象的实现和配置）。
  2. 返回值：
    • 函数通过 return 语句返回了 http.post 调用的结果。这意味着 addPreOrderGroup 函数将返回一个Promise（如果 http 对象是Axios或类似的基于Promise的HTTP客户端库）或其他类型的值（取决于 http 对象的实现）。这个返回值允许调用者通过 .then()、.catch() 或 async/await 等机制来处理异步操作的结果或错误。

自定义组合式API函数和API的关系和区别。

  1. 自定义组合式API函数：
    • 这些是开发者在Vue组件的setup函数中使用的自定义函数，用于封装和复用组件的逻辑。
    • 它们通常与Vue的响应式系统（如ref、reactive等）紧密合作，以创建和管理组件的状态。
    • 自定义组合式API函数可以返回响应式引用、计算属性、方法或其他自定义组合式API函数，以便在组件的其他部分中使用。
    • 它们主要用于提高组件的逻辑封装性、复用性和可维护性。
  2. 本地API（或任何API）：
    • 本地API通常指的是在同一应用程序或系统内部提供的接口，这些接口允许应用程序的不同部分或组件之间进行通信和数据交换。
    • 在Web开发中，本地API可能指的是后端服务提供的端点，这些端点可以通过HTTP请求从前端访问，但也可能指的是在同一前端应用程序中不同组件或模块之间的接口。
    • 在Vue.js应用程序中，本地API的调用可能发生在组件的方法中、Vuex的actions中，或作为自定义组合式API函数的一部分。

它们之间的关系：

  • 自定义组合式API函数可以包含调用本地API（或其他任何API）的逻辑。例如，一个自定义的函数可能封装了从后端服务获取数据的逻辑，包括发起HTTP请求、处理响应和更新组件状态。
  • 在这种情况下，自定义组合式API函数为组件提供了一个高级的、封装的接口来与本地API进行交互，而无需在组件中直接编写这些交互的细节。
  • 通过这种方式，自定义组合式API函数增强了组件的模块化和可重用性，同时也使得组件更加关注于展示逻辑，而不是数据获取或状态管理的细节。

总结

对于前端和后端的理解我们只学习到了比较浅显的一些表面知识，其中的动态联系与规划才是我们应该重点关注的，关于HTTP和request的理解运用才是我们应该着重注意的地方。

qdu&nobady
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值