Vue和综合案例

最新推荐文章于 2023-07-27 19:21:23 发布

huanghai_fu

最新推荐文章于 2023-07-27 19:21:23 发布

阅读量234

点赞数

本文链接：https://blog.csdn.net/huanghai_fu/article/details/107119581

版权

本文探讨Vue的高级使用，包括自定义组件、生命周期、异步操作，并详细讲解了一个学生管理系统的实现，涵盖登录、分页查询、添加、修改和删除等功能。

摘要由CSDN通过智能技术生成

Vue和综合案例

一，Vue高级使用

1,自定义组件

学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如就是对的封装。
本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。
定义格式：
```
Vue.component(组件名称,{
    props:组件的属性,
    data:组件的数据函数,
    template:组件解析的标签模板
})
```
代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2Em2xX8-1593824676041)(E:\每日讲课笔记\WEB_new\14-ElementUI+案例（双元）\Vue和综合案例\img\1593484402390.png)]

2，Vue的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C1O5GywU-1593824676044)(C:\Users\HUANGHAI\AppData\Roaming\Typora\typora-user-images\1593477095742.png)]

生命周期的八个阶段
状态阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载后
beforeUpdate 更新前
updated 更新后
beforeDestroy 摧毁前
destoryed 摧毁后
created(Vue实例创建完成，页面还没有加载也没有解析)
mounted()

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载后
beforeUpdate	更新前
updated	更新后
beforeDestroy	摧毁前
destoryed	摧毁后

3，异步操作

在Vue中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！
使用步骤

引入 axios 核心 js 文件。
调用 axios 对象的方法来发起异步请求。
调用 axios 对象的方法来处理响应的数据。

axios常用方法

方法名	作用
get(请求的资源路径与请求的参数)	发送GET方式请求
post(请求的资源路径，请求的参数)	发送POST方式请求
then(response)	请求成功后的回调函数，通过response获取响应的数据
catch(error)	请求失败后的回调函数，通过error获取错误信息

4，Vue高级使用的小结

自定义组件：本质上，组件是带有一个名字且可复用的 Vue 实例，我们可以自己来定义。
生命周期：核心八个阶段

beforeCreate：创建前

created：创建后

beforeMount：载入前

mounted：载入后

beforeUpdate：更新前

updated：更新后

beforeDestroy：销毁前

destroyed：销毁后
异步操作：通过 axios 插件来实现。

二,学生管理系统

1，案例的效果环境的介绍

后端
- Servlet相关的jar是没有的（下载或者拷贝javax.servlet-api-3.0.1.jar）
- web-inf下面的libs名字错误，会导致classnotfoundException，所以改成lib
- 数据库创建(所有字段名都小写，大小写不兼容)
- filter需要实现方法，不需要写任何内容
- 配置文件jdbc的连接端口和用户名密码要改正确
- mybatis相关配置信息
- 三层架构相关的类
- filter拷贝
前端
- 插件导入
- 拷贝html相关文件

注意点

iframe的使用

作用：他可以在当前页面中嵌入其他页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world</h1>
<iframe src="login.html" frameborder="false" style="top:80px;left: 120px; width: 100%;height:500px"></iframe>
</body>
</html>

filter
- 过滤任何请求

2，登录功能的实现1

3.登录功能的实现2

4,分页查询功能的实现

5，添加功能的实现

6，修改功能的实现

7，删除功能的实现


    

- filter

  - 过滤任何请求

### 2，登录功能的实现1

### 3.登录功能的实现2

### 4,分页查询功能的实现

### 5，添加功能的实现

### 6，修改功能的实现

### 7，删除功能的实现

####

huanghai_fu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue和综合案例

Vue和综合案例一，Vue高级使用1,自定义组件学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如就是对的封装。本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。定义格式：Vue.component(组件名称,{ props:组件的属性, data:组件的数据函数, template:组件解析的标签模板})代码[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2Em2xX8-
复制链接

扫一扫