看板娘优秀的页面互动可以让页面更加活泼可爱，在个人博客或者项目中引用看板娘可以让项目更加美观、大气、活灵活现。今天我们就来引用一个看板娘到自己的前端项目中来。因为看板娘的后端API是用PHP写的，网上的CDN极不稳定，十分容易断掉。因此我们需要把后端也实例化一份到自己项目中来。

       所需资源：

linux服务器（可联网）、vue项目

1. 部署看板娘后端API

首先要在服务器上安装一个docker，使用docker可以轻量化的部署PHP的服务。

1.1 拉取镜像

1. #拉取nginx和php的基础镜像 2. docker pull nginx 3. docker pull php:5.6-fpm

1.2 新建kbn空间

conf用来存储nginx的配置文件 www存储php的发布目录和nginx的html代理目录

1. cd /home 2. mkdir kbn 3. cd kbn 4. mkdir conf www

 然后在conf文件夹新建default.conf文件，文件内容如下

server {  listen 80;  server_name localhost;   location / {  root /usr/share/nginx/html;  index index.html index.htm index.php;  }   error_page 500 502 503 504 /50x.html;  location = /50x.html {  root /usr/share/nginx/html;  }   location ~ \.php$ {  fastcgi_pass php:9000;  fastcgi_index index.php;  fastcgi_param SCRIPT_FILENAME /www/$fastcgi_script_name;  include fastcgi_params;  } }

1.3 启动容器

docker run --name kbnphp-fpm -v /home/kbn/nginx/www:/www -d php:5.6-fpm

docker run --name runoob-php-nginx -p 8090:80 -d -v /home/kbn/nginx/www:/usr/share/nginx/html -v /home/kbn/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf --link myphp-fpm:php nginx

这里把nginx端口映射为8090

1.4 访问接口

http://xx.xx.xx.xx:8090/kbn/add/

页面正常返回如下

 1.5 避免跨域调用

你的项目可能部署在https 或者另一个http80 中，直接在这个nginx配置php解析有问题，调了半天没有调好，就使用主项目的nginx做了一层跳转避免跨域出现

在主项目的nginx的配置文件中加入

 location /kbn/ {  proxy_pass http://xx.xx.xx.xx:8090/kbn/;  }

2. vue项目集成看板娘

集成demo 参考这个demo https://gitee.com/rederic/kbndemo.git

2.1  下载live2D资源包

把kbndemo/src/assets/live2d文件夹复制到自己的项目的同级文件夹

把kbndemo/src/components/Live2D文件夹复制到自己的项目同级文件夹

2.2 使用组件

       import HelloWorld from './components/HelloWorld.vue' import Live2D from '@/components/Live2D/index' export default {  name: 'App',  components: {  HelloWorld,Live2D  } } " _ue_custom_node_="true">

2.3 修改API地址

修改kbndemo/src/assets/live2d/waifu-tips.js文件中的

live2d_settings['modelAPI'] 为自己的API地址

这里为了防止跨域产生所以在vue.config.js中配置了devServer做跨域处理

3. 看看成果吧