CGB2105-Day09
1.VUE 练习2.VUE组件化的思想3.VUE路由机制4.京淘后台管理搭建5.前后端分离思想 MP
·
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.定义集合数据 null
userList: [],
//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.id
await axios.delete("/vue/deleteUser?id="+id)
alert("删除数据成功!!!")
//需要重新获取列表数据
this.getUserList()
/* await axios.delete(`/vue/deleteUser?id=${id}`) */
},
//点击修改按钮时触发事件
updateUserBtn(user){
//console.log(user)
//用户传递的User对象应该动态的传递给双向数据绑定的key updateUser
this.updateUser = user
},
//1.是否发起ajax请求 2.参数是谁? updateUser 3.什么请求类型PUT
//this.updateUser是JS对象 传递到后端JSON串 @RequestBody
async 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 了解什么是路由嵌套规则.
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献23条内容
所有评论(0)