项目三—vue页面显示设计

vue页面显示设计

1.创建vue文件

　　1.1 在views文件下创建要显示的页面文件夹

 

　　1.2 创建文件.用于显示

　　  1.2.1 创建vue格式文件

　　　　此格式文件是页面显示的文件，习惯用index命名。

　　

 

 

 　　　　要显示页面内容的前提是配置“动态路由”，在router文件下的index.js配置。有两种配置方法。

 　　　　配置方法一：导入index.vue路径和配置component分开　　

　　　　import Brand from '../views/brand/index.vue'；

　　　　{
   　　　　 path: '/brand',
   　　 　　name: 'Brand',
   　　　　 component: Brand,
　　　　},

　　　　配置方法二：在配置component同时配置路径

　　　　{
    　　　　path: '/supplier',
    　　　　name: 'Supplier',
    　　　　component: () => import( '../views/supplier/index.vue')
　　　　},　　
　　

1.3创建js文件用于行为和获取数据

　　1.在标准设计模式中，行为（JavaScript）要与html分离，vue设计一般放在同一目录，创建index.js文件。在此文件中创建js对象，并将其抛出。

　　

 

 　　2.在index.vue引入js对象

 　　3.向后台请求数据 

　　3.1引用axios.分装axios对象

　　创建utils文件夹，并创建request.js

　　

//引入axios
import axios from 'axios';

//创建axios对象
const instance = axios.create({
    baseURL: 'http://localhost:8088',
    timeout: 3000,
    headers: {'X-Custom-Header': 'foobar'}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    let {status,message,data} = response.data;
    if (status==20000) {
        return data;
    }else {
        //等待演示
        Notification.error(message);
        Promise.reject(false);
    }
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default instance;

3.2 编写方法向后端发送请求参数和后端接收路径

创建api文件夹 创建功能模块名.js。如supplier.js，在此js文件中编写如下代码

//引入axios对象
import instance from '../utils/request.js'

//查询所有分页 （带模糊查询功能）
// key = value 方式传过去的
export function findByPage(searchParams) {
    return instance.get(`/brand/findByPageCriteria`,{params: searchParams});
}

3.3 在js中引入方法

supplier文件夹的index.js中引入findByPage方法

import {findByPage} from "../../api/supplier.js";

methods方法中编写以下方法

selectByPage() {
    findByPage(this.searchParams).then(response => {
        // console.log("response===");
        // total ,data : 数据列表
        // console.log(response);
        this.tableData = response.data;
        this.total = response.total;
    })
},