Write the Code. Change the World.

分类目录
9月 23

在常规情况下,去定义组件的时候,只需要用到父子组件通讯即可。这样比较好实现。有时候,也会用到任意组件间的通讯,这个时候自定义组件的方式就有用了。不弄那么多,只弄一个。

先看常见父子通讯

# 使用组件的地方
<sky @changeColor="changeColor" />

methods: {
    changeColor(value) {

    }
}
# 组件内部,仅此而已。子组件中的数据,就可以被父组件收到了
this.$emit('changeColor', 'blue')

全局任意组件通讯

  1. 我们先定义一个中间的 bus

eventBus.js

import Vue from 'vue'

export default new Vue()
  1. 通常事件,事件是有一个地方发送,一个地方接受。我们再定义一个事件接受的地方。不过,要记得释放哟。可以在 mounted 的时候添加,beforeDestroy 的时候释放掉

xxx1.vue

import eventBus from '../utils/eventBus.js'

export default {
  data() {
    return {
      name: 'hello world'
    }
  },
  watch: {

  },
  mounted() {
    eventBus.$on('message', this.message)
  },
  beforeDestroy() {
    eventBus.$off('message', this.message)
  },
  methods: {
    message(value) {
        console.log('message = ', value)
    }
  }
  1. 我们再定义一个发送事件的地方

xxx2.vue

import eventBus from '../utils/eventBus.js'

# 发送吧
eventBus.$emit('message', 'hello world')

最后啰嗦一下

兄弟组件之间,也可以用自定义事件的方式来通讯。既然是兄弟,那他们肯定有相同的父组件。以父组件为 dispatcher 来整不就可以了。

# 兄弟一收
this.$parent.$on('message', res => { console.log('res = ', res) })

# 兄弟二发
$this.$parent.$emit('message', 'hello world')
9月 22

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.

本文将介绍一些在 Vue.js 中使用第三方库的方式.

全局变量

在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:

entry.js

window._ = require('lodash');

MyComponent.vue

export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

继续阅读

9月 11

设想我们的后台是前后端分离的,可以和主站点同域名,也可以不同域名。当前考虑的前端框架有 ant design pro 和 vue element admin。虽然 ant design pro 是阿里的业余产品,ui 漂亮丰富,使用 react 来开发,可前端总体表现上没有 vue element admin 小,前端展示细节问题没处理好,而且一直在更新一直又不好。还是果断选择 vue element admin。

预览页: https://panjiachen.github.io/vue-element-admin

文档页:https://panjiachen.gitee.io/vue-element-admin-site/zh/

这里,使用的和主站点同域名,同环境下。这个时候就得为后台想一个好的路由前缀,暂且这么叫吧。这里使用的是 http://jk.cn/admin。 对,就是 admin,文件放在非根目录下(admin 下),打包编译的时候需要注意,可关注发布相关细节。

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%9A%84%E7%BB%93%E5%90%88

路由使用方式可以使用 browserHistoryhashHistory,个人喜好好看,就使用 browserHistory 方式,这个得修改 nginx 配置。 上边链接已经说明,后边也会设置修改。

开始安装

在原来的基础上进行安装,这里我们将文件放在 resource 下。

cd resources

git clone https://github.com/PanJiaChen/vue-element-admin.git admin 

cd admin

# 镜像这些,要先配置好
npm install

npm run dev 

然后修改 vue.config.js 的 publicPath 值为 /admin/, outputDir 值为 ../../public/admin 执行 npm run build:prod

编译打包,并移到正确位置下

npm run build:prod

然后访问 http://jk.cn/admin ,可访问,可登陆。可路由模式是 hashHistory,不好看。 修改 src/router/index.js 中的 mode 为 mode: ‘history’,并添加 base: ‘/admin/’ 即可使用 browserHistory路由方式, 再重新打包,重新访问。

解决 browserHistory 路由模式引起的问题

使用了 browserHistory 路由模式,导致访问页面跳转 404。这个得修改 nginx,因为服务环境使用的就是 nginx。

sudo vim /etc/nginx/sites-enabled/jk.cn

# 添加下边的解释
    location /admin {
        index index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }

sudo nginx -s reload

其实,上边仅仅处理好了 vue 这边的,但是如果接口也使用 admin 作为路由的一部分呢,也刚好吻合呢。比如 http://jk.cn/admin/api/xxx ,上边的 nginx 配置可不够看。这里就需要排除掉 admin/api 这一部分。可以使用 nginx 正则匹配。如下:

    location ~* ^\/admin\/((?!api\/).) {
        try_files $uri $uri/ /admin/index.html;
    }

再来访问看看,发现一切 ok。

下一步

查看 mock 数据,并去掉 mock,使用项目真实的接口去实现登录,以及获取用户信息。

9月 11

laravel 8 提供接口,bootstrap 提供自适应网页, vue-element-admin 提供后台支持。环境 homestead 。

配置站点

cd ~/Homestead
vim Homestead.yam
# 增加站点配置(域名位置映射以及数据库)
    - map: jk.cn
      to: /home/vagrant/code/study/jk.cn/public

    databases:
    - jk

# 修改本地(本地 win10)的 host ,增加映射 win + r -> drivers -> cd etc -> vim hosts
vim hosts
192.168.10.10 jk.cn

好的,域名就定位 jk.cn

构建服务端代码

laravel 8 大前天发布的,现在就用起来。

# 连上虚拟机环境
vagrant ssh

cd code/study
composer create-project laravel/laravel --prefer-dist jk.cn

安装好了之后,访问 http://jk.cn ,新版本的首页就出来了。

创建版本控制

git init 
git add .
git commit -m 'laravel 8.0.4 initialize'

基本修改

.env

vim .env
# 修改 APP_URL 以及数据库配置
APP_URL=http://jk.cn
DB_DATABASE=jk
DB_USERNAME=homestead
DB_PASSWORD=secret

config/app.php

vim config/app.php

# 修改以下内容
'timezone' => 'Asia/Shanghai',
'locale' => 'zh-CN',
'faker_locale' => 'zh_CN',

添加辅助函数集,用来安放无副作用的函数。增加到 app 下。

vim app/helpers.php

# 增加一个辅助测试函数
<?php 

    function test($str = 'world') {
        return 'Hello ' . $str;
    }

# 将该文件增加到 composer 的自动加载配置中。 autoload->files 就是需要 composer 自动帮我们加载的函数库(不含类)

vim composer.json

    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        },
        "files": [
           "app/helpers.php" 
        ]
    },

# 然后 dump (这一步是不可少的)
composer dump-autoload

加好了之后,就可以来尝试一下了。这里打开 tinker 来试试。

php artisan tinker;

test();

test('bird')

是不是,可以看到想要的结果了。

结束

git add .
git commit -m '修改基础配置以及创建辅助函数集'

服务端框架先到这里。下一步安装 vue-element-admin。

8月 13

vue 项目中,有这样一种场景,在相同路由间跳转,根据参数不同来做不同的处理。但是,不会触发常规的刷新。可以这么做。

操作一波

export default {
    data() {
        return {
            id: '',
        }
    },
    watch: {
        '$route': ['routeChange']
    },
    mounted() {
        this.routeChange();
    },
    methods: {
        routeChange() {
            this.id = this.$route.query.id;

            console.log('change id = ', this.id);
        }
    }

这样,就可以达到目的了。

8月 12

引入 VueRouter,访问多次访问同一个路由,就会报: Error: Avoided redundant navigation to current location: 的错。虽然不影响功能,可不好看呀。

处理

在引入 VueRouter 的地方,处理:

// 解决点击重复路由报错问题
const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter);
…
8月 05

直接用 laravel ui 以及 webpack.mix.js 来打包编译纯 vue 项目,也会出现尴尬场面。比如,使用的路由问题,根目录问题以及路由的 rowserHistory 和 hashHistory 选择上,都会出现尴尬情况。如果只是单纯的后台,非根目录项目,还不如独立建立一个文件夹,来组织打包来的爽快。

8月 04

上一篇,把基本的构建做成了。不过,页面不够完善。现在结合接口,来做一波。尽管如此,这篇没有使用的 vuex 状态管理,也是不完美的。
继续阅读

10月 10

axios 拦截器,最佳实践,体验相关:

https://www.cnblogs.com/dhsz/p/6410031.html

https://blog.csdn.net/panyox/article/details/73800241

https://blog.csdn.net/sjn0503/article/details/74729300

http://www.php.cn/js-tutorial-399867.html

如果是 vue 中。可以在路由里先做一步判断,然后请求时 axios 拦截器里边也做处理。这样就可以完美解决问题了。

request 中添加 token,response中处理错误。

Promise 相关

https://www.cnblogs.com/yunfeifei/p/4453690.html

https://www.cnblogs.com/sweeeper/p/8442613.html

jwt bearer token 相关

https://www.cnblogs.com/zfdcp-028/p/6374632.html

https://www.jianshu.com/p/8f7009456abc

https://www.jianshu.com/p/f9faeac8bd5e

https://www.cnblogs.com/Leo_wl/p/7792046.html