0%

项目介绍

这是一个基于vue和ant-design-vue实现的表单设计器,主要功能是可以通过拖拽生成表单,最后能导出相应的json数据,并且能通过导出的json数据构建成表单

阅读全文 »

vue事件修饰符

  • stop 禁止冒泡
  • once 只触发一次,单次事件
  • prevent 组件默认事件
  • native 启用原生事件(组件)
  • keycode|name 筛选按键
  • self
  • capture
阅读全文 »

koa 使用

  • 首先需要初始化一个项目

    1
    npm init
  • 然后安装 koa

    1
    npm install koa -D
  • 新建一个server.js

  • 引入koa及koa路由

    1
    2
    const koa = require("koa");
    const Router = require("koa-router");
  • 使用koa类

    1
    let server = new koa();
  • 监听8080端口号

    1
    server.listen(8080);
  • 使用koa路由类

    1
    let router = new Router();
  • 添加一个路由

    1
    2
    3
    4
    5
    6
    7
    router.get("/login", async ctx => {
    if (!ctx.query.user || !ctx.query.pass) {
    ctx.throw(400, "user and password is required");
    } else {
    ctx.body = "成功";
    }
    });
  • 将路由添加到server上

    1
    server.use(router.routes());
阅读全文 »

koa服务器渲染

服务器渲染 pug/ejs

  1. 安全性
  2. SEO

客户端渲染 Vue/React

  1. 节约流量
  2. 用户体验

服务端 – 模板引擎
pug(jade) 侵入式

阅读全文 »

为何搭建博客

在2017年年底时,我就准备搭建一个博客,主要是作为一个vue实战项目练手(刚好学习了vue)以及作为实习面试的作品,然后利用业余时间完成自己一个版的博客,部署到了阿里云上面

阅读全文 »

数据通信

  1. 用库axios
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    import axios from 'axios'

    // 新建一个axios实例,统一处理
    // let axios = Axios.create({
    // transformRequest:[
    // function (data){
    // return data
    // }
    // ]
    // })

    export default {
    name:'axiosDemo',
    data(){
    return {
    name:''
    }
    },
    async create(){
    let { data } = await axios.get('./get/demo.json')
    this.name = data.name
    }
    }
  2. 原生fetch
    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
    export default {
    name:'fetchDemo',
    data(){
    return {
    name:''
    }
    },
    async create(){
    // get
    let res = await fetch('./get/demo.json')
    let data = await res.json()
    this.name = data.name

    // post
    let formData = new FormData()
    formData.append('a',123)
    formData.append('b',88)

    let res = await fetch('./post/demo.json', {
    method: 'post',
    body: formData
    })
    let data = await res.json()
    this.name = data.name
    }
    }
阅读全文 »