项目目录
package.json
里面的依赖通过npm install就可以安装package.json的所有组件
- 打包Vue项目,部署直接丢到Nginx
热部署
部署脚本
- npm run dev
- npm start
文件 | 标识 | 理解 |
---|---|---|
index.html | <div id=“app”></div> | 定义了空的div,其id为app |
main.js | el:’#app’ 选择器 components:{App} | 实例化vue对象,并且通过id选择器绑定到index.html的div中,所以div中的显示App.vue中的内容(包括组件、样式)。main.js也是webpack打包的入口 |
App.vue | <router-view></router-view> | 只定义了vue-router的锚点 |
router/index.js | path和router的映射 | URL |
pages/Layout.vue | 共同组件里的主体<router-view/> |
Vuetify框架
UI框架
- 为什么要学习UI框架
- Vue虽然会帮助我们进行视图的渲染,但是样式css还是由我们自己来完成,这显然不是我们后端开发人员的强项,所有一般都喜欢使用一些现成的UI组件,拿来即用,常见的例如:
- BootStrap
- LayUI
- EasyUI
- ZUI
- 然而这些UI组件的基因天生与Vue不合,因为他们更多的是利用DOM操作,借助于jQuery实现,而不是MVVM的思想
- 而目前与Vue吻合的UI框架也非常的多,国内比较知名的如:
- element-ui:饿了么出品
- i-view:
- 我们这里介绍的是一款国外的框架:
- Vuetify
使用域名访问
修改hosts
- C:\Windows\System32\drivers\etc\hosts
- hosts是Windows操作系统的配置文件,通常不允许访问,需要修改访问权限
- 将hosts文件中的本地巡回地址改为
- 127.0.0.1 manage.fly.com
- 这里也可以利用SwitchHosts工具修改
- 改完后还要修改前端项目的build/webpack.dev.conf.js
disableHostCheck: true
nginx解决端口问题
https://blog.csdn.net/weixin_37838913/article/details/105021788
nginx.conf配置文件
nginx详情:【Web服务器】Nginx反向代理:80端口被System占用
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name api.fly.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:10010;
proxy_connect_timeout 600;
proxy_read_timeout 600;
}
}
server {
listen 80;
server_name manage.fly.com;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location / {
proxy_pass http://127.0.0.1:9001;
proxy_connect_timeout 600;
proxy_read_timeout 600;
}
}
}
跨域问题
跨域场景:协议不同、域名不同、端口不同、二级域名不同
跨域前提:ajax请求才会出现跨域
解决方案:
- 1、jsonp
- 2、Nginx (逃避)
- 3、cors:
corsConfiguration.addAllowedOrigin("http://manage.fly.com");
corsConfiguration.setAllowCredentials(true);//允许携带cookie
corsConfiguration.addAllowedMethod("*");//代表所有请求方法:get、post、put、delete
corsConfiguration.addAllowedHeader("*");//允许携带任何头信息
实现:springMVC提供了CorsFilter
- 在网关微服务上新建一个CorsConfiguration
package com.leyou.gateway.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @Title: 跨域
* @author: Fly
* @date: 2020/5/3 - 3:38
*/
@Configuration
public class LeyouCorsConfiguration {
@Bean
public CorsFilter corsFilter(){
//初始化cors配置对象
CorsConfiguration corsConfiguration=new CorsConfiguration();
//允许跨域的域名,如果要携带cookie,不能写*,*代表所有域名都可以跨域访问
corsConfiguration.addAllowedOrigin("http://manage.fly.com");
corsConfiguration.setAllowCredentials(true);//允许携带cookie
corsConfiguration.addAllowedMethod("*");//代表所有请求方法:get、post、put、delete
corsConfiguration.addAllowedHeader("*");//允许携带任何头信息
//初始化cors配置源对象
UrlBasedCorsConfigurationSource corsConfigurationSource=new UrlBasedCorsConfigurationSource();
corsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);
//返回corsFilter实例,参数:cors配置源对象
return new CorsFilter(corsConfigurationSource);
}
}
异步查询工具axios
异步查询数据,自然是通过ajax查询。大家首先想起的肯定是jQuery。但是jQuery与MVVM的思想不吻合。而且ajax只是jQuery的一小部分。因为不可能为了ajax请求而去引用这个大的一个库。
所以Vue官方推荐的ajax请求框架叫做:axios
- 在http.js中封装axios,这样就不用每次都import axios from ‘axios’
- 并且设置axios的基础请求路径
import Vue from 'vue'
import axios from 'axios'
import config from './config'
axios.defaults.baseURL = config.api; // 设置axios的基础请求路径
axios.defaults.timeout = 2000; // 设置axios的请求时间
// axios.interceptors.request.use(function (config) {
// // console.log(config);
// return config;
// })
axios.loadData = async function (url) {
const resp = await axios.get(url);
return resp.data;
}
Vue.prototype.$http = axios;// 将axios添加到 Vue的原型,这样一切vue实例都可以使用该对象
//...
mounted() { // 渲染后执行
// 查询数据
this.getDataFromServer();
},
watch: {
pagination: { // 监视pagination属性的变化
deep: true, // deep为true,会监视pagination的属性及属性中的对象属性变化
handler() {
// 变化后的回调函数,这里我们再次调用getDataFromServer即可
this.getDataFromServer();
}
},
search: { // 监视搜索字段
handler() {
this.getDataFromServer();
}
}
},
methods: {
getDataFromServer() { // 从服务的加载数的方法。
// 发起请求
this.$http.get("/item/brand/page", {
params: {
key: this.search, // 搜索条件
page: this.pagination.page,// 当前页
rows: this.pagination.rowsPerPage,// 每页大小
sortBy: this.pagination.sortBy,// 排序字段
desc: this.pagination.descending// 是否降序
}
}).then(resp => { // 这里使用箭头函数
this.brands = resp.data.items;
this.totalBrands = resp.data.total;
// 完成赋值后,把加载状态赋值为false
this.loading = false;
})
},
//...