1. 知识回顾
1.1 Axios案例
1.1.1 Ajax发展史
1.JS的原生Ajax操作,处理复杂 不便于使用
2.JQuery 是JS的高级函数类库 封装了很多的API 简化程序调用的过程(回调地狱 Ajax嵌套问题)
3.promise对象 将Ajax嵌套的结构 转化为链式加载的结构 ajax.get().then(xxx)
4.Axios 主要封装了promise对象,将调用变得更加简化,整个VUE.js中大部分条件下都整合axios发起ajax请求
1.1.2请求的类型
http常用的请求类型 8种 但是一般四种需要单独的记忆
1.查询操作 get请求类型 特点: 参数结构key=value URL?key=value&key2=value2
2.新增(form 表单) post请求类型 特点: 会将参数封装到请求头中 相对更加的安全 key=value key2=value2
Axios中的post 参数是一个JSON串 {key1:value1,key2:value2} 将JSON串转化为对象 @RequestBody
3.删除操作 delete请求类型 特点: 与get请求类型一致
4.更新操作 put请求类型 特点: 与post请求类型一致
5.RestFul风格: 在上述的四大请求类型中都可以使用(单独的体系) 参数使用/分割 注意参数结构 灵活使用
1.2 Axios作业-删除数据
1.2.1 编辑页面JS
为删除按钮添加点击事件
</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>修改</button>
<!-- 删除的是哪个数据 为当前user对象绑定点击事件 -->
<button @click="deleteUser(user)">删除</button>
</td>
</tr>
编辑页面JS发起Ajax请求
async deleteUser(user){
//console.log(user)
//只需要获取用户ID就可以完成删除操作
//方法选择?id=xx 拼接 restFul结构
let id = user.id
await axios.delete("/vue/deleteUser?id="+id)
alert("删除成功")
/* await axios.delete(`/vue/deleteUser?id=${id}`) */
this.getUserList()
}
1.2.2 编辑Controller方法
/**
* 删除用户数据
* url: http://localhost:8090/vue/deleteUser?id=1
* 参数 id=1
* 返回值 void
*/
@DeleteMapping("/deleteUser")
public void deleteUser(Integer id){
userService.deleteUser(id);
}
1.2.3 编辑Service方法
@Override
public void deleteUser(Integer id) {
//利用MP根据主键删除数据
userMapper.deleteById(id);
}
1.3 Axios作业-修改数据
1.3.1 业务说明
1.准备修改的DIV 其中包含4部分数据. name/age/sex where id!!!
2.当用户点击修改按钮时,应该实现数据的回显.
3.当用户已经修改完成之后,需要点击提交按钮时 应该发起ajax请求实现数据修改操作.
注意事项:
在vue.js中看到了INPUT框, 则表示双向数据绑定. 必须在data中定义属性.
1.3.2 编辑页面JS
1.定义修改html标签
2,定义修改的对象 updateUser 并且双向数据绑定
3.为提交按钮添加点击事件. 实现ajax参数提交.
4.清空已提交的数据,重新获取列表信息.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表demo</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>
<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>
</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>
<!-- 引入vue.js -->
<script src="../js/vue.js"></script>
<!-- 引入axios.js -->
<script src="../js/axios.js"></script>
<!-- 需求分析1:
1.当用户打开页面时就应该发起Ajax请求获取userList数据
2.userList数据在页面中展现
2.1页面中的数据必须在data中定义
2.2 ajax请求的结果赋值给data属性
this.userList = result;
需求分析2: 用户数据入库操作
1.在页面中准备用户新增文本框/按钮
2.准备双向数据绑定的规则
3.
-->
<script>
//设定axios请求前缀
axios.defaults.baseURL="http://localhost:8090"
const app = new Vue({
el: "#app",
data: {
//定义集合数据null
userList: [],
//定义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调用之后,给data属性赋值
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.id
await axios.delete("/vue/deleteUser?id="+id)
alert("删除成功")
/* await axios.delete(`/vue/deleteUser?id=${id}`) */
this.getUserList()
},
//点击修改按钮时触发事件
updateUserBtn(user){
this.updateUser = user
},
//1.是否发起ajax请求 2.参数是谁 updateUser 3.什么请求类型
//this.updateUser是JS对象 传递到后端是JSON串 @RequestBody接收
async updateUserMe(){
await axios.put("/vue/updateUser",this.updateUser)
//清空修改的对象
this.updateUser = {}
//如果操作成功,则重新获取列表信息
this.getUserList()
alert("修改操作成功")
}
},
mounted(){
//console.log("vue对象实例化成功")
//初始化时调用getUserList()
this.getUserList()
}
})
</script>
</body>
</html>
1.3.3 编辑后端Controller
/**
* 修改用户信息
* url /vue/updateUser
* 参数 对象的json串
* 返回值void
*/
@PutMapping("/updateUser")
public void updateUser(@RequestBody User user){
userService.updateUser(user);
}
1.3.4 编辑Service方法
//user对象 传递了4个参数 id是主键 修改另外的3个属性
@Override
public void updateUser(User user) {
//根据主键id充当where条件 另外的属性当做set条件
userMapper.updateById(user);
}
2. 组件化思想
2.1 组件化说明
说明 传统的页面开发,会将大量的html/css/js进行引入,但是引入之后结构混乱,不便于管理,开发维护时,成本较高
组件化思想
在vue中,可以将一个组件看做是一个页面,在其中可以引入独立的样式/css/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>
<hello-com></hello-com>
<hello-com></hello-com>
</div>
<!-- 定义组件的模板html 标识在app之外
注意事项
1.切记标识在app之外
2.要求模板字符串必须有根标签 div
-->
<template id="helloTem">
<div>
<h3>静夜思</h3>
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component("helloCom",{
template: "#helloTem"
})
const app = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
定义属性
Vue.component("helloCom",{
//定义属性 必须添加return 返回值
data(){
return{
msg:"我是一个组件"
}
},
template: "#helloTem"
})
2.2.2 局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件</title>
</head>
<body>
<div id="app">
<hello-com></hello-com>
<hello-com></hello-com>
<hello-com></hello-com>
</div>
<template id="helloTem">
<div>
<h1>我是局部组件AAA</h1>
属性取值:{{msg}}
</div>
</template>
<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的简化写法
components: {
//组件key:组件体
//helloCom: helloCom,
//如果key-value相同 则JS可以简化为key
helloCom
}
3. VUE中的路由
3.1 路由介绍
说明:用户发起一个请求,在互联网中经过多个站点的跳转,最终获取服务器端的数据 把互联网中网络的链路称之为路由(网络用语)
VUE中的路由 根据用户的请求URL地址,展现特定的组件(页面)信息,(控制用户程序跳转过程)
3.2 路由步骤
1.导入路由 JS
2.指定路由的跳转链接
3.定义路由的填充位
4.封装组件信息,指定路由对象
5.在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>狗狗信息</h1>
</div>
</template>
<!-- 一. 导入路由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"
}
/*
定义路由对象
routers 路由的多个映射
*/
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 转发问题
说明:用户访问服务器,但是目标服务器无法处理该请求,由服务器内部将请求交给其他服务器处理 这个过程称之为转发
规则:
1.请求一次,响应一次
2.URL地址信息不变
3.可以携带数据
3.4.2 重定向问题
说明:用户访问服务器,但是目标服务器无法处理该请求,目标服务器返回一个能够处理请求的网址,由用户再次发起请求,访问服务器获取数据
规则:
1.请求多次,响应多次
2.URL地址信息发生变化
3.不可以传递数据
let vueRouter = new VueRouter({
routes: [
{path: "/", redirect: "/user"},
{path: "/user", component: userCom},
{path: "/dog", component: dogCom}
]
})
3.5 路由关键字
1.redirect路由的重定向
需求 要求用户访问/根目录,要求重定向到/user请求路径中
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
