发表于

Vue路由使用以及参数传递

  • 安装

    • npm install vue-router

  • 简单操作使用

    1
    2
    3
    4
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

  • vue-router操作使用分解

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航，通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

  • 定义路由 每个路由即为一个组件

    1
    2
    3
    4
    const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]

  • 创建router实例

    1
    2
    3
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

  • 创建和挂载根实例

    1
    2
    3
    4
    const app = new Vue({
    　　el:'#app',
    　　router
    })

  • vue-router默认是hash模式,url:http://localhost:8000/#/hello
    如果想取消掉#,可以使用history模式，这样可以利用 history.pushState API完成url跳转无需重新加载页面

    1
    2
    3
    4
    const router = new VueRouter({
        mode: 'history',
        routes: [...]
    })

    那么url::http://localhost:8000/hello
    如果使用history模式,服务器端需要进行一些配置才可以,否则直接访问带参数的路由地址会返回404

    • 一些服务器端的配置

      • apache 需要修改配置
        在项目目录下新建.htaccess文件(跟index.html同级)

        1
        2
        3
        4
        5
        6
        7
        8
        <IfModule mod_rewrite.c>
            RewriteEngine On
            RewriteBase /ibms/
            RewriteRule ^index\.html$ - [L]
            RewriteCond %{REQUEST_FILENAME} !-f
            RewriteCond %{REQUEST_FILENAME} !-d
            RewriteRule . /ibms/index.html [L]
        </IfModule>

        记得重启apache服务器

      • nginx

        1
        2
        3
        location / {
            try_files $uri $uri/ /index.html;
        }

      • IIS服务器配置 注意:IIS需要安装重写工具

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        <?xml version="1.0" encoding="UTF-8"?>
        <configuration>
            <system.webServer>
                <rewrite>
                <rules>
                    <rule name="ReactRouter" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{HTTP_METHOD}" pattern="^GET$" />
                        <add input="{HTTP_ACCEPT}" pattern="^text/html" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                    </rule>
                </rules>
                </rewrite>
        </system.webServer>
        </configuration>

      为了防止404报错信息,可以在路由中配置

      1
      2
      3
      4
      5
      6
      const router = new VueRouter({
          mode: 'history',
          routes: [
              { path: '*', component: NotFoundComponent }
          ]
      })

  • 重定向和别名

    • 重定向通过 routes 配置来完成，下面例子是从 /a 重定向到 /b

      1
      2
      3
      4
      5
      const router = new VueRouter({
          routes: [
              { path: '/a', redirect: '/b' }
          ]
      })

      重定向的目标也可以是一个命名的路由：

      1
      2
      3
      4
      5
      const router = new VueRouter({
          routes: [
              { path: '/a', redirect: { name: 'foo' }}
          ]
      })

发表于

ES6基本语法[抄录]

  1. let

let作用域只限于当前代码块

1
2
3
4
{
    let a = 12;
}
console.log(a);  //报错啦

let声明的变量作用域不会被提升

1
2
3
4
{
    console.log(a);  //报错
    let a = 12;
}

在相同的作用域下不能声明相同的变量

1
2
3
4
{
  let a = 10;
  let a = 11;  //报错    
}

for循环体现let的父子作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//使用var声明，需要用到“闭包”
  var btns = document.querySelectorAll("button");
    for(var i=0;i<btns.length;i++){
    （function(i){
         btns[i].onclick= function (){
          alert("点击了"+i+"个按钮")
        }
    })(i);
  }
  
  //let声明
   let btns = document.querySelectorAll("button");
    for(let i=0;i<btns.length;i++){
        btns[i].onclick= function (){
          alert("点击了"+i+"个按钮")
        }
    }
  1. const

1 > const作用域只限于当前代码块

2 > const声明的变量作用域不会被提升

3 > 在相同的作用域下不能重复声明

4 > 声明的同时必须赋值，声明后值无法改变

1
2
3
4
5
6
7
{   
    const b; //报错
    
    const a = 123;
    a = 222; //报错
    
}
1
2
3
4
5
6
7
8
9
10
{
    const obj = {
        name:"lisi"
     }
    console.log(obj.name); //lisi
    
    obj.name = "joexin";
    console.log(obj.name);//joexin
}
//在上面中定义的是一个常量对象，对象是储存在内存的“堆区”，通过一个地址描述出来，在“栈区”关联此地址。所以，obj存储的是地址，而不是值，是可以做修改的。

发表于
GitHub访问速度满的解决方案

因为github是一个国外网站，所以访问速度有所缓慢，但是我们可以通过一些技术，让我们能友好的进行github访问操作。

首先点击以下的DNS解析地址

ipaddress

在这个地址上搜索 www.github.com
assets-cdn.github.com
github.global.ssl.fastly.net

然后在系统Hosts文件里新增以上地址搜索出的ip地址的内容

(windows系统是在，其他系统还没研究呢)一般Hosts文件是在系统盘的 C:\Windows\System32\drivers\etc 这个路径下

注意：打开系统hosts文件(需管理员权限)。
末尾添加三行(方便识别)

最后一步 刷新系统的DNS缓存

(系统管理员)打开系统命令行，运行 ipconfig /flushdns 手动刷新系统DNS缓存即可。

发表于

嗯，之前好些功能都废除 重新的修改了一下博客

发现一年比及一年写的少了

多敲敲了看来

发表于 
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
54
55
56
57
58
59
60
61
/**
 * 获取当前时间
 */
function getDate() {
    return new Date();
}
/**
 * 格式化当前时间
 * @param {*} value 
 */
function getFormatDate(value) {
    var date = new Date(value);
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    month = month < 9 ? '0'+ month : month
    var day = date.getDate();
    day = day < 9 ? '0'+ day : day
    var hours = date.getHours();
    hours = hours < 9 ? '0'+ hours : hours
    var minutes = date.getMinutes();
    minutes = minutes < 9 ? '0'+ minutes : minutes
    var seconds = date.getSeconds();
    seconds = seconds < 9 ? '0'+ seconds : seconds
    return year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ":" + seconds;
}
/**
 * 获取当月第一天
 */
function getFirstMonthday(){
    var date=new Date();
    var firstmonthday=date.setDate(1);
    return getFormatDate(firstmonthday);
}
/**
 * 日期比较大小(获取天数)
 */
function getDays(fday, tday) {
    var fday = new Date(fday);
    var tday = new Date(tday);
    var times = fday.getTime() - tday.getTime();
    var day = times / (1000 * 60 * 60 * 24);
    return parseInt(day)
}
/**
 * 判断是否为同一年
 */
function isSameYear(s, e) {
    var startyear = "", endyear = "";
    startyear = new Date(s).getFullYear();
    endyear = new Date(e).getFullYear();
    if (endyear != startyear) {
        return true;
    } else {
        return false;
    }
}

发表于

本地上传到github的步骤说明

第一步： 建立git仓库

git init

第二步： 将项目的所有文件添加到仓库中

git add .

如果想添加特定的文件，把.换成特定的文件名即可。

第三步： 将add 文件commint 到仓库中去

git commint -m ‘注释语句’

第四步：在github 上创建自己的repository
第五步：将本地的仓库关联到githhub上
第六步： 上传前，要记得pull 一下.

git pull origin master

第七步：上传代码到github远程仓库

git push -u origin master

执行完后，如果没有异常，等待执行完就上传成功了，中间可能会让你输入Username和Password，你只要输入github的账号和密码就行了

发表于

Js页面跳转的几种方式

第一种

1
2
3
<script language="javascript">
 	window.location.href='https://www.baidu.com'
</script>

第二种

1
2
3
<script language="javascript">
 	window.history.back(-1);
</script>

第三种

1
2
3
<script language="javascript">
 	window.navigate("top.jsp");
</script>

这种只支持IE浏览器

第四种

1
2
3
<script language="javascript">
 	self.location='top.htm';
</script>

第五种

1
2
3
<script language="javascript">
 	top.location='xx.jsp';
</script>

发表于

导语

Markdown 是一种轻量级的「标记语言」。

Markdown 语法的规则

标题

一级标题

二级标题

三级标题

以此类推，总共六级标题。

列表

列表一般有两种格式(无序列表和有序列表)

无序列表

  • 1
  • 2
  • 3

有序列表

  1. 1
  2. 2
  3. 3

引用

这是一个引用

图片与链接

图片的格式为: {ImgCap}{/ImgCap}

链接的格式为:

插入链接 hao123

插入图片 Mou icon

粗体与斜体

粗体的语法 **两个包含一段文本

斜体的语法 *一个包含一段文本

例如: 这是粗体的 这是斜体的

表格

表格语法

| Tables | Are | Cool |

| ————- |:————-:| —–:|

| col 3 is | right-aligned | $1600 |

| col 2 is | centered | $12 |

| zebra stripes | are neat | $1 |

例如

编号 姓名 成绩
01 张三 100
02 李四 80
03 赵龙 66

代码框

语法规则：``两个包裹起来

console.log("Hello,world!")

分割线

分割线的语法只需要另起一行，连续输入三个星号 * 即可。

例如

小结

Markdown 的语法还得多练习，可能还有我不知道的语法，日常使用在记录学习。

发表于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment