1. 首先将文件夹进行分类
组件化
2. 分析
- 由上面的图可以看出，我们先将功能进行模块化划分，将公共部分提取出来，放到一个common的文件夹内，然后根据不同的页面进行创建不同的文件夹，详细如上图所示。
3. 源代码展示
- index.html
Document
- 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: `
{{ title }}
{{ content }}
`,
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: `
`,
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: `
编号
名称
创建时间
操作
列表无数据
{{ item.id }}
{{ item.name }}
{{ item.ctime | date }}
删除
`,
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: `
`,
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: `
`,
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: `
`,
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: `
`,
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: `
`,
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: {}
});