1.学会使用elementUI布局
首先使用npm install element-ui -s
将elementUI下载到项目中去npm install -g/-s/-d-g : 将js依赖下载到node_global-s : 将js依赖下载到当前spa项目中,并且在后续前端项目打包的时候,npm buid 会一起打包到项目中去-d : 将js依赖下载到当前spa项目中,但是在后续前端项目打包的时候,npm buid 不会一起打包项目中去
将elementUI加入到main.js中
要加在组件前面否则样式无法生效
import Vue from 'vue'// 新添加1import ElementUI from 'element-ui' // 新添加2,避免后期打包样式不同,要放在import App from './App';之前import 'element-ui/lib/theme-chalk/index.css' import App from './App'import router from './router'// 新添加3Vue.use(ElementUI) Vue.config.productionTip = false
测试在elementUI官网找个样式放到App.vue中测试看能不能显示
2.axios中get/post的区别
get发送数据请求到后台传输的是一个jason数据格式dosubmit: function() {let param = {username: this.username,password: this.password}console.log(param)let url = "http://localhost:8080/ssm/user/userLogin";//jason数据格式axios.get(url, {params: param}).then(function(resp) {console.log(resp)}).catch(function(resp) {console.log(resp)})},
post请求需要借助第三方依赖来完成
因为post发送请求到后台传输的数据是一个对象所以不能用jason数据格式
所以还要先安装第三方依赖qsnpm install qs -s
还有vue-axios依赖npm install vue-axios -s
dosubmit() {let param = {username: this.username,password: this.password}console.log(param)let url = "http://localhost:8080/user/userLogin";axios.post(url, qs.stringify(param)).then(function(resp) {console.log(resp)}).catch(function(resp) {console.log(resp)})}
3.前后端分离中的跨域问题
跨域出现原因?
因为浏览器的同源政策,就会产生跨域。 比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。 由于浏览器为了安全考虑,就会产生一个同源政策,不是同一个地方出来的是不允许进行交互的。
当浏览器两个项目协议,ip,端口,项目有一个不一样时就会出现跨域问题
解决跨域问题办法
在web.xml文件中配置拦截器将下面这段代码加入进去
<!--2.配置中文乱码过滤器,使用Spring自带的过滤器--><filter><filter-name>encodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><async-supported>true</async-supported><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param></filter><filter-mapping><filter-name>encodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>