PHP项目学习笔记-萤火商城-增加一个模块(表涉及到的操作和文件)

news2024/11/26 18:35:32

背景
是在store的后台添加一个页面,显示的如满意度调查的页面

  1. 在router.config.js里面配置一个新的菜单
    路径:yoshop2.0-store\src\config\router.config.js
    代码如下,很简单,定义了这菜单点击的时候进入的页面,和下面的子菜单
{
  path: '/satisfaction',
  name: 'satisfaction',
  component: RouteView,
  meta: { title: '满意度管理', keepAlive: true, icon: Icons.mpWeixin, iconStyle: { fontSize: '17.2px', color: '#36b313' }, permission: ['/satisfaction'] },
  //子菜单
  children: [
    {
      //这里定义了后台方法
      path: '/satisfaction/list',
      //这里定义了前端页面的路径
      component: () => import(/* webpackChunkName: "statistics" */ '@/views/satisfaction/index'),
      meta: { title: '满意度列表', keepAlive: false, permission: ['/satisfaction/list'] },
    }
  ]
},
  1. 增加前后台文件
    2.1 增加前端文件页面
    创建目录:yoshop2.0-store\src\views\satisfaction
    创建文件:yoshop2.0-store\src\views\satisfaction\index.vue
    内容代码:
<template>
    <a-card :bordered="false">
        <div class="card-title">{{ $route.meta.title }}</div>

        <div class="table-operator">
          <!-- 搜索板块 -->
          <a-row class="row-item-search">
            <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
              <a-form-item label="手机号码">
                <a-input v-decorator="['satisfaction_userphone']" placeholder="请输入手机号码" />
              </a-form-item>
              <a-form-item class="search-btn">
                <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>


        <!-- 表板块 -->
        <s-table
          ref="table"
          rowKey="satisfaction_id"
          :loading="isLoading"
          :columns="columns"
          :data="loadData"
          :pageSize="15"
          :scroll="{ x: 1450 }"
        >

        </s-table>
    </a-card>
</template>

<script>
import { ContentHeader, STable } from '@/components'
import * as SatisfactionApi from '@/api/satisfaction/index'
// 表格表头
const columns = [
  {
    title: 'ID',
    width: '50px',
    dataIndex: 'satisfaction_id'
  },
    {
      title: '评价人',
      dataIndex: 'satisfaction_user',
      width: '100px',
      scopedSlots: { customRender: 'satisfaction_user' }
    },
      {
        title: '评价人手机',
        dataIndex: 'satisfaction_userphone',
        width: '100px',
        scopedSlots: { customRender: 'satisfaction_userphone' }
      },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'Index',
  components: {
    ContentHeader,
    STable
  },

  data () {
    return {
      expand: false,
      // 表头
      columns,
      // 正在加载
      isLoading: false,
      queryParam: {},
      searchForm: this.$form.createForm(this),
      loadData: param => {
        return SatisfactionApi.list({ ...param, ...this.queryParam })
          .then(response => {
            return response.data.list
          })
      }
    }
  },
  methods:{
      // 确认搜索
        handleSearch (e) {
          e.preventDefault()
          this.searchForm.validateFields((error, values) => {
            if (!error) {
              this.queryParam = { ...this.queryParam, ...values }
              this.handleRefresh(true)
            }
          })
        },
        /**
         * 刷新列表
         * @param Boolean bool 强制刷新到第一页
         */
        handleRefresh (bool = false) {
          this.$refs.table.refresh(bool)
        }
  }
}
</script>

创建对应的目录:yoshop2.0-store\src\api\satisfaction
创建对应的文件:yoshop2.0-store\src\api\satisfaction\index.js
内容代码:

import { axios } from '@/utils/request'

/**
 * api接口列表
 * /satisfaction/list表示:后台对应的文件目录是app\store\controller下的satisfaction.php,对应的list方法
 * /satisfaction.satisfaction/list表示:后台对应的文件目录是app\store\controller\satisfaction\下的satisfaction.php,对应的list方法
 */
const api = {
  list: '/satisfaction/list',
}

/**
 * 获取满意度列表
 */
export function list (params) {
  return axios({
    url: api.list,
    method: 'get',
    params
  })
}

2.2 增加后台PHP文件
增加表对应的基模型:yoshop2.0\app\common\model\Satisfaction.php

<?php

declare (strict_types=1);
namespace app\common\model;
use cores\BaseModel;
class Satisfaction extends BaseModel
{
    // 定义表名
    protected $name = 'store_satisfaction';

    // 定义主键
    protected $pk = 'satisfaction_id';
}

?>

增加表对应的具体模型:yoshop2.0\app\store\model\Satisfaction.php

<?php

declare (strict_types=1);
namespace app\store\model;
use cores\exception\BaseException;
use app\common\model\Satisfaction as SatisfactionModel;

class Satisfaction extends SatisfactionModel
{
    /**
     * 隐藏字段,如是查询结果的话,会将设定的字段隐藏掉,这里我希望显示这个两个字段,因此我注释了
     * @var array
     */
    protected $hidden = [
        'store_id',
//         'create_time'
    ];


    public function getList(array $param = [])
    {
        // 查询参数
        $params = $this->setQueryDefaultValue($param, [
            'satisfaction_userphone' => '',
            'store_id' => 10001
        ]);
        // 检索查询条件
        $filter = [];
        !empty($params['satisfaction_userphone']) && $filter[] = ['satisfaction_userphone', 'like', "%{$params['satisfaction_userphone']}%"];
        // 获取列表数据
        return $this
            ->where($filter)
            ->order(['create_time' => 'desc'])
            ->paginate(50);
    }
}
?>

增加controller页面调用的文件:

<?php
declare (strict_types=1);

namespace app\store\controller;

use app\store\controller\Controller;
use app\store\model\Satisfaction as SatisfactionModel;

/**
 * 满意度控制器
 * Class article
 * @package app\store\controller\satisfaction
 */
class Satisfaction extends Controller
{
        public function list()
        {
            $model = new SatisfactionModel;
            $list = $model->getList($this->request->param());
            return $this->renderSuccess(compact('list'));
        }
}
?>
  1. 添加如上文件后就能在后台看到对应菜单好和自动读取数据库表的内容管理
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1213455.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Donut 中,video组件层级失效、同层渲染失效、z-index设置无效解决办法

微信小程序转安卓之后&#xff0c;z-index设置的层级关系失效&#xff0c;video组件总是处在最上层解决办法&#xff1a; 很重要的设置! 同层渲染要开 xweb&#xff0c;project.miniapp.json中勾选此设置 感谢腾讯官方大佬 黄嘉敏

【Git】的分支与版本

前言 Git 的分支是指将代码库从某一个特定的提交记录开始的一个独立的开发线&#xff0c;也可以理解为是一种代码开发的并行方式。分支在 Git 中的使用非常广泛&#xff0c;它可以让多人在同一个代码库中并行开发&#xff0c;同时也能够很方便地进行代码版本控制和管理。 Git …

PM2学习

目录 PM2简介 pm2的主要特性 PM2安装 启动PM2项目 查看应用列表&#xff08;查看当前机器执行的所有进程&#xff09; 查看某个应用详情 重启 停止 删除 日志查看 负载均衡 监控CPU/内存 内存使用超过上限自动重启 监听代码变化/自动重启 PM2简介 PM2是常用的node…

什么是OpenCL?

什么是OpenCL&#xff1f; 1.概述 OpenCL(Open Computing Language 开放计算语言)是一种开放的、免版税的标准&#xff0c;用于超级计算机、云服务器、个人计算机、移动设备和嵌入式平台中各种加速器的跨平台并行编程。OpenCL是由Khronos Group创建和管理的。OpenCL使应用程序…

modbus-RTU是一种比较简单、可靠的协议

modbus-RTU是一种比较简单、可靠的协议 RTU, 是modbus中的一种应用层协议&#xff0c;在OSI的第七层 数据格式 应用

[C国演义] 第二十章

第二十章 最长回文子序列让字符串成为回文串的最少插入次数 最长回文子序列 力扣链接 单个数组讨论子序列 ⇒ dp[i] -- 以nums[i]为结尾的所有子序列中, 回文子序列的最长长度. 然后讨论 最后一个位置的归属情况 但 又要满足 回文结构 ⇒ 二维dp ⇒ dp[i][j] -- 区间[i, j]内…

类加载器(classloader)

作者&#xff1a;ZeaTalk 链接&#xff1a;https://www.zhihu.com/question/49667892/answer/690161827 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 类加载器&#xff08;classloader&#xff09; 先从类加载器…

【数据结构】直接插入排序

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵 希望大佬指点一二 如果文章对你有帮助…

第八章:枚举

系列文章目录 文章目录 系列文章目录前言一、枚举总结 前言 类可以作为常量使用。 一、枚举 枚举是一组常量的集合。可以这里理解&#xff1a; 枚举属于一种特殊的类&#xff0c; 里面只包含一组有限的特定的对象。 枚举的实现方式自定义类实现枚举使用 enum 关键字实现枚举…

MySQL 分库分表与 TiDB(平凯数据库),如何选择?

随着互联网行业的飞速发展&#xff0c;数据量不断增长&#xff0c;传统的关系型数据库已经无法满足大规模数据处理的需求。为了解决这一问题&#xff0c;分库分表和分布式数据库应运而生。本文将对比分析 MySQL 分库分表和 TiDB 这两种解决方案&#xff0c;帮助大家更好地选择适…

自动化测试和手工测试有什么不同以及自动化测试和手工测试应用范围的对比

一、初识自动化测试 如果以前没有做过自动化测试&#xff0c;那么就不了解自动化测试&#xff0c;可能会觉得自动化测试比较神秘&#xff0c;但是&#xff0c;我们在日常的计算机操作中&#xff0c;可能会碰到一些自动化处理的过程&#xff0c;这些过程和自动化测试比较接近。 …

Mysql修改事务隔离级别及与spring隔离级别关系

Mysql如何修改事务隔离级别 1.查询事务级别 1.1查询全局事务隔离级别 select global.tx_isolation; 1.2 查询当前会话事务隔离级别 select session.tx_isolation; 2.修改事务隔离级别 2.1 修改全局事务隔离级别 set global transaction isolation level read committed;…

Kafka 的应用场景

Kafka 是一个开源的分布式流式平台&#xff0c;它可以处理大量的实时数据&#xff0c;并提供高吞吐量&#xff0c;低延迟&#xff0c;高可靠性和高可扩展性。 Kafka 最初是为分布式系统中海量日志处理而设计的。它可以通过持久化功能将消息保存到磁盘&#xff0c;并让消费者按…

景联文科技入选量子位智库《中国AIGC数据标注产业全景报告》数据标注行业代表机构TOP20

量子位智库《中国AIGC数据标注产业全景报告》中指出&#xff0c;数据标注处于重新洗牌时期&#xff0c;更高质量、专业化的数据标注成为刚需。未来五年&#xff0c;国内AI基础数据服务将达到百亿规模&#xff0c;年复合增长率在27%左右。 基于数据基础设施建设、大模型/AI技术理…

areca backup备份工具安装与使用

由于FTP数据备份执行&#xff0c;需要人工操作执行&#xff0c;不满足业务需求&#xff0c;发现此工具结合ftp联动可以定时任务进行备份 获取地址 https://nchc.dl.sourceforge.net/project/areca/areca-stable/areca-7.5/areca-7.5-windows-jre64-setup.exe 前提条件 注意…

关闭RecyclerView惯性滚动,以及多个RecyclerView在嵌套滚动中的注意事项

前言&#xff1a; 当前RecyclerView 下拉到顶部 或者 上拉到底部时&#xff0c;虽然滚动列表停止了&#xff0c;但惯性任务并没有结束&#xff0c;一些特殊需求可能受到影响&#xff0c;需要手动停止。 1. RecyclerView源码 调用 rv.stopScroll() 停止&#xff1b; 2. Recycl…

数据库sql语句设置外键

当我们需要在数据库表之间建立关联关系时&#xff0c;可以使用外键&#xff08;Foreign Key&#xff09;来实现。在 SQL 中&#xff0c;外键可以用来保持数据的完整性&#xff0c;并帮助我们更有效地管理数据。以下是设置外键的步骤&#xff1a; 1.在创建表时&#xff0c;需要…

公益SRC实战|SQL注入漏洞攻略

目录 一、信息收集 二、实战演示 三、使用sqlmap进行验证 四、总结 一、信息收集 1.查找带有ID传参的网站&#xff08;可以查找sql注入漏洞&#xff09; inurl:asp idxx 2.查找网站后台&#xff08;多数有登陆框&#xff0c;可以查找弱口令&#xff0c;暴力破解等漏洞&…

7个免费的优质图标素材网站,设计师必备!

对于交互设计师和产品经理来说&#xff0c;一套漂亮易用的图标可以算是提高效率的法宝&#xff0c;自己导出一套标准化的图标是一个巨大的工程。如何找到一个既美观又实用又能快速重用的图标&#xff1f;别慌&#xff0c;今天我们整理了7个价值高又好用的图标素材网站&#xff…

wx.canvasToTempFilePath生成图片保存到相册

微信小程序保存当前画布指定区域的内容导出生成指定大小的图片&#xff0c;记录一下 api&#xff1a;wx.canvasToTempFilePath 效果&#xff1a; 代码&#xff1a;wxml <canvas style"width: {{screenWidth}}px; height: {{canvasHeight}}px;" canvas-id"my…