項目三—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;
    })
},