今天在配置Vue的路由的时候，在router的index.js中配置了如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/components/home/Home'
import Tree from '@/pages/components/tree/Tree'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/tree',
      name: 'Tree',
      component: Tree
    }
  ]
})

但是却在启动项目的时候，输入URL:localhost:8080/tree无法实现跳转，后来发现是在App.vue中没有设置<router-view>,最后加上去即可。

例如在App.vue中配置了一个<router-view>，输入URL:localhost:8080/tree就会跳转到了Tree.vue。
那假设在Tree.vue中再配置配置一个<router-view>，这时候就会匹配的是localhost:8080/tree/XXX,当然也可以直接用<router-link>跳转到指定的组件中

首先页面代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id='div1'>
    <div id='div2'>
        <div id='div3'>
            <div id='div4'>

            </div>

        </div>

    </div>
    <div id='div22'>
    </div>
</div>

<style>
#div1{
    width: 700px;
    height: 700px;
    background: red;
    margin-top: 50px;
    margin-left: 50px;
}
</style>

relative和absolute

relative单独使用，代码如下

1
2
3
4
5
6
7
8
9
10
11

#div2{
        width: 500px;
        height: 500px;
        background: rgb(17, 0, 255);
        position: relative;
        top: 20px;
        left: 20px;
        right: 0;
        bottom: 20px;
    }
}

在使用styus的时候，经常会定义一些css的常用变量，但是在引入styl文件一直使用的是@import '~styles/mixins'，然后就是一直在报错，
后来经过了解发现，这种写法需要在build中的webpack.conf.js中设置style的别名，

1
2
3
4
5
6
7
8

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles')
    }
  },

然后将styles指向放styl的文件夹即可。

今天使用 Angular 的时候，看到书中封装了自己得一个 LoggerService ，然后自己也想尝试下，顺便也写下这个记录。

新建一个Service得ts文件

在 app 目录下建立一个 ts 文件，如下：

1
2
3
4
5
6
7
8
9
10
11

export class LoggerService{
    info(msg : any) {
        console.log(msg);
    }
    warn(msg: any){
        console.warn(msg);
    }
    error(msg: any){
        console.error(msg);
    }
}

这个类就是封装了一层日志打印得函数，当然在这里也可以封装一些其他得函数。

在去年的时候短暂的接触了大概一个星期的 Angular 之后就再也没碰过了，今天突然想重新捡起 Angular 的相关知识，并且想将 Angular 结合 Bootstrap 一起使用。所以正好记录下一起结合使用的步骤。

初始化一个 Angular 的项目。初始化之后打开命令行，输入：

1
2

npm install jquery --save-dev
npm install bootstrap --save-dev

输入以上两条命令之后，在 package.json 中可以看到已经多出了 jquery 和 bootstrap 这两个库了。如下：

当初始化完成之后会在 node_modules 中出现 bootstrap 和 jquery 这两个文件夹。

关于页面的水平垂直居中：

页面的水平垂直居中布局的话目前就我这里了解的话是又两种方法，一种是盒子布局，一种是流式布局：
盒子布局

关于Jquery解析JSON格式的问题

JSON.parse()方法

在使用这个方法解析Json格式的时候一直会报错，但是传入的值却又明明是JSON格式的，所以一直在排查：

前言

由于自己平时对前端的css和js学的不是太好，而现在又需要自己来写一个前端页面，无意间在GitHub中看到了layui，所以抱着尝试的心态，学习了一下，现在主要是自己做一个总结。可能之后会学习Vue等前端跨框架

关于Layui的table组件

首先Layui的table组件：在Layui中创建一个table组件需要先写一个table标签：<table class="layui-hide" id="test" lay-filter="demo"></table>，在这之中 id 是需要在table.render中使用的。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

table.render({
            elem: '#test'
            ,height: 315
            ,url: '/user/getUser' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'age', title: '年龄', width:80}
                ,{field: 'dataname', title: '用户名', width:80}
                ,{field: 'sex', title: '性别', width:80}
                ,{field: 'password', title: '密码', width:80, sort: true}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]]
        });