PHP项目学习笔记-萤火商城https://www.yiovo.com/doc

多年没有碰过php代码了，这个项目不错，想好好学习下，持续更新

注意事项

1. 打开APP_DEBUG
2. 有些时候改了前台页面后，发现在浏览器中无变化，这个时候可以将项目中的runtime目录删除掉
3. 前端组件是ant design vue 2.2.8 https://2x.antdv.com/components/date-picker-cn
4. nodejs快速下载：https://nodejs.org/en/blog/release/v18.12.1

关于建表

.在store进行开发，新建表的时候需要加上store_id字段

增加页面流程

前端页面

1. 增加新的菜单，需要在router.config.js中增加对应的配置
2. 增加新的页面，需要在views文件夹中加上对应的页面名，页面中要import需要js的api文件，js的api文件就对应后台php的api（js的api如reservation.cc，表示php的api文件加下有个文件夹是reservation，reservation文件夹下面又有cc文件夹的接口文件），即
   （views-》js api-》php api（这个api可以是单独的api模块，也可以是controller，后面补充图片））

后台

1. model，直接对应表的
2. 表名+model，实现数据操作的
3. controller，调用model实现业务逻辑，使用renderSuccess反回数据给前端

前台页面的数据

列表数据

表头数据是写死的，定义是在每个页面的这个数据里,如

const columns = [{title: 'ID',dataIndex: 'fenlei_id'}]

下拉列表的数据

数据仍然是从后台来的，不要自定义否则会报错，可以在页面自定义数据如

  data () {return {expand: false,// 当前表单元素searchForm: this.$form.createForm(this),// 分类列表categoryList: [],categoryList1:[{"xx_project": "全部"},{"xx__project": "外科"}],

页面调用

            <a-select v-decorator="['xx__project', { initialValue: '全部' }]"><a-select-optionv-for="(item, index) in categoryList1":key="index":value="item.xx__project">{{ item.xx__project }}</a-select-option></a-select>

后台数据model如list的代码，如获取列表getList

		//整对所有字符串!empty($params['xx_name']) && $filter[] = ['xx_name', 'like', "%{$params['xx_name']}%"];//针对特定字符串的$params['xx_project']<>"全部" && $filter[] = ['xx_project', 'like', $params['xx_project']];//针对int$params['xx_status'] > -1 && $filter[] = ['xx_status', '=', $params['xx_status']];

关于时间的处理

1. 前台传时间字符串到后台如2023-10-25T11:31:54.152Z，后台存入时间戳可以按如下操作

		//将时间字符串转时间戳，源代码只取了年月日//格式可以自己加，如date("Y-m-d H：i：s");  输出当前的日期和时间,格式为:2022-01-01 12:00:00 $data['xx_time'] = str2time_date($data['xx_time']);//time（）获得当前的时间戳$data['xx__create_time'] =time();$data['xx_update_time'] = time();//时间戳转时间字符串date("Y-m-d h:m:s",$timestamp);

2. 前后页面中如何解析后台传的时间戳

  场景一：使用js代码methods: {formDate(value){if (!value) return " ";let date = new Date(value * 1000);let year = date.getFullYear(); // 分宼則?4M,1970)let month = date.getMonth() + 1; // 分?0-11,0鉮1,(匂皸?1)let day = date.getDate(); // 分?1-31)let hour = date.getHours(); // 分鰌(0-23)let min = date.getMinutes(); //let sec = date.getSeconds(); //?return year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;},场景二：直接使用moment函数import moment from "moment"import "moment/locale/zh-cn"moment(el).format('YYYY-MM-DD HH:mm:ss');

然后在promis的的loaddate加如下代码

      loadData: param => {return ReservationApi.list({ ...param, ...this.queryParam }).then(response => {response.data.list.data[0].xx_time=this.formDate(response.data.list.data[0].xx_time)return response.data.list})}

• 2023年10月24日13:33:30
  2.1 前台页面如何解析后台的时间戳绑定到a-date-picker上，使用decorator，具体步骤如下

html代码<a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol"><a-date-pickerv-decorator="['xx_time', {rules: [{required: true, message: '请选择1个文章分类'}]}]"show-time placeholder="选择时间" /></a-form-item>

先引入

import moment from "moment"
import "moment/locale/zh-cn"

然后js文件中加入这段代码

    setFieldsValue () {const { form: { setFieldsValue } } = thisthis.$nextTick(() => {setFieldsValue(pick(this.record, ['xx_name', 'xx_phone']))this.form.setFieldsValue({"xx_time":moment("2015-12-01","YYYY-MM-DD")})})},

2.2 其他

参考链接：https://blog.51cto.com/u_15127663/4237248
解析出来后始终是1970年的问题也遇到了，解决办法参考https://blog.csdn.net/weixin_43973415/article/details/127970534

• 2023年10月24日15:35:29

前台界面数据处理

1. 后台传过来的状态数据，前台根据数字显示不同状态

      <span slot="xx_status" slot-scope="text"><a-tag :color="text ? 'green' : ''">{{ text==1 ? '已来' : '待来' }}</a-tag></span>

columns的定义

  {title: 'xx状态',width: '180px',dataIndex: 'xx_status',scopedSlots: { customRender: 'xx_status' }},