部署看板娘到vue项目（前后端整合）-CFANZ编程社区

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

所需资源：

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

1. 部署看板娘后端API

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

1.1 拉取镜像

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

1.2 新建kbn空间

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

cd /home
mkdir kbn
cd kbn
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 使用组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
     <live2-d></live2-d>
    <HelloWorld msg="看板娘测试DEMO"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Live2D from '@/components/Live2D/index'
export default {
  name: 'App',
  components: {
    HelloWorld,Live2D
  }
}
</script>

2.3 修改API地址

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

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

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

部署看板娘到vue项目（前后端整合）