项目实训：网页展示及头像上传

网页展示及头像上传

任务

后端已经爬取到网页的相关信息，现在需要对推荐的网页进行展示，并做一些用户信息维护完善，如头像上传。

网页展示

1. 对查询到的网页进行前端展示

         <div>
           <div>
           <el-tag>今日推荐</el-tag>
           <el-button style="margin-left: 20px;" icon="el-icon-zoom-in" size="small" type="primary" @click="changeRecommend">换一批</el-button>
         </div>
         <div  class="recommend_container">
           <div v-if="recomLoading">
             <div ref="chartContainer" style="width: 600px; height: 555px;"></div>
           </div>
           <div v-else="!recomLoading">
             <el-row :span="8">
           <el-col :span="24" v-for="(item, index) in items" :key="index" >
           <el-card :body-style="{ padding: '0px' }">
             <div class="card-container">
             <img :src="item.faviconUrl" class="image">
             <div class="text-container">
               <el-link :href="item.url" type="primary" target="_blank">{{item.title}}</el-link>
             </div>
             <el-button v-if="isVedio(item)" type="primary" icon="el-icon-s-opportunity" circle style="position: absolute;right:10px" @click="handleUrl(item)"></el-button>
           </div>
           </el-card>
           </el-col>
         </el-row>
       </div>
   
       </div>
         </div>
   

   页面展示：

   

2. 为提高用户查询时的，用户体验，采用Echarts实现加载动画。

         initChart(){
           this.chartInstance=echarts.init(this.$refs.chartContainer);
           const option = {
           graphic: {
             elements: [
               {
                 type: 'group',
                 left: 'center',
                 top: 'center',
                 children: new Array(7).fill(0).map((val, i) => ({
                   type: 'rect',
                   x: i * 20,
                   shape: {
                     x: 0,
                     y: -40,
                     width: 10,
                     height: 80
                   },
                   style: {
                     fill: '#5470c6'
                   },
                   keyframeAnimation: {
                     duration: 1000,
                     delay: i * 200,
                     loop: true,
                     keyframes: [
                       {
                         percent: 0.5,
                         scaleY: 0.3,
                         easing: 'cubicIn'
                       },
                       {
                         percent: 1,
                         scaleY: 1,
                         easing: 'cubicOut'
                       }
                     ]
                   }
                 }))
               },
               {
           type: 'text',
           left: 'center',
           top: '150', // 将文本放置在 group 下方
           style: {
             text: '内容推荐中~',
             fill: 'teal',
             font: 'bold 20px Arial',
             textAlign: 'center',
             textVerticalAlign: 'middle'
           }
         }
             ]
           }
           };
           this.chartInstance.setOption(option)
         },
   

   代码在使用 Echarts 绘制图表时，增加一个加载动画，以提高用户体验。
   初始化图表 (initChart() 方法):
   echarts.init(this.$refs.chartContainer);：使用 Echarts 的 init 方法初始化图表实例，
   this.$refs.chartContainer 是组件中定义的一个引用，通常用于指向包含图表的 DOM 元素。

   图表配置选项 (option):
   graphic：Echarts 中用于自定义图形和文本的配置项。
   elements：一个包含多个图形元素的数组，用来定义加载动画的效果和加载文本。

   加载动画元素 (elements):
   elements 数组包含两个元素：
   加载动画组 (type: ‘group’)：包含了多个矩形元素，用来模拟加载中的动画效果。每个矩形的 keyframeAnimation 属性定义了动画的参数，包括延迟 (delay)、持续时间 (duration)、缩放比例变化 (keyframes) 等。
   加载文本 (type: ‘text’)：显示在加载动画下方的文本，告知用户当前正在加载内容。
   设置图表选项 (this.chartInstance.setOption(option)):

   最后将定义好的 option 对象应用到图表实例中，通过 setOption 方法使得图表呈现出加载动画和文本。
   代码利用 Echarts 的 graphic 配置项和动画特性，实现了一个简单的加载动画效果，用以提升用户在查询过程中的交互体验。

   

   头像上传

   由于还没有进行部署，还是在本地运行，故头像上传采用上传到本项目的静态资源recourses/static/UserAvatar

3. 前端使用Element-ui的el-upload组件

             <el-upload
                 class="avatar-uploader"
                 action="http://localhost:8080/api/user/uploadUserAvatar"
                 :before-upload="beforeUpload"
                 :show-file-list="false"
                 :on-success="handleAvatarSuccess"
                 :data="{userAccount:this.name}">
               <img v-if="form.avatarUrl" :src="form.avatarUrl
               " class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon" />
             </el-upload>
   

4. 访问时，采用"http://localhost:8080/UserAvatar/yourAvatar.png"即可访问本地资源

   

5. 采用Vuex将用户信息存储到其中，方便不同页面的访问。

     // get user info
     getInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
         getInfo(state.token).then(response => {
           const { data } = response
           if (!data) {
             return reject('Verification failed, please Login again.')
           }
           const { userAccount, userAvatar } = data
           commit('SET_NAME', userAccount)
           commit('SET_AVATAR', userAvatar)
           resolve(data)
         }).catch(error => {
           reject(error)
         })
       })
     },
   

   commit: Vuex 中的 commit 方法，用于提交 mutation，修改 state 中的数据。
   state: Vuex 中的 state 对象，用于访问和获取当前的状态数据，这里主要获取 state.token 作为参数传递给 getInfo 函数。
   Promise 对象:

   使用 return new Promise((resolve, reject) => { … }) 返回一个 Promise 对象，以处理异步操作。
   异步操作 (getInfo(state.token).then(response => { … })):

   调用 getInfo 方法，传入 state.token，该方法返回一个 Promise 对象。
   当 Promise 成功时，获取 response，并从中解构出 data，这里假设 getInfo 返回的是一个包含用户信息的响应对象。
   验证数据:

   如果 data 不存在（即返回数据为空），说明认证失败，触发 reject，并返回相应的错误信息 ‘Verification failed, please Login again.’。
   更新状态:

   如果数据有效，从 data 中解构出 userAccount 和 userAvatar，然后分别通过 commit 方法提交两个 mutation：
   commit(‘SET_NAME’, userAccount)：将用户账号设置到 Vuex 的状态中。
   commit(‘SET_AVATAR’, userAvatar)：将用户头像设置到 Vuex 的状态中。
   Promise 处理:

   最后通过 resolve(data) 完成 Promise，将完整的 data 对象传递给调用者，表示操作成功。
   如果发生任何异常，通过 .catch(error => { reject(error) }) 捕获并传递错误信息给 reject，表示操作失败。