VUE Cli的单页面

小姜认真点
120 阅读10分钟

VUE Cli的单页面

VUE Cli项目是一个“单页面”的应用，也就是说，在整个项目中，只有1个.html页面文件！

在这种应用中，每个页面都是由若干个“视图组件”共同完成显示和功能的！

VUE Cli项目结构

  • [.idea]：不是VUE Cli项目特有的，只要是使用IntelliJ IDEA打开的项目均会自动生成此文件夹，是IntelliJ IDEA管理项目时使用到的文件，不需要人为维护，如果此文件夹内报错，删除此文件夹即可
  • [node_modules]：用于存储当前项目的各依赖项的文件夹，不需要人为维护，通常，此文件夹的内容不会被提交到GIT仓库（被配置到.gitignore文件中），所以，从GIT仓库拉取到的项目也不会有此文件夹及文件夹中的内容，需要在当前项目文件夹下执行npm install命令，会自动下载此项目所需的所有依赖项
  • [public]：静态资源文件夹，用于存放.html、.css、.js、图片等静态资源文件，此文件夹对应运行时的根路径
    • favicon.ico：网站的图标文件，是固定的位置、固定的文件名
    • index.html：项目中的唯一的.html文件，也是默认使用的网页文件
  • [src]：源代码和源文件的文件夹
    • [assets]：存放静态资源的文件夹，此文件夹下的内容被访问时，应该是固定不变的（不会随着程序运行而变化）
    • [components]：存放视图组件的文件夹，此文件夹下的视图组件通常不会被配置路由，且被其它视图组件引用（例如在默认的项目代码中HelloWorld.vue被HomeView.vue引用）
    • [router]：存放路由配置的文件夹
      • index.js：默认的路由配置文件
    • [store]：存放定义全局的量的文件的文件夹
      • index.js：默认的定义全局的量的文件
    • [views]：存放视图组件的文件夹
    • App.vue：默认会注入到index.html中的视图组件
    • main.js：项目的主配置文件
  • .gitignore：配置不需要提交到GIT仓库的文件和文件夹
  • bable.config.js：Bable的配置文件
  • LICENSE：并不是每个项目都有的文件，通常是在GIT仓库设置开源后配置的《开源许可协议》文件
  • package.json：项目的基础配置文件，包括：相关脚本、项目的依赖项等等
  • package-lock.json：锁定的配置文件，不需要人为维护
  • README.md：并不是必须的文件，是默认的项目描述文件，项目的开发者应该通过此文件对项目进行基本的介绍，并包括项目如何启动、如何部署等
  • vue.config.js：Vue的配置文件

关于视图组件

视图组件是以.vue作为扩展名的文件。

视图组件的源代码通常由3部分组成：

  • <template>标签：用于设计视图内容
    • 注意：此标签的直接子标签只能有1个
  • <style>标签：用于设计CSS样式
  • <script>标签：用于设计JavaScript程序

关于<router-view/>

当视图组件中出现<router-view/>标签，表示此标签对应的显示区域将由其它视图组件来完成显示！

以默认的App.vue为例，它只负责设计页面中的顶部导航部分，剩余的内容都是其它视图组件来完成显示的，所以，使用了<router-view/>标签。

至于在<router-view/>位置具体显示哪个视图组件，由当前访问的URL来决定，需要结合路由的配置。

关于路由

路由是配置了路径与视图组件的对应关系的，默认情况下，表现为src/router/index.js中的routes常量。

每个路由的配置至少包含path和component属性，前者表示URL，后者表示视图组件。

使用Element UI

在终端窗口中，在当前项目的文件夹下，执行以下命令：

npm i element-ui -S

然后，在main.js中补充以下配置代码：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

接下来，在项目的任何视图组件中，都可以直接使用Element UI！

嵌套路由

在配置路由（配置/src/router/index.js）时，如果配置的路由对象是routes常量的直接数组元素，则此路由配置的视图会显示在App.vue的<router-view/>中。

在设计视图时，可能会出现<router-view/>的嵌套，以本次菜单的设计为例，菜单所在的视图HomeView.vue是显示在App.vue的<router-view/>中的（下图中红色边框的区域），而HomeView本身也使用了<router-view/>使得页面的主要区域由其它视图组件来显示（下图中绿色边框的区域）：

1679984208389.png

一旦出现了<router-view/>的嵌套，在配置子级<router-view/>的显示的视图组件时，就需要配置嵌套路由！

子级路由的配置，需要在父级路由对象上添加children的属性，例如，以上是HomeView.vue使用了<router-view/>，就在HomeView.vue对应的路由对象上添加children属性，此属性的类型、配置方式与routes常量相同！例如：

1679984275837.png

对于HomeView.vue而言，主体部分设计为<router-view/>，所以，这个视图组件是“不完整的”（主体部分需要由其它视图组件来显示），则不应该允许此视图组件直接显示！通常，会为这个视图组件配置redirect属性，表示“重定向”，即：当尝试访问HomeView的URL时，会自动跳转到另一个由redirect属性配置的URL！例如：

1679985246924.png

Element UI的菜单与路由

在VUE脚手架项目中，使用Element UI的菜单时，应该在每个<el-menu-item>标签上配置index属性，且属性值就是此菜单项对应的视图组件的URL，例如：

1679985652760.png

然后，在<el-menu>标签上，添加router属性，可实现“在激活导航时以 index 作为 path 进行路由跳转”，例如：

1679985790844.png

目前，如果手动修改浏览器的地址栏中的URL（包括刷新页面），视图的内容的显示是没有问题的，但是，在菜单中激活的菜单项可能是不对应的！

在<el-menu>标签上，可以配置default-active属性，表示默认激活的菜单项，此属性的值应该是变量值，且值应该是当前显示的视图的URL，则配置为：

1679987654747.png

关于检查请求参数的基本格式

在服务器端，可以使用Spring Validation检查客户端提交的请求参数的基本格式，在客户端，也存在检查请求参数的基本格式的机制，在开发实践中，客户端和服务器都应该对请求参数的基本格式进行检查！

首先，对于服务器端而言，客户端提交的所有请求参数应该都是“不可信的”！因为：

  • 客户端的程序都是运行在客户端的设备上的，存在被篡改的可能
  • 客户端的程序的版本不一定随时与服务器端的版本保持一致

所以，服务器端必须对客户端提交的请求参数进行检查！

需要注意：即使服务器端具有完整的检查机制，客户端仍需要对请求参数的基本格式进行检查，因为，以上“不可信”的原因导致的检查出现问题都是小概率事件，而客户端的检查可以帮服务器拦截并阻止绝大部分错误的请求，以减轻服务器端的压力。

至于客户端的检查规则，可以比服务器端的更加严格，但不允许更加宽松，或者，直接使用完全相同的检查规则即可。

安装并配置Axios

在VUE Cli项目的文件夹下，安装Axios：

npm i axios -S

然后，在main.js中添加配置：

import axios from 'axios';

Vue.prototype.axios = axios;

处理跨域访问的错误

当客户端向服务器端提交**跨域（客户端与服务器端不是部署到同一台服务器，或在同一台服务器的不同端口）**请求时，默认情况下，服务器端是不支持的！

当使用Chrome时，在控制台会出现以下错误信息：

Access to XMLHttpRequest at 'http://localhost:9080/albums/add-new' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当使用FireFox时，在控制台会出现以下错误信息：

已拦截跨源请求：同源策略禁止读取位于 http://localhost:9080/albums/add-new 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。状态码：200。

跨域访问错误的关键字：CORS。

要解决这个问题，服务器端必须允许跨域访问！

在基于Spring MVC的项目中，需要自定义类，实现WebMvcConfigurer接口，重写其中的addCorsMappings()方法，在此方法中配置允许跨域访问。

在csmall-product项目中，在项目的根包下创建config.WebMvcConfiguration配置类，通过此类配置允许跨域访问：

package cn.tedu.csmall.product.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Spring MVC配置类
 *
 * @author java@tedu.cn
 * @version 0.0.1
 */
@Slf4j
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    public WebMvcConfiguration() {
        log.debug("创建配置类对象：WebMvcConfiguration");
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有请求路径
                .allowedOriginPatterns("*") // 所有来源
                .allowedHeaders("*") // 所有请求头
                .allowedMethods("*") // 所有请求方式
                .allowCredentials(true) // 允许凭证
                .maxAge(3600); // 有效期
    }
}

关于@RequestBody注解

当客户端提交请求时，使用整个对象（this.ruleForm）作为请求参数时，服务器端接收请求参数时必须添加@RequestBody注解：

1679995193228.png

如果未添加此注解，则服务器端收到的各请求参数均是null值！

**提示：**当添加了@RequestBody后，在Knife4j的API文档中，调试界面不再提供各请求参数的输入框，而是需要自行组织JSON格式的请求参数进行调试。

当服务端没有在请求参数之前添加@RequestBody时，客户端提交的请求参数必须是FormData格式的，例如：

let fromData = 'name=Xxx&description=Xxx&sort=99';

小结：

  • 当服务器端在请求参数之前添加了@RequestBody，客户端提交的请求参数必须是对象格式的

    • Knife4j的API文档的调试界面将不提供各请求参数的输入框

    • 如果客户端提交的请求参数是FormData格式的，服务器端将响应415错误，且服务器端的控制台会提示错误信息，例如：

      2023-03-28 17:32:39.639  WARN 37160 --- [nio-9080-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

  • 当服务器端在请求参数之前没有添加@RequestBody，客户端提交的请求参数必须是FormData格式的

    • 如果客户端提交的请求参数是对象格式的，服务器端将无法接收到任何请求参数，即各参数值均为null

关于QS框架

在前端项目中，可以使用QS框架将对象转换为FormData格式的字符串！

首先，需要安装qs：

npm i qs -S

然后，还需要在main.js中添加配置：

import qs from 'qs';

Vue.prototype.qs = qs;

后续，在当前项目中，可以使用this.qs.stringify(对象)得到FormData格式的字符串，例如：

1680052762700.png

另外，通过this.qs.parse(formData)还可以将FormData格式的字符串转换为对象！

指定前端项目的服务端口号

在package.json中调整serve脚本，在原值右侧添加 --port 端口号，例如：

1680054019829.png

关于VUE Cli项目中的this

在普通的前端项目中，在JavaScript程序中的this表示的是“浏览器对象”。

在VUE Cli项目中，this关键字指的是整个Vue对象，通常，需要通过this关键字调用的有：

  • 在main.js中，通过Vue.prototype.xxx声明的属性，需要通过this.xxx来调用
    • 例如项目中使用的this.axios、this.qs等
  • 在视图组件中的JavaScript代码中，通过export default {}中的data()的return {}中声明的属性
    • 例如项目中使用的this.ruleForm等
  • 在视图组件中的JavaScript代码中，通过export default {}中的methods属性声明的方法
    • 例如项目中使用的this.resetForm(formName)等
  • 其它相对固定的用法，通常是VUE或某个特定的框架注册到Vue对象中的属性
    • 例如项目中使用的this.$message()、this.$alert()等
avatar
文章
阅读
粉丝