有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue读取本地json文件(vue如何向后端数据库存取json数组型数据)

vue 炮渣日记 1周前 (11-23) 13次浏览 已收录 0个评论 扫描二维码
最近在为医院做一套简单的PEIS体检系统,在录入费用的时候,一条费用一条数据总感觉很麻烦,数据多了直接看数据库也比较混乱,我经常直接看数据库,于是改成json的格式来存储费用相关的数据,[{“id”:1},{“id”:2}]大致这种格式,先说说项目的基本情况。

服务器采用的是lnmp,后端框架使用ThinkPHP6,前端使用Element-vue来处理,都知道对于php来说将数组存储到数据库,只需要序列化一下就可以了,serialize()官方有现成的语法,反序列化只需要使用unserialize(),当然也可以保存成json格式的,使用json_encode,反序列化json_decode就可以了。

今天我们讲前后端分离的情况下,如何做数据的转换,这里我直接用框架中的语法了,tp6中集成的相关的东西,如果使用原生的也不是很麻烦。

vue读取本地json文件(vue如何向后端数据库存取json数组型数据)

tp6可以通过在模型中直接定义JSON字段的方式来自动序列化,这里我要序列化的字段是detail,这样我们在控制器中就可以直接使用了,当存detail会自动序列化,同样取的时候也会自动帮你反序列化数据。

vue读取本地json文件(vue如何向后端数据库存取json数组型数据)

我们后端接口形成的数据是这样的

vue读取本地json文件(vue如何向后端数据库存取json数组型数据)

下边我们就需要把api接口获取到的数据显示出来,table中直接:data数据就行了,这里我采用dialog弹窗的方式显示缴费详细数据,涉及到父组件传子组件的问题,这里我只贴出来重要的代码部分,下边是点击函数。

vue读取本地json文件(vue如何向后端数据库存取json数组型数据)

dialog需要设置传输的数据,:detail=detail,在子组件就可以获取数据了,这里数据量不是特别大,我是一次性获取所有的详细数据了,也可以采用ID请求的方式,需要的时候在从后台取数据。

下边我贴出来子组件的具体写法,仅供参考。

vue读取本地json文件(vue如何向后端数据库存取json数组型数据)

这里是直接$attrs中获取到父组件中的detail的数据,然后table展示相关数据,下边是最终效果图

vue读取本地json文件(vue如何向后端数据库存取json数组型数据)

总结:大致思路,这里没有展示如何存数据,道理是一样的,前端直接传输数组到tp后端,后端模型json序列化存储到数据库中,读取的时候,获取相应字段的数据,前端使用JSON.parse将字符串数据转换成对象,在循环输出相关内容就可以了,在程序设计中,数据库直接存储数组还是比较方便的。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址