03_12.用axios以及组件化做商品管理

作者: Robyn_Luo | 来源:发表于2017-11-14 20:17 被阅读0次

03_12.用axios以及组件化做商品管理
axios安装使用与跨域
vue左侧菜单递归组件--基于 iview dropdown组
商品列表
01vue+axios+formData实现文件上传（包含简单的
vue+axios+formData实现文件上传（包含简单的Ja
axios vue.resource 异步通信
2021-04-10Axios的get方式
Vue项目实战03
8.改造在线竞拍应用

1. 首先将文件夹进行分类

组件化

2. 分析

由上面的图可以看出，我们先将功能进行模块化划分，将公共部分提取出来，放到一个common的文件夹内，然后根据不同的页面进行创建不同的文件夹，详细如上图所示。

3. 源代码展示

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style/main.css">
</head>
<body>
    <div id="app">
        <app-goods></app-goods>
    </div>

    <!-- vue的全局组件, 全局自定义指令, 全局过滤器必须在vue实例之前定义, 否则vue实例无法解决 -->
    <script src="./lib/vue.js"></script>
    <script src="./lib/axios.js"></script>

    <!-- 公共组件 -->
    <script src="./components/common/header.js"></script>
    <script src="./components/common/footer.js"></script>
    <script src="./components/common/list.js"></script>
    <script src="./components/common/search.js"></script>

    <!-- 页面级别组件 -->
    <script src="./components/goods/goods.js"></script>
    <script src="./components/goods/add.js"></script>
    <script src="./components/home/home.js"></script>
    <script src="./components/login/login.js"></script>

    <!-- 导入过滤器 -->
    <script src="./filter/date.js"></script>

    <!-- 导入自定义指令 -->
    <script src="./directive/focus.js"></script>

    <!-- 入口 -->
    <script src="./main.js"></script>
</body>
</html>

style/main.css

.wrapper {
    width: 800px;
    margin: 20px auto;
}
.operation {
    margin-bottom: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 18px;
}
.operation input {
    padding: 5px;
    border: 1px solid deepskyblue;
}
.operation button {
    border-radius: 3px;
    background-color: deepskyblue;
}
.search {
    text-align: left;
    line-height: 20px;
    font-size: 18px;
}
.search input {
    padding: 5px;
    border: 1px solid deeppink;
}
#tb{
    width: 800px;
    border-collapse: collapse;
    margin: 20px auto;
}
#tb th{
    background-color: #0094ff;
    color:white;
    font-size: 16px;
    padding: 5px;
    text-align: center;
    border: 1px solid black;
}
#tb td{
    padding: 5px;
    text-align: center;
    border: 1px solid black;
}

./components/common/header.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:27:25 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-12 19:27:25 
 */

Vue.component('app-header', {
    template: `
    <header>
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
    </header>`,
    props: ['title'],
    data: function() {
        return {
            content: '这是头部文件内容'
        };
    }
});

./components/common/footer.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:28:12 
 * @Last Modified by: Robyn
 * @Last Modified time: 2017-11-12 19:28:32
 */

Vue.component('app-footer', {
    template: `
    <footer>
        <p>{{ content }}</p>
        <address>{{ address }}</address>
    </footer>`,
    data: function() {
        return {
            content: '这里是尾部内容',
            address: '北京市'
        };
    }
});

./components/common/list.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:29:30 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-12 19:29:30 
 */

Vue.component('app-list', {
    template: `
    <table id="tb">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <!-- 没有数据才显示, 有数据隐藏 -->
        <tr v-if="list.length == 0">
            <td colspan="4">列表无数据</td>
        </tr>
        <!-- 渲染商品列表 -->
        <tr v-for="item in list" >
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.ctime | date }}</td>
            <td>
                <!-- @符号是v-on的简写方式 -->
                <a href="#" @click="deleteBtn(item.id)">删除</a>
            </td>
        </tr>
    </table>`,

    props: ['list'],

    data: function() {
        return {};
    },

    methods: {
        // 子组件里面监听删除按钮的点击事件, 但是不负责删除操作, 
        // 而是当收到点击事件的时候, 告诉父亲, 它要杀要刮随便
        deleteBtn(id) {
            this.$emit('del', id);
        }
    }
});

./components/common/search.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:30:12 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-12 19:30:12 
 */


Vue.component('app-search', {
    template: `
    <div class="search">
        <input type="text" placeHolder="请输入筛选内容" v-model="searchKey">
    </div>`,
    data: function() {
        return {
            searchKey: ''
        };
    },
    watch: {
        // 当这个值变量时, 我通过自定义事件通知父, 同时把最新的值也给传过去
        searchKey() {
            this.$emit('change', this.searchKey);
        }
    }
});

./components/goods/goods.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-14 20:10:34 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-14 20:10:34 
 */
Vue.component('app-goods', {
    template: `
    <article>
        <app-header v-bind:title="'商品管理'"></app-header>
        <app-add-goods v-on:add="addGoods"></app-add-goods>
        <app-search v-on:change="search"></app-search>
        <app-list v-bind:list="searchGoodsList" v-on:del="deleteGoods"></app-list>
        <app-footer></app-footer>
    </article>
    `,
    data: function() {
        return {
            goodsList: [],
            searchKeyword: ''
        };
    },
    methods: {
        // 通过id删除商品, 现在不光要删除本地的数据, 还要调用接口删除服务器上的数据
        deleteGoods(delId) {
            axios.get(`http://vue.studyit.io/api/delproduct/${delId}`)
            .then((resp) => {
                // 当服务器删除成功后, 本地再删除
                this.goodsList = this.goodsList.filter(
                    goods => goods.id != delId
                );
            });
        },
        // 接收搜索子组件传递过来的新值
        search(keyword) {
            this.searchKeyword = keyword;
        },
        // 获取商品列表
        getGoods() {
            axios.get('http://vue.studyit.io/api/getprodlist')
            .then(
                (resp) => {this.goodsList = resp.data.message}
            );
        },
        // 添加商品, 接口请求成功后, 为了刷新页面, 再手动调用一下getGoods方法
        addGoods(name) {
            axios.post('http://vue.studyit.io/api/addproduct', `name=${name}`)
            .then(
                (resp) => {alert('添加成功'); this.getGoods()} 
            );
        }
    },
    computed: {
        // 搜索后的商品列表
        searchGoodsList() {
            return this.goodsList.filter(
                goods => goods.name === this.searchKeyword || this.searchKeyword == ''
            );
        }
    },
    // 数据可以使用了, 那么就发送请求
    created() {
        this.getGoods();
    }
});

./components/goods/add.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-14 20:12:37 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-14 20:12:37 
 */

Vue.component('app-add-goods', {
    template: `
    <div class="operation">
        <input type="text" placeholder="请输入名称" v-model="name">
        <button type="button" v-on:click="addGoods">添加数据</button>
    </div>`,
    data: function() {
        return {
            name: ''
        };
    },
    methods: {
        // 把值发送给父使用
        addGoods() {
            this.$emit('add', this.name);
        }
    }
});

./components/home/home.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:31:33 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-12 19:31:33 
 */

Vue.component('app-home', {
    template: `
    <article>
        <app-header v-bind:title="'首页'"></app-header>
        <app-footer></app-footer>
    </article>
    `,
    data: function() {
        return {};
    }
});

./components/login/login.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:32:08 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-12 19:32:08 
 */

Vue.component('app-login', {
    // 每个组件的模版, 必须要使用一个根元素包裹起来
    template: `
    <article>
        <app-header v-bind:title="'登陆'"></app-header>
        <app-footer></app-footer>
    </article>
    `,
    data: function() {
        return {};
    }
});

./filter/date.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:32:43 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-12 19:32:43 
 */

// 实现一个处理日期的过滤器
Vue.filter('date', function(time) {
    var date = new Date(time);
    return `${ date.getFullYear() }-${ date.getMonth() + 1 }-${ date.getDate() }`;
});

./directive/focus.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:33:19 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-12 19:33:19 
 */

// 实现一个全局自动焦点指令
Vue.directive('focus', {
    inserted(node) {
        node.focus();
    }
});

./main.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-12 19:33:49 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-12 19:33:49 
 */

new Vue({
    el: '#app',
    data: {}
});

03_12.用axios以及组件化做商品管理
1. 首先将文件夹进行分类 2. 分析由上面的图可以看出，我们先将功能进行模块化划分，将公共部分提取出来，放到一...
axios安装使用与跨域
安装axios： npm i axios --save 在需要引入axios的组件中： // 引入axios ...
vue左侧菜单递归组件--基于 iview dropdown组
基于 iview dropdown 组件，$http 用 axios 进行了封装 SideBar.vue （递归...
商品列表
绘制商品列表结构新建GoodsList.vue组件制作商品列表商品列表的布局商品的图片，名称，价格，以及库存...
01vue+axios+formData实现文件上传（包含简单的
参考文章：用纯css美化按钮vue+axios实现文件上传简单原理以及操作萌新用vue + axios + f...
vue+axios+formData实现文件上传（包含简单的Ja
参考文章：用纯css美化按钮vue+axios实现文件上传简单原理以及操作萌新用vue + axios + f...
axios vue.resource 异步通信
一.axios (推荐) 步骤1：安装 cnpm install axios --save 步骤2：组件中引...
2021-04-10Axios的get方式
axios(url[, config]) axios()，直接用url axios()，直接用config axi...
Vue项目实战03
目录 Element-UI 组件:form 组件，message 消息弹框组件 axios：配置，使用 wind...
8.改造在线竞拍应用
创建商品详情组件，在商品详情组件里传递商品id，模板加图片及标题。创建home组件。放入banner和商品列表组...