1. 知识回顾

1.1 Axios案例

1.1.1 Ajax发展史

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

1.1.2 请求的类型

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

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

1.2 Axios作业-删除数据

1.2.1 编辑页面JS

为删除按钮添加点击事件

编辑页面JS 发起Ajax请求

请求方式说明:

1.2.2 编辑Controller方法

1.2.3 编辑Service方法

1.3 Axios作业-修改数据

1.3.1 业务说明

准备修改的DIV 其中包含4部分数据. name/age/sex where id!!!
当用户点击修改按钮时,应该实现数据的回显.
当用户已经修改完成之后,需要点击提交按钮时应该发起ajax请求实现数据修改操作.

注意事项:
在vue.js中看到了INPUT框, 则表示双向数据绑定. 必须在data中定义属性.

1.3.2 编辑页面JS

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>VUE-Axios练习</title></head><body><!-- 定义VUE根标签 --><div id="app"><div align="center"><h1 align="center">用户新增</h1>名称: <input type="text" v-model.trim="addUser.name"/>年龄: <input type="text" v-model.number="addUser.age"/>性别: <input type="text" v-model.trim="addUser.sex"/><button @click="addUserMe">新增</button></div><hr /><div align="center"><!-- 需求: ID是修改操作的必备参数,用户不可以修改 disabled="false" JS规范如果设定true 可以简化为key--><h1 align="center">用户修改</h1>编号: <input type="text" v-model.trim="updateUser.id"  disabled />名称: <input type="text" v-model.trim="updateUser.name"/>年龄: <input type="text" v-model.number="updateUser.age"/>性别: <input type="text" v-model.trim="updateUser.sex"/><!-- 当用户修改完成之后,点击提交按钮时发起ajax请求. --><button @click="updateUserMe">提交</button></div><hr /><table id="tab1" border="1px" align="center" width="80%"><tr><td colspan="5" align="center"><h1>用户列表</h1></td></tr><tr align="center"><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td><td>操作</td></tr><!-- 指令: 可以循环数据+标签  v-for --><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><!-- 为当前user对象绑定点击事件 --><button @click="deleteUser(user)">删除</button></td></tr></table></div><!-- 1.引入VUE.js --><script src="../js/vue.js"></script><!-- 2.引入Axios.js --><script src="../js/axios.js"></script><!-- 需求分析1:1.当用户打开页面时就应该发起Ajax请求获取userList数据.2.将userList数据 在页面中展现  2.1页面中的数据必须在data中定义2.2 ajax请求的结果赋值给data属性3.利用v-for指令实现数据遍历需求分析2:  用户数据入库操作1.在页面中准备用户新增文本框/按钮2.准备双向数据绑定的规则3.为按钮添加事件,实现数据新增入库.--><script>//设定axios请求前缀axios.defaults.baseURL = "http://localhost:8090"const app = new Vue({el: "#app",data: {//1.定义集合数据 nulluserList: [],//2.定义addUser对象  新增的用户数据addUser: {name: '',age: 0,sex: ''},//定义一个修改的数据封装体updateUser: {id: '',name: '',age: 0,sex: ''}},methods: {//1.定义getuserList方法 获取后台服务器数据async getUserList(){let{data: result} = await axios.get("/vue/getUserList")//ajax调用之后,将数据给属性.this.userList = result},//新增操作 请求类型: post  接收时需要使用json方式处理async addUserMe(){//不需要返回值await axios.post("/vue/insertUser",this.addUser)//将列表页面重新刷新this.getUserList()},async deleteUser(user){//console.log(user)//只需要获取用户的ID 就可以完成删除的操作.//方法选择 ?id=xx 拼接    |  restFul结构let id = user.idawait axios.delete("/vue/deleteUser?id="+id)alert("删除数据成功!!!")//需要重新获取列表数据this.getUserList()/* await axios.delete(`/vue/deleteUser?id=${id}`) */},//点击修改按钮时触发事件updateUserBtn(user){//console.log(user)//用户传递的User对象应该动态的传递给双向数据绑定的key updateUserthis.updateUser = user},//1.是否发起ajax请求 2.参数是谁? updateUser 3.什么请求类型PUT//this.updateUser是JS对象 传递到后端JSON串 @RequestBodyasync updateUserMe(){await axios.put("/vue/updateUser",this.updateUser)//如果操作成功,则应该清空修改的对象this.updateUser = {}//如果操作成功,则重新获取列表信息this.getUserList()alert("修改操作成功!!!!")}},//调用生命周期函数 8个mounted(){//console.log("vue对象实例化成功!!!!")//初始化时调用getUserList()this.getUserList()}})</script></body>
</html>

请求参数详情信息:

1.3.3 编辑后端Controller

接收前端传递的数据, 完成数据修改操作

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><h1>组件化结构</h1><div id="app"><!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用. 实现策略: 组件化思想2.组件化步骤:1.定义组件   全局组件: 任意的DIV都可以引入该组件局部组件: 只有特定的DIV可以引入组件2. 编辑组件的key(注意驼峰规则的写法)    编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}}html标签: 使用template进行标记3.通过key对组件进行引用.--><!-- 1.组件标签的使用 放到app标签之内 才能解析2.如果采用驼峰规则命令则中间使用-线连接--><hello-com></hello-com><hello-com></hello-com><hello-com></hello-com></div>  <!-- 定义组件的模版html 注意事项: 1.切记标识在app之外!!!!2.要求模版字符串必须有根标签 div       --><template id="helloTem"><div><h3>静夜思</h3>床前明月光，疑是地上霜。举头望明月，低头思故乡。引入属性: {{msg}}</div></template><!-- 引入JS文件 --><script src="../js/vue.js"></script><script>/* 1.定义组件 */Vue.component("helloCom",{//定义属性  必须添加return 返回值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><h1>局部组件</h1><div id="app"><hello-com></hello-com><hello-com></hello-com><hello-com></hello-com></div><template id="helloTem"><div><h1>我是局部组件AAAAAAAAA</h1>属性取值: {{msg}}</div></template>   <!-- 引入JS文件 --><script src="../js/vue.js"></script><script>//声明组件let helloCom = {//属性定义data(){return {msg: "我是局部组件"}},template: "#helloTem"}/* 说明:只能在某个VUE的对象之内,使用组件标签 */const app = new Vue({el:  "#app",data: {},methods: {},//定义局部组件components: {//组件key: 组件体helloCom: helloCom}})</script></body>
</html>

2.2.3 key-value 简化写法

3. VUE中的路由

3.1 路由介绍

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

3.2 路由步骤

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

3.3 路由入门案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>路由入门案例</title></head><body><div id="app"><!-- <a href="设定跳转的地址">百度</a> --><!-- 二:定义链接1.router-link 被编译之后转化为a标签2.关键字 to    被编译之后转化为href属性--><router-link to="/user">用户</router-link><router-link to="/dog">狗狗</router-link><!--三: 指定路由的填充位置 未来展现组件信息 填充的位置被解析之后 就是一个DIV--><router-view></router-view></div><!-- 定义组件的标签体 --><template id="userTem"><div><h3>用户信息</h3></div></template><template id="dogTem"><div><h3>狗狗信息</h3></div></template><!-- 1.导入路由JS    先导入vue.js  再导入路由.js 顺序问题 --><script src="../js/vue.js"></script><script src="../js/vue-router.js"></script><script>/*** 第四步: 准备组件,定义路由对象*/let userCom = {template: "#userTem"}let dogCom= {template: "#dogTem"}/*** 定义路由对象* routes:  路由的多个映射通过该属性进行定义.*/let vueRouter = new VueRouter({routes: [{path: "/user", component: userCom},{path: "/dog",  component: dogCom}]})const APP = new Vue({el: "#app",data: {},//实现路由的挂载router: vueRouter})</script></body>
</html>

3.4 重定向和转发

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

3.4.1 转发问题

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

3.4.2 重定向问题

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

3.4 路由关键字

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

3.5 作业

1.掌握组件/路由/axios的基本用法语法!!!
2.根据VUE_demo 了解什么是路由嵌套规则.

CGB2105-Day09相关推荐

Python基础day09【面向对象(封装、继承、多态)、重写、私有权限】
视频.源码.课件.软件.笔记:超全面Python基础入门教程[十天课程]博客笔记汇总表[黑马程序员] Python基础day09[面向对象(封装.继承.多态).重写.私有权限] Python基础day ...
Python菜鸟入门：day09数据结构
写在前面: 此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出.欢迎各位前来交流.(部分材料来源网络,若有侵权,立即删除) 传送门: day01基础知识 day02知识分类 day03 ...
day09【后台】权限控制-下
day09[后台]权限控制-下 1.目标5:密码加密 1.1.修改数据库表结构由于之前使用MD5加密,密码字段长度为32位:现采用带盐值的加密,需要修改密码字段的长度顺带把密码也改了 1.2.注入 ...
谷粒商城 Day09 首页分类与SpEL动态缓存切面
Day09 首页分类与SpEL动态缓存切面一.优化缓存逻辑百万并发进来,判断 bloomFilter 和缓存中拿,先执行哪个最好?1. 先布隆 ,再缓存面对攻击 1 好 2. 先缓存 ,再布隆 ...
Python学习笔记--day09 函数模块（文件、路径操作）
第二模块函数&模块第一模块主要是学习python基础知识,从第二模块开始就可以通过程序去解决工作中实际的问题. 函数,一个用于专门实现某个功能的代码块(可重用). 内置函数 len.bin ...
java学习笔记day09 final、多态、抽象类、接口
java学习笔记day09 思维导图 final . 多态 . 抽象类 . 接口 (都很重要) 一.final 二.多态多态中的成员访问特点⭐ [P237] 多态的好处 [P239] 多态的弊端向 ...
day09 面向对象
day09 面向对象 1.1 概述面向过程 : 侧重分步骤比如做菜 1 买菜,买各种食材,买各种调料 2 开火,烧油 3 翻炒 4 出锅 - 面向对象 : 侧重分类/模块比如做菜 1 完成做菜, ...
day09 书城项目第三阶段
day09 书城项目第三阶段 1. 项目准备工作 1.1 创建Module 1.2 拷贝jar包数据库jar包 Thymeleaf的jar包 1.3 从V2版本项目迁移代码 1.3.1 迁移src目 ...
Day09 字符串2（一生之敌，KMP）
Day09 字符串2 一.28. 实现 strStr() 二.459.重复的子字符串一.28. 实现 strStr() class Solution {public int strStr(Strin ...
代码随想录Day09：28. 实现 strStr()、459.重复的子字符串、字符串总结、双指针回顾
目录 Day09:28. 实现 strStr().459.重复的子字符串.字符串总结 .双指针回顾 28. 实现 strStr() (一刷只看了思想) 459.重复的子字符串 (本题一刷跳过了) 字符 ...

CGB2105-Day09