vue项目实战

Posted 2023-03-08 Coding With you.....

node连接服务器

【全栈初体验】Vue+Node+MySQL实现前后端分离开发_艾欢欢的博客-CSDN博客

node项目

 

1.猫眼电影移动端

在博客‘前端学习三’中项目入门的基础上进行

1.首先上图是测试了跳转，现在正式开发：要展示的是电影列表，这个列表对于正在上映和即将上映都需要，只是请求的数据/调用的接口不同，因此将其设置为一个组件

1.在components中新建一个moviesDetail.vue:其展示的内容是每次点击最上面的正在热映/即将上映触发一个请求进行返回的

2.index是页面，包含了最上面两个组件coming.vue和hoting.vue；

每一个组件中包含对应列表展示的组件

因此要把moviesDetail.vue引入到coming.vue和hoting.vue中:

注意导入与引入的组件名称要一致，注册组件的名称与在使用的时候的标签要一致

在moviesDetail.vue中导出组件
<script>
export default 
  name: "movieList",
 // props: ["mitem"], //通过mitem属性接收父组件的传值
  data() 
    return ;
  
;
</script>


在coming.vue和hoting.vue中引入组件注册组件

<script>
 
import movieList from '@/components/moviesDetail' //引入组件

export default 
  name: 'coming',
  components: 
    movieList  //注册组件
  
    // ... 其他代码，可参考本节的demo
</script>

export default 
  name: "hoting",
  data() 
    return 
      hotList: []
    ;
  ,
  created() 
    axios
      .get("http://www.softeem.xin/maoyanApi/ajax/movieOnInfoList")
      .then(res => 
        this.hotList = res.data.movieList;
      );
  ,
  components: 
    movieList //注册组件
  
;
</script>


这样使用的时候就可以使用下面的标签
 <!-- 使用组件 -->
      <movieList></movieList>

2.然后每一个按钮也会触发一个对应的请求，完成页面之间的跳转

1.跳转：比如点击一个按钮要跳转到其详情页面，并且需要传递参数：为该按钮定义点击事件，当发生单击事件的时候拍触发tomovieDetail 事件，并且将参数传入到对应的详情页。

tomovieDetail 是一个页面，通过路由跳转到当前页面：这样写好这个页面后那就可以进行跳转了

路由：就是在router下的js文件中进行配置，配置路径对应的组件（路径就是当前的请求，组件就是要跳转的页面）

该页面也可以拆分成一个组件，因为不同的电影进入详情页的标题是不同步的，而且多个电影都需要有详情，所以把他作为一个组件比较好

2.获取后台数据展示：这里会通过id触发一个请求，调用接口异步获取数据

<!-- moviesDetail.vue 路径：src/components -->
<template>
  <div>
    <div @click="$router.push(name:'tomovieDetail',query:id:mitem.id)" class="movie-list">
      </div>
      // ...其它代码
    </div>
</template>
 

3.加载动画组件

是的进去页面的时候是动画加载的，比如我们进去一个页面，他的标题是拥有动画效果的

eg:比如这样，可以写一个动画的组件，加载一个动图
可以处理上面问题：当所需要请求的异步数据没有完全加载时，就可以加载一个动态的加载符号 /加载中，请稍后等等都是类似的组件思想     
   可以在进入页面的时候有一个判断：如果数据已经得到就直接展示；如果数据没有获取到或者没有完全获取到就展示动图  这样当数据架子啊完成的时候动图就“消失”了

定义动画组件

<template>
  <div>
    <div class="loading-bg">
      <img class="loading" src="../assets/img/loading.gif">
    </div>
  </div>
</template>
<script>
export default 
  name: "loading"
;
</script>
<style lang='scss' scoped>
// ...样式参考demo
</style>

使用动画组件：同样需要导出组件 引入注册组件-------写在script里面

然后 在templte中进行写入

eg
 <!-- isReady: 数据加载好了就不显示loading动画 -->
     <loading v-if="!isReady"></loading>

4.图片懒加载

不使用图片懒加载的情况下，会在页面第一次加载时，将所有图片资源进行加载。假设有大量图片资源需要加载，则等待加载完成会需要很长时间，极其影响用户体验。这个时候使用图片懒加载就很有必要性，它会只加载你当前屏幕中的图片资源。

需要安装 vue-lazyload

首先在main.js 文件中引入并使用

// 图片懒加载
import VueLazyload from 'vue-lazyload'
import errorImg from '../src/assets/img/error.png'
import loadingImg from '../src/assets/img/loading.gif'

// 加载懒加载插件
Vue.use(VueLazyload,
  error: errorImg,
  loading: loadingImg
)
 
然后在需要使用图片懒加载的地方，将 :src 修改为 v-lazy 即可

3.APP端的底部导航栏

应该就是几个按钮，点击不同的按钮会进入不同的组件；因此之前写好的那就是导航栏中的一个

2.猫眼电影web端

代码已经下载 gouyan-movie-vue-master

3.猫眼电影小程序

代码已经下载

4.一个商品订单管理：GitHub - macrozheng/mall-admin-web: mall-admin-web是一个电商后台管理系统的前端项目，基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。

代码：mall-admin-web-master

在线演示：mall-admin-web

5.在github上面查找