当前位置： 首页 > news >正文

【易购管理系统】商品列表

news 来源：原创 2024/5/3 3:58:06

我们来写一下商品管理界面
在这里插入图片描述
在Goods.vue中

<template>
  <div>
   <!-- 1.搜索区域 -->
   <div class="header">

   </div>
   <!-- 2.表格区域展示视图数据 -->
   <div class="wrapper">
    
   </div>

   <!-- 3.分页 -->
  </div>
</template>

我们再去element中去找一下input输入框相关的内容

<el-input v-model="input" placeholder="请输入内容"></el-input>

 data() {
    return {
      input: ''
    }
  }

后面还有俩按钮，通过button就可以

 <!-- 1.搜索区域 -->
   <div class="header">
     <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary">查询</el-button>
       <el-button type="primary">添加</el-button>
   </div>

在这里插入图片描述
我们再调整一下布局，给大的div盒子一个goods的class

.goods {
  margin: 10px;
}
.header{
display:flex;
button:{
   margin-left:20px;
      }
   }

暂时先不给按钮添加点击事件，因为它和下面的内容有关，我们先把下面内容区域做完，然后再给按钮写点击事件

实现多选非常简单:
手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在
hover 时以 tooltip 的形式显示出来。

   <!-- 2.表格区域展示视图数据 -->
   <div class="wrapper">
     <el-table  :data="tableData"   border>
       <el-table-column type="selection" width="55"> </el-table-column>
       <el-table-column prop="date" label="商品ID" width="100"></el-table-column>
       <el-table-column prop="name" label="商品名称" width="100"> </el-table-column>
       <el-table-column  prop="name" label="商品价格" width="100"></el-table-column>
       <el-table-column prop="name" label="商品数量" width="100"> </el-table-column>
       <el-table-column prop="name" label="规格类别" width="100"> </el-table-column>
       <el-table-column prop="name" label="商品图片" > </el-table-column>
       <el-table-column  prop="name" label="商品卖点" > </el-table-column>
       <el-table-column prop="name" label="商品描述" > </el-table-column>
       <el-table-column  prop="name" label="操作" width="180"></el-table-column>
    </el-table>
   </div>

最终的效果如下：
在这里插入图片描述
操作下面还有两个预留的按钮

<el-table-column  prop="name" label="操作" width="180">
         <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
       </el-table-column>

 methods: {
    // 编辑操作
    handleEdit(index, row) {
        
    },
      // 删除操作
      handleDelete(index, row) {
        
      }
  }

我们放一行数据看效果：

data() {
    return {
      input: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }    
  },

在这里插入图片描述

动态数据

搭建后台服务

新建一个空的文件夹server，在里面新建index.js，后台搭建的服务。但是把依赖都装到node_module下面，后期只要起项目就可以启动所有的服务。
终止项目，装一下express

PS D:\VScode代码\后台管理系统\vue-ego> cnpm i express -S

在这里插入图片描述
又因为这个地方还牵扯到我们的数据库，所以还需要装一下mysql

PS D:\VScode代码\后台管理系统\vue-ego> cnpm i mysql -S

在这里插入图片描述
然后启动项目就可以了。

在我们的server文件夹下的index.js中

//搭建express服务
const express = require('express')
const app = express()
   
//路由
const router = require('./router')

app.use('/api', router)

app.listen(8989, () => {
    console.log(8989);
})

在该文件夹下新建router.js里面存放接口

const express = require('express');
const router = express.Router()

//路由接口
router.get('/' ,(req,res)=>{
res. send( 'hello')
})


module.exports = router

开启一下server

PS D:\VScode代码\后台管理系统\vue-ego\server> nodemon

在这里插入图片描述
然后在浏览器中访问

localhost:8989/api/

在这里插入图片描述

接着新建mysql.js文件

//连接数据库  1.安装mysql 2.创建连接
const mysql = require('mysql')

//创建数据库连接
const client = mysql.createConnection({
    host: 'localhost', //数据域名 地址
    user: 'root', //数据名称
    password: '', //数据库密码 xampp集成
    database: 'vue-ego',
    // port: '3306'
})

//封装数据库操作语句 sql语句 参数数组arr  callback成功函数结果
function sqlFun(sql, arr, callback) {
    client.query(sql, arr, function(error, result) {
        if (error) {
            console.log('数据库语句错误');
            return;
        }
        callback(result)
    })
}

module.exports = sqlFun

接着在路由中导入数据库

//导入数据库 sqlFn('sql',[],res=>{})
const sqlFn = require('./mysql')

然后把商品列表接口和商品查询接口拿过来

// 商品列表： 获取分页 { total: '', arr: [{}, {}, {}], pagesize: 8, } *
// 参数： page 页码
router.get('/projectList', (req, res) => {
    const page = req.query.page || 1;
    const sqlLen = "select * from project where id";
    sqlFn(sqlLen, null, data => {
        let len = data.length;
        const sql = "select * from project order by id desc limit 8 offset " + (page - 1) * 8;
        sqlFn(sql, null, result => {
            if (result.length > 0) {
                res.send({
                    status: 200,
                    data: result,
                    pageSize: 8,
                    total: len
                })
            } else {
                res.send({
                    status: 500,
                    msg: "暂无数据"
                })
            }
        })
    })
})

/**
 * 商品查询接口 search
 * 参数：search
 */
router.get("/search", (req, res) => {
    var search = req.query.search;
    const sql = "select * from project where concat(`title`,`sellPoint`,`descs`) like '%" + search + "%'";
    sqlFn(sql, null, (result) => {
        if (result.length > 0) {
            res.send({
                status: 200,
                result
            })
        } else {
            res.send({
                status: 500,
                msg: "暂无数据"
            })
        }
    })
})

再到浏览器中访问接口，看是否引入

http://localhost:8989/api/projectList

在这里插入图片描述

前端网络请求

后台服务器搭建完成以后，接下来我们要做网络请求
在src下新建api文件夹，在下面新建base.js存放所有的路径配置和index.js里面存放所有的请求方法。
base.js

const base = {
    goodsList: 'api/api/projectList', //商品列表 url

}
export default base;

index.js

/**
 * 请求的方法
 */

import axios from 'axios'
import base from './base'

const api = {
    /**
     * 商品列表
     */
    getGoodsList(params) { //{page:xx}
        return axios.get(base.goodsList, {
            params
        })
    },
}

export default api

因为后台没有配资源共享，肯定会跨域，我们需要接着配置，在目录下新建vue.config.js

//配置参数
/**
 * devServer.proxy 
 * 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请 求代理到 API 服务器
 */
module.exports = {
    assetsDir: 'assets',
    //修改打包路径
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    //反向代理
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8989/api', //
                // target:process.env.VUE_APP_BASE_URL,//
                ws: true,
                changeOrigin: true,
                pathRewrite: { //重写路径
                    '^/api': ''
                }
            },
        },
    }

}

再将api挂到main.js中去

import api from './api/index'
Vue.prototype.$api = api

在商品界面发送请求.在Goods.vue中

  created()
  {
    this.$api.getGoodsList({
      page: 1
    }).then(res => {
      console.log(res.data);
    })
}}

重启前台服务

结果如下：
在这里插入图片描述
接着我们想要把数据显示到界面上

 created() {
    this.$api
      .getGoodsList({
        page: 1,
      })
      .then((res) => {
        console.log(res.data);
        // 状态码为200，代表成功获取数据
        if (res.data.status === 200) {
          this.tableData = res.data.data;
        }
      });
  },

先利用状态码做一个判断，看是否能获取数据
接着我们对数据做一个展示（修改对应的prop）

    <el-table-column prop="id" label="商品ID" width="100"></el-table-column>
        <el-table-column prop="title" label="商品名称" width="100">
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="100"
        ></el-table-column>
        <el-table-column prop="num" label="商品数量" width="100">
        </el-table-column>
        <el-table-column prop="category" label="规格类别" width="100">
        </el-table-column>
        <el-table-column prop="image" label="商品图片"> </el-table-column>
        <el-table-column prop="sellPoint" label="商品卖点"> </el-table-column>
        <el-table-column prop="descs" label="商品描述"> </el-table-column>
        <el-table-column label="操作" width="180">

得到的结果如下：
在这里插入图片描述
我们可以看到这些数据，像商品图片过长会换行，商品名称过长也换行了，我们不希望有些内容换行，我们可以在Element组件库里面找到表格
在这里插入图片描述
在这里插入图片描述
上面的这个属性可以用来解决这个问题，我们将这个属性加到我们过长的标签内容中，结果如下
在这里插入图片描述

相关文章：

  • 北斗导航 | RTKLib中的模型和算法（一）—— 时间系统
  • 【论文阅读】自动作文评分系统：一份系统的文献综述
  • avformat_open_input() 代码分析
  • Spring Bean的生命周期、Java配置BeanFactoryPostProcessor失效与解决
  • 大模型系统和应用——高效训练模型压缩
  • “华为杯”第十八届中国研究生数学建模竞赛一等奖经验分享
  • C#的StreamReader类使用说明
  • 基于图搜索的规划算法之 A* 家族（九）：Hybrid A* 算法
  • 2022年Webpack 5初学者完整指南
  • 【MATLAB教程案例22】基于MATLAB图像去噪算法仿真——中值滤波、高斯滤波以及频域滤波等
  • 浙江大学软件学院2022保研经历分享
  • 表的自然连接(数据结构链表链接)
  • 在Vue脚手架实现登录页面及跳转
  • 新旧电脑间文件互传（通过网络）
  • Python3，仅仅2段代码，就实现项目代码自动上传及部署，再也不需要Jenkins了。
  • 【译】JS基础算法脚本：字符串结尾
  • JS 中的深拷贝与浅拷贝
  • Angular 响应式表单之下拉框
  • AngularJS指令开发（1）——参数详解
  • k8s 面向应用开发者的基础命令
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • open-falcon 开发笔记（一）：从零开始搭建虚拟服务器和监测环境
  • Vue源码解析（二）Vue的双向绑定讲解及实现
  • windows-nginx-https-本地配置
  • 回顾2016
  • 开源地图数据可视化库——mapnik
  • 快速构建spring-cloud+sleuth+rabbit+ zipkin+es+kibana+grafana日志跟踪平台
  • 那些被忽略的 JavaScript 数组方法细节
  • 如何实现 font-size 的响应式
  • 微信小程序开发问题汇总
  • 微信小程序填坑清单
  • 译自由幺半群
  • 正则学习笔记
  • Nginx实现动静分离
  • 教程：使用iPhone相机和openCV来完成3D重建（第一部分） ...
  • 数据库巡检项
  • ​TypeScript都不会用，也敢说会前端？
  • # 深度解析 Socket 与 WebSocket：原理、区别与应用
  • （33）STM32——485实验笔记
  • （4）STL算法之比较
  • （6）【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • （Java实习生）每日10道面试题打卡——JavaWeb篇
  • (附源码)springboot家庭装修管理系统 毕业设计 613205
  • （一）Mocha源码阅读: 项目结构及命令行启动
  • （一）Thymeleaf用法——Thymeleaf简介
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
  • （转）全文检索技术学习(三)——Lucene支持中文分词
  • ***详解账号泄露：全球约1亿用户已泄露
  • .net FrameWork简介，数组，枚举
  • .net 重复调用webservice_Java RMI 远程调用详解，优劣势说明
  • .netcore 获取appsettings
  • .net打印*三角形
  • .net的socket示例
  • @hook扩展分析
  • @reference注解_Dubbo配置参考手册之dubbo:reference