前端互联网金融项目总结

最新推荐文章于 2024-07-25 17:11:44 发布

熙熙鬼

最新推荐文章于 2024-07-25 17:11:44 发布

阅读量1.9k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_49496611/article/details/122296308

版权

做这个项目，用到的技术点相对我以前的项目，还是比较多，在这个项目的过程中我也学到了许多新知识，同时也加强了知识点的复习，以下是我的技术总结：

1.框架

ui框架：使用element ui相关组件；

vue框架：与element ui框架搭配，就是数据与界面的完美呈现；

node.js：因此次项目没有与后端人员合作，故此自己利用node.js搭建了一个简易的服务器，便于拿到数据进行最终的页面展示。

2.使用的主要模块

axios：一个基于 promise 的 HTTP 库，使用过程中进行了简易的二次封装

/**二次封装*/
import Axios from 'axios'

const ConfigBaseUrl = "http://localhost:3000";

const Server = Axios.create({

baseURL:ConfigBaseUrl,

timeout:70000000,//设置网路超时时间

})

Server.defaults.headers.post["Content-Type"]="application/json;charset=utf-8";

export default Server;

/** 使用axios*/
//在main.js中全局引入并添加到vue原型实例上
//1.引入
    import Axios from './utils/axios'
//2.添加到vue原型实例上
    Vue.prototype.$axios = Axios
//3.使用
    this.$axios.get('数据请求的接口地址'，{请求的参数}).then(()=>{})//get方式
    this.$axios.post('数据请求的接口地址'，{请求的参数}).then(()=>{})//post方式
    this.$axios({
        method：'get/post',
        url:'请求的接口地址',
        parmas/data:{}//请求参数，具体以请求方式为准
    }).then(()=>{})//综合

echart：是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

/**使用方式*/
//1.通过npm包管理器安装
   npm install echarts --save
//2.在main.js中全局引入并添加到vue原型上
   import *as echarts from 'echarts'//引入
   Vue.prototype.$echarts = echarts//添加到原型
   this.$echarts.init(容器)//使用

富文本框（quill-editor）：是一种可内嵌于浏览器，所见即所得的文本编辑器

/**安装使用流程*/
//1.安装
    npm install quill --save
//2.main.js中全局引用
    import quillEditor from 'vue-quill-editor'
//3.使用
     <el-form-item label="文章正文：" class="elfrom">
         <quill-editor ref="text" v-model="quilleditor" class="myQuillEditor"></quill-editor>
     </el-form-item>

3.element ui的使用

/**在main.js中全局导入，在各个组件中按需使用*/
//1.安装
    npm install eiement-ui --save
//2.全局引入
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import '../src/assets/global.css'

类似于bootstrap、layui等ui框架一样，在使用时需要翻阅官方的API文档，找到需要的代码块，使用cv大法将自己所需要的相关组件模块引入到自己的项目中。值得注意的是，在使用时建议大家一定要去看每一个组件的属性及方法介绍，只是这样才能快速上手此框架，不懂属性和方法的应用，建议及时百度。

具体使用就是数据的增删改查和各个组件的使用。

诸如表格、弹窗这样需要复用的公共模块，封装成一个公共组件。