找回密码
当前位置：前端开发者 > Vue.js > 正文

前端开发Vue&图铃机器人实现机器人对话

2019-01-27 分类：Vue.js 阅读(940) 评论(0)
后端开发如何看前端页面
web前端页面开发
前端页面开发项目视频

vue&图铃机器人实现机器人对话

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”utf-8″ />
        <meta
            name=”viewport”
            content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”
        />
        <script
            type=”text/javascript”
            src=”https://cdn.bootcss.com/vue/2.4.2/vue.min.js”
        ></script>
        <script
            type=”text/javascript”
            src=”https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js”
        ></script>
        <title>vue&图铃机器人实现机器人对话</title>
        <style type=”text/css”>
            body {
                text-align: center;
                background: #20a0ff;
            }
            #tuling {
                text-align: center;
                padding: 20px;
            }
            h1,
            p,
            label {
                color: #fff;
            }
            h1 {
                font-size: 30px;
            }
            p {
                text-align: center;
                border-top: 1px dashed #fff;
                padding: 15px 0;
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                margin: 0;
            }
            .form {
                margin: 40px 0;
            }
            .form input {
                width: 70%;
                border: none;
                border-radius: 20px;
                outline: none;
                padding: 10px;
            }
            .form label {
                display: block;
                width: 35px;
                height: 35px;
                float: left;
                margin-right: 5px;
            }
            .form label img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
            .answer-wraper {
                margin: 40px 0;
            }
            .answer-wraper label {
                display: block;
                width: 35px;
                height: 35px;
                float: right;
                margin-right: 5px;
            }
            .answer-wraper label img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
            .answer-wraper .answer {
                background: #fff;
                border-radius: 20px;
                width: 70%;
                /*height: 35px;*/
                font-size: 12px;
                text-indent: 10px;
                text-align: left;
                float: right;
                margin-right: 10px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id=”tuling”>
            <h1>Robot</h1>
            <div class=”form”>
                <label
                    ><img
                        src=”http://www.xurry.top/wp-content/themes/akina/images/dabai.png”
                /></label>
                <input
                    type=”text”
                    name=”question”
                    id=”question”
                    v-model=”INFO”
                    @change=”ask()”
                    placeholder=”跟我唠嗑儿吧^_^”
                />
            </div>
            <div class=”answer-wraper” v-show=”flag”>
                <label
                    ><img
                        src=”http://www.xurry.top/wp-content/themes/akina/images/yifu.png”
                /></label>
                <div class=”answer” style=””>{{ answer }}</div>
            </div>
            <p>
                written by {{ author }}，转载请注明出处，欢迎前往<a
                    href=”http://www.xurry.top”
                    >锐 • 志</a
                >查看效果
            </p>
        </div>
        <script type=”text/javascript”>
            var myTuling = new Vue({
                el: ‘#tuling’,
                data: {
                    author: ‘Xurry’,
                    APIKEY: ’72d6117e0eef403c95c9aebe73a07e6a’, //图灵APIKEY
                    INFO: ”,
                    answer: ”,
                    flag: false,
                },
                methods: {
                    ask() {
                        this.$http
                            .get(
                                ‘http://www.tuling123.com/openapi/api?key=’ +
                                    this.APIKEY +
                                    ‘&info=’ +
                                    this.INFO,
                            )
                            .then(function(response) {
                                console.log(response.body.text)
                                this.answer = response.body.text
                                if (this.answer) {
                                    this.flag = true
                                } else {
                                    this.flag = false
                                }
                            })
                    },
                },
            })
        </script>
    </body>
</html>
开发前端手机页面注意事项
前端开发一个页面布局
前端页面开发工作流程
赞(0)
前端开发者 » 前端开发Vue&图铃机器人实现机器人对话
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论