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

背景
是在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. 添加如上文件后就能在后台看到对应菜单好和自动读取数据库表的内容管理
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C#,数值计算——插值和外推,BaryRat_interp的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 重心有理插值对象 /// Barycentric rational interpolation object. /// After constructing the object, /// call interp for interpolated values. /// Note t…

StyleGAN:彻底改变生成对抗网络的艺术

一、介绍 多年来&#xff0c;人工智能领域取得了显着的进步&#xff0c;其中最令人兴奋的领域之一是生成模型的发展。这些模型旨在生成与人类创作没有区别的内容&#xff0c;例如图像和文本。其中&#xff0c;StyleGAN&#xff08;即风格生成对抗网络&#xff09;因其创建高度逼…

滚雪球学Java(09-1):Java中的算术运算符,你真的掌握了吗?

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java SE相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…

创建数据透视表:根据表中一列作为分类的依据统计每个类别下不同子项数量cross_tab()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 创建数据透视表&#xff1a; 根据表中一列作为分类的依据 统计每个类别下不同子项数量 cross_tab() [太阳]选择题 关于以下代码的说法中正确的是? import pandas as pd data{A:[a1,a2,a1,a2,a…

【PyQt小知识 - 1】:QLineEdit内容的更新和获取、设置无边框

文章目录 QLineEdit更新和获取文本框内容设置为无边框 QLineEdit 更新和获取文本框内容 更新&#xff1a;QLineEdit().setText(text) 获取&#xff1a;QLineEdit().text() from PyQt5.QtWidgets import * import sysapp QApplication(sys.argv)window QWidget() window.re…

数据库概率 期末复习

第一章 绪论 概述 数据 定义&#xff1a;描述事物的符号记录 地位&#xff1a;数据库中存储的基本对象 数据的语义&#xff1a;数据的含义&#xff0c;数据与其语义是不可分的 数据库 定义&#xff1a;长期储存在计算机内、有组织的、可共享的大量数据的集合 特点&…

【SpringBoot3+Vue3】三【实战篇】-后端(优化)

目录 一、登录优化-redis 1、SpringBoot集成redis 1.1 pom 1.2 yml 1.3 测试程序&#xff08;非必须&#xff09; 1.4 启动redis&#xff0c;执行测试程序 2、令牌主动失效&#xff08;代码优化&#xff09; 2.1 UserController设置token到redis 2.2 登录拦截器Log…

计算机网络——物理层-编码与调制(数字基带信号、模拟基带信号、码元、常用编码、基本调制方法、混合调制)

目录 编码与调制 数字基带信号 模拟基带信号 码元 常用编码 不归零编码 归零编码 曼彻斯特编码 差分曼彻斯特编码 编码习题 基本调制方法 调幅 调频 调相 混合调制 QAM-16 编码与调制 在计算机网络中&#xff0c;计算机需要处理和传输用户的文字、图片、音频…

leetcode:476. 数字的补数

一、题目 476. 数字的补数 - 力扣&#xff08;LeetCode&#xff09; 函数原型&#xff1a; int findComplement(int num) 二、思路 将num的每一位取出来&#xff0c;取反后&#xff0c;乘以2的位次方&#xff0c;最终所有结果相加即可得到结果。 如何取出num的每一位&#xff1…

wpf devexpress post 更改数据库

这个教程示范如何使用GridControl编辑数据&#xff0c;和保存更改到数据库。这个教程基于前一个篇。 Items Source Wizard 当 CRUD (Create, Read, Update, Delete) 启动选项时添加Post data功能 Items Source Wizard 生成如下代码&#xff1a; 1、设置 TableView.ShowUpdat…

RabbitMQ之延迟队列(万字总结,手把手教你学习延迟队列)

文章目录 一、延迟队列概念二、延迟队列使用场景三、RabbitMQ 中的 TTL1、队列设置 TTL2、消息设置 TTL3、两者的区别 四、整合 springboot1、添加依赖2、修改配置文件3、添加 Swagger 配置类 五、队列 TTL1、代码架构图2、配置文件类代码3、消息生产者代码4、消息消费者代码 六…

求组合数(笔记)

//组合数2&#xff0c;取值在1e5 //Cab a! / (a - b)! * b! #include<iostream> using namespace std; using ll long long; const ll N 1e4 9, mod 1e9 7; ll fact[N], infact[N];//阶乘&#xff0c;逆元阶乘ll qmi(ll a, ll k, ll p)//逆元模板 {ll res 1;while…

从0开始学习JavaScript--JavaScript 异步编程

在现代的Web开发中&#xff0c;异步编程变得愈发重要。随着用户期望的提高和网络应用的复杂性增加&#xff0c;有效地处理异步操作成为构建高性能、交互丰富的应用的关键。JavaScript作为一门单线程的语言&#xff0c;采用异步机制来处理并发任务&#xff0c;确保用户体验不受阻…

Typora使用教程

文章目录 markdown的使用说明一、标题 这是一级标题这是二级标题二、段落1、换行2、分割线 三、文字显示1、字体2、上下标 四、列表1、无序列表2、有序列表3、任务列表 五、区块显示六、代码显示1、行内代码2、代码块 七、链接八、脚注九、图片插入十、表格十一、流程图1、横向…

php快速排序法

快速排序是一种常用的排序算法&#xff0c;也是最快的排序算法之一。其基本思想是通过一趟排序将待排序的数据分割成两部分&#xff0c;其中一部分的所有数据都比另一部分的所有数据小&#xff0c;然后再对这两部分分别进行快速排序&#xff0c;递归地重复这个过程&#xff0c;…

RT-Thread STM32F407 ADC

ADC(Analog-to-Digital Converter) 指模数转换器。是指将连续变化的模拟信号转换为离散的数字信号的器件。真实世界的模拟信号&#xff0c;例如温度、压力、声音或者图像等&#xff0c;需要转换成更容易储存、处理和发射的数字形式。模数转换器可以实现这个功能&#xff0c;在各…

Windows10配置深度学习环境

一、Anaconda安装与虚拟环境创建 Anaconda的出现极大的方便了研究人员的Python开发工作&#xff0c;anaconda可以创建多个虚拟环境&#xff0c;这些虚拟环境就像一间间教室一样&#xff0c;虚拟环境彼此之间、虚拟环境与基础环境&#xff08;base&#xff09;之间互不影响&…

__builtin_expect(x,0)

As opposed to the C code, above we can see bar case precedes foo case. Since foo case is unlikely, and instructions of bar are pushed to the pipeline, thrashing the pipeline is unlikely. This is a good exploitation of a modern CPU

C/C++---------------LeetCode第1394.找出数组中的幸运数

找出数组中的幸运数 题目及要求暴力算法哈希算法在main里使用 题目及要求 在整数数组中&#xff0c;如果一个整数的出现频次和它的数值大小相等&#xff0c;我们就称这个整数为「幸运数」。 给你一个整数数组 arr&#xff0c;请你从中找出并返回一个幸运数。 如果数组中存在…

Java排序算法之贪心算法

贪心算法是一种优化问题的解决方法&#xff0c;它在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最优的。贪心算法常用于最优化问题&#xff0c;比如最小生成树、哈夫曼编码、最短路径等。贪心算法是一…