VUE开发笔记

1、GET单个参数请求示例

//跨域配置代码段
proxyTable: {
      "/apis": {
        target: "http://pv.sohu.com",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/apis": ""
        }
      },
      "/api": {
        target: "http://localhost:9001/api",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/"
        },
      },

    },

//vue.js代码片段
agetClick(){
  let paramss= {  
            count: 100
        }
      axios
        .get("api/Visit/RequestGET", {paramss}, {
              timeout: 1000
            })
        .then(res => {
          this.$message({
              message: res,
              type: "success"
            });
        })
        .catch(ex => {
          /*
          if ((ex.data.ErrMsg == null) | (res.ErrMsg == "")) {
            res.ErrMsg = "发送失败";
          }*/
          this.$message({
            message:"异常信息",
            type: "error"
          });
        });     
      },

2、POST请求

      //混合参数请求
      let para = [
        {
          TaskNo: getGuidGenerator(),
          Params: [{ Name: "wait_state", Value: "2" }]
        }
      ];

      // "继续下送货任务
      axios
      .post("http://10.177.104.69:9999/api/fms/addTask", para)

//单个实体类型参数请求示例
agetClick(){
        let visit = {
        id: 0,
        cip: "192.168.5.999",
        cid: 320500,  
        cname: "江苏省苏州市",
        updatetime: "2016-6-6",
        amount: 1,
        equipment: "Goole Chrome",
        system: "Windows10",
        }
      axios
        .post("api/Visit/SetVisit", visit)
        .then(res => {
          this.$message({
              message: res.data,
              type: "success"
            });
        })
        .catch(ex => {
          this.$message({
            message:"异常信息",
            type: "error"
          });
        });     
      },

3、vue定义全局变量和全局方法【https://segmentfault.com/a/1190000015842187】

4、统计网站访问IP信息【https://www.cnblogs.com/JimShi/p/11302384.html】

5、统计网站页面访问量、vue项目中统计页面访问量PV UV【https://www.jianshu.com/p/395650e6b5b2】

6、VUE使用svg【https://zhuanlan.zhihu.com/p/158743768】

7、

①VUE前端框架开源项目案例vue-element-admin【https://panjiachen.github.io/vue-element-admin-site/zh/】

主页介绍 | vue-element-admin (gitee.io)【https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/】

登录主页【https://panjiachen.gitee.io/vue-element-admin/#/dashboard】

各个版本源码

• 集成方案: vue-element-admin【https://github.com/PanJiaChen/vue-element-admin】
• 基础模板: vue-admin-template【https://github.com/PanJiaChen/vue-admin-template】
• 桌面终端: electron-vue-admin【https://github.com/PanJiaChen/electron-vue-admin】
• Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
• Others: awesome-project【https://github.com/PanJiaChen/vue-element-admin/issues/2312】

vue-admin-template学习-1【https://blog.csdn.net/qq_32015565/article/details/107944603】

vue-admin-template学习-2【https://blog.csdn.net/qq_32015565/article/details/108313363】

vue-element-admin相关文档-1【https://juejin.cn/post/6844903476661583880】

②VUE前端框架开源项目案例MyAdmin【http://8.129.86.120/】账户：admin 密码：123456

MyAdmin介绍主页【https://github.com/cdfan/my-admin】

个人博客主页项目介绍【https://blog.csdn.net/f4112cd/article/details/104251746?spm=1001.2014.3001.5501】

GitHub地址【https://github.com/cdfan/my-admin】

Gitee地址【https://gitee.com/cdfan/my-admin】

③VUE前端框架开源项目案例介绍EL-ADMIN【https://github.com/elunez/eladmin】

体验主页【https://el-admin.xin】 账户密码：admin / 123456

GitHub地址【https://github.com/elunez/eladmin】

Gitee地址【https://gitee.com/elunez/eladmin-web】

8、json集合操作

var codeinfo = this.liness.find((element) => (element.key == item.id)); //根据key值获取id

var codeinfos=this.locations.map((element) => (element.line == codeinfo.id)); //根据获取到的id得到集合(无法获取，只能获取到该列的集合)

var sss = this.locations.map(x => { return x.line }); //获取该列的集合

var data= datas.filter(function(item){ //根据某一列的数据获取到集合
    return item.bianma == "12"; 
})

9、json排序【https://www.cnblogs.com/z45281625/p/11713749.html】【https://blog.csdn.net/mxt123456/article/details/61425056】【https://www.cnblogs.com/z45281625/p/11713749.html】

javascript排序【https://blog.csdn.net/mxt123456/article/details/61425056】

var wholestory = this.locations.filter(function(item){ //始末点
    return item.dot == 0;
});

wholestory.sort(function(x,y){ //排序
    return x.order-y.order
});

10、json集合、js去除重复数据【https://www.cnblogs.com/qiyc/p/9175515.html】【https://blog.csdn.net/qiuqiang748/article/details/83375482】

linking:[
                    { id:1, order:1, x:50, y:50, line:1, link:0, dot:0, key:"Build0anchor" + "4422", remarks:"", },
                    { id:2, order:2, x:50, y:300, line:1, link:0, dot:1, key:"Point0anchor1"+ "4422", remarks:"" },
                    { id:3, order:3, x:212, y:256, line:1, link:0, dot:1, key:"Point0anchor2"+ "4422", remarks:"" },
                    { id:4, order:4, x:350, y:160, line:1, link:1, dot:2, key:"Build0anchor_end"+ "4422", remarks:"" },
                    { id:5, order:4, x:350, y:160, line:2, link:1, dot:2, key:"Build0anchor_end"+ "4422", remarks:"" },
                    { id:6, order:5, x:450, y:100, line:2, link:0, dot:1, key:"Point1anchor1"+ "44122", remarks:"" },
                    { id:7, order:6, x:600, y:100, line:2, link:0, dot:1, key:"Point1anchor2"+ "44122", remarks:"" },
                    { id:8, order:7, x:455, y:366, line:2, link:0, dot:0, key:"Build1anchor_end"+ "44122", remarks:"" }],

for (let i = 0; i < linking.length; i++) { //去除重复数据
    for (let j = i + 1; j < linking.length;) {
        if (linking[i].x == linking[j].x && linking[i].y == linking[j].y ) {
            linking.splice(j, 1)
        } else j++
    }
}

12、根据数组对象的某个属性值找到指定的元素【https://www.cnblogs.com/zhangq/p/11319433.html】

13、Vue动态更改/设置元素样式【https://blog.csdn.net/weixin_44076273/article/details/106555563】

14、vue中created与mounted的区别【https://www.cnblogs.com/dehuachenyunfei/p/11811969.html】

15、打包命令：cnpm run build:prod

16、启动命令：cnpm run dev