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

我们来写一下商品管理界面

在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组件库里面找到表格


上面的这个属性可以用来解决这个问题，我们将这个属性加到我们过长的标签内容中，结果如下