several simple ways of Cinema4D UV map

 I’m a programmer and need to make some simple 3D model to showing in web,such as iot-visualization-examples.UV map is one of the most important for making 3D model.There are so many relative tutorial on YouTube.However,some ways is so complex while I just want to map a simple model.There are so many things can make just by box model mapping with relative picture.

阅读全文

canvas:两图片切换的渐变效果

效果及代码

 canvas两图片切换的渐变效果如下:
canvas两图片切换的渐变

阅读全文

部署parse dashboard 的问题排查记录

 申请了HTPPS证书后,使用Nginx反向代理parse server与parse dashboard,parse dashboard按照文档配置了parse-dashboard-config.json,发现登陆parse dashboard成功后,仍然显示为无应用数据。在之前测试国,dashboard使用dev模式时,免账号密码登陆时是能正常显示应用数据,所以判断应该是某个环节出了问题所导致了。使用开发者工具打开控制台,报出了一条错误:[Error](https://parse.scaugreen.cn/parse-dashboard-config.json 404 (Not Found)),很显然是由于无法正常读取parse-dashboard-config.json所导致的问题。
 当时我的Nginx.conf配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
server {
listen 443;
server_name parse.scaugreen.cn;
# 访问记录,mylog是我自定义的日志格式。
access_log /var/log/Nginx/parse.log mylog;
ssl on;
ssl_certificate 1_parse.scaugreen.cn_bundle.crt;
ssl_certificate_key 2_parse.scaugreen.cn.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;

# parse-dashboard
location / {
proxy_pass http://localhost:4040;
}

# parse-server
location /parse {
proxy_pass http://localhost:1337/parse;
}

# WebSocket 配置
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}

阅读全文

3D温场效果

效果

 19年国庆节七天假里,花了两三天的时间去尝试研究一直没时间解决的3D温场问题,最终取得了一些效果:
3D温场
 具体完整代码与访问链接可看项目:https://github.com/alwxkxk/iot-visualization-examples

阅读全文

NodeJs搭建简易mock-server

 最近在工作中开发前端时,后端经常修改代码与数据表导致部分接口异常,而项目框架自带的mock.js由于是改写了XMLHttpRequest变成MockXMLHttpRequest导致很多异常(会导致很多第三方库出现问题,特别是加载文件这一块)。部分接口时常抽风,反复等待了几次感觉浪费太多时间,对我的开发进度不利,网上简单试了几个也不太好用,于是想折腾出mock-server。
 我的需求很简单,就是mock部分接口,没有设置mock的接口正常调用。
 当配置了mock的接口,就响应mock数据(图片来源于mock-server,这个工具符合需求,有nodejs模块,但折腾了几下也无法正常使用。):

 没有配置mock的接口,就跳转至后端正常访问:

 网上说用Express框架自己搭就行了,但没有相关代码,我简单折腾了几下还真折腾出来了。

1
2
3
4
5
6
7
8
# 创建项目
yarn init
# 安装express 框架 与 代理模块
yarn add express express-http-proxy

# 如果不使用yarn 而是使用npm ,则是:
# npm init
# npm install express express-http-proxy

  将前端的请求都改指向本地mock-server服务器(如const request= axios.create({baseURL: 'http://127.0.0.1:3000/proxy'),mock-server代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var express = require('express');
var proxy = require('express-http-proxy');
var app = express();

var url = 'www.host.com:port/api'; // 后端接口网址

// 处理跨域
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "*");// 允许任意头部信息
res.header("Access-Control-Request-Method", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Credentials", "true");
next();
});
// 所有因为跨域而发起的 options请求直接响应200
app.options('*',function (req,res) {
console.log('mock options',req.originalUrl)
res.send({msg:'mock-server:模拟数据'})
})
// 代理部分请求
app.post('/proxy/user/login', function (req, res) {
console.log('post /proxy/user/login')
res.send({
code: 200,
data: 'token string',
msg: 'mock-server:模拟数据'
})
});

app.get('/proxy/user/info', function (req, res) {
console.log('post /proxy/user/info')
const obj = {
code: 200,
data: {name:'GoGo'},
msg: 'mock-server:模拟数据'
}
res.send(obj);
});

// 其他代理 走proxy forward 到 后端接口
app.use('/proxy', proxy(url,{
proxyReqOptDecorator:(proxyReqOpts, originalReq)=>{
// 打印出 正在代理转发的请求
console.log('proxy ',originalReq.originalUrl)
return proxyReqOpts;
}
}));

app.listen(3000, function () {
console.log('mock-server listening on port 3000!');
});


  运行上面的mock-server代码,就会mock 所有options请求以及 POST /proxy/user/loginGET /proxy/user/info这两个接口,其它请求都会正常请求后端接口(www.host.com:port/api)。
  利用以下SQL语句,从数据库里直接拿数据生成JSON,再放到mock-server代码里mock出数据来:(使用mysql图形化客户时,点击查询,然后执行SQL命令,复制出来就能当数据。)

阅读全文