VUE项目总结

VUE项目总结

这个每时每课的项目，用了有一个星期左右来完成的，包括了页面的布局还有功能的实现整体来说，自己功能还是有点欠缺的，不完善的功能自己下去还有继续完善以下，现在就对这个项目进行总结。

首先这个项目是一个在线教育的项目类型，主要做的还是在线视频回放生成的一些效果，包括了搜索，关注，收藏，刷题的功能，自己功能未完善的也就是刷题后的解析页面，

做项目时问题是必不可免的，在这个项目中自己主要遇到的问题就是刷题后的提交刷题信息到服务器时会出现一个问题----参数传参不正确，因为在要求的参数中传递的是一个数组，而我把问题想的简单化了 放置了一个数组，数组中追加对象，发现这个方法不可行，虽然返回了结果的ID但是这个id不能拿到正确信息这个问题请教了同学和同学，和同学一起解决的具体解决方案

      this.sublist[id] = { user_answer: ansid, report_type: 1 };

这里涉及了刷题后要进行上一题时要去除重复值，但是这里是对象，对象的属性名相等时再次更改就会进行替换所以这里就自动进行了去重

还有就是svg的一个插件，也是自己在网上进行查到的，发现那个插件也是挺方便，可以把svg的属性进行修改很nice

1、安装

npm install vue-svg-icon --save-dev
1

2、在项目的 main.js 入口引入 vue-svg-icon 以便全局调用：

import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon); 
12

3、将 svg 图标文件放入 src/svg/

图标文件可以到 iconfont 上下载

4、在组件中按需加载需要的图标

例如 pen.svg 放到了 /src/svg 目录中，在 vue 组件按需加载：

<template> 
  <icon name="pen" scale="1" class="home"></icon> 
</template>
123

这里可以通过修改 scale 属性值或在使用的页面中修改 svg 样式来调整图标大小

这个项目中也用到了以前没用得到vant的触底加载这个组件

自己上vant官网进行了学习把那个组件用到了自己的项目中

list组件

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
></van-list>

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};

还有全新的a’pi封装方法，让网络请求模块更加的简单方便，首先网络请求的三个文件

api.js 主要就是配置参数，请求方式还有二级api地址的

import request from './request'
//获取banner头
export function banner() {
    return request({
        url: "/banner",
        method: "GET"
    })
}

env.js配置的是项目的开发环境

export default {
    //开发环境
    dev: {
      baseUrl: "https://localhost:8080"
    },
    //测试环境
    test: {
      baseUrl: "https://test.365msmk.com"
    },
    //生产环境
    prod: {
      baseUrl: "https://www.365msmk.com"
    }
  };
  

request.js里面配置的就是请求模块的核心，包含了一级api的地址，请求头的设置等

//引入axios
import axios from "axios"
import { Toast } from 'vant';
//设置专属域名
const vipUrl = "/api/app/"
//设置公共域名
const env = require("../http/env")
const Url = env.default.prod.baseUrl
//创建一个axios请求
const service = axios.create({
    baseURL: Url + vipUrl,
})
//设置请求拦截
let login = null;
service.interceptors.request.use(
    config => {
	//设置的是请求中的加载
      login = Toast.loading({
            message: '加载中...',
            forbidClick: true,
          });


        //设置请求头
        let token = localStorage.token
        if (token) {
            config.headers["authorization"] = JSON.parse(token)
        }
        config.headers["deviceType"] = "H5";
        return config;
    },
)

//设置相应拦截
service.interceptors.response.use(
    response => {
    //提示加载成功
        Toast.success({duration:500});
        //根据状态码返回不同处理
        return response;
    },
)


export default service;

总的来说这个项目自己还是学到了而很多的东西vuex数据持久化，moment日期插件的安装和使用，过滤器的封装vant的样式穿透等。。。。。

这个项目也不能说是自己独立开发的因为项目中的很多地方都是同学钻研后讲给我们的，也有同学和我一起去解决的问题，这个项目是在同学，老师帮助下完成的，自己和同学解决问题的时候也是学到了很多的知识，下一个项目再接再厉 争取做到更好更完美