ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue2-集成Element-ui、Fontawesome、Axios先容与使用 [打印本页]
作者: 万万哇    时间: 前天 02:10
标题: Vue2-集成Element-ui、Fontawesome、Axios先容与使用
[img=80%,60%]https://i-blog.csdnimg.cn/blog_migrate/1c3e641eef8f8153b6c8ddf7fc5718c6.jpeg#pic_center[/img]


  
更多相关内容可查看
前期准备

脚手架生成vue2项目：NodeJS安装并生成Vue脚手架(保姆级)
Element UI先容

Element UI 是一个基于 Vue.js 2.0 的桌面端组件库。它提供了一套丰富且易于使用的组件，如表格、对话框、工具提示、导航菜单、表单、卡片等，可以帮助开发者快速构建出高质量的界面。
Element-ui安装使用

1.保举使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
  1. npm i element-ui -S
复制代码

2.在 main.js 中写入以下内容
  1. import Vue from 'vue';
  2. import ElementUI from 'element-ui';
  3. import 'element-ui/lib/theme-chalk/index.css';
  4. import App from './App.vue';
  6. Vue.use(ElementUI);
  8. new Vue({
  9.   el: '#app',
  10.   render: h => h(App)
  11. });
复制代码
3.想要什么功能直接官网cv大法
Element md文档
Element官网文档
例：要一个树形布局
直接copy

会发现很多都是开箱即用的功能，直接cv即可完成

这实在对自己做后端的朋友很友好，有直接的展示以及对应的代码copy，可以快速上手学习
Fontawesome先容

Fontawesome官方图标库
Fontawesome中文图标库
FontAwesome 是一种流行的图标库，它提供了大量的可缩放矢量图标，可以被定制——巨细、颜色、阴影以及任何可以用 CSS 完成的任何事情。
FontAwesome 的主要特点包括：
     Fontawesome安装使用

安装命令
  1. npm install font-awesome
复制代码
main.js中引入
  1. import 'font-awesome/css/font-awesome.min.css';
复制代码
在vue中直接使用
  1. <i class="fa fa-camera-retro"></i>
复制代码


Axios先容

Axios官方文档
Axios 是一个基于 promise 的 HTTP 客户端，可以用于浏览器和 node.js 中。它提供了一个简单的 API，用于处置惩罚 HTTP 请求和响应。Axios 是开源的，并且在 GitHub 上有大量的贡献者。
以下是 Axios 的一些主要特点：
     使用 Axios，你可以很轻易地发送 GET、POST、PUT、DELETE 等请求，并处置惩罚它们的响应。你还可以设置请求的头部、参数、超时时间等。
Axios安装使用

  1. npm install axios
复制代码
看一下如下代码,我的后端服务启用的是8088端口
  1. <script>
  2. import Element from './components/Element.vue';
  3. import axios from 'axios';
  5. export default {
  6.   name: 'App',
  7.   data:function(){
  9.   },
  10.   created:function(){
  11.     axios.get("http://localhost:8088/hello?name=lisi").then(function(response){
  12.       console.log('ssss');
  13.     })
  14.   },
  15.   components: {
  16.     Element
  17.   },
  18.   methods:function(){
  20.   }
  21. }
  22. </script>
复制代码
后端代码

这样会存在一个跨域问题

什么是跨域问题？

个人理解：非同源页面发送ajax请求，也无法读取非同源页面的cookie，以是当我前端的项目在8080端口，后端的项目在8088端口，就会产生跨域问题
如何解决跨域问题？
1.springboot可以写一个配置类如图，来配置一些是否允许跨域的信息，配置类可以让所有的Controller的跨域进行生效
  1. import org.springframework.context.annotation.Configuration;
  2. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  3. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  5. @Configuration
  6. public class CorsConfig implements WebMvcConfigurer {
  8.     @Override
  9.     public void addCorsMappings(CorsRegistry registry) {
  10.         registry.addMapping("/**") //允许跨域访问的路径
  11.                 .allowedOrigins("*") //允许跨域访问的源
  12.                 .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") //允许请求方法
  13.                 .maxAge(168000) //预检间隔时间
  14.                 .allowedHeaders("*") //允许头部设置
  15.                 .allowCredentials(true); //是否发送cookie
  16.     }
  17. }
复制代码
2.在需要进行跨域的Controller上加@CrossOrigin注解即可
解决了跨域将后端的代码在前端进行呈现以下
  1. <template>
  2.   <div>
  3.     <h1 >{{tabledata}}</h1>
  5.   </div>
  6. </template>
  8. <script>
  9. import axios from 'axios';
  10. export default {
  11.   data() {
  12.     return {
  13.       tabledata: [],
  14.     };
  15.   },
  16.   created:function(){
  17.     axios.get("http://localhost:8088/hello?name=lisi").then((response)=>{
  18.       this.tabledata = response.data
  19.     })
  20.   }
  21. };
  22. </script>
  23. <style>
  24. .el-dropdown-link {
  25.   cursor: pointer;
  26.   color: #409eff;
  27. }
  28. .el-icon-arrow-down {
  29.   font-size: 12px;
  30. }
  31. </style>
复制代码

到这里实在很多做后端的朋友想自己玩前后端就会名顿开原来如此轻易！
本篇小结

本文只是帮助各人入门，以及拓展开发的方式，每一个组件都可以实现很强大的功能，更多的功能请详细查看官方提供的文档，险些都是直接cv可用，加上一丁点vue的知识即可进行开发
这里对文章所用到的官方文档在进行一次汇总
Element md文档
Element官网文档
Fontawesome官方图标库
Fontawesome中文图标库
Axios官方文档

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4