从零开始搭建聊天机器人网页—Vue

模块拆分

首先我们需要搭建一个简单的网页，然后在网页里面调用图灵机器人的API接口，添加输入框获取用户发送的消息，再将返回的json数据解析后显示到表格中。

环境搭建

搭建环境的过程比较复杂，可能会遇到各种问题，但一般都能在网上找到解决方法，由于我环境已经搭好，我找到了一篇别人的博客作为参照，过程应该差不多。
参考博客：https://www.cnblogs.com/hellman/p/10985377.html
博客中的命令可以在cmd中写，也可以直接装好vs code在终端里运行。
vs code下载地址：https://code.visualstudio.com/

创建新项目

搭好环境后在指定目录里运行命令，创建新的vue项目，一直按回车就好。

创建完成后我们可以在目录里看到新项目。

然后在vs code 里点击File->Open Folder->vue002 打开项目。

点击Terminal 创建 new Terminal，在终端里运行 npm run dev

然后访问http://localhost:8080/，就可以看到如下页面。

在components目录下新建First.vue，然后在router目录下的index.js里配置路由路径。

！注意：在config目录下的index.js找到useEslint将其值改为flase。这步是避免代码规范问题的报错。
另外，在App.vue里删除如下代码，可以去掉那张图片。

接下来就可以在first.vue里面愉快的写代码了。

网页设计

访问接口我们需要用到axios，在终端运行如下命令（若还在调试可用ctrl+c打断）。

在main.js里如下配置。

First.vue完整代码

<template>
  <div>

    <input v-model="message"/>
    <button @click="convert">点击发送</button>
    <div>
      {{ueser_message}}
    </div>

    <ul>
		<li  v-for='(list) in lists' v-bind:key='list.id'>
			{{list.title}} 
		</li>
    
	</ul>

  </div>
</template>
 
<script>
  import axios from 'axios'
 
  export default {
    name: 'HelloWorld',
    data() {
      return {
        ueser_message: "",
        message:"",
        newAddText:'',
	  lists:[
	  ],
	  nextTodoId: 0

      }
    },
    //在这里调用ajax请求方法
    created(){
      this.convert();
    },
    methods: {
      convert: function () {
        axios.get('http://api.tianapi.com/txapi/tuling/index',{
          params:{
            key: "xxxxxxxxxxxxxxxxxxxxxxx",
            question: this.message
          }
        }).then(res => {
          this.title = res.data.newslist[0].reply;
            this.lists.push({
			    id:this.nextTodoId++,
			    title:this.message
          })
          this.lists.push({
			    id:this.nextTodoId++,
			    title:this.title
          })
        })
      }
    }
  }
</script>

运行效果：

总结

在写网页的过程中会遇到非常多离谱的错误，让人十分头疼。问题的根本还是我没有对网页的整个项目结构有一定的基础把握，到目前为止我也仅仅是仿写。
大家在写网页的时候，一定要有十万分的耐心，祝大家建站成功。
如果觉得这样的网页太丑，我们也有非常多的美化组件可以用。比如说iview
官网：https://www.iviewui.com/