PHP项目学习笔记-萤火商城https://www.yiovo.com/doc
萤火商城学习笔记
- 注意事项
- 关于建表
- 增加页面流程
- 前台页面的数据
- 列表数据
- 下拉列表的数据
- 关于时间的处理
- 前台界面数据处理
多年没有碰过php代码了，这个项目不错，想好好学习下，持续更新
注意事项
- 打开APP_DEBUG
- 有些时候改了前台页面后，发现在浏览器中无变化，这个时候可以将项目中的runtime目录删除掉
- 前端组件是ant design vue 2.2.8 https://2x.antdv.com/components/date-picker-cn
- nodejs快速下载：https://nodejs.org/en/blog/release/v18.12.1
关于建表
.在store进行开发，新建表的时候需要加上store_id字段
增加页面流程
前端页面
- 增加新的菜单，需要在router.config.js中增加对应的配置
- 增加新的页面，需要在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，后面补充图片））
后台
- model，直接对应表的
- 表名+model，实现数据操作的
- 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']];
关于时间的处理
- 前台传时间字符串到后台如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);
- 前后页面中如何解析后台传的时间戳
场景一：使用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
前台界面数据处理
- 后台传过来的状态数据，前台根据数字显示不同状态
<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' }},