目录 JSON1.json的格式2.json在html中与js对象的相互转换3.json在java对象的相互转换 Vue最后

JSON

概念：JavaScript Object Notation。JavaScript 对象表示法，简单理解JSON是把JS对象变成字符串 由于其语法简单，层次结构鲜明，现多用于网络中数据传输

好处: JSON 比 XML体积更小，更快，更易解析

1.json的格式 <script> //``反引号在es6中字符串拼接时使用，支持插值运算${},注意这不是jsp中的el,与jsp有冲突 `{"username":"zhangsan","age":"18"}` </script>

js对象的格式：

<script> { username:"lisi", age:"18" } </script>

手动将js对象转换为json字符串： 1.将js对象大括号外面加上反引号 2.将对象的键加上引号 3.将所有数据放到一行

2.json在html中与js对象的相互转换

JSON.stringify() 将js对象转为json字符串

JSON.parse() 将json字符串转为js对象

<script> /* 调用JSON的stringify将js对象转为json 调用JSON的parse将json转为字符串*/ let personJson2 = JSON.stringify(person); document.write(`自动转换${personJson2}`+"<br/>") let parse = JSON.parse(personJson); document.write(parse.name+parse.age+"<br/>") </script> 3.json在java对象的相互转换

先引入阿里巴巴的fastJson

使用JSON.toJSONString(obj) 将java对象转为json字符串

使用JSON.parseObject(json字符，要转成的实体类.class) 将json字符串转为java对象

public static void main(String[] args) { User user = new User("1","zhangsan","18"); //将java对象转为json String jsonString = JSON.toJSONString(user); System.out.println(jsonString); //将json转为java对象 //java中不能用''表示json,因为''代表字符，所以用"",但是必须将{}中的"转义 String jsonStr="{\"age\":\"18\",\"id\":\"1\",\"name\":\"zhangsan\"}"; User t = JSON.parseObject(jsonStr, User.class); System.out.println(t); }

注意事项： 1.Axios中，JSON字符串和JS对象自动进行转换

2.因为将数据转为json字符串后，请求数据等参数都放在了一行，且不再是原来的usernam=“cat”&password=123类似这种了，所以在servlet中获取请求参数时，不能再继续使用request.getpameter，需要使用到原始post请求获取参数的方法(因为post的请求参数在请求体的最后一行),使用getReader.readLine()

Vue

Vue是前端的一种框架，我们先看一个不使用Vue的原始方式来引入

<input type="button" value="获取所有品牌" onclick="ajaxGetAllBrand()"><br> <script> function ajaxGetAllBrand() { // 使用AJAX去服务器获取数据, 并把数据填充到表格中 axios.get("/selectAllServlet").then(res=>{ //在axios中自动将json转为js对象 let data = res.data; let str=""; for (let datum of data) { str+=`<tr align="center"> <td>${datum.id}</td> <td>${datum.brandName}</td> <td>${datum.companyName}</td> <td>${datum.ordered}</td> <td>${datum.description}</td> <td>${datum.status}</td> <td><a href="#">修改</a> <a href="#">删除</a></td> </tr>` } //innerHTML可以显示标签，innerText只显示字符 document.getElementById("tableBody").innerHTML=str; }) } </script>

这种原始的方式不便于我们的理解，而且代码比较繁多，编写和修改困难。

Vue的快速入门

1.先导入vue.js文件 2.创建Vue对象 3.编写视图

插值表达式：{{变量名}} 获取数据

<script src="js/vue.js"></script> <script> new Vue({ el:#div, data(){ name:"cat" } }); </script>

解读一下这段代码的含义： new Vue({}):创建一个Vue对象 #div表示id选择器，el表示视图的绑定区域，区域中的表达式等都受到vue的控制，意思就是将数据绑定到id为div的位置 data就是存放数据的区域 methods 选项：用于定义方法。方法可以直接通过对象名调用，也可以在方法内部通过this来调用。

vue常用指令 条件渲染： v-if 条件成立时显示，不成立则被删除 v-else-if v-else v-show 为true时显示，不为true是隐藏(display:none)，但没有被删除

列表渲染： v-for 进行遍历，在遍历数组时，可以进行有索引的遍历

文本插值： v-text 会将数据全部视为字符串，不识别html标签,类似于innerText v-html 可以识别html的标签,类似于innerHtml

事件绑定： v-on 缩写为@，单击：v-on:click 双击：v-on:dblclick

绑定属性： v-bind 属性的意思就是href,class等

表单绑定 v-model 双向的绑定

Vue的生命周期 共八个 创建之前 无视图v,无模型对象m 创建 有m无v 挂载前 有m有v,没有绑定数据 挂载 有m有v,绑定了数据 更新前 视图显示旧数据 更新后 视图显示新数据 删除前 m和v都在，没有被销毁 删除后 m和v都被销毁

最后

如果你对本文有疑问，你可以在文章下方对我留言，敬请指正，对于每个留言我都会认真查看。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。