parent
e723650fd2
commit
f440bdd3ec
11 changed files with 198 additions and 447 deletions
@ -0,0 +1,36 @@ |
|||||||
|
<template> |
||||||
|
<div id="root"> |
||||||
|
<button @click="getStudents">获取学生信息</button><br/> |
||||||
|
<button @click="getCars">获取汽车信息</button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import axios from "axios"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "App", |
||||||
|
methods: { |
||||||
|
getStudents() { |
||||||
|
axios.get('http://localhost:8080/stu/students').then( |
||||||
|
response => { |
||||||
|
console.log('请求成功了', response.data) |
||||||
|
}, |
||||||
|
error => { |
||||||
|
console.log('请求失败了', error.message) |
||||||
|
} |
||||||
|
) |
||||||
|
}, |
||||||
|
getCars() { |
||||||
|
axios.get('http://localhost:8080/car/cars').then( |
||||||
|
response => { |
||||||
|
console.log('请求成功了', response.data) |
||||||
|
}, |
||||||
|
error => { |
||||||
|
console.log('请求失败了', error.message) |
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,19 @@ |
|||||||
|
// 引入Vue
|
||||||
|
import Vue from "vue"; |
||||||
|
// 引入App
|
||||||
|
import App from "./App"; |
||||||
|
|
||||||
|
// 设置Vue
|
||||||
|
Vue.config.productionTip = false |
||||||
|
|
||||||
|
|
||||||
|
// 实例化Vue
|
||||||
|
new Vue({ |
||||||
|
components: { |
||||||
|
App |
||||||
|
}, |
||||||
|
render: h => h(App), |
||||||
|
beforeCreate() { |
||||||
|
Vue.prototype.$bus = this // 安装全局事件总线
|
||||||
|
} |
||||||
|
}).$mount('#app') |
||||||
@ -1,145 +1,36 @@ |
|||||||
<template> |
<template> |
||||||
<div id="root"> |
<div id="root"> |
||||||
<div class="todo-container"> |
<button @click="getStudents">获取学生信息</button><br/> |
||||||
<div class="todo-wrap"> |
<button @click="getCars">获取汽车信息</button> |
||||||
<TodoHeader @addTodo="addTodo"/> |
|
||||||
<TodoList :todos="todos"/> |
|
||||||
<TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import pubsub from 'pubsub-js' |
import axios from "axios"; |
||||||
import TodoHeader from "./components/TodoHeader.vue"; |
|
||||||
import TodoList from "./components/TodoList.vue"; |
|
||||||
import TodoBottom from "./components/TodoBottom.vue"; |
|
||||||
|
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "App", |
name: "App", |
||||||
components: { |
|
||||||
TodoHeader, |
|
||||||
TodoList, |
|
||||||
TodoBottom |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
// 预置测试数据 |
|
||||||
todos: JSON.parse(localStorage.getItem('todos')) || [] |
|
||||||
} |
|
||||||
}, |
|
||||||
// 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中 |
|
||||||
// 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件 |
|
||||||
methods: { |
methods: { |
||||||
// 添加todo任务，绑定到TodoHeader中 |
getStudents() { |
||||||
addTodo(todoObj) { |
axios.get('http://localhost:8080/stu/students').then( |
||||||
this.todos.unshift(todoObj) |
response => { |
||||||
}, |
console.log('请求成功了', response.data) |
||||||
|
|
||||||
// 勾选和取消勾选todo任务，穿透TodoList绑定到TodoItem中 |
|
||||||
checkTodo(id) { |
|
||||||
this.todos.forEach((todo) => { |
|
||||||
if (todo.id === id) todo.done = !todo.done |
|
||||||
}) |
|
||||||
}, |
}, |
||||||
|
error => { |
||||||
// 删除单个todo任务，穿透TodoList绑定到TodoItem中 |
console.log('请求失败了', error.message) |
||||||
deleteTodo(_, id) { |
|
||||||
this.todos = this.todos.filter(todo => todo.id !== id) |
|
||||||
}, |
|
||||||
|
|
||||||
// 更新一个TodoItem |
|
||||||
updateTodo(id, title) { |
|
||||||
this.todos.forEach((todo) => { |
|
||||||
if (todo.id === id) todo.title = title |
|
||||||
}) |
|
||||||
}, |
|
||||||
|
|
||||||
// 勾选或取消勾选全部todo任务，绑定到TodoBottom中 |
|
||||||
checkAllTodo(done) { |
|
||||||
this.todos.forEach((todo) => todo.done = done) |
|
||||||
}, |
|
||||||
|
|
||||||
// 清除全部已完成的todo任务，绑定到TodoBottom中 |
|
||||||
clearAllTodo() { |
|
||||||
this.todos = this.todos.filter((todo) => { |
|
||||||
return !todo.done |
|
||||||
}) |
|
||||||
} |
} |
||||||
|
) |
||||||
}, |
}, |
||||||
watch: { |
getCars() { |
||||||
todos: { |
axios.get('http://localhost:8080/car/cars').then( |
||||||
deep: true, |
response => { |
||||||
handler(value) { |
console.log('请求成功了', response.data) |
||||||
localStorage.setItem('todos', JSON.stringify(value)) |
}, |
||||||
|
error => { |
||||||
|
console.log('请求失败了', error.message) |
||||||
} |
} |
||||||
|
) |
||||||
} |
} |
||||||
}, |
|
||||||
// 生成全局事件总线 |
|
||||||
mounted() { |
|
||||||
this.$bus.$on('checkTodo', this.checkTodo) |
|
||||||
this.$bus.$on('updateTodo', this.updateTodo) |
|
||||||
this.pubId = pubsub.subscribe('itemDel', this.deleteTodo) // 使用订阅方式实现删除功能 |
|
||||||
}, |
|
||||||
// 销毁全局事件总线 |
|
||||||
beforeDestroy() { |
|
||||||
this.$bus.$off('checkTodo') |
|
||||||
this.$bus.$off('updateTodo') |
|
||||||
this.pubsub.unsubscribe(this, pubId) // 使用订阅方式实现删除功能，销毁订阅 |
|
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style> |
|
||||||
body { |
|
||||||
background: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.btn { |
|
||||||
display: inline-block; |
|
||||||
padding: 4px 12px; |
|
||||||
margin-bottom: 0; |
|
||||||
font-size: 14px; |
|
||||||
line-height: 20px; |
|
||||||
text-align: center; |
|
||||||
vertical-align: middle; |
|
||||||
cursor: pointer; |
|
||||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.btn-danger { |
|
||||||
color: #fff; |
|
||||||
background-color: #da4f49; |
|
||||||
border: 1px solid #bd362f; |
|
||||||
} |
|
||||||
|
|
||||||
.btn-edit { |
|
||||||
color: #fff; |
|
||||||
background-color: skyblue; |
|
||||||
border: 1px solid #82cdea; |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.btn-danger:hover { |
|
||||||
color: #fff; |
|
||||||
background-color: #bd362f; |
|
||||||
} |
|
||||||
|
|
||||||
.btn:focus { |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-container { |
|
||||||
width: 600px; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-container .todo-wrap { |
|
||||||
padding: 10px; |
|
||||||
border: 1px solid #ddd; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,76 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="todo-bottom" v-show="total"> |
|
||||||
<label> |
|
||||||
<input type="checkbox" v-model="isAll"> |
|
||||||
</label> |
|
||||||
<span> |
|
||||||
<span>已完成{{ totalDone }}</span>/全部{{ total }} |
|
||||||
</span> |
|
||||||
<button class="btn btn-danger" @click="clearAll">清除已完成任务</button> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: "TodoBottom", |
|
||||||
// props: ['todos', 'checkAllTodo', 'clearAllTodo'], |
|
||||||
props: ['todos'], |
|
||||||
computed: { |
|
||||||
// 用于计算全部todo任务的总数量，并且通过v-show绑定到模板，用于控制模板的展示 |
|
||||||
total() { |
|
||||||
return this.todos.length |
|
||||||
}, |
|
||||||
// 用于统计全部已完成的todo任务数量 |
|
||||||
totalDone() { |
|
||||||
return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0) |
|
||||||
}, |
|
||||||
// 计算方法的完整写法 |
|
||||||
// get方法用于判断是否全部任务被勾选， 返回布尔值 |
|
||||||
// set方法是封装了App中checkAllTodo方法用于勾选和取消勾选全部任务 |
|
||||||
isAll: { |
|
||||||
get() { |
|
||||||
return this.totalDone === this.total && this.total > 0 |
|
||||||
}, |
|
||||||
set(value) { |
|
||||||
// this.checkAllTodo(value) |
|
||||||
this.$emit('checkAllTodo', value) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 封装App中的clearAllTodo方法，用于清除全部已完成数据 |
|
||||||
clearAll() { |
|
||||||
if (confirm("确认清除全部已完成任务？")) { |
|
||||||
this.$emit('clearAllTodo') |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.todo-bottom { |
|
||||||
height: 40px; |
|
||||||
line-height: 40px; |
|
||||||
padding-left: 6px; |
|
||||||
margin-top: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-bottom label { |
|
||||||
display: inline-block; |
|
||||||
margin-right: 20px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-bottom label input { |
|
||||||
position: relative; |
|
||||||
top: -1px; |
|
||||||
vertical-align: middle; |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-bottom button { |
|
||||||
float: right; |
|
||||||
margin-top: 5px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,49 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="todo-header"> |
|
||||||
<input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="title" @keyup.en.enter="add"> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {nanoid} from "nanoid" |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "TodoHeader", |
|
||||||
// props: ['addTodo'], 改用自定义组件实现，不用再接收复组件传递的方法 |
|
||||||
data() { |
|
||||||
// 初始化title已显示placeholder内容 |
|
||||||
return { |
|
||||||
title: '' |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 添加todo任务，trim用户输入数据后判断是否为空，如果内容正常则生成任务的对象数据 |
|
||||||
// 将任务的对象数据回写到App中的todo中 |
|
||||||
add() { |
|
||||||
if (!this.title.trim()) return alert("输入不能为空") |
|
||||||
const todoObj = {id: nanoid(), title: this.title, done: false} |
|
||||||
// this.addTodo(todoObj) // 改用emit触发自定义事件 |
|
||||||
this.$emit('addTodo', todoObj) |
|
||||||
this.title = '' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.todo-header input { |
|
||||||
width: 560px; |
|
||||||
height: 28px; |
|
||||||
font-size: 14px; |
|
||||||
border: 1px solid #ccc; |
|
||||||
border-radius: 4px; |
|
||||||
padding: 4px 7px; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-header input:focus { |
|
||||||
outline: none; |
|
||||||
border-color: rgba(82, 168, 236, 0.8); |
|
||||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,124 +0,0 @@ |
|||||||
<template> |
|
||||||
<!-- <transition name="todo" appear>--> |
|
||||||
<!-- <li>--> |
|
||||||
<!-- <label>--> |
|
||||||
<!-- <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">--> |
|
||||||
<!-- <span v-show="!todo.isEdit">{{ todo.title }}</span>--> |
|
||||||
<!-- <input v-show="todo.isEdit" type="text" @blur="handleBlur(todo, $event)" ref="inputFocus" :value="todo.title">--> |
|
||||||
<!-- </label>--> |
|
||||||
<!-- <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>--> |
|
||||||
<!-- <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>--> |
|
||||||
<!-- </li>--> |
|
||||||
<!-- </transition>--> |
|
||||||
<li> |
|
||||||
<label> |
|
||||||
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"> |
|
||||||
<span v-show="!todo.isEdit">{{ todo.title }}</span> |
|
||||||
<input v-show="todo.isEdit" type="text" @blur="handleBlur(todo, $event)" ref="inputFocus" :value="todo.title"> |
|
||||||
</label> |
|
||||||
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button> |
|
||||||
<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button> |
|
||||||
</li> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import pubsub from 'pubsub-js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "TodoItem", |
|
||||||
// 从todoList中接收数据todos和函数checkTodo、deleteTodo |
|
||||||
props: ['todo'], |
|
||||||
methods: { |
|
||||||
// 触发全局事件总线中的方法，触发app中发回调方法 |
|
||||||
handleCheck(id) { |
|
||||||
this.$bus.$emit('checkTodo', id) |
|
||||||
}, |
|
||||||
// 通过订阅消息形式实现 |
|
||||||
handleDelete(id) { |
|
||||||
if (confirm("确认删除？")) { |
|
||||||
pubsub.publish('itemDel', id) |
|
||||||
} |
|
||||||
}, |
|
||||||
// 实现编辑逻辑 |
|
||||||
handleEdit(todo) { |
|
||||||
if (todo.hasOwnProperty('isEdit')) { |
|
||||||
todo.isEdit = true |
|
||||||
} else { |
|
||||||
this.$set(todo, 'isEdit', true) |
|
||||||
} |
|
||||||
this.$nextTick(function () { |
|
||||||
this.$refs.inputFocus.focus() |
|
||||||
}) |
|
||||||
}, |
|
||||||
// 失去焦点时更新数据 |
|
||||||
handleBlur(todo, e) { |
|
||||||
todo.isEdit = false |
|
||||||
console.log('updateTodo', todo.id, e.target.value) |
|
||||||
if (!e.target.value.trim()) return alert("输入不能为空！") |
|
||||||
this.$bus.$emit('updateTodo', todo.id, e.target.value) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
li { |
|
||||||
list-style: none; |
|
||||||
height: 36px; |
|
||||||
line-height: 36px; |
|
||||||
padding: 0 5px; |
|
||||||
border-bottom: 1px solid #ddd; |
|
||||||
} |
|
||||||
|
|
||||||
li label { |
|
||||||
float: left; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
li label input { |
|
||||||
vertical-align: middle; |
|
||||||
margin-right: 6px; |
|
||||||
position: relative; |
|
||||||
top: -1px; |
|
||||||
} |
|
||||||
|
|
||||||
li button { |
|
||||||
float: right; |
|
||||||
display: none; |
|
||||||
margin-top: 3px; |
|
||||||
} |
|
||||||
|
|
||||||
li:before { |
|
||||||
content: initial; |
|
||||||
} |
|
||||||
|
|
||||||
li:last-child { |
|
||||||
border-bottom: none; |
|
||||||
} |
|
||||||
|
|
||||||
li:hover { |
|
||||||
background-color: #ddd; |
|
||||||
} |
|
||||||
|
|
||||||
li:hover button { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
/*.todo-enter-active {*/ |
|
||||||
/* animation: td 0.5s linear;*/ |
|
||||||
/*}*/ |
|
||||||
|
|
||||||
/*.todo-leave-active {*/ |
|
||||||
/* animation: td 0.5s linear reverse;*/ |
|
||||||
/*}*/ |
|
||||||
|
|
||||||
/*@keyframes td {*/ |
|
||||||
/* from {*/ |
|
||||||
/* transform: translateX(100%);*/ |
|
||||||
/* }*/ |
|
||||||
/* to {*/ |
|
||||||
/* transform: translateX(0);*/ |
|
||||||
/* }*/ |
|
||||||
/*}*/ |
|
||||||
</style> |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
<template> |
|
||||||
<ul class="todo-list"> |
|
||||||
<transition-group name="todo" appear> |
|
||||||
<TodoItem |
|
||||||
v-for="todoObj in todos" |
|
||||||
:key="todoObj.id" |
|
||||||
:todo="todoObj" |
|
||||||
/> |
|
||||||
</transition-group> |
|
||||||
</ul> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import TodoItem from "@/components/TodoItem.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "TodoList", |
|
||||||
// 嵌套了子组件TodoItem |
|
||||||
components: {TodoItem}, |
|
||||||
props: ['todos'] |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.todo-list { |
|
||||||
margin-left: 0px; |
|
||||||
border: 1px solid #ddd; |
|
||||||
border-radius: 2px; |
|
||||||
padding: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-empty { |
|
||||||
height: 40px; |
|
||||||
line-height: 40px; |
|
||||||
border: 1px solid #ddd; |
|
||||||
border-radius: 2px; |
|
||||||
padding-left: 5px; |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-enter-active { |
|
||||||
animation: td 0.5s linear; |
|
||||||
} |
|
||||||
|
|
||||||
.todo-leave-active { |
|
||||||
animation: td 0.5s linear reverse; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes td { |
|
||||||
from { |
|
||||||
transform: translateX(100%); |
|
||||||
} |
|
||||||
to { |
|
||||||
transform: translateX(0); |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,5 +1,25 @@ |
|||||||
const { defineConfig } = require('@vue/cli-service') |
const {defineConfig} = require('@vue/cli-service') |
||||||
module.exports = defineConfig({ |
module.exports = defineConfig({ |
||||||
transpileDependencies: true, |
transpileDependencies: true, |
||||||
lintOnSave: false |
lintOnSave: false, |
||||||
|
// 方式一
|
||||||
|
// devServer: {
|
||||||
|
// proxy: 'http://localhost:5000'
|
||||||
|
// }
|
||||||
|
devServer: { |
||||||
|
proxy: { |
||||||
|
'/stu': { |
||||||
|
target: 'http://localhost:5000', |
||||||
|
pathRewrite: {'^/stu':''}, |
||||||
|
ws: true, // 是否支持websocket
|
||||||
|
changeOrigin: true // 控制请求头中的host值
|
||||||
|
}, |
||||||
|
'/car': { |
||||||
|
target: 'http://localhost:5001', |
||||||
|
pathRewrite: {'^/car':''}, |
||||||
|
ws: true, // 是否支持websocket
|
||||||
|
changeOrigin: true // 控制请求头中的host值
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
}) |
}) |
||||||
|
|||||||
Loading…
Reference in new issue