[A] router
This commit is contained in:
Ching
parent
0ebbbe8f0e
commit
0cfb215133
25786
frontend/package-lock.json
generated
25786
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -14,13 +14,14 @@
|
||||
"axios": "^0.21.2",
|
||||
"core-js": "^3.6.5",
|
||||
"element-plus": "^1.0.2-beta.28",
|
||||
"vue": "^3.0.0"
|
||||
"vue": "^3.2.2",
|
||||
"vue-router": "^4.0.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-google": "^0.14.0",
|
||||
|
||||
@ -1,119 +1,9 @@
|
||||
<template>
|
||||
<el-row justify="center">
|
||||
<el-col :span="18">
|
||||
<el-table :data="recipes" max-height="500" class="recipe-table">
|
||||
<el-table-column prop="name" label="名字"> </el-table-column>
|
||||
<el-table-column
|
||||
prop="recipe_type"
|
||||
label="类型"
|
||||
:formatter="formatRecipeType"
|
||||
:filters="[
|
||||
{ text: '青菜', value: 'vegetable' },
|
||||
{ text: '肉', value: 'meat' },
|
||||
{ text: '汤', value: 'soup' },
|
||||
]"
|
||||
:filter-method="filterRecipeType"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="difficulty"
|
||||
label="难度"
|
||||
:formatter="formatDifficulty"
|
||||
sortable
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="rate"
|
||||
label="评分"
|
||||
:formatter="formatRate"
|
||||
sortable
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row justify="center">
|
||||
<el-col :span="18"> <input_recipe></input_recipe> </el-col>
|
||||
</el-row>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import input_recipe from './components/input_recipe.vue';
|
||||
// const api_root = 'localhost:8000'
|
||||
const type_map = {
|
||||
vegetable: '青菜',
|
||||
meat: '肉',
|
||||
soup: '汤',
|
||||
};
|
||||
const rate_map = {
|
||||
1: '🍚',
|
||||
2: '🍚 🍚',
|
||||
3: '🍚 🍚 🍚',
|
||||
4: '🍚 🍚 🍚 🍚',
|
||||
5: '🍚 🍚 🍚 🍚 🍚',
|
||||
};
|
||||
const difficulty_map = {
|
||||
1: '⭐',
|
||||
2: '⭐ ⭐',
|
||||
3: '⭐ ⭐ ⭐',
|
||||
4: '⭐ ⭐ ⭐ ⭐',
|
||||
5: '⭐ ⭐ ⭐ ⭐ ⭐',
|
||||
};
|
||||
function formatRecipeType(row) {
|
||||
return type_map[row.recipe_type];
|
||||
}
|
||||
function formatRate(row) {
|
||||
return rate_map[row.rate];
|
||||
}
|
||||
function formatDifficulty(row) {
|
||||
return difficulty_map[row.difficulty];
|
||||
}
|
||||
export default {
|
||||
components: { input_recipe },
|
||||
name: 'App',
|
||||
provide() {
|
||||
return {
|
||||
reload: this.reload,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
this.isRouterAlive = false;
|
||||
this.$nextTick(function() {
|
||||
this.isRouterAlive = true;
|
||||
});
|
||||
},
|
||||
filterRecipeType(value, row) {
|
||||
return row.recipe_type === value;
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
recipes: '',
|
||||
formatRecipeType,
|
||||
formatRate,
|
||||
formatDifficulty,
|
||||
isRouterAlive: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
axios
|
||||
.get('//localhost:8000/recipe/recipe/')
|
||||
.then(console.log('hihhihih'))
|
||||
.then((response) => (this.recipes = response.data));
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,9 @@ import App from './App.vue'
|
||||
import installElementPlus from './plugins/element'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/lib/theme-chalk/index.css'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
installElementPlus(app)
|
||||
app.use(ElementPlus).mount('#app')
|
||||
app.use(ElementPlus)
|
||||
app.use(router).mount('#app')
|
||||
|
||||
23
frontend/src/router/index.js
Normal file
23
frontend/src/router/index.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '@/views/home.vue'
|
||||
import RecipeDetail from '@/views/recipeDetail.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '/recipe/:id',
|
||||
name: "RecipeDetail",
|
||||
component: RecipeDetail
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
129
frontend/src/views/home.vue
Normal file
129
frontend/src/views/home.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-row justify="center">
|
||||
<el-col :span="18">
|
||||
<el-table :data="recipes" max-height="500" class="recipe-table">
|
||||
<el-table-column prop="name" label="名字"> </el-table-column>
|
||||
<el-table-column
|
||||
prop="recipe_type"
|
||||
label="类型"
|
||||
:formatter="formatRecipeType"
|
||||
:filters="[
|
||||
{ text: '青菜', value: 'vegetable' },
|
||||
{ text: '肉', value: 'meat' },
|
||||
{ text: '汤', value: 'soup' },
|
||||
]"
|
||||
:filter-method="filterRecipeType"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="difficulty"
|
||||
label="难度"
|
||||
:formatter="formatDifficulty"
|
||||
sortable
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="rate"
|
||||
label="评分"
|
||||
:formatter="formatRate"
|
||||
sortable
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button size="mini" @click="editRecipe(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row justify="center">
|
||||
<el-col :span="18"> <input_recipe></input_recipe> </el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import input_recipe from '@/components/input_recipe.vue';
|
||||
import router from '@/router/index';
|
||||
// const api_root = 'localhost:8000'
|
||||
const type_map = {
|
||||
vegetable: '青菜',
|
||||
meat: '肉',
|
||||
soup: '汤',
|
||||
};
|
||||
const rate_map = {
|
||||
1: '🍚',
|
||||
2: '🍚 🍚',
|
||||
3: '🍚 🍚 🍚',
|
||||
4: '🍚 🍚 🍚 🍚',
|
||||
5: '🍚 🍚 🍚 🍚 🍚',
|
||||
};
|
||||
const difficulty_map = {
|
||||
1: '⭐',
|
||||
2: '⭐ ⭐',
|
||||
3: '⭐ ⭐ ⭐',
|
||||
4: '⭐ ⭐ ⭐ ⭐',
|
||||
5: '⭐ ⭐ ⭐ ⭐ ⭐',
|
||||
};
|
||||
function formatRecipeType(row) {
|
||||
return type_map[row.recipe_type];
|
||||
}
|
||||
function formatRate(row) {
|
||||
return rate_map[row.rate];
|
||||
}
|
||||
function formatDifficulty(row) {
|
||||
return difficulty_map[row.difficulty];
|
||||
}
|
||||
export default {
|
||||
components: { input_recipe },
|
||||
name: 'Home',
|
||||
provide() {
|
||||
return {
|
||||
reload: this.reload,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
this.isRouterAlive = false;
|
||||
this.$nextTick(function() {
|
||||
this.isRouterAlive = true;
|
||||
});
|
||||
},
|
||||
filterRecipeType(value, row) {
|
||||
return row.recipe_type === value;
|
||||
},
|
||||
editRecipe(row) {
|
||||
router.push({ name: 'RecipeDetail', params: { id: row.id } });
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
recipes: '',
|
||||
formatRecipeType,
|
||||
formatRate,
|
||||
formatDifficulty,
|
||||
isRouterAlive: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
axios
|
||||
.get('//localhost:8000/recipe/recipe/')
|
||||
.then((response) => (this.recipes = response.data));
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
8
frontend/src/views/recipeDetail.vue
Normal file
8
frontend/src/views/recipeDetail.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
recipe detail
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RecipeDetail',
|
||||
};
|
||||
</script>
|
||||
1178
frontend/yarn.lock
1178
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -4,6 +4,7 @@ from rest_framework import serializers
|
||||
import recipe.models
|
||||
|
||||
class RecipeSerializer(serializers.HyperlinkedModelSerializer):
|
||||
id = serializers.IntegerField(read_only=True)
|
||||
class Meta:
|
||||
model = recipe.models.Recipe
|
||||
fields = '__all__'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user