黑马程序员_大事件项目笔记3_首页部分

已于 2023-11-22 00:41:19 修改
阅读量1k 收藏 6
点赞数 1
分类专栏： # Vue3大事件管理系统 文章标签： 笔记 vue.js javascript
于 2023-11-22 00:40:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52534056/article/details/134392002
版权

黑马程序员_大事件项目笔记3_首页部分

首页layout架子[element-plus 菜单组件]
①基本架子拆解(菜单组件的使用)
②登录访问拦截
③用户基本信息获取&渲染
④退出功能[element-plus 确认框]

1.首页-layout 架子分析和登录访问拦截

首页layout架子[element-plus 菜单组件]
①基本架子拆解(菜单组件的使用)
②登录访问拦截

架子组件列表：**

el-container

- el-aside 左侧
  - el-menu 左侧边栏菜单

- el-container  右侧
  - el-header  右侧头部
    - el-dropdown
  - el-main  右侧主体
    - router-view

基本架子的代码

<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
</script>

<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#232323"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-menu-item index="/article/channel">
          <el-icon><Management /></el-icon>
          <span>文章分类</span>
        </el-menu-item>
        <el-menu-item index="/article/manage">
          <el-icon><Promotion /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-sub-menu index="/user">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item index="/user/profile">
            <el-icon><User /></el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <el-icon><Crop /></el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/password">
            <el-icon><EditPen /></el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>黑马程序员：<strong>小帅鹏</strong></div>
        <el-dropdown placement="bottom-end">
          <span class="el-dropdown__box">
            <el-avatar :src="avatar" />
            <el-icon><CaretBottom /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile" :icon="User"
                >基本资料</el-dropdown-item
              >
              <el-dropdown-item command="avatar" :icon="Crop"
                >更换头像</el-dropdown-item
              >
              <el-dropdown-item command="password" :icon="EditPen"
                >重置密码</el-dropdown-item
              >
              <el-dropdown-item command="logout" :icon="SwitchButton"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>大事件 ©2023 Created by 黑马程序员</el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #232323;
    &__logo {
      height: 120px;
      background: url('@/assets/logo.png') no-repeat center / 120px auto;
    }
    .el-menu {
      border-right: none;
    }
  }
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>

将以上代码，复制到layout文件中的LayoutContainer.vue文件中
在这里插入图片描述

运行结果

在这里插入图片描述
layout文件夹中的LayoutContainer.vue文件


<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
</script>

<template>
  <!-- 
    el-menu 整个菜单组件
    active-text-color 点击激活
    :default-active="$route.path" 配置默认高亮的菜单项
    router            router选项开启，el-menu-item的index就是点击跳转的路径

    el-menu-item菜单项
    index="/article/channel" 配置的是访问的跳转路径，配合default-active的值， 实现高亮


   -->
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#232323"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-menu-item index="/article/channel">
          <el-icon><Management /></el-icon>
          <span>文章分类</span>
        </el-menu-item>
        <el-menu-item index="/article/manage">
          <el-icon><Promotion /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-sub-menu index="/user">
          <!-- 多级菜单的标题 -具名插槽 title -->
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>个人中心</span>
          </template>

          <!-- 展开的内容 -默认插槽 -->
          <el-menu-item index="/user/profile">
            <el-icon><User /></el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <el-icon><Crop /></el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/password">
            <el-icon><EditPen /></el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>黑马程序员：<strong>小帅鹏</strong></div>
        <el-dropdown placement="bottom-end">
          <span class="el-dropdown__box">
            <el-avatar :src="avatar" />
            <el-icon><CaretBottom /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile" :icon="User"
                >基本资料</el-dropdown-item
              >
              <el-dropdown-item command="avatar" :icon="Crop"
                >更换头像</el-dropdown-item
              >
              <el-dropdown-item command="password" :icon="EditPen"
                >重置密码</el-dropdown-item
              >
              <el-dropdown-item command="logout" :icon="SwitchButton"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>大事件 ©2023 Created by 黑马程序员</el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #232323;
    &__logo {
      height: 120px;
      background: url('@/assets/logo.png') no-repeat center / 120px auto;
    }
    .el-menu {
      border-right: none;
    }
  }
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>

vue router官网中的全局前置守卫
在这里插入图片描述
在这里插入图片描述

下面进行登录访问的拦截
在router文件夹中，index.js文件中的代码
在这里插入图片描述
在这里插入图片描述
router文件夹中，index.js文件中的所有代码

import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores'

//createRouter 创建路由实例
//配置history模式
//1.history模式:createWebHistory 地址栏不带 #
//2.hash模式：createWebHashHistory 地址栏带 #
//console.log(import.meta.env.DEV)
//vite中的环境变量 import.meta.env.BASE_URL
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/login', component: () => import('@/views/login/LoginPage.vue') }, //登录页
    {
      path: '/',
      component: () => import('@/views/layout/LayoutContainer.vue'),
      redirect: '/article/manage',
      children: [
        {
          path: '/article/manage',
          component: () => import('@/views/article/ArticleManage.vue')
        },
        {
          path: '/article/channel',
          component: () => import('@/views/article/ArticleChannel.vue')
        },
        {
          path: '/user/profile',
          component: () => import('@/views/user/UserProfile.vue')
        },
        {
          path: '/user/avatar',
          component: () => import('@/views/user/UserAvatar.vue')
        },
        {
          path: '/user/password',
          component: () => import('@/views/user/UserPassword.vue')
        }
      ]
    }
  ]
})

//登录访问拦截=>默认是直接放行的
//根据返回值决定，是放行还是拦截
//返回值：
//1.undefined/true直接放行
//2.false 拦回from的地址页面
//3.具体路径 或 路径对象 拦截到对应的地址
//  '/login' {name:'login'}
router.beforeEach((to) => {
  //如果没有token，且访问的是非登录页，拦截到登录，其他情况正常放行
  const useStore = useUserStore()
  if (!useStore.token && to.path !== '/login') return 'login'
  return true
})

export default router

2.首页-用户基本信息渲染和退出

③用户基本信息获取&渲染
④退出功能[element-plus 确认框]

先封装一下接口
接口文档链接https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93851860

在这里插入图片描述
在api文件夹中的user.js文件中，新建一个方法
在这里插入图片描述

//获取用户基本信息
export const userGetInfoService = () => request.get('/my/userinfo')

在stores 文件夹中的 modules文件夹中的user.js文件中
在这里插入图片描述
在这里插入图片描述

    const user = ref({})
    const getUser = async () => {
      const res = await userGetInfoService() //请求获取数据
      user.value = res.data.data
    }
    return {
      token,
      setToken,
      removeToken,
      user,
      getUser
    }
  }

在页面中调用getUser
在页面LayoutContainer.vue文件中
在这里插入图片描述

import { useUserStore } from '@/stores'
import { onMounted } from 'vue'
const userStore = useUserStore()
onMounted(() => {
  userStore.getUser()
})

在这里插入图片描述
做渲染
在这里插入图片描述

 <div>
          黑马程序员：<strong>{{
            userStore.user.nickname || userStore.user.username
          }}</strong>
        </div>
        <el-dropdown placement="bottom-end">
          <span class="el-dropdown__box">
            <el-avatar :src="userStore.user.user_pic || avatar" />
            <el-icon><CaretBottom /></el-icon>
          </span>

在这里插入图片描述
这里的黑马程序员用户名和用户头像已经显示。
el-avatar :src=“userStore.user.user_pic || avatar”
如果该用户有用户头像，及显示该用户头像——>userStore.user.user_pic
如果该用户没有用户头像，及显示一个默认头像——>avatar

// 封装接口的笔记
//api/user.js`封装接口
export const userGetInfoService = () => request.get('/my/userinfo')

userGetInfoService
user是模块名
GetInfo核心的api方法名
Service添加的一个后缀

在这里插入图片描述
基本资料，更换头像，重置密码三个下拉菜单是路由跳转
退出登录的功能

Dropdown下拉菜单
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

路由配置部分——在router文件夹中的index.js文件中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
跳转操作的完成
在这里插入图片描述

const userStore = useUserStore()
const router = useRouter()

onMounted(() => {
  userStore.getUser()
})

const handleCommand = (key) => {
  if (key === 'logout') {
    //退出操作
  } else {
    //跳转操作
    router.push(`/user/${key}`)
  }
}

在这里插入图片描述
下拉菜单跳转完成

在这里插入图片描述
退出功能
在这里插入图片描述

const handleCommand = (key) => {
  if (key === 'logout') {
    //退出操作
    //清除本地的数据(token+user信息)
    userStore.removeToken()
    userStore.setUser({})
    router.push('/login')
  } else {
    //跳转操作
    router.push(`/user/${key}`)
  }
}

在这里插入图片描述
在这里插入图片描述

给点击退出按钮加提示信息
在这里插入图片描述

<template>
  <el-button text @click="open">Click to open the Message Box</el-button>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

确认这里有没有配置ElMessageBox
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
完成情况

layout文件夹中的LayoutContainer.vue文件中的所有代码

<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { useUserStore } from '@/stores'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()

onMounted(() => {
  userStore.getUser()
})

const handleCommand = async (key) => {
  if (key === 'logout') {
    //退出操作
    await ElMessageBox.confirm('你确认要进行退出吗', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    //清除本地的数据(token+user信息)
    userStore.removeToken()
    userStore.setUser({})
    router.push('/login')
  } else {
    //跳转操作
    router.push(`/user/${key}`)
  }
}
</script>

<template>
  <!-- 
    el-menu 整个菜单组件
    active-text-color 点击激活
    :default-active="$route.path" 配置默认高亮的菜单项
    router            router选项开启，el-menu-item的index就是点击跳转的路径

    el-menu-item菜单项
    index="/article/channel" 配置的是访问的跳转路径，配合default-active的值， 实现高亮


   -->
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#232323"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-menu-item index="/article/channel">
          <el-icon><Management /></el-icon>
          <span>文章分类</span>
        </el-menu-item>
        <el-menu-item index="/article/manage">
          <el-icon><Promotion /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-sub-menu index="/user">
          <!-- 多级菜单的标题 -具名插槽 title -->
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>个人中心</span>
          </template>

          <!-- 展开的内容 -默认插槽 -->
          <el-menu-item index="/user/profile">
            <el-icon><User /></el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <el-icon><Crop /></el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/password">
            <el-icon><EditPen /></el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>
          黑马程序员：<strong>{{
            userStore.user.nickname || userStore.user.username
          }}</strong>
        </div>
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <!-- 展示给用户，默认看到的 -->
          <span class="el-dropdown__box">
            <el-avatar :src="userStore.user.user_pic || avatar" />
            <el-icon><CaretBottom /></el-icon>
          </span>
          <!-- 折叠的下拉部分 -->
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile" :icon="User"
                >基本资料</el-dropdown-item
              >
              <el-dropdown-item command="avatar" :icon="Crop"
                >更换头像</el-dropdown-item
              >
              <el-dropdown-item command="password" :icon="EditPen"
                >重置密码</el-dropdown-item
              >
              <el-dropdown-item command="logout" :icon="SwitchButton"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>大事件 ©2023 Created by 黑马程序员</el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #232323;
    &__logo {
      height: 120px;
      background: url('@/assets/logo.png') no-repeat center / 120px auto;
    }
    .el-menu {
      border-right: none;
    }
  }
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>

、

椰子的代码世界
关注
专栏目录
黑马刘龙彬老师主讲的大事件项目
03-06
黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目
黑马程序员Vue深入浅出视频代码
03-31
这是根据黑马程序员中关于Vue11天课程中，跟着视频编写的代码，一行行跟着写出来的，连备注基本也是和视频一样，用的是vscode开发工具，上传的资料已经把node_modules删除了，进入目录后，用cnpm i重新安装一下就可以了，package.json里都有安装清单，http://vue.studyit.io/api这个地址不能用了，已经更换成新的地址
大事件项目api_server
weixin_52230444的博客
03-21 4373
一、初始化 1.1创建项目 新建api_server文件夹作为项目根目录，并在项目根目录中运行如下的命令，初始化包管理配置文件：npm init -y 运行如下的命令，安装特定版本的express：npm i express@4.17.1 在项目根目录中新建app.js作为整个项目的入口文件，并初始化如下的代码： // 导入 express 模块 const express = require('express') // 创建 express 的服务器实例 const app = ex...
BigEvent - 黑马程序员新闻类管理系统大事件 SpringBoot 3 + Vue 3 项目
qq_63535554的博客
01-03 1621
欢迎来到BigEvent项目，这是一个结合了SpringBoot 3和Vue 3的实战课程项目，涵盖了后端到前端的全栈开发流程。
黑马 大事件项目 笔记
热门推荐
weixin_63681863的博客
08-28 1万+
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F2HPDqHw-1693121279346)(assets/image-20230706205300370.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOOMivHe-1693121279346)(assets/image-20230706210947086.png)]
springboot + vue项目：大事件文章管理系统（黑马程序员）
m0_74760466的博客
04-10 2753
该项目是经典的后台管理系统前后端分别使用vue和springboot首先我先进行演示一下。
黑马程序员_大事件项目笔记2_登陆&注册页面
weixin_52534056的博客
11-13 1015
b站黑马程序员大事件项目的笔记2
黑马程序员_javaWEB讲义和笔记资料_day08
01-30
在"黑马程序员_javaWEB讲义和笔记资料_day08"中，我们可以预见到这一天的学习内容将深入到Java Web开发的核心概念和技术。"传智播客"作为知名的技术教育机构，其课程通常涵盖全面且深入的IT知识，因此这些讲义和笔记...
黑马程序员_超全面的JavaWeb教程-视频+源码笔记
08-29
### 黑马程序员_超全面的JavaWeb教程-视频+源码笔记 #### JavaWeb基础知识概览 在深入了解本教程之前，我们先来简要回顾一下JavaWeb的基础知识。JavaWeb是利用Java语言开发Web应用的技术集合。它主要包括Servlet、...
黑马程序员_hibernate框架开发2016版讲义和笔记资料_day03
07-28
《Hibernate框架开发详解——以黑马程序员2016版讲义和笔记为引导》 Hibernate，作为Java领域中广泛使用的对象关系映射（ORM）框架，极大地简化了数据库操作，使得开发者可以更专注于业务逻辑而不是繁琐的数据访问...
黑马刘龙彬老师主讲的大事件后端项目有数据库 能跑能运行 笔者自己就运行了！！
03-06
刘龙彬老师在黑马程序员主讲的大事件后端项目，深入运用了SpringBoot技术栈，展示了高效的后端开发实践。该项目不仅涵盖了数据库管理，还通过SpringBoot简化了开发过程，提升了整体项目的性能和稳定性。
bigEvent:大事件项目
05-31
bigEvent 介绍 大事件后台管理 实现增删查改 使用技术 Ajax jQuery Layui模块化前端框架 TinyMCE 富文本编辑 模板引擎 template.js bootstrap 模态框 FormData数据 Echarts动态化数据图表 项目内容细节 一、后台管理 1. 后台管理系统页面切换 1.1. iframe标签完成菜单对应页面的显示 <iframe src="./main_count.html" frameborder="0" style="width: 100%;height:100%;" name="iframe"></iframe> 1.2. 使用对应a标签进行跳转 <a> <i class="iconfont icon-yidiandiantubia
big_event：大事件项目
02-08
big_event：大事件项目
黑马程序员分布式优品电商项目完整视频资料
02-19
黑马程序员分布式优品电商项目完整视频资料
黑马程序员_从零开始征服Android之旅（第二季）源码和笔记（上）
10-29
《黑马程序员_从零开始征服Android之旅（第二季）源码和笔记（上）》是一部针对初学者的全面Android开发教程，旨在帮助学员系统地掌握Android应用开发的基础知识和实战技巧。通过本教程的学习，你可以从理论出发，...
黑马程序员_大事件项目笔记4_文章分类
weixin_52534056的博客
11-27 569
黑马程序员_大事件项目笔记4_文章分类
黑马程序员_大事件项目笔记1_搭建项目环境
weixin_52534056的博客
10-06 1635
在B站上学习黑马程序员Vue3大事件项目的学习笔记
黑马程序员 Vue3 大事件项目补充(最新bug解决以及各种踩坑)
m0_69551472的博客
07-12 499
这样设计的好处是，你可以为多个页面提供一个统一的布局，同时通过重定向保持URL的整洁和逻辑上的一致性。在Vue Router中，路由配置对象定义了应用程序中的路由规则。可能是一个布局容器组件，用于包裹其他页面组件，并提供通用的布局结构，比如头部、侧边栏等。），它允许Vue Router按需加载组件，从而提高应用程序的加载性能。，Vue Router会根据这些配置渲染对应的组件，并且这些组件都会被。：这指定了当路由匹配时应该渲染的组件。属性，分别表示URL路径和对应的组件。：这是一个子路由数组，定义了在。
第一卷：今天学了什么黑马大事件项目2022. 7.5
weixin_52375405的博客
07-05 749
1.更换头像的经验 第一步：移花接木 写一个隐藏的input其type="file" 添加上传头像的事件 onFileChange (e)第二步：给浏览图片按钮添加点击事件 内容为自动点击 input上的 onFileChange (e)事件第三步：获取用户选择的文件列表 const files = e.target.files第四步：如果拿到这个文件 还不能往后台传 需要把文件转换成base64形式第五步：创建一个FileReader对象 并用它的readAsDataURL 函数 将文件读取成b
黑马头条项目笔记黑马头条项目笔记
最新发布
08-27
<<黑马头条项目笔记是针对黑马程序员头条项目的学习笔记。这个项目通常是作为Android应用开发的学习实践，旨在通过开发一个具有新闻阅读功能的移动应用来加深对Android应用开发技术的理解和应用。在黑马头条项目笔记中，通常会涉及到项目的需求分析、设计模式、技术栈选择、关键功能实现等方面的内容。 这个项目笔记会详细记录项目开发过程中的关键步骤，包括但不限于： 1. 项目结构的设计，包括模块划分和功能规划。 2. 关键技术点的学习和应用，比如网络请求、数据缓存、图片加载、动态界面实现等。 3. 代码实现和重构过程，以及遇到的问题和解决方案。 4. 最终的项目测试，确保应用的稳定性和性能。 通过这样的项目实践，开发者可以提升自己在实际项目中的编码能力、问题解决能力以及系统设计能力。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值