vue项目总结
一:使用vue脚手架搭建项目框架
具体操作步骤,参见 志伟的博客使用Vue-cli搭建项目框架
二:项目开发
1:系统进入页面,登录页面逻辑业务实现(路由指向)
在APP端,我们的用户根据手机号,获取验证码登录。账号和密码在系统PC端的后台系统进行管理。(后台管理系统,由系统超级管理员进行用户权限设置)
APP端的登录业务逻辑实现流程图(个人手绘,介意的话,参考下面德明老师的标准流程图)
(德明老师的标准流程图)
2:首页业务实现即相关逻辑分析
项目布局优化—通用全局组件注册
在我们的项目会存在很多次页面跳转,以及页面与子页面之间的跳转,如果我们一直使用router-view来进行我们的组件之间的加载,由于router是全局,就会使得我们的router-view造成全局污染,和路由嵌套,不符合一个优秀程序员的思想,所以我们提出一个解决方案,具体如下。
一:顶层组件index.vue中,设置动态组件来进行动态加载我们的通用布局(通用布局之间的一些小差别,利用一个标识来控制)
二:通用布局中,通过router-view来放置我们路由传过来的组件,这样我们就不会形成路由嵌套了,就很nice了
三:路由跳转传参,控制我们要显示的通用布局组件,我们应该告诉人家,我们即将要跳转的页面具体要显示那个通用布局组件。我们通过路由的meta属性进行组件名传递。
(路由有三种传值方式,具体详情访问:) 志伟的博客,路由的简单使用
四:在index.vue主组件中,利用计算属性或者观察属性,监听我们的组件名
<template>
<div class="app-container">
<component :is='layout'></component>
</div>
</template>
<script>
export default {
data() {
return {
layout:''
}
},
created(){
this.layout = this.$route.meta.layout
},
watch: {
"$route.path"() {
this.layout = this.$route.meta.layout
}
}
}
</script>
五:在store中,管理我们组件需要显示的不同内容,也就是第一点中说到的利用标识来显示不同的内容,则我们需要定义我们的store方法,关于vuex-store的原理即使用方法,具体参考
志伟的博客:vue中的状态管理器(Vuex)
六:在我们即将跳转组件中,created生命周期中,传递数据给我们通用布局组件需要显示的内容
this.$store.dispatch("common/setLayout", {name: "供应商管理",showHome: true,});
对vue中生命周期有疑问的,具体参考
七:在我们的通用组件中,通过store获取我们即将跳转组件传递给我们的显示内容,并监听其变化利用计算属性或者观察属性
<template>
<div class="titleNav">
<header>
<i class="home" v-if="layout.showHome" @click="$router.push('/home')"></i>
<i class="back" v-if="layout.showBack" @click="$router.back()"></i>
<span>
{{layout.name}}
</span>
</header>
<article class="main">
<router-view>
</router-view>
</article>
</div>
</template>
<script>
export default {
computed:{
layout(){
return this.$store.getters['common/getLayout']
}
}
}
</script>
<style lang="less" scope>
@import "../style/pageLayout.less";
</style>
完成这些步骤,我们就可以很愉快的开发的下面的内容了😀😀😀
3:个人设置组件的相关逻辑分析即业务实现
真机联调的使用
一:使用hbuliderX进行真机联调,ios不能高于12,安卓需开启开发者模式
二:电脑使用外网,不然不能进行联调🤫🤫🤫(这里给大家推荐一个好用的软件,免费的)
三:关闭电脑防火墙
四:保持我们的电脑和手机连接到同一局域网
五:在hbuliderX中,创建我们的5+App项目,删除其他无关文件
六:改变我们的项目入口地址(在cmd中使用ipconfig命令获取ip地址,然后加上我们的服务端口号)
七:我们就可以愉快的进行真机联调了😀😀😀
页面功能如下
一:修改密码,调用后端接口判断发送请求即可
二:清除缓存,pc端,清除localStorage和sessionStorage,手机端window.plus.storage.clear(),跳转到登录页面,重新登录
三:保持头像,即下载文件,通过a标签实现
fileDownload(){
let a = document.createElement('a')
a.setAttribute('href', this.photoPath)
a.click()
}
四:退出系统
app端 window.plus.runtime.quit()
五:文件上传,并监听文件上传进度
input方法进行图片上传
a、input type为file类型的时候进行图片选择
b、监听input的change事件获取文件对象
c、使用FormData 对象封装请求数据,再使用axios中的onUploadProgress回调方法获取上传进度
//进度从0开始
this.rate = this.currentRate = 0
//获取文件
let file = input.files[0]
let fd = new FormData()
fd.append('fileName', file)
let result = await fileUpload(fd, progress =>{
//获取用户上传文件进度
this.circle = true
this.modifyphotopanel(1)
this.rate = this.currentRate = (progress.loaded / progress.total) * 100
})
if(result.code === 200){
let res = await updateUserinfo({id:this.$store.getters['user/getUserAllInfo'].id, photo:result.data[0].path})
if(res.code === 200){
//更新我们的vuex数据
this.$store.dispatch('user/saveuserAllIfon',{...this.$store.getters['user/getUserAllInfo'],photo:result.data[0].path})
//更新用户的头像信息
this.photoPath = "http://www.shuiyue.info:12300" + result.data[0].path
headImg.onload = ()=>{
this.rate = this.currentRate = 0
this.circle = false
//关闭提示框
this.$toast.success({
message:'更新成功',
duration:500
})
}
}
else{
this.circle = false
this.rate = this.currentRate = 0
this.$toast.fail({
message:'用户信息更新失败\n请重试'
})
}
}
else{
this.circle = false
this.rate = this.currentRate = 0
this.$toast.fail({
message:'文件上传失败\n请重试'
})
}
六:调用手机摄像头,并读取图片,然后上传图片
a、调用:plus.camera 方法调用摄像头
b、调用:plus.io 方法获取到手机上的图片实例:使用camera.captureImage方法获取到照片的路径,通过io.resolveLocalFileSystemUrl获取到文件实例,使用实例文件的file方法获取到文件对象,再使用io.FileReader来读取文件(new plus.io.FileReader() onloadend得到加载数据,使用readAsDataURL获取到base64字节码)
modifyphoto(){
let camera = plus.camera.getCamera()
camera.captureImage(path => {
//拍照成功的回调函数
//关闭弹出框
this.modifyphotopanel(1)
//展示加载框
this.$toast.loading({
message:'正在处理',
duration:0
})
//通过io.resolveLocalFileSystemUrl获取到文件实例
window.plus.io.resolveLocalFileSystemURL(path,entry =>{
//实例文件的file方法获取到文件对象
entry.file( file =>{
//读取文件
var fileReader = new plus.io.FileReader()
//读取文件的数据内容,并将数据内容进行URL编码
fileReader.readAsDataURL(file);
//完成后的回调函数
fileReader.onloadend = evt =>{
//得到读取后的内容的url编码,进行文件上传
//使用cavans进行图片压缩
let img = new Image()
img.src = evt.target.result
img.onload = async ()=>{
let canvas = document.createElement('canvas')
canvas.width = 720
canvas.height = 1280
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 720, 1280)
//使用压缩后的canvas上传,压缩到720p
let result = await fileBase64({
type:'testFile',
data:canvas.toDataURL(),
name:'头像.jpg'
})
if(result.code === 200){
//更新用户信息
let res = await updateUserinfo({id:this.$store.getters['user/getUserAllInfo'].id, photo:result.data})
if(res.code === 200){
//更新我们的vuex数据
this.$store.dispatch('user/saveuserAllIfon',{...this.$store.getters['user/getUserAllInfo'],photo:result.data})
//更新用户的头像信息
this.photoPath = "http://www.shuiyue.info:12300" + result.data
//模拟图片加载
headImg.onload = ()=>{
this.$toast.clear()
this.$toast.success({
message:'更新成功',
duration:500
})
}
}
else{
this.$toast.clear()
this.$toast.fail({
message:'用户信息更新失败\n请重试'
})
}
}
else{
this.$toast.clear()
this.$toast.fail('图片上传失败\n请重试')
}
}
}
})
})
});
}
4:首页echarts图的实现
其实就是一个echarts的使用,多熟悉即可,不过有三个注意点
一:echarts图的实例时间,在我们的mouted生命周期,然后里面当前组件的时候应该在beforeDestroy生命周期对echarts对象进行销毁
mouted:{
//echarts对象实例
this.pieChart01 = Echarts.init(this.$refs.pieChart01)
}
beforeDestroy(){
//移出监听事件
window.removeEventListener('resize',this.chartResize)
this.lineChart.dispose()
this.lineChart = null
}
二:echarts图的大小随页面窗口大小的改变而改变
//注册窗口变化事件
window.addEventListener('resize',this.chartResize)
//移出监听事件
window.removeEventListener('resize',this.chartResize)
三:vue的this.$nextTick()使用
//this.$nextTick() 一个方法中如果有多个设置值,在vue中会把他们合并起来,异步处理 //两种写法,一种回调,一种promiese,这个返回本身返回一个promise。所以我们在给echarts对象指定容器盒子的时候,应该等页面渲染完成后,才能获取到DOM节点
async mounted(){
await this.$nextTick()
}
如果需要更多echarts知识,请前往B站进行学习或者官网看配置手册😀😀😀,当然志伟这里有学习笔记,可以私下给哈
echarts学习地址
5:项目(一期)整体流程(商贸跟单系统)
模块划分:
一:用户管理PC后台系统
二:App端用户手机登录业务
三:基础数据模块(材料管理,新建材料,供应商管理,新建供应商)
四:项目管理模块(项目列表,新建项目)
五:采购管理(采购列表,新建采购单)
六:收获管理(收获列表,新建收货单)、
七:系统设置(用户个人中心)
业务逻辑实现
一:用户管理PC后台系统
系统超级管理员,管理所有用户,实现用户的新增,信息更改,删除等,并设定用户权限,职位等
二:App端用户手机登录业务
App端用户登录通过手机号即可——>通过手机号,获取id——>通过id获取Token和用户信息——>存储用户信息,和Token,并判断用户是否免登录,免登则存储Token到storage。下一次用户登录,则首先判断用户有没有Token——>通过Token获取用户信息,并存储到store中。没有则正常登录。
三:基础数据模块(后面所有模块都需要对用户进行权限判断,是否有权力进行相应的操作)
这个模块主要有两大板块,材料管理和材料管理。
材料管理
通过供应商提供的数据进行后台系统的材料存储,前端发送接口,实现材料的新增,编辑和删除等操作。
材料管理
用户在页面可以实现供应商的新增,编辑,删除等操作。需要判断用户是否有权限。
四:项目管理模块
项目列表,新建项目。即用户可以实现对项目的新建,编辑,删除等功能。但用户需要提供权限
五:采购管理(需要多从用户权限判断,项目跟单员层,领导审批层)
用户可以实现新增采购订单,一般是项目跟单员操作。然后创建完采购订单后,需要上级干部对采购订单进行管理,审批确认。是否通过,或者采购单有问题则驳回。然后供货商进行发货,订单为在途状态。带采购方收获后,采购订单为完成状态。
订单流程即状态:新建采购单——>订单状态(新建,这时候跟单员可以进行采购单的删除修改)——>领导确认——>订单状态(通过:则订单进入在途状态,驳回则此采购单作废)——>供应商发货——>订单进入待收获阶段(采购方支付预付款)
六:收获管理(收获列表,新建收货单)、
根据采购单,收获列表只显示在途状态的采购单。并显示付款功能,付款可以多次付,最后由用户来确定此订单是否完成。或还存在的问题,未付多少,应付多少,截至日期是多少。
七:系统设置(用户个人中心)
存储用户个人信息,免登token,清除缓存等功能。
八:组件功能开发Vant
VUE各项知识总结图😀😀😀
写在最后,VUE各项知识总结图(自己总结的,有些缺漏望大家理解),送给大家,不过还有一些补充,后续发