1、知识点回顾

1.1 Ajax案例

1.1.1 Ajax发展史

JS原生Ajax操作处理复杂不便于使用
JQuery是JS的高级函数类库，封装了很多API简化程序调用的过程（回调地狱：Ajax嵌套问题）
promise对象将Ajax嵌套的结构转化为链式加载的结构，ajax.get().then(xxx)
Ajax主要封装lpromise对象，将调用变得更加的简化，整合VUE.JS中大部分条件下都整合axios发起ajax请求

1.1.2 请求的类型

HTTP常用的请求类型 8中但是一般四种需要单独记忆

查询操作使用GET请求 **特点：**参数结构key=value URL?key=value&key2=value2
新增操作使用POST请求 **特点：**会将参数封装到请求头中相对更加的安全 key=value key2=value2 可直接采用对象的方式接受
Axios中的POST参数是一个JSON串{key1:value,key2:value2}将JSON串转化为对象 @RequestBody
删除操作使用DELETE请求 **特点：**与GET请求一致
更新操作使用PUT请求 **特点：**与POST请求一致
RestFul风格：在上述的四大请求类型中都可以使用（单独的体系）参数使用/分割注意参数结构灵活选用

1.2 Ajax-删除数据-（作业练习）

1.2.1 编辑页面JS

为删除按钮添加点击事件

编辑页面JS发起Ajax请求

请求方式说明：

1.2.2 编辑后端代码

1.2.3 编辑Service方法

1.3 Ajax-修改操作-（作业练习）

业务说明

准备修改的DIV 其中包含4部分数据. name/age/sex where id!!!
当用户点击修改按钮时,应该实现数据的回显.
当用户已经修改完成之后,需要点击提交按钮时应该发起ajax请求实现数据修改操作.
注意事项：
在vue.js中看到了INPUT框, 则表示双向数据绑定. 必须在data中定义属性.

1.3.2 编辑页面JS

定义修改html标签
定义修改的对象 updateUser 并且双向数据绑定
为提交按钮添加点击事件. 实现ajax参数提交.
清空已提交的数据,重新获取列表信息.
编辑页面JS

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>增删改查</title></head><body><div id="app"><div align="center"><h1 align="center">用户新增</h1>姓名：<input type="text" v-model.trim="insertUuser.name" />年龄：<input type="text" v-model.number="insertUuser.age" />性别：<input type="text" v-model.trim="insertUuser.sex" /><button @click="addUser">新增</button></div><hr><div align="center"><h1 align="center">用户修改</h1>ID：<input type="text" disabled  v-model.trim="updateUser.id" />姓名：<input type="text" v-model.trim="updateUser.name" />年龄：<input type="text" v-model.number="updateUser.age" />性别：<input type="text"  v-model.trim="updateUser.sex" /><button @click="updateUserMP">确定</button></div><hr><table border="1px" cellpadding="0px" cellspacing="0px" align="center" width="70%"><tr align="center"><td colspan="5"><h1>用户列表</h1></td></tr><tr align="center" class="SB"><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td><td>操作</td></tr><tr align="center" v-for="user in userList"><td v-text="user.id">编号</td><td v-text="user.name">姓名</td><td v-text="user.age">年龄</td><td v-text="user.sex">性别</td><td><button @click="updateUserBtn(user)">修改</button><button @click="deleteUser(user)">删除</button></td></tr></table></div><script src="../js/vue.js"></script><script src="../js/axios.js"></script><script>axios.defaults.baseURL = "http://localhost:8090"const app = new Vue({el: '#app',data: {userList: [],insertUuser: {name: '',age: '',sex: ''},updateUser: {id: '',name: '',age: '',sex: ''}},methods: {// 查询所有用户async getUserList(){const {data: result} = await axios.get("/user/getUserList")this.userList = result},// 用户新增async addUser(){await axios.post("/user/insertUser",this.insertUuser)this.getUserList()},// 删除用户 根据ID删除信息async deleteUser(user){const id = user.idawait axios.delete("/user/deleteUser?id=" + id)this.getUserList()},// 用户修改操作updateUserBtn(user){// 数据回显this.updateUser = user},async updateUserMP(){await axios.put("/user/updateUser",this.updateUser)this.updateUser = {}this.getUserList()}},// 调用方法mounted(){this.getUserList()}})</script></body>
</html>

请求参数详情信息

1.3.3 编辑后端代码

1.3.4 编辑后端Service

2、组件化思想

2.1 组件化说明

说明: 传统的页面开发,会将大量的HTML/CSS/JS进行引入,但是引入之后结构混乱不便于管理. 开发维护时成本较高.
组件化思想:
在VUE中可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理.
组件可以进行复用.
关键字: 组件–页面 (html/css/js)

2.2 组件入门案例

2.2.1 组件入门写法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>组件化</title></head><body><div id="app"><!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用. 实现策略: 组件化思想2.组件化步骤:1.定义组件   全局组件: 任意的DIV都可以引入该组件局部组件: 只有特定的DIV可以引入组件2. 编辑组件的key(注意驼峰规则的写法)    编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}}html标签: 使用template进行标记3.通过key对组件进行引用.--><!-- 1.组件标签的使用 放到app标签之内 才能解析2.如果采用驼峰规则命令则中间使用-线连接--><holle-com></holle-com></div><!-- 定义组件的模版html 注意事项: 1.切记标识在app之外!!!!2.要求模版字符串必须有根标签 div     --><template id="helloTem"><div><h3>静夜思</h3>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<br>引入属性：{{msg}}</div></template><script src="../js/vue.js"></script><script>// 1、定义组件Vue.component("holleCom",{// 定义属性data(){return {msg: '李知恩'}},template: "#helloTem"})const app = new Vue({el: '#app',data: {},methods: {}})</script></body>
</html>

2.2.2 局部组件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>局部组件化</title></head><body><div id="app"><hello-com></hello-com></div><template id="helloTem"><div>获取属性：{{msg}}</div></template><script src="../js/vue.js"></script><script>const helloCom = {data() {return {msg: '李知恩'}},template: '#helloTem'}const app = new Vue({el: '#app',data: {},methods: {},components: {// 组件key：组件体// helloCom: helloCom,// 如果key-value相同 可以简化为keyhelloCom}})</script></body>
</html>

2.2.3 key-value简化写法

3、VUE中的路由

3.1 路由介绍

说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

3.2 路由步骤

导入路由JS
指定路由的跳转连接
定义路由的填充位
1. 封装组件信息, 指定路由对象 (难!!!)
在VUE对象中声明路由

3.3 路由入门案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>路由机制</title></head><body><div id="app"><!-- 二:定义链接1.router-link 被编译之后转化为a标签2.关键字 to    被编译之后转化为href属性--><router-link to="/user">用户</router-link><router-link to="/cat">猫</router-link><!--三: 指定路由的填充位置 未来展现组件信息 填充的位置被解析之后 就是一个DIV--><router-view></router-view></div><!-- 定义组件 --><template id="userTem"><div><h1>李知恩</h1></div></template><template id="catTem"><div><h1>大洋芋</h1></div></template><script src="../js/vue.js"></script><script src="../js/vue-router.js"></script><script>// 定义路由对象const userCom = {template: '#userTem'}const catCom = {template: '#catTem'}/*** 定义路由对象* routes:  路由的多个映射通过该属性进行定义.*/const vueRouters = new VueRouter({routes: [{path:"/user",component:userCom},{path:"/cat",component:catCom}]})const app = new Vue({el: '#app',data: {},// 实现路由挂载router: vueRouters})</script></body>
</html>

3.4 重定向和转发

注意事项: 请求和转发都是服务器行为 不会做额外的操作

3.4.1 转发问题

说明: 用户访问服务器,但是目标服务器无法处理该请求,由服务器内部将请求交给其他服务器处理. 这个过程称之为转发.

3.4.2 重定向问题

说明: 用户访问服务器,但是目标服务器无法处理该请求,目标服务器返回一个能够处理请求的网址.由用户再次发起请求,访问服务器获取数据.

3.5 路由关键字

redirect 路由的重定向
需求: 要求用户访问 "/"根目录要求重定向到 "/user"请求路径中.

CGB2105-Day-09笔记相关推荐

【原创】Altium Designer Winter 09 笔记之一
很久没写东西上来了,最近比较懒是一个原因,更重要的原因是我发现用Excel作笔记是个好方法~ 所以东西都写Excel里了~ 在这里把最近画PCB板子遇到的问题和解决办法贴出来吧~ 都是些菜鸟问题,供其 ...
OAuth 2.0实战课 09 笔记
学习极客时间王新栋的<OAuth 2.0实战课>笔记:实战:利用OAuth 2.0实现一个OpenID Connect用户身份认证协议. OIDC 是什么? OIDC 其实就是一种用户身份 ...
爬虫Spider 09 - scrapy框架 | 日志级别 | 保存为csv、json文件
文章目录 Spider 08回顾 selenium+phantomjs/chrome/firefox execjs模块使用 Spider 09笔记 scrapy框架小试牛刀猫眼电影案例知识点汇总 ...
python可以体现数学中映射概念的是_【课时27+集合+在我的世界里+你就是唯一】 - #1...
2018年08月16 -目录: 一.字典的表亲:集合二.创建集合三.访问集合四.不可变集合五.课时27课后习题及答案 ************************** 一.字典的表亲:集合 ...
Ali-Check 【Blocker】
Blocker Blocker直译过来是"雏形锻模"的意思,大意应该是要给开发者提供一个开发的模板.它在Ali-Check中的提示等级是最高的,在Android Studio中也是 ...
Spring-学习笔记09【JdbcTemplate的基本使用】
Java后端学习路线笔记汇总表[黑马程序员] Spring-学习笔记01[Spring框架简介][day01] Spring-学习笔记02[程序间耦合] Spring-学习笔记03[Spring的 ...
MyBatis-学习笔记09【09.Mybatis的多表操作】
Java后端学习路线笔记汇总表[黑马程序员] MyBatis-学习笔记01[01.Mybatis课程介绍及环境搭建][day01] MyBatis-学习笔记02[02.Mybatis入门案例] M ...
JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
【EF学习笔记09】----------使用 EntityState 枚举标记实体状态，实现增删改查
[EF学习笔记09]----------使用 EntityState 枚举标记实体状态,实现增删改查讲解之前,先来看一下我们的数据库结构:班级表学生表如上图,实体状态由EntityState枚举 ...
二级VB培训笔记09：真考题库试卷75演练
二级VB培训笔记09:真题演练

CGB2105-Day-09笔记