关键词：
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上面查找
vue学习笔记-从0到1搭建实战项目(代码片段)
新建项目vuecreatehello1注：项目名称不能有大写字母（Warning:namecannolongercontaincapitalletters）新建项目vuecreatehello1http://localhost:8080/vscode导入文件用vscode导入文件新增页面1.新增文件views/introduce.vue<templa 查看详情
vue项目实战62项目优化上线准备+生成项目报告(代码片段)
...篇《61、添加页面加载进度条效果》上一篇我们完成了为项目添加加载进度条的效果，整个项目算是基本开发完毕了，本篇我们来开始学习项目的优化以及上线工作。一、学习目标我们的VUE项目开发完毕之后，就需要... 查看详情
vue项目实战62项目优化上线准备+生成项目报告(代码片段)
...篇《61、添加页面加载进度条效果》上一篇我们完成了为项目添加加载进度条的效果，整个项目算是基本开发完毕了，本篇我们来开始学习项目的优化以及上线工作。一、学习目标我们的VUE项目开发完毕之后，就需要... 查看详情
springboot+vue+实战项目之第2集(代码片段)
SpringBoot+vue+实战项目--锋迷商城1.Maven聚合工程1.1Maven聚合工程概念1.2创建Maven聚合工程1.2.1创建Maven父工程1.2.2创建Module1.3Maven聚合工程依赖继承1.3.1依赖继承1.3.2依赖版本管理2.《锋迷商城》项目搭建2.1技术储备2.2创建Maven聚... 查看详情
vue项目实战——实现一个任务清单基于vue3.x全家桶（简易版）(代码片段)
Vue3.x项目实战（一）项目名参考链接Vue2.x_todoList基于Vue2.x实现一个任务清单Vue2.x_GitHub搜素案例基于Vue2.xGitHub搜素案例文章目录Vue3.x项目实战（一）Vue3.x实现todoList1、前言2、项目演示（一睹为快）3、涉及知... 查看详情
vue项目实战(vue全家桶之---vuex)(代码片段)
...大概对了解首先vuex是什么？vuex是属于vue中的什么，它在项目中扮演着一个什么样的角色，起到什么作用，在项目中我是否要用到vuex。官方文档对vuex的解读是：Vuex是一个专为Vue.js应用程序开发的状态管理模式。如果你是在开发... 查看详情
[vue项目实战]电商系统项目初始化(代码片段)
电商系统项目概述电商项目基本业务概述电商后台管理系统的功能电商后台管理系统的开发模式(前后端分离)电商后台管理系统的技术选型1.前端项目技术栈2.后端技术栈前端项目初始化123通过`vueui`来初始化项目4.配置element... 查看详情
springboot+vue+实战项目之第3集(代码片段)
SpringBoot+vue+实战项目--锋迷商城1.《锋迷商城》业务流程设计-接⼝规范1.1前后端分离与单体架构流程实现的区别1.1.1单体架构1.1.2前后端分离架构1.2接口介绍1.2.1接口概念1.2.2接口规范1.3Swagger1.3.1作用1.3.2Swagger整合1.3.3Swagger注... 查看详情
vue项目实战6后台项目的安装配置(代码片段)
接上篇《5、本地项目托管到码云（Gitee）》在前面的博文中，我们已经初始化完成了一个VUE的前端项目，因为是前后端分离的项目，必须要依赖于一个可以提供接口的后台项目。本篇单据介绍一下，如何配... 查看详情
项目实战旅游系统(vue3+pinia+vite)----项目配置(代码片段)
1.创建项目 npminitvue@latest 这里我全部都是选择的NO是为了回顾router和pinia的配置 然后npminstall安装一下依赖，用npmrundev运行2.划分目录结构 assets----存放文件资源(css/img/font... 查看详情
项目实战旅游系统(vue3+pinia+vite)----项目配置(代码片段)
1.创建项目 npminitvue@latest 这里我全部都是选择的NO是为了回顾router和pinia的配置 然后npminstall安装一下依赖，用npmrundev运行2.划分目录结构 assets----存放文件资源(css/img/font... 查看详情
从零开始vue项目实战-路由(代码片段)
一、理解路由传统的页面应用，是用一些超链接来实现页面切换和跳转的。而vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。路由中有三个基本的概念route,routes,router。 1，route... 查看详情
[vue项目实战]登录功能实现(代码片段)
登录功能实现写在前面登录概述登录业务流程登录业务的相关技术点登录---token原理分析登录功能实现登录页面的布局在components文件下创建一个vue文件配置路由(并添加路由重定向)页面编写完成登录框居中添加一个登录图标登录... 查看详情
vue项目首屏加载优化实战(代码片段)
...用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化，希望大家能够相互讨论，共同进步。我的项目vue-cli3构建的，vue+vue-router+vuex，UI框架选用element-ui 查看详情
springboot+vue+实战项目之第4集(代码片段)
《锋迷商城》设计及实现—用户管理1.实现流程2.后端接口开发2.1完成DAO操作2.2完成Service业务2.3完成Controller提供接口2.4接口测试1.实现流程2.后端接口开发2.1完成DAO操作创建实体类 @Data @NoArgsConstructor @AllArgsConstructor @Ap... 查看详情
vue+element项目实战(代码片段)
...xff09;5.前端的一些使用技巧。该笔记总结于b站Vue+Element项目实战1.vue的的组件化应用在需要使用组件的地方进行引入importDepManafrom'../../components/sys/DepMana.vue';importEcManafrom'../../components/sys/EcMana.vue';importJobLevelManafrom'... 查看详情
vue3+vite2项目实战复盘总结（干货！）(代码片段)
...—— Y · F · E ———————内容概要•背景•vue3项目开发get到的知识•让我惊讶的vite•项目中遇到的困难•总结•项目技术栈•资料推荐背景有一个新项目启动，移动端项目兼容安卓6+，没有历史包袱，技... 查看详情
vue项目实战65配置路由懒加载(代码片段)
...同的首页内容。本篇我们来学习通过“路由懒加载”提升项目的访问速率。一、什么是路由懒加载，为什么使用？路由懒加载，即是我用的时候才加载，不用就不加载。当打包构建项目时ÿ 查看详情