VUE Cli VUE脚手架

关于VUE Cli项目

VUE Cli创建的项目通常称之为“VUE脚手架项目”。

VUE Cli项目是一种单页面的项目,在这种项目中,只有1个HTML文件!具体的内容显示是由各个.vue文件(视图组件文件)来实现的,每个显示效果都可能是由多个.vue共同组成的,每个.vue的显示位置也可以轻松替换为另一个.vue文件的显示效果,就可以实现“搭积木”的方式来构建页面!

关于VUE Cli项目的结构

  • [.idea]:由IntelliJ IDEA打开的项目都有此文件夹,是由IntelliJ IDEA维护的,不需要手动管理,如果此文件夹下的文件出错,删除即可,后续IntelliJ IDEA会自动重新创建所需的文件

  • [node_modules]:当前项目的所有依赖项,此文件夹通常会被配置到.gitignore文件中,如果项目中缺少此文件夹,或缺少此文件夹下的部分依赖项,都可能导致项目无法正常使用,需要通过npm install命令来安装相关软件(下载必要的依赖项),此命令会根据package.json中配置的依赖列表来下载各依赖项

  • [public]:项目的静态资源文件夹,用于存放.html.css.js、图片等静态资源,在具体使用时,可以按需自行创建文件夹来管理各文件,在访问时,此文件夹相当于主机的根路径,例如在public下直接存放a.jpg,访问路径则是http://localhost:8080/a.jpg

    • favicon.ico:图标文件

    • index.html:当前项目唯一的HTML文件

  • [src]:源代码

    • [assets]

    • [components]

    • [router]:路由配置文件的文件夹

      • index.js:默认的路由配置文件

    • [store]

    • [views]:存放视图组件的文件夹

    • App.vue:默认会被注入到index.html中的视图组件

    • main.js:当前项目的主要配置文件

  • .gitignore:用于配置使用GIT仓库时忽略的文件或文件夹,在此文件中配置的文件、文件夹均不会被提交到GIT仓库

  • babel.config.js:~

  • jsconfig.json“:~

  • package.json

  • package-lock.json

  • vue-config.js:~

关于视图组件

在VUE Cli项目中,以.vue作为扩展名的文件就是视图组件文件,这类文件通常可能包含:

  • <template>:用于设计页面中的元素

    • 注意:此标签只能有1个直接子标签

  • <script>:用于编写JavaScript程序

  • <style>:用于编写CSS样式

 

关于路由配置

在VUE Cli项目中,src/router/index.js是默认的路由配置文件,此文件中配置了“路径”与“视图组件”的映射关系。

默认的配置如下:

import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

以上routes常量是数组类型的,其中的元素是对象,每个对象都是一个“路由对象”!

在路由对象中,path表示访问路径,component表示视图组件,name是可以缺省的!

其中,component属性的值可以是通过import语句来导入某个视图组件,也可以通过import()函数来导入某个视图组件。

关于<router-view/>标签

在VUE Cli项目中,在视图组件中可以添加<router-view/>标签,表示此标签所在的位置将由其它视图组件来完成显示及对应的功能!具体由哪个视图组件来显示,取决于路由配置!

使用Element UI

在VUE Cli项目中,当需要使用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。

设计登录页

 

在VUE Cli项目中使用axios

首先,需要安装axios,安装命令为:

npm i axios -S

然后,在main.js中添加配置:

import axios from 'axios';

Vue.prototype.axios = axios;

登录示例:

submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      let url = 'http://localhost:8080/users/login';
      console.log('url = ' + url);

      this.axios.post(url, this.ruleForm).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
          this.$message({
            message: '登录成功!',
            type: 'success'
          });
        } else {
          this.$alert(jsonResult.msg, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    } else {
      return false;
    }
  });
}

关于跨域访问

服务器端默认不允许异步的跨域请求。

关于跨域:只要主机名、端口号、通讯协议中的任何一项不同,即为跨域访问。

 跨域访问导致的错误信息中,关键字为:CORS。完整的错误信息大致如下:

Access to XMLHttpRequest at 'http://localhost:8080/users/login' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在基于Spring MVC的服务器端项目中,可以自定义配置类,实现WebMvcConfigurer接口,重写其中的addCorsMappings()方法,以配置允许的跨域访问!

简单的配置如下:

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 2.0
 */
@Slf4j
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

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

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .maxAge(3600);
    }

}

 

嵌套路由

在VUE Cli项目中,只要访问“非静态资源”,都会认为你尝试访问index.html,则会由App.vue注入到页面中,而App.vue基本上是通过<router-view/>由其它视图组件来完成显示的,其它视图组件中可能也包含<router-view/>,就出现了<router-view/>的嵌套,则在配置路由时,也需要配置嵌套的路由!

例如:

 在src/router/index.js中配置路由时,如果某个视图组件使用到了<router-view/>,则可以在对应的路由对象中添加children属性,此属性的配置方式与routes常量完全相同,例如:

简单理解:

  • 如果把路由对象配置在routes常量中,此视图组件将显示在App.vue<router-view/>位置

  • 如果把路由对象配置在某个路由的children中,此视图组件将显示在此路由对应的视图组件的<router-view/>位置

需要注意:由于HomeView中设计了<router-view/>,则HomeView是一个不完整的View,不应该允许直接访问,可以在当前路由对象上添加redirect属性,表示“重定向”,即:当尝试访问HomeView时,直接重定向(跳转)到另一个视图组件

在VUE Cli项目中使用qs

qs是前端技术中,可以实现“对象与FormData格式的字符串”的转换的工具包!

安装命令为:

npm i qs -S

   并且,需要在main.js中补充配置:

import qs from 'qs';
Vue.prototype.qs = qs;

然后,就可以在视图组件中,通过qs将对象转换成FormData格式的字符串,例如:

let formData = this.qs.stringify(this.ruleForm);
console.log('formData = ' + formData);

指定服务端口

在Spring Boot项目中,可以通过配置文件中的server.port属性指定端口号,例如:

server:
  port: 28182

在VUE Cli项目中,可以通过package.json中的scripts属性的serve属性值修改端口号,在原值的基础上添加--port 新端口号即可,例如:

 

关于PageHelper框架

PageHelper框架是专门用于MyBatis的无侵入性的分页框架(是通过MyBatis拦截器实现的)。

在Spring Boot项目中,需要添加pagehelper-spring-boot-starter依赖项后才可以使用PageHelper框架:

<pagehelper-spring-boot.version>1.3.0</pagehelper-spring-boot.version>
<!-- 基于MyBatis或MyBatis Plus的分页查询框架 -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>${pagehelper-spring-boot.version}</version>
</dependency>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值