从前端Vue/Axios到后端交互--浅谈Vue生命周期、Ajax调用

最新推荐文章于 2023-04-06 21:56:50 发布

smartboysu

最新推荐文章于 2023-04-06 21:56:50 发布

阅读量738

点赞数

文章标签： java vue

本文链接：https://blog.csdn.net/weixin_58078203/article/details/118405918

版权

一、基本需求

介绍：

此项目实现了对数据库数据的增删查改，后端使用Spring+MyBatis+SpringMVC，前端使用了Vue+JavaScript+AJAX，前后端实现了异步交互，前端页面可以异步更新。项目主要实现了数据的删除、更新。

1.在前端展示基本form表单页面，实现从数据库查询列表，增删改查功能。具体前端页面展示如下：

2.数据库列表展示如下，用的是Navicat工具：

3.展示后页面如下：

4.体现功能：可以通过左边的操作按钮进行数据的修改和删除。同步数据库操作。实现前后端交互。

二、基本架构和使用工具

1、软件架构：

软件架构设计项目结构可以划分为以下几个层次

持久对象层：该层由实体类组成
数据访问层：该层由Mapper接口和MyBati组成
业务逻辑层：该层由Service接口和实现类组成
Web表现层：该层由SpringMVC中的Controller类和HTML页面以及JS文件组成

2、项目开发以及运行环境

操作系统：Windows
Java开发包：JDK
开发工具：IDEA、Vue
项目构建工具：Maven、SpringBoot
数据库：MySQL
浏览器：谷歌

三、代码具体实现

1、后端程序准备：

如上是建立的项目包层。往下主要展示Controller层代码：

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.apache.ibatis.annotations.Delete;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

  @RestController
  @CrossOrigin
   public class Controller {
   @Autowired
   private UserService userService;

   @RequestMapping("/findAll")
   public List<User> findAll(){
     return userService.findAll();
 }

      @DeleteMapping("/user/{id}")
      public String deleteUserById(@PathVariable Integer id){
          userService.deleteUserById(id);
          return "删除数据成功!!!";
     
  }

2.前端代码展示：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div id="app">
       <table id="tab1" border="1px" width="80%" align="center">
       <tr align="center" height="60px">
           <th colspan="5"><h1> 用户列表</h1> </th>
       </tr >
       <tr align="center" height="60px">
       <th>编号</th>
       <th>名称</th>
       <th>年龄</th>
       <th>性别</th>
       <th>操作</th>
       </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="deleteUserById(user.id)">删除</button>
               <button>修改</button>
           </td>
       </tr>
       </table>
       </div>

       <script src="../../js/axios.js"></script>
       <script src="../../js/vue.js"></script>
       <script>
           const app=new Vue({
               el: '#app',
               data: {
                   userList: []
               },
               methods: {
                   getUserList(){
                   axios.get("http://localhost:8090/findAll")
                   .then(result=>{
                       this.userList=result.data
                   })
                   },
               deleteUserById(id){
                   axios.delete("http://localhost:8090/user/"+id)
                   .then(result=>{
                       console.log(result.data)
                       this.getUserList()
                   })
               }
               },
              created(){
                  this.getUserList()
                  }

           })
       </script>
   </body>
</html>

四、Ajax说明

1.特点

1.局部刷新异步访问

2.Ajax说明

Ajax是实现前后端交互,最为常用的一种方式.
发展:
1. 原生的JS中包含了Ajax. 但是操作比较复杂. 20行左右
2. jQuery是JS的一种高级函数类库.
3. jQuery提供了一种高效的Ajax的请求的方式.

3.Ajax异步调用原理

同步: 用户发起请求时,要求第一时间服务器做出响应.在此期间用户不可以做其它操作,只能等待服务器返回数据. 刷新1次.

异步: 用户发起请求时,要求服务器做出响应.在此期间用户可以做其它的操作.如果后端服务器返回数据则通过回调函数通知客户. 局部刷新多次.

4.Ajax实现数据获取

5.关于Ajax总结

   1.Ajax 是局部刷新,异步访问.
   2.Ajax异步的核心在于 Ajax引擎(代理).
   3. Ajax请求调用时,无论是否成功,都通过回调函数的方式进行. success/error
   4.Ajax参数传递写法 2种 1.对象写法 {key:value,key2:value2}

五、Ajax进阶用法Axios

说明：现在Axios给我们解决了回调地狱的问题，所以用axios来操作。

1.基本用法

具体可见我上述代码。

六、Vue生命周期

1、前后端交互的思路

1.利用生命周期函数created 触发Axios函数调用
2.编辑axios函数,实现数据的动态的获取.
3.将axios远程获取的数据交给Vue对象的属性管理
4.利用vue中的循环遍历的写法实现表格数据展现

   methods: {
                   getUserList(){
                   axios.get("http://localhost:8090/findAll")
                   .then(result=>{
                       this.userList=result.data
                   })
                   },

              created(){
                  this.getUserList()
                  }

PS"此处created是Vue8种生命周期中的一个，在页面渲染前调用。

//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
               beforeCreate(){
                   console.log("beforeCreate")
               },
               //在实例创建完成后被立即调用，页面渲染前完成调用。
               created(){
                   console.log("created")
               },
               //在挂载开始之前被调用：相关的 render 函数首次被调用。
               beforeMount(){
                   console.log("beforeMount")
               },
               //实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
               //页面渲染后用这个。
               mounted(){
                   console.log("mounted")
               },
               //数据更新时调用，发生在虚拟 DOM 打补丁之前
               beforeUpdate(){
                   console.log("beforeUpdate")
               },
               //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
               updated(){
                   console.log("updated")
               },
               //实例销毁之前调用。在这一步，实例仍然完全可用
               beforeDestroy(){
                   console.log("beforeDestroy")
               },
               //实例销毁后调用。
               destroyed(){
                   console.log("destroyed")
               },

总结：
                 整个Vue有一个完整的执行的过程，如果用户需要对vue的对象
               进行额外的扩展时，可以采用预留的"接口"进行扩展
               我们把项目中提前设定好的"接口"在js中称之为钩子函数
              1、钩子函数作用：对原有的操作进行扩展：8个函数
              2、初始化函数 4个，修改函数2个，销毁函数2个
              3、mounted() 函数标识VUE对象实例化成功
              4、生命周期函数，是vue函数独有的内容，不要写在method里，注意写法