前端-2
elementui
简介
网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
安装
npm i element-ui -S（--save）
i=install 安装
-S =--save 安装后的配置保存到package.json中
配置
https://element.eleme.cn/#/zh-CN/component/quickstart
import Vue from 'vue'
//引入elementui js和css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
//让elementui和Vue结合使用
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
axios
简介
易用、简洁且高效的http库，是Ajax的实现框架。Axios 是一个基于 promise（原生JS底层的异步请求库） 的 HTTP 库，可以用在浏览器和 node.js 中
安装
npm install axios --save
配置
http://www.axios-js.com/zh-cn/docs/#%E5%85%A8%E5%B1%80%E7%9A%84-axios-%E9%BB%98%E8%AE%A4%E5%80%BC
//引入axios
import axios from 'axios'
//设置所有axios请求的基本URL
axios.defaults.baseURL = 'http://localhost:18888';
//设置全局可用变量$http =axios 以后使用，可以不再写axios 可以写 $http
Vue.prototype.$http = axios
跨域及解决跨域
简介
为了防止不同页面的JS相互访问数据，在任何浏览器的底层都有同源策略（Same-Origin-Policy），同源就是在页面调用数据时必须同源，否则不能调用。同源指一个页面请求协议，IP和端口号必须一致，否则就是不同源。不同调用报错：No 'Access-Control-Allow-Origin' header is present on the requested resource
http://localhost:8080/#/dept
http://localhost:18888/dept/queryByPage
请求协议：http https ftp file:等等
IP: 主机IP或者域名或者名称
端口号： http默认80 https默认443 还可以随便自定义
想让不同源的网站相互访问就是跨域。
跨域常见方式：jsonp cors 代理等等
nginx代理实例：
http://192.168.xxx.21:80
http://192.168.xxx.31:8080
cors简介
CORS(Cross Origin Resource Sharing)跨源头资源共享，是一种机制，它使用额外的HTTP头来告诉浏览器允许一个网页从另一个域（不同于该网页所在的域）请求资源。
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
springboot如何实现跨域
理论
https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
四种实现
方式上加注解@CrossOrigin（不推荐，麻烦）
/**
* 分页查询
*
* @param page 分页对象
* @return 查询结果
*/
// @CrossOrigin
@PostMapping("queryByPage")
public Result queryByPage(@RequestBody Page<Dept> page) {
return BaseUtil.success(this.deptService.queryByPage(page));
}
类上加注解@CrossOrigin（不推荐，麻烦）
@RestController
//@CrossOrigin
@RequestMapping("dept")
@Log4j2
public class DeptController {
使用过滤器（推荐）
@Configuration
public class MyConfiguration {
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("http://domain1.com");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
}
实现WebMvcConfigurer（推荐）
package com.aaa.sbm.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* @FileName: CorsConfig
* @Description:
* @Author: zhz
* @CreateTime: 2024/12/16 11:35
* @Version: 1.0.0
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") //添加映射 ** 代表所有映射 http://localhost:18888/
//.allowedOrigins("http://localhost:8080/") //允许哪个源访问我 可以固定写一个
//.allowedOrigins("*") //允许哪个源访问我 * 所有域都可以访问
.allowedOriginPatterns("*") //* 所有域都可以访问
.allowedMethods("PUT", "DELETE","POST","GET","OPTIONS") //允许哪种类型的方法访问我
//.allowedMethods("*") //允许哪种类型的方法访问我 * 所有请求方式都可以
//.allowedHeaders("accept", "accept-encoding", "header3") //允许头部带什么参数
.allowedHeaders("*") //允许头部带什么参数
//.exposedHeaders("header1", "header2") //排除参数
.allowCredentials(true) //允许请求中携带Cookie 如果写成true上面allowedOrigins不可以使用*
.maxAge(3600); //如果是异步请求，会先发试探性请求OPTIONS ，看当前网站是否允许我访问 如果允许，在3600秒之内我就不再检测，以后直接发请求 等过了3600后，再检测一次。。
}
}
代码
package com.aaa.sbm.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* @FileName: CorsConfig
* @Description:
* @Author: zhz
* @CreateTime: 2024/12/16 11:35
* @Version: 1.0.0
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") //添加映射 ** 代表所有映射 http://localhost:18888/
//.allowedOrigins("http://localhost:8080/") //允许哪个源访问我 可以固定写一个
//.allowedOrigins("*") //允许哪个源访问我 * 所有域都可以访问
.allowedOriginPatterns("*") //* 所有域都可以访问
.allowedMethods("PUT", "DELETE","POST","GET","OPTIONS") //允许哪种类型的方法访问我
//.allowedMethods("*") //允许哪种类型的方法访问我 * 所有请求方式都可以
//.allowedHeaders("accept", "accept-encoding", "header3") //允许头部带什么参数
.allowedHeaders("*") //允许头部带什么参数
//.exposedHeaders("header1", "header2") //排除参数
.allowCredentials(true) //允许请求中携带Cookie 如果写成true上面allowedOrigins不可以使用*
.maxAge(3600); //如果是异步请求，会先发试探性请求OPTIONS ，看当前网站是否允许我访问 如果允许，在3600秒之内我就不再检测，以后直接发请求 等过了3600后，再检测一次。。
}
}
结合后端工程CRUD
查询代码
<template>
<!--有且只能有一个根标签，是什么都可以-->
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="deptNo"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="dname"
label="名称"
width="180">
</el-table-column>
<el-table-column
prop="loc"
label="位置">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- <div></div>
<span></span> -->
</template>
<script>
export default {
data(){
return {
tableData: []
}
},
created:function () {
// var _this = this;
this.$http.post('/dept/queryByPage', {
"pageNo": 1,
"pageSize": 5
})
.then( (response) =>{
console.log(response);
console.log(JSON.stringify(response));
this.tableData=response.data.data.list;
})
.catch(function (error) {
console.log(error);
});
},
methods:{
}
}
</script>
<style>
</style>
浙公网安备 33010602011771号