【vue2项目总结】——动态渲染

简介: 【vue2项目总结】——动态渲染

@[toc]

主页渲染

封装接口

封装准备接口 api/home.js

import request from '@/utils/request'

// 获取首页数据
export const getHomeData = () => {
   
   
  return request.get('/page/detail', {
   
   
    params: {
   
   
      pageId: 0
    }
  })
}

页面调用

import GoodsItem from '@/components/GoodsItem.vue'
import {
   
    getHomeData } from '@/api/home'
export default {
   
   
  name: 'HomePage',
  components: {
   
   
    GoodsItem
  },
  data () {
   
   
    return {
   
   
      bannerList: [],
      navList: [],
      proList: []
    }
  },
  async created () {
   
   
    const {
   
    data: {
   
    pageData } } = await getHomeData()
    this.bannerList = pageData.items[1].data
    this.navList = pageData.items[3].data
    this.proList = pageData.items[6].data
  }
}

接口数据结构
在这里插入图片描述
数据
在这里插入图片描述

传到子组件

把数据传到子组件

  <div class="goods-list">
        <GoodsItem v-for="item in proList" :key="item.goods_id" :item="item"></GoodsItem>
      </div>

接收
在这里插入图片描述

搜索列表渲染

根据关键字搜索

在这里插入图片描述

1.计算属性,基于query 解析路由参数

computed: {
   
   
  querySearch () {
   
   
    return this.$route.query.search
  }
}

2.根据不同的情况,设置输入框的值

<van-search
  ...
  :value="querySearch || '搜索商品'"
></van-search>

3.页面中基于 goodsName 发送请求,动态渲染

data () {
   
   
  return {
   
   
    page: 1,
    proList: []
  }
},
async created () {
   
   
  const {
   
    data: {
   
    list } } = await getProList({
   
   
    goodsName: this.querySearch,
    page: this.page
  })
  this.proList = list.data
}

<div class="goods-list">
  <GoodsItem v-for="item in proList" :key="item.goods_id" :item="item"></GoodsItem>
</div>

分类id搜索

1 封装接口 api/category.js

import request from '@/utils/request'

// 获取分类数据
export const getCategoryData = () => {
   
   
  return request.get('/category/list')
}

2.跳转传递
在这里插入图片描述
3 搜索页,基于分类 ID 请求

async created () {
   
   
  const {
   
    data: {
   
    list } } = await getProList({
   
   
    categoryId: this.$route.query.categoryId,
    goodsName: this.querySearch,
    page: this.page
  })
  this.proList = list.data
}
目录
相关文章
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
17 3
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
16 3
|
22小时前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
53 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2
|
4天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
16 2
|
4天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
11 2
|
4天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
32 12