编程 – 第3页 – LuoYuankai

4月 13, 2020

mongoose

作者罗源凯在 Mongo, Nodejs, Vue 标签 Mongo

http://www.mongoosejs.net/

npm i mongoose

4月 12, 2020

koa

作者罗源凯在 Nodejs 标签 koa, nodejs

koa-generator

全局安装 npm install koa-generator -g
生成项目 koa2 server /koa2 -e server
Koa的参数
-h, --help 帮助
-V, --version 版本号
-e, --ejs 添加ejs模板引擎支持(默认是jade)
--hbs 添加hbs模板引擎支持(默认是hbs)
-H, --hogan 添加hogan.js支持
-c, --css <engine> 添加css样式 支持 less sass styus css(默认是css)
--git 添加 .gitignore
-f, --force force on non-empty directory

install dependencies:
     $ cd koa2ser && npm install
   run the app:
     $ DEBUG=koa2ser:* npm start

启动项目 npm run dev

koa2-cors
安装npm i koa2-cors –save

4月 10, 2020

better-scroll

作者罗源凯在 Vue

滚动组件
https://github.com/ustbhuangyi/better-scroll

4月 10, 2020

css

作者罗源凯在 Vue 标签 Css

CSS6：flex布局
https://cloud.tencent.com/developer/article/1354252
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://segmentfault.com/a/1190000016891326

4月 3, 2020

vue-awesome-swiper 轮播组件

作者罗源凯在 Vue 标签 Vue

https://www.npmjs.com/package/vue-awesome-swiper
https://www.swiper.com.cn/

4月 1, 2020

jpa sql

作者罗源凯在 Java, Mysql 标签 jpa

自定mysql
““
@Modifying
@Transactional
有修改数据不要忘记加上

@Query(value =”select product_at,GREATEST(max(p1),max(p2), as max from ks12p where product_plan_id=?1 group BY product_at”,nativeQuery = true)
List<Map<String,Object>> findByKsEveryDayMax(Long product_plan_id);

List<Map<String,Object>> productAtMaxes = ks12pDao.findByKsEveryDayMax(3L);
productAtMaxes.forEach(p -> {
System.out.println(“map.entrySet():”+p.entrySet());
Iterator<Map.Entry<String, Object>> iterator1 = p.entrySet().iterator();
while (iterator1.hasNext()){
System.out.println(“iterator1:”+iterator1.next());
}
});

@Query(value = “select new com.xx.xx.CarTraceResult(a.plateNo, a.plateColor, a.typeName, a.parkName, max(a.time), count(a.id)) ” +
” from CarTraceRecordEntity a where a.plateNo = ?1 and a.plateColor = ?2 ” +
“and a.type = ?3 group by a.parkNo order by time desc “)
List queryCarTraceRecord(String plateNo, Integer plateColor, Integer type);

public interface ProductAtDayMax {
LocalDate getProductAt();
BigDecimal getMax();
}

@Query(value ="select product_at,GREATEST(max(p1),max(p2), as max from ks12p where product_plan_id=?1 group BY product_at",nativeQuery = true)
List<ProductAtDayMax> findByKsEveryDayMax(Long product_plan_id);

List productAtMaxes = ks12pDao.findByKsEveryDayMax(3L);
productAtMaxes.forEach(productAtDayMax -> {
log.info(“[{}] [{}]”,productAtDayMax.getProduct_at(), productAtDayMax.getMax());
});
““`

3月 31, 2020

Sass

作者罗源凯在 Vue

sass.bootcss.com

3月 31, 2020

es6

作者罗源凯在 Vue

es6-features.org

3月 30, 2020

Vue to PDF

作者罗源凯在 Vue 标签 Pdf

使用html2canvas和jspdf 质量较差

（1）npm install –save html2canvas（将页面html转换成图片）
（2）npm install –save jspdf（将图片生成pdf）

1 ./util/htmlToPdf
// 导出页面为PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
export default {
    install (Vue, options) {
        Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
            var element = document.getElementById("pdfCentent")
            html2canvas(element, {
                logging: false
            }).then(function (canvas) {
                var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
                var ctx = canvas.getContext("2d")
                var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
                var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
                var renderedHeight = 0

                while (renderedHeight < canvas.height) {
                    var page = document.createElement("canvas")
                    page.width = canvas.width
                    page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页

                    // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
                    page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
                    pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距

                    renderedHeight += imgHeight
                    if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容，添加一个空页
                    // delete page;
                }
                pdf.save(htmlTitle + currentTime)
            })
        }
    }
}

2 main.js
import htmlToPdf from "./util/htmlToPdf"
Vue.use(htmlToPdf)

3 xxx.vue
<el-button type="danger" @click="ExportSavePdf(htmlTitle,nowTime)">导出PDF</el-button>
<div id="pdfCentent">pdf content</div>

export default {
        data() {
            return {
                        htmlTitle: "PDF名称",
                        nowTime: "",

使用window.print()方法

let handleWindowPrint = (ele, fileName, vm)=>{

    var oIframe = document.createElement('iframe');
    var oScript = document.createElement('script');

    document.body.appendChild(oIframe);

    var titleText = document.head.getElementsByTagName('title')[0].innerText;
    document.head.getElementsByTagName('title')[0].innerText = `${fileName}`;

    oIframe.contentDocument.head.innerHTML = `<meta charset="utf-8">
                                              <title>${fileName}</title>
                                              <meta name="format-detection" content="telephone=no">
                                              <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                                              <meta name="viewport" content="width=device-width,initial-scale=1.0">`;

    // oIframe.contentWindow.document.body.innerHTML = document.querySelector(ele).outerHTML;
    oIframe.contentDocument.body.innerHTML = document.querySelector(ele).outerHTML;
    oScript.innerHTML = 'window.print();';
    oIframe.contentDocument.body.appendChild(oScript);
    document.body.removeChild(oIframe);
    document.head.getElementsByTagName('title')[0].innerText = titleText;

};

export default {
    handleWindowPrint
}

用插件 vue-print-nb

https://github.com/Power-kxLee/vue-print-nb

第一步、安装
npm install vue-print-nb --save
第二步、在main.js中引用
    import Print from 'vue-print-nb'
    Vue.use(Print);
第三步、组件中使用
     <button v-print="printObj">Print local range</button>
      <div id="printMe" style="background:red;">
            <p>...</p>
        </div>
    export default {
        data() {
            return {
                printObj: {
                  id: "printMe",
                  popTitle: 'good print',
                  extraCss: 'https://www.google.com,https://www.google.com',
                  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
                }
            };
        }
    }

使用lodop实现打印

http://www.lodop.net/
改造LodopFuncs.js
//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){ …… }
//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT,oEMBED){ …… }

具体的调用页面

<el-button @click="printPdf" >打印</el-button>
    <div id="form1">...</div>
import {getLodop} from '../common/LodopFuncs'
......
    methods: {
      printPdf() {
        this.CreateOneFormPage();
//        LODOP.PRINT();
        LODOP.PREVIEW();
      },
      CreateOneFormPage() {
        LODOP = getLodop();
        LODOP.PRINT_INIT("订货单");
        LODOP.SET_PRINT_STYLE("FontSize", 18);
        LODOP.SET_PRINT_STYLE("Bold", 1);
        LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
        LODOP.ADD_PRINT_HTM(88, 200, 350, 600, 
                                       document.getElementById("form1").innerHTML);   

      },
    }
......
如何选择打印机
data() {
      return {
        printOptions: [],
        printValue: '-1'
      }
    },
....
getLodopData() {
        LODOP = getLodop();
        let arr = []
        let iPrinterCount = LODOP.GET_PRINTER_COUNT();
        for (let i = 0; i < iPrinterCount; i++) {
          arr.push({
            label: LODOP.GET_PRINTER_NAME(i),
            value: i
          })
        }
        let defaultName = LODOP.GET_PRINTER_NAME('-1')  //GET_PRINTER_NAME(intPrinterIndex);用序号获得打印机名，一般序号从0开始，-1特指默认打印机；
        arr.forEach(item => {
          if (item.label === defaultName) {
            item.value = '-1'
            item.label += '-默认打印机'
          }
        })
        console.log(defaultName)
        this.printOptions = arr
      }
打印时候只需指定打印机就行了，
LODOP.SET_PRINTER_INDEX(this.printValue)  // 按指定的打印机序号进行打印

分类目录编程

mongoose

Mac下Python环境搭建、多版本管理

koa

better-scroll

css

vue-awesome-swiper 轮播组件

jpa sql

Sass

es6

Vue to PDF

使用html2canvas和jspdf 质量较差

使用window.print()方法

用插件 vue-print-nb

使用lodop实现打印

2025年4月
一	二	三	四	五	六	日
	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