循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

在前面随笔《循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理》中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理。

1、后端数据的获取处理

前面随笔,我们介绍过了Vue + Element的前端框架中,主要通过后端获取数据,并呈现在界面视图或者组件上的。

前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了。

我们通过Vue.config.js的配置信息,可以指定Proxy来处理是本地Mock数据还是实际的后端数据,如下所示。

我们要跨域请求数据,在配置文件里设置代理,vue-cli3项目,需要在vue.config.js里面写配置。

我们创建了一些操作数据的API类文件,每个API名称对应一个业务的集中处理,包括特定业务的列表请求、单个请求、增加、删除、修改等等都可以封装在一个API类里面。

然后在对应的业务API访问类,如product.js 里面定义我们的请求逻辑,主要就是利用简单封装axios的request辅助类来实现数据的请求。

下一步就是在src/views/product目录里面定义我们的视图文件,这个也就是页面文件,其中包含了常规VUE的几个部分,包括

<template>
  
</template>
<script>
export default {
}
</script>
<style>
</style>

其中在<template>里面的是界面元素部分,可以添加我们相关的界面组件等内容,如element的界面组件在里面。

其中<script>是vue脚本交互的部分了,这里面封装我们很多处理逻辑和对应的modal对象信息,在调用API类进行访问数据前,我们往往需要引入对应的API类文件,如下所示。

import { GetTopBanners, GetProductList } from '@/api/product'

其中<style>则定义相关的样式。

在开始介绍Vue 的Script部分,我们认为你已经对VUE的script相关内容,以及它的生命周期有所了解了,script部分的内容包括有。

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 组件的方法
  },
  watch: {
    // watch擅长处理的场景:一个数据影响多个数据
  },
  computed: {
    // computed擅长处理的场景:一个数据受多个数据影响
  },
  beforeCreate: function() {
    // 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  },
  created: function() {
    // 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  },
  beforeMount: function() {
    // 在挂载开始之前被调用:相关的 render 函数首次被调用。
  },
  mounted: function() {
    // 编译好的HTML挂载到页面完成后执行的事件钩子
    // el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
    // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
    console.log("Home done");
  },
  beforeUpdate: function() {
    // 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
  },
  updated: function() {
    // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
    // 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
    // 该钩子在服务器端渲染期间不被调用。
  },
  beforeDestroy: function() {
    // 实例销毁之前调用。在这一步,实例仍然完全可用。
  },
  destroyed: function() {
    // Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
  }
};
</script>

其中我们主要涉及到内容包括:

data,用于定义整个页面的modal对象或属性,

method,用于定义各种处理方法

computed,用于定义一些计算的树形

created,用于我们在元素创建,但是没有挂载的时候

mounted,完成页面挂载的时候

2、界面展示处理

例如我们要展示一个界面内容,需要展示产品的图片,以及产品信息介绍

那么需要定义相关的数据模板,以及对应的处理方法,在页面加载前实现数据的绑定处理。

export default {
  data() {
    return {
      activeName: 'all',
      currentDate: new Date(),
      banners: [],
      productlist: [],
      pageinfo: {
        pageindex: 1,
        pagesize: 10,
        total: 0
      },
      producttype: 'all'
    };
  },
  created() {
    this.loadbanners()
    this.getlist()
  },

界面部分,我们利用Element的界面组件定义一个走马灯的展示效果,如下所示。

 在Template模块里面定义好的界面元素如下所示。

这里面的el-carousel 是Element组件的走马灯,而 v-for="item in banners" 就是vue的处理语法,对data模型里面的数据进行循环处理,然后逐一展示多个图片,从而实现了走马灯的效果展示。

对于列表展示,我们采用了一个卡片的展示内容,以及分页处理的方式实现数据的展示。

 分类按钮部分,代码如下所示。

<el-row :gutter="20" style="padding:20px">
  <el-button type="primary" icon="el-icon-search" :plain="producttype !='all'" @click="handleClick($event, 'all')">全部</el-button>
  <el-button type="success" icon="el-icon-search" :plain="producttype !='1'" @click="handleClick($event, '1')">框架产品</el-button>
  <el-button type="warning" icon="el-icon-search" :plain="producttype !='2'" @click="handleClick($event, '2')">软件产品</el-button>
  <el-button type="danger" icon="el-icon-search" :plain="producttype !='3'" @click="handleClick($event, '3')">开发组件</el-button>
</el-row>

主要就是根据data属性进行一些样式的控制,以及响应对应的click事件。

而每个卡片内容介绍,Demo代码如下所示。

<el-col :span="4"><div class="grid-content bg-purple" />
<el-card class="box-card">
  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
  <div style="padding: 14px;">
    <span>好吃的汉堡</span>
    <div class="bottom clearfix">
      <time class="time">价格:¥200</time>
      <el-button type="text" class="button" @click="loadbanners()">操作按钮</el-button>
    </div>
  </div>
</el-card>
</el-col>

但是我们要根据实际获得的动态数据进行绑定,因此需要一个循环来进行处理,类似上面的v-for循环,对产品列表进行展示即可。

<el-col v-for="(item, index) in productlist" :key="index" :span="4" style="min-width:250px">
<div class="grid-content bg-purple">
  <el-card class="box-card">
    <img :src="item.Picture" class="image" style="width:200px;height:200px">
    <div style="padding: 14px;">
      <span>{{ item.ProductName }}</span>
      <div class="bottom clearfix">
        <!-- <time class="time">价格:¥{{ item.Price }}</time> -->
        <el-button type="text" class="button">操作按钮</el-button>
      </div>
    </div>
  </el-card>
</div>
</el-col>

为了有效的请求和展示数据,我们还需要利用分页组件来进行数据的分页查询处理,分页组件界面的定义代码如下所示。

<el-pagination
      background
      layout="prev, pager, next"
      :page-sizes="[10,20,50]"
      :total="pageinfo.total"
      :current-page="pageinfo.pageindex"
      :page-size="pageinfo.pagesize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

为了实现对数据的分页,我们需要定义当前页码、每页面数据大小、总共数据记录数等几个变量,用来进行分页查询的需要。

我们定义的getList的方法如下所示。

getlist() {
      // 构造分页查询条件
      var param = {
        type: this.producttype === 'all' ? '' : this.producttype,
        pageindex: this.pageinfo.pageindex,
        pagesize: this.pageinfo.pagesize
      };
      this.listLoading = true
      // 发起数据查询请求,并设置本地Data的值
      GetProductList(param).then(data => {
        this.productlist = data.list
        this.pageinfo.total = data.total_count
        this.listLoading = false
      })
    },

另外定义几个方法,对数据进行查询的操作。

// 单击某类别的时候,进行查询
    handleClick(e, type) {
      // console.log(e, type);
      this.producttype = type
      this.pageinfo.pageindex = 1;
      this.getlist()
    },
    // 页面数量改变后查询处理
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageinfo.pagesize = val;
      this.getlist()
    },
    // 页码改变后查询处理
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageinfo.pageindex = val;
      this.getlist()
    }

以上就是我们利用Element的界面组件,以及Vue的方法进行数据的分页查询请求的基础操作,通过这个简单的案例,我们可以了解一些基础的Element 界面组件的使用,以及对Data / Method等内容的了解,并指导如何封装调用跨域的API请求,实现后端数据在界面上的展示处理了。

 

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制  

VUE+Element 前端应用开发框架功能介绍

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

 

专注于代码生成工具、.Net/.NetCore 框架架构及软件开发,以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
 转载请注明出处:撰写人:伍华聪  http://www.iqidi.com
   

标签: 循序渐进VUE+Element

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
19天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
19天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
24天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
19天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
129 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
1月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
1月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT