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.id
await 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相同 可以简化为key
helloCom
}
})
</script>
</body>
</html>
2.2.3 key-value简化写法
3、VUE中的路由
3.1 路由介绍
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
3.2 路由步骤
- 导入路由JS
- 指定路由的跳转连接
- 定义路由的填充位
- 封装组件信息, 指定路由对象 (难!!!)
- 在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"请求路径中.
扫一扫
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
