青岛专业制作网站的公司吗,那种导航网站,专业做网站广州,学做网站会员萤火商城学习笔记 注意事项关于建表增加页面流程前台页面的数据列表数据下拉列表的数据 关于时间的处理前台界面数据处理 多年没有碰过php代码了#xff0c;这个项目不错#xff0c;想好好学习下#xff0c;持续更新
注意事项
打开APP_DEBUG有些时候改了前台页面后#x… 萤火商城学习笔记 注意事项关于建表增加页面流程前台页面的数据列表数据下拉列表的数据 关于时间的处理前台界面数据处理 多年没有碰过php代码了这个项目不错想好好学习下持续更新
注意事项
打开APP_DEBUG有些时候改了前台页面后发现在浏览器中无变化这个时候可以将项目中的runtime目录删除掉前端组件是ant design vue 2.2.8 https://2x.antdv.com/components/date-picker-cnnodejs快速下载https://nodejs.org/en/blog/release/v18.12.1
关于建表
.在store进行开发新建表的时候需要加上store_id字段
增加页面流程 前端页面 增加新的菜单需要在router.config.js中增加对应的配置增加新的页面需要在views文件夹中加上对应的页面名页面中要import需要js的api文件js的api文件就对应后台php的apijs的api如reservation.cc表示php的api文件加下有个文件夹是reservationreservation文件夹下面又有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:keyindex:valueitem.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 His); 输出当前的日期和时间,格式为: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 momentimport moment/locale/zh-cnmoment(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_timethis.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时间 :labelCollabelCol :wrapperColwrapperCola-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 slotxx_status slot-scopetexta-tag :colortext ? green : {{ text1 ? 已来 : 待来 }}/a-tag/spancolumns的定义 {title: xx状态,width: 180px,dataIndex: xx_status,scopedSlots: { customRender: xx_status }},
