nginx+vue.js实现前后端分离的示例代码(2)

@RequestMapping("/vueHelpSellingcar.html") public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) { //若干操作后,返回json数据 JSONObject resultJson = new JSONObject(); resultJson.put("carbrandList", carbrandList); resultJson.put("provinceList", provinceList); //进行序列化,返回值前端 try { byte[] json =resultJson.toString().getBytes("utf-8"); response.setHeader("Content-type", "text/html;charset=UTF-8"); response.getOutputStream().write(json); } catch (Exception e) { e.printStackTrace(); } }

3.前端调用vue示例

//html模块 <div v-if="carbrandList.length"> <p v-for="brand in carbrandList">{{brand.brand_name}}</p> </div> //js模块 页面加载后,自动去获取动态资源 let v={}; $(function() { axios.get('http://test.csx365.com:4000/sellingJson.html') .then(function(data){ //定义一个vue对象,方便模板渲染 v =Object.assign(v, new Vue({ el : '.char_contain', //绑定事件名 data : { carbrandList : data.data.carbrandList, //数据流 } })); }) .catch(function(err){ console.log(err); }); });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ppysz.html