bootstrapTable

开始准备

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
</head>
<body>
  <h4>bootstrap-table</h4>

  <script src="../plugin/jquery/jquery-3.2.0.js"></script>
  <script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
  <script>
  </script>
</body>
</html>

more >>

edmcquestion

  • 参数解构
actions: {
        increment (context) {
      context.commit('increment')
    }
  }
//解构后
actions: {
      increment ({ commit }) {
    commit('increment')
      }
}

Q:变量的解构赋值

  • actions中对象形式分发失败

    actions: {
        reduce(state) {
          // setTimeout(()=>{
          //   state.commit('incrementpayload');
          // },20)
        },
        reduceobj(state, payload) {
          state.count += 2;//???该方法执行失败
          // state.commit('incrementpayload');
        }
      }
    

Q:action必须配合mutations一起使用吗

  • 对象解构的嵌套结构对象

    let obj = {
      p: [
        'Hello',
        { y: 'World' }
      ]
    };
    
    let { p, p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"
    p // ["Hello", {y: "World"}]
    

Q:应该只有一个p变量对象,第2个应该为undefined。
A:应该是变量重复赋值

  • 函数参数的解构

action函数接收一个
actions: {
increment (context) {
context.commit(‘increment’)
}
}
//参数解构方式
actions: {
increment ({ commit }) {
commit(‘increment’)
}
}

Q:不明白参数解构方式
A:对象解构的转换

const context = {commit:function(){}}
const { commit } = { commit:function(){}}
commit = function(){}

context = {commit};
commit('fn')
  • action中多个参数

action中使用参数解构,代码如下

getList({commit,dispatch},value) {
    //获取
      ajax.get('stationMonitor/queryAll')()(res => {
        commit('showData',res);
      });

Q:this.$store.dispatch(type:’getList’,{参数}) 如果采用mapActions,直接调用this.getList(),这儿的参数该怎么传呢?、

表单中常用正则表达式

完整参考

  • 只能输入数字

    <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
    
    function sortEdit(value) {
          var reg = /^[1-9]\d*$/;
          if (reg.test(value)) {
              return value;
          } else {
              return '';
          }
      }
      <input onkeyup="value=sortEdit(value)" type="text" class="form-control" value="2">
    

css布局——水平垂直居中

方法一:display:table和display:table-cell实现多行文本垂直居中

单行文本垂直居中我们会用line-height,而多行文本垂直水平居中刚如何实现呢?

效果如下

css+html

//父容器和子容器定义样式

.box {
    display: table;
    height: 300px;
    padding: 15px;
    background-color: paleturquoise;
    width: 100%;
}

.introduce {
    display: table-cell;
    vertical-align: middle;
}

//html结构

 <div class='box'>
    <div class='introduce'>
        <p>你来自哪里</p>
        <p>你来自哪里</p>
        <p>你来自哪里</p>
    </div>
</div>

#

webpack

  1. 创建文件夹初始化并安装webpack

    mkdir project
    npm init
    npm install webpack --save-dev
    

// module.exports = {
// entry:’./app.js’,
// output:{
// filename:’bundle.js’
// }
// };

/**

  • 入口 entry
  • */
    //单个入口的简写
    // const config = {
    // entry:’./app.js’
    // }

    //单个入口语法完整写法
    // const config = {
    // entry:{
    // main:’./app.js’
    // }
    // }
    //多个入口(对象语法)
    // const config = {
    // entry:{
    // app:’/app.js’,
    // pageone:’/pageone.js’
    // }
    // }
    // module.exports = config;

/**

  • 输出 output
  • ps:即使多个入口起点,但只指定一个输出配置
  • 值为一个对象:filename(输出文件的文件名)+path(目标输出目录的绝对路径)
  • /
    // const config = {
    // output:{
    // filename:’bundle.js’,
    // path:’/webpack’
    // }
    // }
    // module.exports = config;
    /*
  • loader
  • webpack处理css文件或者将typescript转为javascript,首先安装相对应的loader
  • npm install –save-dev css-loader
  • npm install –save-dev ts-loader
  • 然后指示webpack对每个d.css使用css-loader,对所有的.ts文件使用ts-loader
    */
    // module.exports= {
    // module:{
    // rules:[
    // {test:/.css$/,use:’css-loader’},
    // {test:/.ts$/,use:’ts-loader’}
    // ]
    // }
    // }

/**

  • 插件是webpack的支柱功能
    /
    /*
  • 源代码(/src):书写和编辑的代码
  • 分发代码(/dist):构建过程产生的代码最小化和优化后的输出目录
    */

使用express框架搭建简单服务器

gitbub项目地址

开发前准备:安装node.js

安装

创建文件,并安装express模块

$ mkdir wechat 创建wechat文件
$ cd wechat

$ npm init package.json 文件(存储module模块记录)

$ npm install express --save 安装express并保存到依赖列表中

创建好后目录结构如下

简单实例 (应用级中间件)

启动一个服务器,并监听端口3000进入连接请求。

app.js代码如下:

var express = require("express");
var app = express();

//app.use(express.static('web'));//静态文件的目录作为参数传递给express.static中间件 就可以访问静态资源的访问

/**
 * 增加虚拟路径时,静态页面可以正常访问,当页面增加虚拟路径时,请求链接不变
 */
app.use("/index",express.static('web'));


//含有字符串 a 的路由,结果返回字符串
 app.get(/a/,function(req,res,next){
    console.log("response will be send by next function");
    next();
 },function(req,res){ 
     res.send("这是关于首页的介绍");
 });

 /**
  * 应用级中间件绑定到app对象使用 app.use()和app.METHOD()
  * METHOD需要处理http请求的方法:get post put等
  */

//没有挂载的中间件,应用的每个请求都会执行该中间件。
app.use(function (req, res, next) {
    console.log('Time:', Date.now());
    next();
});

/**
 * app.all() 是一个特殊的路由方法,没有任何 HTTP 方法与其对应,它的作用是对于一个路径上的所有请求加载中间件。
 */
app.all('/allmethod', function (req, res) {
    res.send("all路由方法测试");
});

//接口返回json格式  结果封装处理result();
function result(obj,msg,status){
    return {
        data: obj,
        status: status,
        msg: msg
    }
};
app.post("/indexuser",function(req,res){
    var obj = result({
        user: "pauline",
        age: "18",
        sex: "女",
        intro: "web开发"
    },
    0,
    "访问成功"
    )
    res.json(obj);
 });

 /**
  * get请求带参数name
  */
 app.get('/updata',function(req,res){
     res.send(req.params.name);  //暂不明白
 })

/**
 * app.route() 创建路由路径的链式路由句柄
 */
app.route('/book')
.get(function(req,res){
    res.send('这是get请求');
})
.post(function(req,res){
    res.send('这是post请求');
})



var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
}) 

index.html js代码如下

<script>
        $.post({
            url: "/indexuser",
            success: function (res) {
                console.log(res);
                //返回以下json对象
                // {
                //     data: {
                //         user: "pauline",
                //         age: "18",
                //         sex: "女",
                //         intro: "web开发"
                //     },
                //     status:0,
                //     msg:'访问成功'
                // }
            }
        })

        /**
         * app.route() 创建路由路径的链式路由句柄
         * 
        */
        $.get({
            url: '/book',
            success: function (res) {
                console.log(res);//这是get请求
            }
        });
        $.post({
            url: '/book',
            success: function (res) {
                console.log(res);//这是get请求
            }
        });
        /**
         * 带参数name的get请求
        */
         $.get({
             url:'/updata',
             data:{
                 name:'pauline'
             },
             success:function(res){
                 console.log(`${res}这是get带参数返回结果`);
             }
         })

    </script>

启动服务器

$ node app.js    

因为增加了虚拟路劲,所以直接访问以下路劲即可:
浏览器中访问该路径即可访问:http://localhost:端口号/page/test.html

路由级中间件

birds.js 代码如下:

/**
 * express.Router
 */
var express = require("express");
var app = express();

app.use("/static", express.static('web')); //express.static  是express唯一内置的中间件,负责在express中托管静态资源

/**
 * 错误处理中间件
 */
app.use(function(err,req,res,next){
    console.log(err.stack);
    res.status(500).send('内部错误');
})
/**
 * 创建一个路由模块
 */
var express = require ('express');
var router = express.Router(); //它是完整的中间件和路由系统,”mini-app“
/**
 * 加载路由级一个中间件
 */
router.use(function timelog(req,res,next){
    console.log('time:',Date.now());
    next();
})
/**
 * 定义一些路由,并且将他们挂载至应用路径上
 * 定义网站主页的路由
 */
router.get('/',function(req,res){
    res.send('获得菜单信息');
});
/**
 * 定义about页面的路由
 */
router.get('/about',function(req,res){
    res.send('获得介绍页信息');
})



module.exports = router;

//将路由挂载至应用
app.use('/',router);

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
}) 

至此,一个express搭建的后台服务器完毕

Object.prototype.toString.call()判断对象

判断数组还是对象

function isobjarr(value){
    if(Object.prototype.toString.call(value)=="[object Array]"){
        console.log("数组");
    }else if(Object.prototype.toString.call(value)=="[object Object]"){
        console.log("对象");
    }else{
        console.log("都不是");
    }
}

ps:千万不能使用typeof来判断对象和数组,因为这两种类型都会返回”object”。

more >>

问题汇总


原文地址

跨域问题

浏览器为了安全实施的同源策略导致的,同源:两个URL的域名、协议、端口要完全相同

解决方案:

script标签jsonp跨域、nginx反向代理、nodejs中间件代理跨域、后端在头部信息设置安全域名

  • JSONP
  • CORS
  • 服务端代理

JSONP的原理:

利用script标签支持跨域的属性,用script标签拿到包裹了数据的方法(相当于是返回了一段js代码),在请求中包含callback,服务端注入参数后返回这个回调函数,然后script标签拿到返回的js代码跨域直接运行回调,需要前后端的配合。

jsonp不可以用post请求,因为script标签只支持get请求。


more >>

小彭子 <br> 记性不太好的<br>前端开发妹子一枚 <br> 博客记录前端知识学习<br>笔记和平时生活七七八八