jizhicms 保存和读取json数据到数据库vue获取

php代码从数据库读取json字段并渲染到表单

	{php
		
		//字符串转数组
		$arr = M('article')->find(array('id'=>1));
		//print_r($arr);
		if($arr){
			// 有json值
			$jsonString = $arr['huancunjson']; // 字段名称
			$array_json=unserialize($jsonString); // 编码恢复
			$jsonstr = json_encode($array_json); // 转化为json

		}
		
	/}

储存字段需要编码后储存

$w = $this->frparam();
		

		// 将数组编码后储存
		$jsonString = serialize($w);
		// 更新对应文字的字段内容
		M('article')->update(['id'=>$id],['huancunjson'=>$jsonString,'isshow2'=>2);

		
			JsonReturn(['code'=>0,'msg'=> '保存成功' ]);
			exit();
		

表单vue代码

<div class="item">
						<div class="label">系所</div>
						<div class="input">
							<input type="text" v-model="hasjson.xisuo" />
						</div>
					</div>
					<div class="item">
						<div class="label">职称</div>
						<div class="input">
							<input type="text" v-model="hasjson.job"/>
						</div>
					</div>
					<div class="item">
						<div class="label">简介</div>
						<div class="input">
							<input type="text" v-model="hasjson.desc"/>
						</div>
					</div>
					<div class="item">
						<div class="label">电话</div>
						<div class="input">
							<input type="text" v-model="hasjson.tel"/>
						</div>
					</div>
					<div class="item">
						<div class="label">科研项目</div>
						<div class="edit">
							<script type="text/plain" id="myEditor"></script>
						</div>
					</div>
					
	<script type="text/javascript" charset="utf-8" src="/static/common/ueditor-plus/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="/static/common/ueditor-plus/ueditor.all.js"></script>
	<script type="text/javascript" charset="utf-8" src="/static/common/ueditor-plus/lang/zh-cn/zh-cn.js"></script>
		<script src="/newfile/vue@2.js"></script>
	<link rel="stylesheet" href="/newfile/index.css" />
	<script src="/newfile/index.js"></script>
<script>
	 ue1 = UE.getEditor('myEditor',{
		    //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
		    toolbars:[['FullScreen', 'Undo', 'Redo','test','removeformat','pasteplain','insertunorderedlist']],
		    //focus时自动清空初始化时的内容
		    autoClearinitialContent:true,
		    //关闭字数统计
		    wordCount:false,
		    //关闭elementPath
		    elementPathEnabled:false,
		    //默认的编辑区域高度
		    initialFrameHeight:300,
			autoFloatEnabled:false
		    //更多其他参数，请参考ueditor.config.js中的配置项
		})
		
		var app = new Vue({
		  el: '#app',
		  data: {
			imageUrl: '/images/newfile/user_pic.png',
			id:'',
			hasjson:'{$arr}'
		  },
		  mounted: function(){
			  
			  let _this = this;
			  // 获取缓存用户内容
			  // 有缓存 渲染到表单上 

				  // 没有图片时则用默认图片
				  if(_this.hasjson.imgageUrl){
					  _this.imageUrl = '/images/newfile/user_pic.png';
				  }
                                 // 编辑器内容渲染
				 if(_this.huancun.hasOwnProperty('body')){
				
					  ue1.addListener("ready", function () {
					    　　// editor准备好之后才可以使用
					  	ue1.setContent(_this.hasjson.body);
					  });
				 }
		})