前端 项目总结

本来想每周写一篇博客的 然后国庆完 发现项目太赶了
于是就每天花了很多精力在项目上 周末就躺着 懒得动了。。。。。
这个项目名字叫 数据标准管理
是给一个研究所做后台管理用的 也算一个后台管理系统吧。
需求点有文档的上传 下载 文档中的标准 码表 模型的管理
树形目录 数据库的导入 标准码表的审核 还有就是登录 权限等
技术栈是前端vue+vuetify (感觉没elment-ui好用) 加 后端java springboot (后端小哥哥说的)
增删改查 占大部分 还有一点echarts的使用
好了 做了个项目还是要有点收获的。
言归正传 总结是为了更好的提升 将一些基础的东西 记牢固。

1.vue 的路由传参问题

vue的路由传参主要有三种方式 详情我就不说了 放个链接吧。
https://segmentfault.com/a/1190000012393587?utm_source=tag-newest
params   query 都可以 等等

```javascript
我用的是query
//申请按钮
    preapplication (item) {
      this.$router.push({
        name: 'standard-fileapplication',
        query: {
          id: item.file_id,
          name: item.file_name
        }
      })
    },
子组件的话 这样就可以接受并且使用了
this.$route.query.id       
this.$route.query.name

2.axios发送请求的几种参数格式

开发项目的时候 因为几个后台的参数格式没统一
耗费了一些无用的时间这里
1.JSON对象格式
有时候不用加这个请求头 也可以的 但是如果项目全局配置了表单格式的请求头的话
应该是要加这个请求头的

auditPass () {
      let data = this.obj
      data.isAuth = '1',
        data.authRemark = this.suggestion,
        this.axios.defaults.headers = {
          'Content-type': 'application/json'        }
      this.axios.post(
        '/stdglprj/newstandard/auditStandard', data
      ).then((res) => {
        this.auditDialog = false;
        this.selected = ''
        this.initialize();
      }).catch((error) => {
        this.showSnackbar("REST服务失败", "error")
      })
    },

2.表单格式
这是比较完整的 表单格式需要的配置
但在项目开发中 请求头是可以全局设置的
里面的qs 是需要在项目中去下载并且引入的

savemessageBtn () {
      let id = this.$route.query.id
      let category = this.category_id
      this.axios.defaults.headers = {
        'Content-type': 'application/x-www-form-urlencoded'      }
      this.axios.post(
        '/stdglprj/docmodel/fileapply',
        qs.stringify(
          {
            category_id: category,
            file_id: id
          }
        )
      ).then((res) => {
        this.showSnackbar(res.data.message, "success");
        this.$router.push({
          name: 'standard-fileupload',
        })
      }).catch((error) => {
        this.showSnackbar("申请失败,请检查是否选择目录", "error");
      })
    },

3.跨域问题

跨域问题真的是老生常谈的问题 几乎每个初学者都会碰到 都会问
但真正解决后 才发现 不是很难 百度一下也很多解决方式
我这个项目 开发环境的时候 主要是proxy代理解决
生产环境的时候 配置一下nginx就行了

贴一下我的解决方式吧
找到项目根目录下的 vue.config.js文件

devServer: {
    proxy: {
      '/ywsjglprj': {
        target: 'http://xxx.x.xxx.xxx:18443',
        changeOrigin: true
      },
      '/stdglprj': {
        target: 'http://xxx.x.xxx.xx:8080',
        changeOrigin: true
      },
      '/usmm': {
        target: 'http://xxx.x.xxx.xx:8288/',
        pathRewrite: { '^/usmm': '' }
        // changeOrigin: true
      }
    }
  }

注意配置完的时候 一定要重启项目 不然不会生效
配置完的时候 发送axios请求的时候 路径就可以用上面我axios发送请求的方式了

4.下载文件

有下载文件需求的时候 后端一般返回的是二进制文件流
网上也有好几种方式 不过当时项目比较赶 我就直接window.open 完事了。。。

download (ss) {
      let id = ss.file_id
      window.open("/stdglprj/docmodel/downloadfile/" + id)
    },

5.还遇到一些问题 后续再总结吧 先记着

周末玩的太嗨了 星期天晚上想着 趁着还没上班 赶紧总结一波
不然过段时间 忘了就不好了。。

1.表单 表格 的判空
2. 数据的处理 字符串,对象,数组的各种方法 等等 都是细节啊
做完这个项目最深的感受就是
前面的需求分析 开发文档 一定要做好 不然后期修改 麻烦死了
后台接受参数的数据格式 最好也统一一下
这是我第一个项目 应该算中小型项目吧 还是付出了很多心血的
感觉自己的能力也提升了很多 做事的能力 思考的能力 当然还有百度的能力

希望自己再接再励吧。 以这个项目为起点。