VUE生命周期与Ajax前后端调用

1 VUE的生命周期

VUE中有一整套完整的VUE对象创建/使用/销毁的流程. 如果用户需要在某个特定的点 有特殊的需求,可以对VUE对象进行扩展!(销毁需要手动销毁)

	
		
		
	
	
		
		
		

			

			销毁
		
		
		
		
		
	

2 VUE 前后端调用

2.1 前后端调用流程

 3 Ajax

3.1 Ajax介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3]

特点:
局部刷新,异步访问

3.2 Ajax异步原理

请求同步 : 用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.

异步调用的原理:

 步骤:
1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的 回调函数, 将服务器数据 交还给用户.
5.用户在请求的过程中,可以完成自己的任务.
注意事项: 多个Ajax的请求 不关注顺序.

3.3 Axios 入门案例

1 导入axios.js函数库

2 发起Ajax请求,之后业务处理

3 .then(回调函数,接受服务器相应的信息)

4 promise :  params是添加到url的请求字符串中的，用于get请求。params是返回来的值

                    params.data获得里面的属性

                      而data是添加到请求体（body）中的， 用于post请求。

3.4 Axios 前后端调用

@CrossOrigin: 在controller上使用:跨域:允许Ajax访问后端

3.4.1 后端准备

1.pom.xml

    4.0.0

    com.jt
    springboot_demo4
    1.0-SNAPSHOT


    
        org.springframework.boot
        spring-boot-starter-parent
        2.5.3
         
    
    
        1.8
        true
    

    
    
        
            org.springframework.boot
            
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-devtools
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
            org.projectlombok
            lombok
        
        
            mysql
            mysql-connector-java
            runtime
        
        
            mysql
            mysql-connector-java
            5.1.48

        
        
            
            com.baomidou

            mybatis-plus-boot-starter

            3.4.3

        
        
            junit
            junit
        

    

    
    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

2.pojo层(User类)

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

import java.io.Serializable;

@Data
@Accessors(chain = true)
@AllArgsConstructor
@NoArgsConstructor
//1 将对象与表进行关联
//规则:如果表名与对象名一致时,名称可以省略
//     如果字段名与属性名一致,则注解可以省略
//序列化接口的作用:保证对象网络传输的有效性 网络传输(不同的服务器之间传递同一个对象)
//对象与表关联
@TableName("demo_user")
public class User implements Serializable {//序列化
    @TableId(type = IdType.AUTO)             //table + 主键     //主键自增/非空/UUID /生成唯一编号
    private Integer id;
    @TableField("name")//标识属性与字段的映射
    private String name;
    @TableField("age")
    private Integer age;
    @TableField("sex")
    private String sex;
}

3 AxiosController (控制层)

package com.jt.controller;


import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("/axios")
public class AxiosController {
    @Autowired
    private UserService userService;
    @RequestMapping("/getUserByid")
    public User getUserByid(Integer id){
        return userService.findUserById(id);
    }

    @GetMapping("user/{sex}/{age}")
    public List getUserBySA(User user){
        return userService.findUserBySA(user);
    }
    @GetMapping("getUser")
    public List getUser(User user){
        return userService.getUser(user);
    }

}

4.1 UserService(业务层)

package com.jt.service;

import com.jt.pojo.User;

import java.util.List;

public interface UserService {
    List findAll();

    User findUserById(Integer id);


    List findUserByname(User user);

    List findUserByNA(User user);


    List findUserByIds(Integer[] ids);

    void updataId(User user);

    void insert1(User user);

    User getUserByid(Integer id);

    List findUserBySA(User user);

    List getUser(User user);
}

4.2 UserServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import com.sun.corba.se.spi.orbutil.threadpool.WorkQueue;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    //查询所有的where条件,所有参数为空     QueryWrapper 只有有where条件才使用
    @Override
    public List findAll() {

        return  userMapper.selectList(null);
    }

    @Override
    public User findUserById(Integer id) {
        return userMapper.selectById(id);
    }

    //MP 可以根据对象中不为null的属性拼接where条件
    @Override
    public List findUserByname(User user) {
        QueryWrapper queryWrapper = new QueryWrapper<>(user);
        List user1 = userMapper.selectList(queryWrapper);
        return user1;
    }

    /*
    *规则：字段与属性的逻辑运算发为 “=” 时，使用（user） 对象封装
    * name = “貂蝉” age > 10 岁的用户
    * */
    @Override
    public List findUserByNA(User user) {
        QueryWrapper queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("name", user.getName()).gt("age", user.getAge());
        return userMapper.selectList(queryWrapper);
    }
    /*
     *规则：如何参数使用，分割，则SpringMVC可以自动的转化为数组
     *
     *查询多个用户
     * url：http://localhost:8080/getUserByIds?ids=1,3,4,5
     * */
    @Override
    public List findUserByIds(Integer[] ids) {
        List list = Arrays.asList(ids);
        List users = userMapper.selectBatchIds(list);
        return users;
    }

    @Override
    public void updataId(User user) {
        QueryWrapper queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("id", user.getId());
        userMapper.update(user, queryWrapper);
    }

    @Override
    public void insert1(User user) {
        userMapper.insert(user);
        System.out.println("插入成功");
    }

    @Override
    public User getUserByid(Integer id) {
        return userMapper.selectById(id);
    }

    @Override
    public List findUserBySA(User user) {
        QueryWrapper queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("sex", user.getSex()).gt("age", user.getAge());
        return userMapper.selectList(queryWrapper);
    }

    @Override
    public List getUser(User user) {
        QueryWrapper queryWrapper = new QueryWrapper<>(user);
        return userMapper.selectList(queryWrapper);
    }


}

5 启动类

package com.jt;


import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.CrossOrigin;

@SpringBootApplication
@MapperScan("com.jt.mapper")
public class RunApp {
    public static void main(String[] args) {
        SpringApplication.run(RunApp.class, args);
    }
}

6 前端:

	
		
		
	
	
		
前后端调用
		
		
		
		
	

 注意 : 使用restFul查询数据时:

             let url2 = "http://localhost:8080/axios/User/"+sex2+"/"+age2""

             let url3 = `http://localhost:8080/axios/user/${sex2}/${age2}` //url用反单引号`括住,数据使用${属性}

        使用创建对象的方式:

axios.get(url4,{params : user}).then(
				promise =>{
					console.log(promise.data)
				}
			)

      axios.get(url,{params : 对象})//axios.get中有两个参数一个url,一个{params : 对象}