1. Toy模板网首页
  2. > Toy博客

5.2 创建个人中心页面-前端部分

7月前 作者：芜湖男童 分类：Toy博客 阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了5.2 创建个人中心页面-前端部分。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

😊如果写的可以帮到你，可以点个赞吗，你的支持就是我写下去的动力。😊

本文阅读大概 10 分钟, 自己写加思考大概 1 ~ 2 小时。建议：代码可以手抄， 但不要复制。

1. 整体框架

5.2 创建个人中心页面-前端部分

2. 前端页面布局

使用 bootstrap 的 grids system 进行布局。页面规划如下：

5.2 创建个人中心页面-前端部分

在 bootstrap 的网址搜索 grids system。

一行分为12份，左边3份，为头像；右边9份，白色区域 cards，加上按钮创建 bot，获取 Bot 列表

在 views.user.bot.UserBotIndexView.vue 下修改，实现基本的个人 bot 信息展示。

<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">
                            创建Bot
                        </button>
                    </div>
                    <div class="card-body">
                        <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            	<tbody>
                                 <tr>
                                    <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>
                         </thead>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

实现 refresh_bot，获取上节课的 API: /user/bot/getlist/ 查询 bot 列表，通过获取后端信息把数据展示在前端上。

<script>
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'

export default {

        const store = useStore();

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


        refresh_bots();
    }
}
</script>

获取用户信息成功：

5.2 创建个人中心页面-前端部分

3. 前端页面创建、修改、删除 Bot

3.1 创建一个 Bot

在点击 创建Bot 按钮的时候需要一个弹窗。在 bootstrap 中寻找一个 modals ：

在 views.user.bot.UserBotIndexView.vue 下修改，增加一个模态框，然后丰富模态框的内容。

<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">
                            创建Bot
                        </button>
                        
                        //增加一个模态框
                        <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" id="exampleModalLabel">创建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.sescription" 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-content" rows="3" 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>
                    </div>
                    <div class="card-body">
                        <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            	<tbody>
                                 <tr>
                                    <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>
                         </thead>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

增加一个 add_bot 函数：

<script>
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'

export default {

        const store = useStore();
		
		const botadd = reactive({
            title: "",
            description: "",
            content: "",
            error_message: "",
        });
			
		
        const refresh_bots = () => {
                $.ajax({
                    url: "http://127.0.0.1:8080/user/bot/getlist/",
                    type: "get",
                    headers: {
                        Authorization: "Bearer " + store.state.user.token,
                    },
                    success(resp) {
                        bots.value = resp;
                    }
                })
            }


        refresh_bots();
		
		//创建一个 bot
        const add_bot = () => {
                    botadd.error_message = "";
                    $.ajax({
                        url: "http://127.0.0.1:8080/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;
                            }
                        }
                    })
                }
        
         return {
            bots,
            botadd,
            add_bot,
        }
    }
}
</script>

创建完成后需要绑定前端的信息。在前面的地方加上 v-model，同时增加一个 触发事件。

<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.sescription" 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-content" rows="3" 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>

5.2 创建个人中心页面-前端部分

如果创建 Bot 的时候时间出现问题：在后端的 pojo 里修改，加上时区：

package com.kob.backend.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

@Data
@NoArgsConstructor
@AllArgsConstructor

public class Bot {
    @TableId(type = IdType.AUTO)
    private Integer id; //在pojo里最好用Integer，否则会报警告
    private Integer userId; //pojo里要用驼峰命名法和数据库的下划线对应
    private String title;
    private String description;
    private String Content;
    private Integer rating;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai")
    private Date createtime;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai")
    private Date modifytime;
}

成功效果如下：

5.2 创建个人中心页面-前端部分

5.2 创建个人中心页面-前端部分

5.2 创建个人中心页面-前端部分

3.2 删除一个 Bot

增加一个 删除 bot 的函数：

<script>
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'

export default {

        const store = useStore();
		
		const botadd = reactive({
            title: "",
            description: "",
            content: "",
            error_message: "",
        });
			
		
        const refresh_bots = () => {
                $.ajax({
                    url: "http://127.0.0.1:8080/user/bot/getlist/",
                    type: "get",
                    headers: {
                        Authorization: "Bearer " + store.state.user.token,
                    },
                    success(resp) {
                        bots.value = resp;
                    }
                })
            }


        refresh_bots();
		
		//创建一个 bot
        const add_bot = () => {
                    botadd.error_message = "";
                    $.ajax({
                        url: "http://127.0.0.1:8080/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;
                            }
                        }
                    })
                }
        
        //删除一个 bot
        const remove_bot = (bot) => {
            $.ajax({
                url: "http://127.0.0.1:8080/user/bot/remove/",
                type: "post",
                data: {
                    bot_id: bot.id,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    console.log(resp);
                    if (resp.error_message === "success") {
                        refresh_bots();
                    }
                }
            })
        }
        
         return {
            bots,
            botadd,
            add_bot,
            remove_bot,
        }
    }
}
</script>

同时需要在上文绑定 删除 按钮。

<div class="card-body">
                        <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            	<tbody>
                                 <tr>
                                    <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>
                         </thead>
                    </div>

如果删除的时候提示没有权限，可能是因为后端的 RemoveServiceImpl.java 文件出错，在里面修改即可。

成功效果：

5.2 创建个人中心页面-前端部分

5.2 创建个人中心页面-前端部分

3.3 修改一个 Bot

在 views.user.bot.UserBotIndexView.vue 下修改。

<script>
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'

export default {

        const store = useStore();
		
		const botadd = reactive({
            title: "",
            description: "",
            content: "",
            error_message: "",
        });
			
		
        const refresh_bots = () => {
                $.ajax({
                    url: "http://127.0.0.1:8080/user/bot/getlist/",
                    type: "get",
                    headers: {
                        Authorization: "Bearer " + store.state.user.token,
                    },
                    success(resp) {
                        bots.value = resp;
                    }
                })
            }


        refresh_bots();
		
		//创建一个 bot
        const add_bot = () => {
                    botadd.error_message = "";
                    $.ajax({
                        url: "http://127.0.0.1:8080/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;
                            }
                        }
                    })
                }
        
        //删除一个 bot
        const remove_bot = (bot) => {
            $.ajax({
                url: "http://127.0.0.1:8080/user/bot/remove/",
                type: "post",
                data: {
                    bot_id: bot.id,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    console.log(resp);
                    if (resp.error_message === "success") {
                        refresh_bots();
                    }
                }
            })
        }
        const update_bot = (bot) => {
            botadd.error_message = "";
            $.ajax({
                url: "http://127.0.0.1:8080/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;
                    }
                }
            })
        }
        
         return {
            bots,
            botadd,
            add_bot,
            remove_bot,
            update_bot,
        }
    }
}
</script>

修改每一个 bot 的时候需要有对应单独的一个模态框。

<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>

                        <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" id="exampleModalLabel">创建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.sescription" 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
                                    </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-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" id="exampleModalLabel">修改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.sescription" 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>
                                                        
                                                    </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>

成功效果如下：

5.2 创建个人中心页面-前端部分

3.4 实现代码框

  • 在 vue 界面添加依赖 vue3-ace-editor
  • 添加组件
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
ace.config.set(
    "basePath", 
    "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
<VAceEditor
    v-model:value="botadd.content"
    @init="editorInit"
    lang="c_cpp"
    theme="textmate"
    style="height: 300px" />

5.2 创建个人中心页面-前端部分

5.2 创建个人中心页面-前端部分

5.2 创建个人中心页面-前端部分

5.2 创建个人中心页面-前端部分

代码地址

King of Bots文章来源地址https://www.toymoban.com/news/detail-487547.html

到了这里，关于5.2 创建个人中心页面-前端部分的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 二、创建个人首页页面

    二、创建个人首页页面

    改造 App.vue 创建一个展示页面，实现一个可以轮播的功能效果。⭐️ 欢迎访问个人的简历网站预览效果 本章涉及修改与新增的文件： style.css 、 App.vue 、 assets 一、 自定义全局样式 将 style.css 中的文件样式内容替换为如下代码 二、修改 App.vue 中代码 = To Be Continued 点赞 评论

    2024年02月09日
    浏览(29)
  • 【前端Vue】社交信息头条项目完整笔记第3篇：三、个人中心,TabBar 处理【附代码文档】

    【前端Vue】社交信息头条项目完整笔记第3篇：三、个人中心,TabBar 处理【附代码文档】

    社交媒体-信息头条项目完整开发笔记完整教程（附代码资料）主要内容讲述：一、项目初始化使用 Vue CLI 创建项目,加入 Git 版本管理,调整初始目录结构,导入图标素材,引入 Vant 组件库,移动端 REM 适配。二、登录注册准备,实现基本登录功能,登录状态提示,表单验证,验证码处理

    2024年04月16日
    浏览(39)
  • 5.2 中心极限定理

    5.2 中心极限定理

      要学习中心极限定理，我会采取以下几个步骤： 学习基本概念：了解什么是随机变量、样本、总体、概率密度函数等基本概念，为学习中心极限定理打下基础； 学习正态分布：中心极限定理的核心是正态分布，因此需要深入学习正态分布的基本性质、概率密度函数等； 学

    2023年04月15日
    浏览(73)
  • HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

    HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

    登录页面 门户页面 博客页面 技术选取: HTML/CSS + VUE2 + ElementUI(Version - 2.15.14) 编程软件: VSCode 环境配置与搭建 安装指令 ELement 在 node 下载后，会发现 node_modules/element-ui 文件夹,直接复制到本地,之后按照文件路径引用并配置 [1]ElementUI - 2.15.14官网 [2] 获取图片网址 [3] 登录页面获

    2024年02月05日
    浏览(37)
  • 前端实验（一）单页面应用的创建

    前端实验（一）单页面应用的创建

    掌握使用vite创建vue3单页面程序命令 熟悉所创建程序的组织结构 熟悉单页面程序运行原理 能够编写简单的单页面程序 创建一个名为vue-demo的单页面程序 编写简单的单页面程序页面 运行单页面程序 使用vite创建单页面程序 创建项目名为目录vue-demo的目录（注意：项目的路径名

    2024年02月06日
    浏览(23)
  • Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二)

    Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二)

    Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二) 在开始这个专栏，我们需要找一个小程序为参考，参考和仿照其界面，聊天交互模式。 这里参考小程序- 小柠AI智能聊天 ，可自行先体验。 该小程序主要提供了以下几点 功能向需求 : 每天免费

    2024年02月14日
    浏览(33)
  • 前端页面如何创建表格？table的结构、属性有哪些？

    前端页面如何创建表格？table的结构、属性有哪些？

    前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月14日
    浏览(23)
  • 基于vue-cli创建后台管理系统前端页面——element-ui，axios，跨域配置，布局初步，导航栏

    基于vue-cli创建后台管理系统前端页面——element-ui，axios，跨域配置，布局初步，导航栏

    1.vue-cli创建前端工程，安装element-ui，axios和配置； 2.前端跨域的配置，请求添加Jwt的设置； 3.进行初始化布局，引入新增页面的方式； 4.home页面导航栏的设置，一级目录，二级目录； 安装成功 布局初步 1.vue-cli创建前端工程，安装element-ui，axios和配置； 2.前端跨域的配置，请

    2024年02月09日
    浏览(41)

  • 登录界面到个人中心

    1. 使用路由渲染登录组件 在  /src/views  目录之下，创建  Login  文件夹，并在其下新建  Login.vue登录组件 在  /src/router/index.js  路由模块中，导入需要通过路由渲染的  login.vue  登录组件 在路由模块的  routes  数组中，声明登录组件的路由规则 在  App.vue  根组件中声明路由

    2023年04月17日
    浏览(36)
  • （小程序）后台交互--个人中心

    （小程序）后台交互--个人中心

    目录 一、微信登录流程简介 二、微信用户获取用户昵称头像和昵称 ① wx.getUserProfile —— 获取头像  三、微信登录流程代码详解 1.bindgetuserinfo——把小程序端搭建起来 ① oa-mini  2.登录-小程序 ① wx.checkSession  ② wx.login ③ wx.request 3.后台 ① 准备数据表 ② 反向生成工具生成

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包