wj中期总结

Posted 2022-12-08 haliofwu

1. canvas
   上传图片到canvas，并可对其进行放大缩小，移动等；
   需要注意的是，当同一个页面有多个canvas,鼠标在canvas上的图片时进行缩放，此时如果不做特别说明，将会对所有canvas中的图片进行缩放。

2. 轮播
   改成自己需要的轮播样式；

3. 前端图片下载

4. 前端文件上传

5. semantic modal 关闭，进入其他route再返回时，出现多个modal 的解决方法，监听每一个controller，在controller消失的时候，$(‘.ui.modal’).remove()

6. semantic dropdown 或则其他组件出现点击或者hover突变，一般是初始位置和active的位置设置不同导致的。更改semantic的css，找到原始的css，将其覆盖掉。

7. 渐变色

8. 阴影的妙用
9. 动画

10. z-index 失效 z-index有效的情况

11. 图片预加载

12. 图片上的信息，一般是通过绝对定位，将展示操作或者信息的div放在图片上即可。

13. 前后联调出现的巨坑

service.login = function(params,cb)
// 

    $http(

        method: 'POST',
        url: '/api/v1/login',
        headers: 
            "Content-Type": "application/json"
      ,
        data: params

      ).then(function(res) 

            console.log("right",res)
         cb(res);

        , function(res) 
            console.log("error",res)
            cb(res);

        );


  return service;
);

用nodejs作为中间层。为了避免cors ，使用http-proxy-middleware来映射请求：

var proxy = require('http-proxy-middleware');

app.use('/api/v1', proxy(target: 'http://172.0.10.154:9091'));

但是无论如何请求报错，请求甚至都无法达到后端。查了无数资料没有结果。同事帮查：
error:

SyntaxError: Unexpected token u
    at parse (/home/likewise-open/SENSETIME/liulin/szwj/node_modules/body-parser/lib/types/json.js:83:15)
    at /home/likewise-open/SENSETIME/liulin/szwj/node_modules/body-parser/lib/read.js:116:18
    at invokeCallback (/home/likewise-open/SENSETIME/liulin/szwj/node_modules/raw-body/index.js:262:16)
    at done (/home/likewise-open/SENSETIME/liulin/szwj/node_modules/raw-body/index.js:251:7)
    at IncomingMessage.onEnd (/home/likewise-open/SENSETIME/liulin/szwj/node_modules/raw-body/index.js:307:7)
    at emitNone (events.js:106:13)
    at IncomingMessage.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1056:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

同事提示可能是json解析的错误。无数次将$http.post(data:json.stringify(param))，仍然报各种奇怪的错误。
同事在本地发送请求

 curl -H'content-type: application/json' -X POST "http://172.20.4.154:9090/api/v1/login" -d '"user_name": "张×官", "password": "123456"'

结果是正确的。——提示需要在$http中设置header

headers: 
            "Content-Type": "application/json"
      ,

为避免nodejs解析干扰，去掉了bodyparse；

发现消息已经可以发送到后端，但是是urlencode的格式，后端无法解析。后发现：

$http(

        method: 'POST',
        url: '/api/v1/login',
        headers: 
            "Content-Type": "application/json"
      ,
        data: JSON.strigify(params)

      ).then(function(res) 

            console.log("right",res)
         cb(res);

        , function(res) 
            console.log("error",res)
            cb(res);

        );


  return service;
);

则无法解析，换成：

service.login = function(params,cb)
// 
    var paramstr = JSON.stringify(params)
    $http(

        method: 'POST',
        url: '/api/v1/login',
        headers: 
            "Content-Type": "application/json"
      ,
        data: paramstr

      ).then(function(res) 

            console.log("right",res)
         cb(res);

        , function(res) 
            console.log("error",res)
            cb(res);

        );


  return service;
);

则可正常解析！

巨坑啊坑啊。
我想之前jupyter的调用也可能跟这个有关;

以前写过一篇文章用于说明，如何解决用户不登录直接发起请求。当时想法是在router这个地方做一个拦截器。其实现在才知道，前端框架一般都有自己的拦截器。那么，现在不通过router如何来做这个呢？

登录之后，后端response set-cookie token。这个token ,我试图拿出来，查了资料，貌似是说不能拿。也没关系，只要在拦截器中，开启每次请求，必须验证请求头中是否有token就可以了。

config(['$httpProvider', function($httpProvider) 
    $httpProvider.defaults.withCredentials = true;
  ])

因为res 已经设置了header中的cookie，cookie里有token，所以，只要登录成功，请求中就会带token.当然，这种情况是不考虑tonken过期的。

15.一个元素hover改变另一个元素的样式；
16.使用semantic 样式，semantic的css中使用了：

@import url(‘https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin‘);
这导致在离线状态下无法使用。解决方法：下载该文件，命名为font.css。最好是跟引用的semantic.css同一个目录