关于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>