vue.js(二)：vue的生命周期、vue发送ajax请求

最新推荐文章于 2024-08-20 17:22:13 发布

隔叶听风

最新推荐文章于 2024-08-20 17:22:13 发布

阅读量1.1k

点赞数

分类专栏： JavaEE学习日志 vuejs 前端文章标签： vue java ajax

本文链接：https://blog.csdn.net/Sakuraaaaaaa/article/details/108004076

版权

JavaEE学习日志同时被 3 个专栏收录

168 篇文章 9 订阅

订阅专栏

前端

29 篇文章 0 订阅

订阅专栏

vuejs

10 篇文章 0 订阅

订阅专栏

vue.js

vue的生命周期
vue发送ajax请求
vue案例

vue的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。
在这里插入图片描述
vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容：

beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created ：数据已经绑定到了对象实例，但是还没有挂载对象
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作
当我们的data发生改变时，会调用beforeUpdate和updated方
 beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
 updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的小路径，将改变更新到 dom上面，完成更新
beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

生命周期展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>生命周期</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
    {{message}}
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        },
        beforeCreate: function() {
            console.log(this);
            showData('创建vue实例前', this);
        },
        created: function() {
            showData('创建vue实例后', this);
        },
        beforeMount: function() {
            showData('挂载到dom前', this);
        },
        mounted: function() {
            showData('挂载到dom后', this);
        },
        beforeUpdate: function() {
            showData('数据变化更新前', this);
        },
        updated: function() {
            showData('数据变化更新后', this);
        },
        beforeDestroy: function() {
            vm.test = "3333";
            showData('vue实例销毁前', this);
        },
        destroyed: function() {
            showData('vue实例销毁后', this);
        }

    });

    function realDom() {
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
    }

    function showData(process, obj) {
        console.log(process);
        console.log('data 数据：' + obj.message)
        console.log('挂载的对象：')
        console.log(obj.$el)
        realDom();
        console.log('------------------')
        console.log('------------------')
    }
    vm.message="good...";
    vm.$destroy();
</script>
</body>
</html>

vue发送ajax请求

使用axios实现ajax请求。

一、把axios的js文件引入到html文件中。

在这里插入图片描述

二、使用axios发送ajax请求

支持restful的四种请求方式

get
post
put
delete

GET请求

axios.get("/user/list?id=1")
.then(function(response){
	//取服务端响应的数据
	var data = response.data;
})
.catch(function(reason){
	console.log(reason);
});

POST请求：

axios.post("/user/list", {id:1,name:"zhagnsan",pasword:"123"})
.then(funciton(response){
	var data = response.data;
})
.catch(function(reason){
	console.log(reason);
});

注意：如果在axios中取返回结果时，应该先创建一个当前vue对象的引用。

//创建一个当前this的引用
var _this = _this;
axios.get("http://www.baidu.com")
   .then(function (response) { 
       var data = response.data;
       _this.data = data;
   })
   .catch(function (reason) { 
       console.log(reason);
   })

使用axios发送post请求时，服务端接收的是json格式的数据，content-type：application/json。如果使用springmvc接收数据的话，应该使用@RequestBody注解。

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    {{message}}}
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello",
            data:{}
        },
        methods:{
            sendGet:function () {
                //创建一个当前this的引用
                var _this = this;
                axios.get("http://www.baidu.com")
                    .then(function (response) {
                        var data = response.data;
                        _this.data = data;
                    })
                    .catch(function (reason) {
                        console.log(reason);
                    })
            },
            sendPost:function () {
                axios.post("http://www.baidu.com",{id:"1",name:"123"})
                    .then(function (response) {
                        var data = response.data;
                    })
                    .catch(function (reason) {
                        console.log(reason);
                    })
            }
        }
    });
</script>
</html>

vue案例

需求：完成用户的查询与修改操作

一、创建数据库

数据库
在这里插入图片描述
二、搭建工程

springdatajpa+spring+springmvc

暂时不使用springboot

三、配置框架整合

applicationContext.xml：整合dao和service

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:jdbc="http://www.springframework.org/schema/jdbc" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:jpa="http://www.springframework.org/schema/data/jpa" xmlns:task="http://www.springframework.org/schema/task"
       xsi:schemaLocation="
      http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
      http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
      http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
      http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc.xsd
      http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
      http://www.springframework.org/schema/data/jpa
      http://www.springframework.org/schema/data/jpa/spring-jpa.xsd">
    <!-- 1.dataSource 配置数据库连接池-->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="com.mysql.jdbc.Driver" />
        <property name="jdbcUrl" value="jdbc:mysql://localhost:3306/vuedb" />
        <property name="user" value="root" />
        <property name="password" value="root" />
    </bean>
    <!--2.工厂类对象-->
    <bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="packagesToScan" value="com.itheima.vue.entity"/>
        <property name="jpaVendorAdapter">
            <bean class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter">
                <property name="showSql" value="true"/>
                <property name="generateDdl" value="true"/>
            </bean>
        </property>
    </bean>
    <!-- 3.1JPA事务管理器  -->
    <bean id="transactionManager" class="org.springframework.orm.jpa.JpaTransactionManager">
        <property name="entityManagerFactory" ref="entityManagerFactory" />
    </bean>
    <!-- 3.2.txAdvice-->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="save*" propagation="REQUIRED"/>
            <tx:method name="insert*" propagation="REQUIRED"/>
            <tx:method name="update*" propagation="REQUIRED"/>
            <tx:method name="delete*" propagation="REQUIRED"/>
            <tx:method name="get*" read-only="true"/>
            <tx:method name="find*" read-only="true"/>
            <tx:method name="*" propagation="REQUIRED"/>
        </tx:attributes>
    </tx:advice>
    <!-- 3.3.aop-->
    <aop:config>
        <aop:pointcut id="pointcut" expression="execution(* com.itheima.vue.service.*.*(..))" />
        <aop:advisor advice-ref="txAdvice" pointcut-ref="pointcut" />
    </aop:config>
    <!--4.dao包扫描器-->
    <jpa:repositories base-package="com.itheima.vue.dao"
                      transaction-manager-ref="transactionManager" entity-manager-factory-ref="entityManagerFactory"/>
    <context:component-scan base-package="com.itheima.vue.service"/>
</beans>

springmvc.xml：整合controller

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- 配置创建 spring 容器要扫描的包 -->
    <context:component-scan base-package="com.itheima.vue.controller"/>
    <mvc:annotation-driven/>
</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!-- 手动指定 spring 配置文件位置 -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <!-- 配置 spring 提供的监听器，用于启动服务时加载容器 。
  该间监听器只能加载 WEB-INF 目录中名称为 applicationContext.xml 的配置文件 -->
    <listener>
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
    <!-- 配置 spring mvc 的核心控制器 -->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置初始化参数，用于读取 springmvc 的配置文件 -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <!-- 配置 servlet 的对象的创建时间点：应用加载时创建。取值只能是非 0 正整数，表示启动顺
        序 -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    <!-- 配置 springMVC 编码过滤器 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <!-- 设置过滤器中的属性值 -->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <!-- 启动过滤器 -->
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <!-- 过滤所有请求 -->
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>user.html</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>

</web-app>

四、页面
在这里插入图片描述
五、展示用户列表
后端略

vuejs代码一：从后端获取数据，注意使用了vue的生命周期created，当vue对象被创建时（即页面加载完成之后），执行展示用户列表的操作

new Vue({
    el:"#app",
    data:{
        userList:[]

    },
    methods:{
        //查询用户列表
        getUserList:function () {
            var _this = this;
            axios.get("/user/list.do")
                .then(function (response) {
                    //取结果
                    _this.userList = response.data;
                })
                .catch(function (reason) {
                    console.log(reason);
                })
        }
    },
    created:function () {
        this.getUserList();
    }
});

vuejs代码二：展示数据

<tr v-for="user in userList">
    <td><input name="ids" type="checkbox"></td>
    <td>{{user.id}}</td>
    <td>{{user.username}}</td>
    <td>{{user.password}}</td>
    <td>{{user.sex}}</td>
    <td>{{user.age}}</td>
    <td class="text-center">{{user.email}}</td>
    <td class="text-center">
        <button type="button" class="btn bg-olive btn-xs">详情</button>
        <button type="button" class="btn bg-olive btn-xs">编辑</button>
    </td>
</tr>

在这里插入图片描述
六、用户数据回显
编辑按钮

<button type="button" class="btn bg-olive btn-xs" @click="editUser(user.id)">编辑</button>

使用v-model实现数据的双向绑定

<div class="form-group">
<label class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-5">
  <input type="text" class="form-control" v-model="user.username">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-5">
  <input type="text" class="form-control" v-model="user.password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别:</label>
<div class="col-sm-5">
  <input type="text" class="form-control" v-model="user.sex">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">年龄:</label>
<div class="col-sm-5">
  <input type="text" class="form-control" v-model="user.age">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">邮箱:</label>
<div class="col-sm-5">
  <input type="text" class="form-control" v-model="user.email">
</div>
</div>

vue.js代码：

显示用户信息框
发送ajax接收user

//打开编辑窗口
        editUser:function (id) {
            var _this = this;
            $("#myModal").modal("show");
            //查询用户数据
            axios.get("/user/"+id+".do")
                .then(function (response) {
                    _this.user = response.data;
                })
        }

在这里插入图片描述
七、更新用户信息
更新按钮

<button type="button" class="btn btn-outline" data-dismiss="modal" @click="updateUser()">修改</button>

vuejs：发送请求，刷新页面。

updateUser:function () {
            var _this = this;
            axios.post("/user/update.do", _this.user)
                .then(function (response) {
                    _this.getUserList();
                })
        }