娃在幼儿园吃了些啥V2：用Vue.js + Django重写项目

前情提要

之前出于自身兴趣，给娃幼儿园写了个每日菜单的网站，并添加到订阅号中（V1版链接）。主要通过页面上的js与Django后台交互，同样通过页面上的js完成返回数据的解析和呈现。
为了更系统地完成前端开发，这次一边学习vue.js框架，一边利用vue改写前端，于是就有了菜单网站项目的第二版（github链接）。

项目结构

前端改用vue.js构建，后端仍然使用django服务，处理前端的数据请求，完成数据库查询。
整个项目目录结构如下：

kinder_foods_vue_django
├─backend
│ ├─__pycache__
│ ├─__init__.py
│ ├─settings.py
│ ├─urls.py
│ └─wsgi.py
├─frontend
│ ├─dist
│ │ ├─static
│ │ │ ├─css
│ │ │ └─js
│ │ └─index.html
│ ├─node_modules
│ ├─public
│ ├─src
│ │ ├─assets
│ │ ├─components
│ │ │ ├─MenuTable.vue
│ │ │ └─SelectDate.vue
│ │ ├─views
│ │ │ ├─ChartView.vue
│ │ │ └─MenuView.vue
│ │ ├─App.vue
│ │ ├─main.js
│ │ └─router.js
│ ├─babel.config.js
│ ├─package.json
│ ├─README.md
│ └─vue.config.js
├─menu
└─manage.py

frontend目录为vue的项目目录，其余为Django项目，Django的APP名为menu。

准备工作

检查版本

vue -V

C:\Users\ZHANG JIZHONG\Documents\Projects\Python\kinder_foods_vue_django>vue -V
3.8.4

使用VUE UI创建项目

网上用命令行脚手架的教程较多，这里就偷懒用ui来创建项目了。

vue ui

C:\Users\ZHANG JIZHONG\Documents\Projects\Python\kinder_foods_vue_django>vue ui
Starting GUI...
Ready on http://localhost:8000

Vue项目管理器

因为都是ui方式的，每一步截图会比较多，这里选取选择功能的截图作为代表，图中开启了Bable、Router和Linter功能。

选择功能

添加bootstrap-vue引用

同样地，依赖也可以通过ui方式安装：

安装依赖

搜索并安装bootstrap-vue，并在全局main.js中添加以下内容方能使用：

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

Vue前端结构

组件

1. MenuTable.vue

负责呈现菜单的组件，使用bootstrap-vue中的，绑定计算属性daily_menu

computed: {
    daily_menu: function () {
        for (let week in this.menu) {
            return this.menu[week];
        }
    }
},

其中，menu是MenuTable组件的属性：

props: ['menu'],

template块主要内容：

可见该表格共5列，日期列分行显示日期和星期几，其余列直接提取同名属性即可，这些属性都是原生html。
至于为什么要用html，是因为每顿餐食的品种数量是不确定的，需要添加换行标签
。
为了方便起见，后端返回的数据也做了相应修改（关于这点在Django的views部分中具体描述）。

2. SelectDate.vue

选择日期的组件，依赖于charliekassel/vuejs-datepicker，在本地需先导入

import Datepicker from 'vuejs-datepicker';
import * as lang from "vuejs-datepicker/src/locale";

lang用于本地化，中文格式设置如下：

data() {
    return {
        format: "yyyy年MM月dd日",
        language: "zh",
        languages: lang,
    }
},

详细的配置可以访问作者的github
template块的主要内容：

为该组件配置了一个事件，当日期被选中时，调用sendEvent方法，方法定义：

sendEvent: function(query_date) {
    this.$emit("selected", query_date);
}

该方法将选中的日期作为参数，使当前组件产生一个"selected"事件（这个selected与datepicker的selected同名，但不是同一个事件，是SelectDate组件的事件）

3. MenuView.vue

一个容纳以上两个组件的视图组件，内容不多的情况下也可以省略这是视图组件，直接把上面俩组件放到App.vue里去。
template块的主要内容：

监听SelectDate组件的selected事件，捕捉后调用get_menu方法。
get_menu方法向后台传递query_date属性，请求menu数据：

get_menu: function(query_date) {
    let year = query_date.getFullYear();
    let month = query_date.getMonth() + 1;
    let day = query_date.getDate();
    this.query_date = year + '年' + month + '月' + day + '日';
    query_date = year + '-' + month + '-' + day;

    this.$http.post('/ajax/',
        {query_date: query_date},
        {emulateJSON: true}) // 使用form-data才可以，否则querydict空
    .catch(function(error) { // 处理未得到数据的异常
        this.failure = true;
        return Promise.reject(error);
    }).then(function(response){ // 成功返回数据
        this.failure = false;
        this.menu = response.data;
    });
}

如果从/ajax/请求中成功获取后台数据，那么更新this.menu属性（绑定到了MenuTable的menu属性），达到更新MenuTable组件中menu这个prop的目的。
如果未能成功获取后台数据，那么this.failure为true，页面显示，提示用户没有这一天的数据。

4. ChartView.vue

这个组件原本打算进行一些可视化的尝试，目前还是空的，不过大致想好了放些什么了。既然是跟吃的有关的网站，那就放些食物营养成分之类的图表，类似于foodwake，不知道这方面有没有更好的推荐？

5. App.vue

这里就相对简单了，添加两个路由链接和路由视图即可。
template块的主要内容：

为了使两个视图在切换的时候不销毁，需要在标签外添加，这样选择的日期和呈现的内容不会因为切换视图而重新初始化。

6. 修改页面标题

页面的标题即网页标签上显示的内容，在HTML中存在于标签的