代码编织梦想

最终

在这里插入图片描述

从数据库读取bot记录,渲染在前端页面

<template>
<div class = "container">
    <div class="row">
        <!-- <div class="clo-3">
            <div class="card" style = "margin-top:20px;">
                <div class="card-body">
                    <img :src="$store.state.user.photo" alt = "">
                </div>
            </div>
        </div> -->

        <div class="col-9">
            <div class="card" style="margin-top:20px;">
                <div class="card-header">
                    <span style = "font-size:130%">我的bot</span>
                    <button type = "button" class = "btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
                        创建Bot
                    </button>

                    <div class="modal fade" id="add-bot-btn" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                ...
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <table class = "table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 遍历后端返回的Bot记录 -->
                            <tr v-for = "bot in bots" :key = "bot.id">
                                <td>{{ bot.title }}</td>
                                <td>{{ bot.createtime }}</td>
                                <td>
                                    <button type = "button" class = "btn btn-secondary"  style = "margin-right:10px;">修改</button>
                                    <button type = "button" class = "btn btn-danger">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>

import {ref} from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex';

export default {
    setup(){
        const store = useStore();
        // 定义一个数组变量
        let bots = ref([]);// 通过前端 访问数据库 返回bot记录

        // 匿名函数 使用变量名进行接受
        const refresh_bots = ()=>{
           $.ajax({
            url:"http://127.0.0.1:3000/user/bot/getlist/",
            type:"get",
            headers:{
                Authorization:"Bearer " + store.state.user.token,
            },
            success(resp){
                bots.value = resp;// 接受前端返回的结果
            }
           })
        }
        refresh_bots();
        // 前端页面使用get请求 查询数据库 然后数据库返回bot记录 前端得到这个结果 进行渲染页面
        return{bots}
    }
}
</script>
<style scoped>
</style>

创建Bot页面以及关联后端

使用v-model属性绑定前端页面内容跟 填充到ref的变量 然后创建函数 将创建的bot写入数据库中

<template>
<div class = "container">
    <div class="row">
        <!-- <div class="clo-3">
            <div class="card" style = "margin-top:20px;">
                <div class="card-body">
                    <img :src="$store.state.user.photo" alt = "">
                </div>
            </div>
        </div> -->

        <div class="col-9">
            <div class="card" style="margin-top:20px;">
                <div class="card-header">
                    <span style = "font-size:130%">我的bot</span>
                    <button type = "button" class = "btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
                        创建Bot
                    </button>
                </div>
                <div class="card-body">
                    <table class = "table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 遍历后端返回的Bot记录 -->
                            <tr v-for = "bot in bots" :key = "bot.id">
                                <td>{{ bot.title }}</td>
                                <td>{{ bot.createtime }}</td>

                                <td>
                                    <button type = "button" class = "btn btn-secondary"  style = "margin-right:10px;">修改</button>
                                    <button type = "button" class = "btn btn-danger">删除</button>
                                </td>
                            </tr>


                        </tbody>
                    </table>


                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add-bot-btn" tabindex="-1">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">创建Bot</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="add-bot-title" class="form-label">名称</label>
                                    <!-- 绑定内容 将前端填写的内容  赋值到下面的botadd对象中 然后创建函数 将botadd填充到数据库中 -->
                                    <input v-model = "botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入bot名称">
                                </div>
                                <div class="mb-3">
                                    <label for="add-bot-description" class="form-label">简介</label>
                                    <textarea v-model = "botadd.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入bot简介"></textarea>
                                </div>

                                <div class="mb-3">
                                    <label for="add-bot-code" class="form-label">代码</label>
                                    <textarea v-model = "botadd.content" class="form-control" id="add-bot-code" rows="7" placeholder="请输入bot代码"></textarea>
                                </div>
                            </div>
                   
                            <div class="modal-footer">
                                <div class = "error-message">{{ botadd.error_message }}</div>
                                <!-- 按钮关联事件 -->
                                <button type="button" class="btn btn-primary" @click= "add_bot">创建</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            </div>
                            </div>
                        </div>
                    </div>

</template>

<script>
// 绑定变量ref  绑定对象reactive
import {ref,reactive} from 'vue'
import $ from 'jquery'

import { useStore } from 'vuex';
import {Modal} from 'bootstrap/dist/js/bootstrap'


export default {
    setup(){
        const store = useStore();
        // 定义一个数组变量
        let bots = ref([]);// 通过前端 访问数据库 返回bot记录

        //  创建一个对象
        const botadd = reactive({
            title:"",
            description:"",
            content:"",
            error_message:"",
        });

        // 匿名函数 使用变量名进行接受
        const refresh_bots = ()=>{
           $.ajax({
            url:"http://127.0.0.1:3000/user/bot/getlist/",
            type:"get",
            headers:{
                Authorization:"Bearer " + store.state.user.token,
            },
            success(resp){
                bots.value = resp;// 接受前端返回的结果

            }
           })
        }


        refresh_bots();


        // 将botadd对象写入数据库中
        const add_bot = () =>{
            botadd.error_message = "";// 先清空error_message
            $.ajax({
                url:"http://127.0.0.1:3000/user/bot/add/",
                type:"post",
                data:{
                    // 将前端的信息 写入botadd 
                    title:botadd.title,
                    description:botadd.description,
                    content:botadd.content,
                },
                headers:{
                    // 写入之前进行验证
                    Authorization:"Bearer " + store.state.user.token,
                },
                success(resp){
                    if(resp.error_message === "success"){
                        botadd.title = "";
                        botadd.description = "";
                        botadd.content = "";
                        Modal.getInstance("#add-bot-btn").hide();
                        // 如果创建成功刷新列表
                        refresh_bots();
                    }else{
                        botadd.error_message = resp.error_message;
                    }
                }


            })
        }





        // 前端页面使用get请求 查询数据库 然后数据库返回bot记录 前端得到这个结果 进行渲染页面
        return{bots,botadd,add_bot}



    }
}
</script>

<style scoped>

div.error-message{
    color:red;
}


</style>

删除Bot以及关联后端

<template>
<div class = "container">
    <div class="row">
        <!-- <div class="clo-3">
            <div class="card" style = "margin-top:20px;">
                <div class="card-body">
                    <img :src="$store.state.user.photo" alt = "">
                </div>
            </div>
        </div> -->

        <div class="col-9">
            <div class="card" style="margin-top:20px;">
                <div class="card-header">
                    <span style = "font-size:130%">我的bot</span>
                    <button type = "button" class = "btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
                        创建Bot
                    </button>
                </div>
                <div class="card-body">
                    <table class = "table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 遍历后端返回的Bot记录 -->
                            <tr v-for = "bot in bots" :key = "bot.id">
                                <td>{{ bot.title }}</td>
                                <td>{{ bot.createtime }}</td>

                                <td>
                                    <button type = "button" class = "btn btn-secondary"  style = "margin-right:10px;">修改</button>
                                    <button type = "button" class = "btn btn-danger" @click="remove_bot(bot)">删除</button>
                                </td>
                            </tr>


                        </tbody>
                    </table>


                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add-bot-btn" tabindex="-1">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">创建Bot</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="add-bot-title" class="form-label">名称</label>
                                    <!-- 绑定内容 将前端填写的内容  赋值到下面的botadd对象中 然后创建函数 将botadd填充到数据库中 -->
                                    <input v-model = "botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入bot名称">
                                </div>
                                <div class="mb-3">
                                    <label for="add-bot-description" class="form-label">简介</label>
                                    <textarea v-model = "botadd.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入bot简介"></textarea>
                                </div>

                                <div class="mb-3">
                                    <label for="add-bot-code" class="form-label">代码</label>
                                    <textarea v-model = "botadd.content" class="form-control" id="add-bot-code" rows="7" placeholder="请输入bot代码"></textarea>
                                </div>
                            </div>
                   
                            <div class="modal-footer">
                                <div class = "error-message">{{ botadd.error_message }}</div>
                                <!-- 按钮关联事件 -->
                                <button type="button" class="btn btn-primary" @click= "add_bot">创建</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            </div>
                            </div>
                        </div>
                    </div>

</template>

<script>
// 绑定变量ref  绑定对象reactive
import {ref,reactive} from 'vue'
import $ from 'jquery'

import { useStore } from 'vuex';
import {Modal} from 'bootstrap/dist/js/bootstrap'


export default {
    setup(){
        const store = useStore();
        // 定义一个数组变量
        let bots = ref([]);// 通过前端 访问数据库 返回bot记录

        //  创建一个对象
        const botadd = reactive({
            title:"",
            description:"",
            content:"",
            error_message:"",
        });

        // 匿名函数 使用变量名进行接受
        const refresh_bots = ()=>{
           $.ajax({
            url:"http://127.0.0.1:3000/user/bot/getlist/",
            type:"get",
            headers:{
                Authorization:"Bearer " + store.state.user.token,
            },
            success(resp){
                bots.value = resp;// 接受前端返回的结果

            }
           })
        }


        refresh_bots();


        // 将botadd对象写入数据库中
        const add_bot = () =>{
            botadd.error_message = "";// 先清空error_message
            $.ajax({
                url:"http://127.0.0.1:3000/user/bot/add/",
                type:"post",
                data:{
                    // 将前端的信息 写入botadd 
                    title:botadd.title,
                    description:botadd.description,
                    content:botadd.content,
                },
                headers:{
                    // 写入之前进行验证
                    Authorization:"Bearer " + store.state.user.token,
                },
                success(resp){
                    if(resp.error_message === "success"){
                        botadd.title = "";
                        botadd.description = "";
                        botadd.content = "";
                        Modal.getInstance("#add-bot-btn").hide();
                        // 如果创建成功刷新列表
                        refresh_bots();
                    }else{
                        botadd.error_message = resp.error_message;
                    }
                }


            })
        }

        // 匿名函数 使用remove_bot变量接住  参数是Bot
        const remove_bot = (bot) =>{
            $.ajax({
                url:"http://127.0.0.1:3000/user/bot/remove/",
                type:"post",
                data:{
                    // 将前端的信息 写入botadd 
                    bot_id:bot.id,
                },
                headers:{
                    // 写入之前进行验证
                    Authorization:"Bearer " + store.state.user.token,
                },
                success(resp){
                    if(resp.error_message === "success"){

                        // 如果创建成功刷新列表
                        refresh_bots();
                    }
                }


            })
        }




        // 前端页面使用get请求 查询数据库 然后数据库返回bot记录 前端得到这个结果 进行渲染页面
        return{bots,botadd,add_bot,remove_bot,}
    }
}
</script>

<style scoped>

div.error-message{
    color:red;
}


</style>

修改前端页面实现

// 匿名函数 使用remove_bot变量接住  参数是Bot
        const update_bot = (bot) =>{
            botadd.error_message = "",
            $.ajax({
                url:"http://127.0.0.1:3000/user/bot/update/",
                type:"post",
                data:{
                    // 将前端的信息 写入botadd
                    bot_id:bot.id,
                    title:bot.title,
                    description:bot.description,
                    content:bot.content,
                },
                headers:{
                    // 写入之前进行验证
                    Authorization:"Bearer " + store.state.user.token,
                },
                success(resp){
                    if(resp.error_message === "success"){
                        Modal.getInstance('#update-bot-modal-' + bot.id).hide();
                        // 如果创建成功刷新列表
                        refresh_bots();
                    }else{
                        botadd.error_message = resp.error_message;
                    }
                }


            })
        }

最终代码

<template>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <img :src="$store.state.user.photo" alt="" style="width: 100%;">
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="card" style="margin-top: 20px;">
                    <div class="card-header">
                        <span style="font-size: 130%">我的Bot</span>
                        <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
                            创建Bot
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="add-bot-btn" tabindex="-1">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">创建Bot</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label for="add-bot-title" class="form-label">名称</label>
                                        <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-bot-description" class="form-label">简介</label>
                                        <textarea v-model="botadd.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Bot简介"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add-bot-code" class="form-label">代码</label>
                                        <VAceEditor
                                            v-model:value="botadd.content"
                                            @init="editorInit"
                                            lang="c_cpp"
                                            theme="textmate"
                                            style="height: 300px" />
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="error-message">{{ botadd.error_message }}</div>
                                    <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="bot in bots" :key="bot.id">
                                    <td>{{ bot.title }}</td>
                                    <td>{{ bot.createtime }}</td>
                                    <td>
                                        <button type="button" class="btn btn-secondary" style="margin-right: 10px;" data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-' + bot.id">修改</button>
                                        <button type="button" class="btn btn-danger" @click="remove_bot(bot)">删除</button>

                                        <div class="modal fade" :id="'update-bot-modal-' + bot.id" tabindex="-1">
                                            <div class="modal-dialog modal-xl">
                                                <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">创建Bot</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label for="add-bot-title" class="form-label">名称</label>
                                                        <input v-model="bot.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="add-bot-description" class="form-label">简介</label>
                                                        <textarea v-model="bot.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Bot简介"></textarea>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="add-bot-code" class="form-label">代码</label>
                                                        <VAceEditor
                                                            v-model:value="bot.content"
                                                            @init="editorInit"
                                                            lang="c_cpp"
                                                            theme="textmate"
                                                            style="height: 300px" />
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <div class="error-message">{{ bot.error_message }}</div>
                                                    <button type="button" class="btn btn-primary" @click="update_bot(bot)">保存修改</button>
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'
import { Modal } from 'bootstrap/dist/js/bootstrap'
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';

export default {
    components: {
        VAceEditor
    },
    setup() {
        ace.config.set(
            "basePath", 
            "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")

        const store = useStore();
        let bots = ref([]);

        const botadd = reactive({
            title: "",
            description: "",
            content: "",
            error_message: "",
        });

        const refresh_bots = () => {
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/getlist/",
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    bots.value = resp;
                }
            })
        }

        refresh_bots();

        const add_bot = () => {
            botadd.error_message = "";
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/add/",
                type: "post",
                data: {
                    title: botadd.title,
                    description: botadd.description,
                    content: botadd.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if (resp.error_message === "success") {
                        botadd.title = "";
                        botadd.description = "";
                        botadd.content = "";
                        Modal.getInstance("#add-bot-btn").hide();
                        refresh_bots();
                    } else {
                        botadd.error_message = resp.error_message;
                    }
                }
            })
        }

        const update_bot = (bot) => {
            botadd.error_message = "";
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/update/",
                type: "post",
                data: {
                    bot_id: bot.id,
                    title: bot.title,
                    description: bot.description,
                    content: bot.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if (resp.error_message === "success") {
                        Modal.getInstance('#update-bot-modal-' + bot.id).hide();
                        refresh_bots();
                    } else {
                        botadd.error_message = resp.error_message;
                    }
                }
            })
        }

        const remove_bot = (bot) => {
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/remove/",
                type: "post",
                data: {
                    bot_id: bot.id,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if (resp.error_message === "success") {
                        refresh_bots();
                    }
                }
            })
        }

        return {
            bots,
            botadd,
            add_bot,
            update_bot,
            remove_bot,
        }
    }
}
</script>

<style scoped>
div.error-message {
    color: red;
}
</style>


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44653420/article/details/129827905

【java闭关修炼】springboot项目-贪吃蛇对战小游戏-配置git环境和项目创建-爱代码爱编程

【Java闭关修炼】SpringBoot项目-贪吃蛇对战小游戏-配置git环境和项目创建 项目的逐步细分配置git环境创建项目后端前后端不分离写法-url访问路径解析资源安装vuevue文件后端解析数据发送到前端页面