[A] router

frontend/package.json

@@ -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",

frontend/src/App.vue

@@ -1,119 +1,9 @@
 <template>
-  <el-row justify="center">
+  <router-view />
-    <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>
 </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>

frontend/src/main.js

@@ -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')

frontend/src/router/index.js

@@ -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;

frontend/src/views/home.vue

@@ -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>

frontend/src/views/recipeDetail.vue

@@ -0,0 +1,8 @@
+<template>
+  recipe detail
+</template>
+<script>
+export default {
+  name: 'RecipeDetail',
+};
+</script>

recipe/serializers.py

@@ -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__'