Vue项目总结

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

Vant官网地址

VUE各项知识总结图😀😀😀

写在最后，VUE各项知识总结图（自己总结的，有些缺漏望大家理解），送给大家，不过还有一些补充，后续发