Java阶段四Day02

VueCli嵌套路由

由于Vue Cli工程是单页面的，为了保证能显示各式各样的页面，则需要将页面的整个区域都设计为<router-view/>，然后根据URL不同，加载不同的视图组件(. vue文件)。但是，即使将整个页面的显示区域作为一个<router-view/>，多个页面仍可能存在共用的部分。

如果要设计为以上风格，则页面中的右侧最大的区域也必须是一个<router-view/>， 就会形成最外部(页面所有部分)是<router-view/>的同时，内部还有一个<router-view/> (右侧的大区域)，在配置路由时，就需要使用到嵌套路由的做法了。
当然，如果以上设计风格中右侧区域中仍有各页面均显示的部分，还可以继续在其内部进行嵌套，通常，并不建议嵌套太多层次。

提示：以上children下的配置中，各path没有使用/作为第1个字符，则表示在父级路径的基础.上增加，例如配置为user/list， 由于父级配置了/admin，则完整路径为/ admin/user/list

另外，如果希望访问子级嵌套的视图(例如以. 上/ admin对应的视图)时就打开某个其子级视图(例如以上/admin/user/list对应的视图)，在配置存在子级的视图(例如以上/admin对应的视图)时，还可以添加redirect属性，使其直接重定向到子级视图

总结

使用VUE Cli的优势：

• 显示的页 面由多个视图组件共同构成，便于替换任何视图组件，实现“复用”的效果
• 由于是单页面的，各个库的安装与配置都只需要做一次

设计视图：

• VUE Cli工程默认加载App.vue
• <router-view/>标签表示将根据URL使用对应的视图组件
• 每个视图组件中的根级<template>标签必须只有1个直接子标签
• 每个视图组件都需要在router/index.js中配置路由

使用axios

• 在处理响应的回调时，不可以使用传统的函数(包含匿名函数)，必须使用箭头函数

配置路由

• 需要显示在App.vue中的视图组件，直接在routes数组常量中配置路由对象
• 需要显示在其它视图组件的<router-view/>的视图组件，在“父级”的children数组中配置路由对象
• 当配置了嵌套路由后， “父级”应该配置redirect属性，指定重定向的目标

项目开发

开发流程

• 基于软件工程的思想，软件的开发流程大致是:需求分析、可行性分析、总体设.计、详细设计、测试、部署、运维的过程，并且，是循环的过程
• 切忌过度执着于编写代码

关于项目

项目分析

• 大多软件可能都需要开发至少2个或4个项目，分别是:
  • 前台的前端项目
  • 前台的后端项目
  • 后台的前端项目
  • 后台的后端项目
  • 某些软件可能不需要前台项目，例如某些内部使用的OA系统。如果使用微服务架构，可能需要更多项目
• 前台项目是普通用户使用的，后台项目是管理和运营团队使用的
• 前端项目是客户端项目，例如网页端、手机APP端等，后端项目是服务器端项目

数据库的设计规范(基于阿里巴巴Java开发手册)

• 【强制】表名不使用复数名词

  • 说明：表名应该仅仅表示表里面的实体内容，不应该表示实体数量，对应于DO类名也是单数形式，符合表达习惯

• 【强制】禁用保留字，如desc、range、match、 delayed等， 请参考MySQL官方保留字

• 【强制】表名、字段名必须使用小写字母或数字，禁止出现数字开头，禁止两个下划线中间只出现数字。数据库字段名的修改代价很大，因为无法进行预发布，所以字段名称需要慎重考虑

  • 说明：MySQL在Windows下不区分大小写，但在Linux下默认是区分大小写。因此，数据库名、表名、字段名都不允许出现任何大写字母，避免节外生枝

    正例：aliyun_admin，rdc_ config，level3_name

    反例：AliyunAdmin，rdcConfig，level_3_ name

• 【强制】小数类型为decimal，禁止使用float和double

  • 说明：float和double在存储的时候，存在精度损失的问题，很可能在值的比较时，得到不正确的结果。如果存储的数据范围超过decimal的范围，建议将数据拆成整数和小数分开存储

• 【强制】varchar是可变（65532，是65535中通过1个字节存储是否为Null，额外2个字节记录实际存储长度）长字符串，不预先分配存储空间，长度不要超过5000，如果存储长度大于此值，定义字段类型为text，独立出来一张表，用主键来对应，避免影响其它字段索引效率

• 【强制】表达是与否概念的字段，必须使用is_xxx的方式命名，数据类型是unsigned tinyint (1表示是，0表示否)

  • 说明：任何字段如果为非负数，必须是unsigned

    正例：表达逻辑删除的字段名is_deleted，1表示删除，0表示未删除

• 【强制】表必备三字段：id ，gmt_create，gmt_modified

  • 说明：其中id必为主键，类型为unsigned bigint、 单表时自增、步长为1，gmt_create，gmt_modified的类型均为date_time类型，前者现在时表示主动创建，后者过去分词表示被动更新

• 【推荐】字段允许适当冗余，以提高查询性能，但必须考虑数据一致。冗余字段应遵循：不是频繁修改的字段、不是varchar超长字段，更不能是text字段，牺牲空间换取时间

  正例：商品类目名称使用频率高，字段长度短，名称基本一成不变，可在相关联的表中冗余存储类目名称，避免关联查询

• 【参考】合适的字符存储长度，不但节约数据库表空间、节约索引存储，更重要的是提升检索速度

数据库表设计

DROP TABLE IF EXISTS content_category;
CREATE TABLE content_category
(
    id           BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '数据ID',
    name         VARCHAR(32)  DEFAULT '' COMMENT '类别名称',
    parent_id    BIGINT UNSIGNED DEFAULT 0 COMMENT '父级类别ID，如果无父级，则为0',
    depth        TINYINT UNSIGNED DEFAULT 0 COMMENT '深度，最顶级类别的深度为1，次级为2，以此类推',
    keywords     VARCHAR(256) DEFAULT '' COMMENT '关键词列表，各关键词使用英文的逗号分隔',
    sort         TINYINT UNSIGNED DEFAULT 0 NOT NULL COMMENT '排序序号',
    icon         VARCHAR(256) DEFAULT '' COMMENT '图标图片的URL',
    enable       TINYINT UNSIGNED DEFAULT 0 COMMENT '是否启用，1=启用，0=未启用',
    is_parent    TINYINT UNSIGNED DEFAULT 0 COMMENT '是否为父级（是否包含子级），1=是父级，0=不是父级',
    is_display   TINYINT UNSIGNED DEFAULT 0 COMMENT '是否显示在导航栏中，1=启用，0=未启用',
    gmt_create   DATETIME     DEFAULT NULL COMMENT '数据创建时间',
    gmt_modified DATETIME     DEFAULT NULL COMMENT '数据最后修改时间',
    PRIMARY KEY (id)
) COMMENT ='内容-类别' CHARSET = utf8mb4;

DROP TABLE IF EXISTS content_tag;
CREATE TABLE content_tag
(
    id           BIGINT UNSIGNED AUTO_INCREMENT COMMENT '数据ID',
    name         VARCHAR(32) DEFAULT '' NOT NULL COMMENT '标签名',
    parent_id    BIGINT      DEFAULT 0  NOT NULL COMMENT '父级ID，为0的是标签分类，不为0的是标签',
    enable       TINYINT UNSIGNED DEFAULT 0 NOT NULL COMMENT '是否启用，1=启用，0=未启用',
    sort         TINYINT UNSIGNED DEFAULT 0 NOT NULL COMMENT '排序序号',
    gmt_create   DATETIME    DEFAULT NULL COMMENT '数据创建时间',
    gmt_modified DATETIME    DEFAULT NULL COMMENT '数据最后修改时间',
    PRIMARY KEY (id)
) COMMENT '内容-标签' CHARSET = utf8mb4;

DROP TABLE IF EXISTS content_article;
CREATE TABLE content_article
(
    id            BIGINT UNSIGNED AUTO_INCREMENT COMMENT '数据ID',
    author_id     BIGINT(20) UNSIGNED NOT NULL COMMENT '作者ID',
    author_name   VARCHAR(32)   DEFAULT '' NOT NULL COMMENT '作者名字',
    category_id   BIGINT UNSIGNED NOT NULL COMMENT '类别ID',
    title         VARCHAR(256)  DEFAULT '' NOT NULL COMMENT '标题',
    brief         VARCHAR(256)  DEFAULT '' NOT NULL COMMENT '摘要',
    tags          VARCHAR(256)  DEFAULT '' NOT NULL COMMENT '标签列表，实际存入JSON数据',
    ip            VARCHAR(32)   DEFAULT '' NOT NULL COMMENT 'IP',
    sort          TINYINT       DEFAULT 0  NOT NULL COMMENT '排序序号',
    cover_url     VARCHAR(256)  DEFAULT '' NOT NULL COMMENT '封面图',
    up_count      INT UNSIGNED DEFAULT 0 NOT NULL COMMENT '顶数量',
    down_count    INT UNSIGNED DEFAULT 0 NOT NULL COMMENT '踩数量',
    click_count   INT UNSIGNED DEFAULT 0 NOT NULL COMMENT '浏览量',
    comment_count INT UNSIGNED DEFAULT 0 NOT NULL COMMENT '评论量',
    check_state   TINYINT       DEFAULT 0  NOT NULL COMMENT '审核状态，0=未审核，1=审核通过，2=拒绝审核',
    check_remarks VARCHAR(1024) DEFAULT '' NULL COMMENT '审核原因',
    display_state TINYINT UNSIGNED DEFAULT 0 NOT NULL COMMENT '显示状态，0=不显示，1=显示',
    gmt_create    DATETIME      DEFAULT NULL COMMENT '数据创建时间',
    gmt_modified  DATETIME      DEFAULT NULL COMMENT '数据最后修改时间',
    PRIMARY KEY (id)
) COMMENT '内容-文章' CHARSET = utf8mb4;

DROP TABLE IF EXISTS content_article_detail;
CREATE TABLE content_article_detail
(
    id           BIGINT UNSIGNED AUTO_INCREMENT COMMENT '数据ID',
    article_id   BIGINT UNSIGNED NOT NULL COMMENT '文章ID',
    detail       TEXT NOT NULL COMMENT '详情',
    gmt_create   DATETIME DEFAULT NULL COMMENT '数据创建时间',
    gmt_modified DATETIME DEFAULT NULL COMMENT '数据最后修改时间',
    PRIMARY KEY (id)
) COMMENT '内容-文章详情' CHARSET = utf8mb4;

DROP TABLE IF EXISTS content_up_down_log;
CREATE TABLE content_up_down_log
(
    id            BIGINT UNSIGNED AUTO_INCREMENT COMMENT '数据ID',
    user_id       BIGINT UNSIGNED NOT NULL COMMENT '用户ID',
    resource_type TINYINT NOT NULL COMMENT '资源类型，0=文章，1=评论',
    resource_id   BIGINT UNSIGNED NOT NULL COMMENT '资源ID',
    op_type       TINYINT NOT NULL COMMENT '操作类型，0=踩，1=顶',
    gmt_create    DATETIME DEFAULT NULL COMMENT '数据创建时间',
    gmt_modified  DATETIME DEFAULT NULL COMMENT '数据最后修改时间',
    PRIMARY KEY (id)
) COMMENT '内容-顶踩日志' CHARSET = utf8mb4;

DROP TABLE IF EXISTS content_comment;
CREATE TABLE content_comment
(
    id            BIGINT UNSIGNED AUTO_INCREMENT COMMENT '数据ID',
    author_id     BIGINT(20) UNSIGNED NOT NULL COMMENT '作者ID',
    author_name   VARCHAR(32)   DEFAULT '' NOT NULL COMMENT '作者名字',
    article_id    BIGINT UNSIGNED DEFAULT 0 NOT NULL COMMENT '文章ID',
    content       VARCHAR(512)  DEFAULT '' NOT NULL COMMENT '评论内容',
    ip            VARCHAR(32)   DEFAULT '' NOT NULL COMMENT '踩数量',
    floor         INT UNSIGNED DEFAULT 0 NOT NULL COMMENT '楼层',
    up_count      INT UNSIGNED DEFAULT 0 NOT NULL COMMENT '顶数量',
    down_count    INT UNSIGNED DEFAULT 0 NOT NULL COMMENT '踩数量',
    check_state   TINYINT       DEFAULT 0  NOT NULL COMMENT '审核状态，0=未审核，1=审核通过，2=拒绝审核',
    check_remarks VARCHAR(1024) DEFAULT '' NULL COMMENT '审核原因',
    reference_ids VARCHAR(255)  DEFAULT '' NOT NULL COMMENT '引用评论ID',
    display_state TINYINT UNSIGNED DEFAULT 0 NOT NULL COMMENT '显示状态，0=不显示，1=显示',
    gmt_create    DATETIME      DEFAULT NULL COMMENT '数据创建时间',
    gmt_modified  DATETIME      DEFAULT NULL COMMENT '数据最后修改时间',
    PRIMARY KEY (id)
) COMMENT '内容-评论' CHARSET = utf8mb4;

创建项目

本项目将使用Spring Boot 2.5系列的版本，使用2.5.0 ~ 2.5.14之间的任意版本。Spring Boot 2.6开始，部分框架更新较多
使用IntelliJ IDEA创建项目时，可以先创建任何2.x系列版本，然后，修改pom.xml中的版本号

关于依赖项

通过IntelliJ IDEA的创建向导来创建Spring Boot项目时，不必在创建过程中勾选任何依赖项，而是创建成功后手动在pom. xml中添加事实上，开发实践中需要的许多依赖项，在创建向导的依赖清单中并没有，只能手动添加

关于<build>报错

创建项目后，pom.xml中的<build>标签可能报错，可以删除整个<build>标签，将影响项目打包，但不影响开发，不影响通过IntelliJ IDEA运行项目，或手动添加插件的版本号