【青鸟学姐带你学Vue】每日打卡——Vue打卡5

axios的使用

axios:用于发送ajax请求的HTTP库，本质上是对AJAX的封装。

需求：更改购物车功能（上一篇博客）,购物车所用的数据从数据库中获取。

打开mysql，创建数据库good，建立good表，添加属性与数据。

CREATE TABLE good (
	id INT PRIMARY KEY AUTO_INCREMENT,
	`name` VARCHAr(32),
	price DECIMAL(10,2),
	`count` INT
);
INSERT INTO good VALUES(1,'可乐',3.5,3);
INSERT INTO good VALUES(2,'雪碧',3.3,2);
INSERT INTO good VALUES(3,'达芬奇',4,1);
INSERT INTO good VALUES(4,'元气森林',5.5,5);

打开idea创建springboot项目，在pom文件中添加mybaits-plus依赖，并将mysql的版本改为5.1.26。

  
            com.baomidou
            mybatis-plus-boot-starter
            3.5.1
        

在yml文件里配置连接数据库的相关代码。

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/good
    username: root
    password: ok
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

创建与表相对应的实体类。

package com.zb.entity;

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.ToString;

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
@TableName("good")
public class Good {
    @TableId(value = "id",type = IdType.AUTO)
    private Integer id;
    @TableField("name")
    private String name;
    @TableField("price")
    private Double price;
    @TableField("count")
    private Integer count;
}

mapper接口

package com.zb.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zb.entity.Good;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface GoodMapper extends BaseMapper {
}

service接口

package com.zb.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.zb.entity.Good;

public interface GoodService extends IService {
}

service实现类

package com.zb.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.zb.entity.Good;
import com.zb.mapper.GoodMapper;
import com.zb.service.GoodService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
public class GoodServiceImpl extends ServiceImpl implements GoodService {
}

controller控制器

@CrossOrigin：用来处理跨域请求

package com.zb.controller;

import com.zb.entity.Good;
import com.zb.service.GoodService;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
public class GoodController {
    @Resource
    private GoodService service;

    @RequestMapping("listGood")
    @CrossOrigin("http://127.0.0.1:5500/")
    public List listGood(){
        List list = service.list();
        return list;
    }
}

此时为了确保数据能够显示出来，可以先通过8080端口进行访问。

   打开vue的文件夹，打开cmd窗口，下载axios文件夹：npm install axios

如果需要下载指定的版本号，在后面加@版本号即可。

下载完毕后打开其文件夹，找到axios.js文件。

将该文件复制到购物车的js文件夹下。

此时想要将后台所获取的数据通过axios技术传到前台页面，可以查看axios文件夹下的REDME.md文件，里面有相关的代码介绍。

修改购物车的代码。

 
        
            
                名称： 价格：添加

                
            
            

                
序号
                
名称
                
单价
                
数量
                
小计
            
            

                
{{g.id}}
                
{{g.name}}
                
{{g.price}}
                

                    -
                    {{g.count}}
                    +
                
                
{{g.price * g.count | formatPrice}}
            
        
        
            共计{{getCount}}件商品，共计消费{{getPrice | formatPrice}}元
        
    
    
    
    

 注意：我想要的数据应该是创建完成之后就能够显示出来的，所以获取数据的方法要写在created里面。运行的时候需要用服务器的ip地址打开，前面博客已经提过，这里不再赘述。

 vue核心插件之路由模块

vue-router中的对象：

$route 路由信息对象,只读对象

$router 路由操作对象 , 只写对象 单页应用的路由模式有两种：哈希模式（利用hashchange事件监听url的hash的改变），history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）          路由的跳转原理(哈希模式)

哈希模式原理：

他的核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式 url 改变后立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好。 安装和使用路由

下载vue-router(是vue的核心插件)

打开cmd窗口,进入vue文件夹所在的位置，通过命令下载。

npm install vue-router@3.5 -S

下载完毕后找到vue-router.js文件，复制到项目的js文件夹下。 使用路由共有5个步骤：

1.将VueRouter交给Vue对象进行管理。

2.定义组件。  

3.创建路由对象并配置路由规则。

 4将配置好的路由交给vue。

5.在div中 设置一个标签。

路由的跳转

1.通过标签：

2.通过js控制跳转this.$router.push({path:'/add'}

 
        
        
            列表页
            添加
        
        
            列表页
            添加
        
    
    
    
    

通过js控制跳转有两种方式，注意二者的区别：

this.$router.push() 跳转到指定的url，会向history插入新记录 。

this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的 记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

this.$router.go(-1) 常用来做返回，读history里面的记录后退一个 。

路由的传参和取参 查询参：配置（传参） :to="{name:'login',query:{id:loginid}}"                获取（取参） this.$route.query.id 路由参数：配置（传参） :to="{name:'register',params:{id:registerid} }"                     配置路由的规则 { name:'detail',path:'/detail/:id'}                     获取 this.$route.params.id

  
        
        
        
            
            列表页
            
            添加
        
        
            列表页
            添加
        
    
    
    
    

总结： 1. :to 传参的属性里 params 是和 name 配对的 query 和 name 或 path 都可以。 2. 使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失。