仿有赞后台+vue+ts+vuecli3.0+elementUi+四期vueX的使用+图片上传+富文本编译器-白红宇

前言

今天把整个项目剩余都讲完，后面将会学习一下react，然后用react写个后台，然后浅谈一下使用心得，以及学习技巧

游泳健身了解一下：技术文档会持续更新

内容总结

vueX的使用 //划重点

图片上传（批量上传）

分页的使用

重制按钮的分装

富文本编译器 //划重点

1.vueX的使用（划重点

首先我们先在图形话界面去下载当前需要到依赖（版本号以及axios都需要一致不知道可以去我们都看看

先建4个文件，我一个文件一个文件讲，观众老爷耐心听

1.`state`文件（不了解的可以先去看下`vuex`）

这里我们把全局的变量放里面（说一下不是为了用vuex才用vuex的，有些项目完全可以不用当然可以不用）

import { getToken, setToken, removeToken } from '@/views/utils/auth'const state: any = {    token: getToken(),    imgUrl: 'https://api.uat.iyuedian.com/iyd-imall-manage/imall/v1/upload'}export default state复制代码

2.`mutations`文件

这个文件就是提交改变当前的state里面的值的不懂interface的可以看下

export default mutations{    ## 老方法    SET_TOKEN(state: any, data: any) {         state.token = data    }, } import { MutationTree } from 'vuex'    ## 新方法 MutationTree
    
      相信应该有些人不理就是一个接口const mutations: MutationTree
     
       = {    'SET_TOKEN'(        state: any,        data: any    ): void {        state.token = data    }}复制代码

vuex 里面的源码可以看一下

3.`actions`文件

这个文件可以执行mutations文件里面的方法公共的方法都可以放到这个里面async定义一个一步函数总是实际返回值总是一个 Promise 对象

import { sysUserLogin } from '@/views/interface/login';import { getToken, setToken, removeToken } from '@/views/utils/auth';import { ActionTree } from 'vuex';import { Message } from 'element-ui';const actions: ActionTree
    
      = {    /**     * 登陆     * @param param0     * @param userInfo 登陆信息     */    async Login({state, commit} , userInfo: any) {        return new Promise((resolve, reject) => {            sysUserLogin(userInfo).then((response: any) => {              setToken(response.data.systoken);              console.log(response.data.systoken);              commit('SET_TOKEN', response.data.systoken); ## 这边调用了上面的方法              resolve(response);            }).catch((error) => {              reject(error);            });          });      },    /**     * 深拷贝     * @param param0     * @param params     */    async deep({state, commit} , params: any) {      let obj = {};      obj = JSON.parse(JSON.stringify(params));      return obj;    },};export default actions;复制代码

4.`getters`文件

getters 可以定义是 store 的计算属性可以将 state 进行过滤然后return出来

## 老方法export default {    token: (state:any) => state.token,}## 新方法import {GetterTree} from 'vuex'const mutations: GetterTree
    
      = {    'token'(        state: any,    ): any {        return state.token    }}export default mutations复制代码

`vuex`使用方式`vuex-class`

## 获取state的值 （先要定义一遍才可以使用）@State imgUrl@Action('Login') Login;@Getter('Login') getterFoo;@Mutation('Login') mutationFoo;// 简写方式@State foo@Getter bar@Action baz@Mutation qux //最先开始执行 created() {    ## 后面的是原来的使用方式    console.log(this.imgUrl); // ->  this.store.state.imgUrl    console.log(this.getterFoo(2)) // -> this.store.getters.Login    this.Login({ value: true }).then() // -> this.store.dispatch('Login', { value: true })    this.mutationFoo({ value: true }) // -> this.store.commit('Login', { value: true })}复制代码

2.图片上传（以及批量的图片上传

这里我们用的是element的图片上传如有不懂的可以看下element的组件

单张图片上传

我们想要更佳简便的使用方式

// 单张图片上传（组件）
        # 使用方式    # html .sync 配合update可以实现双向绑定    
            # script    import BeforeUpload from '@/components/beforeUpload/beforeUpload.vue';    import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';    @Component({        components: {            BeforeUpload,        }    })    export default class Content extends Vue {        ## 默认图片        public BeforeUploadImg: string = '';    }复制代码

批量图片上传

我们想要更佳简便的使用方式

// 批量图片上传（组件）
        ## html UploadListsImg为当前剩下的图片的list    removeListImg为删除掉的list 使用方式    
        ## script    import UploadListImg from '@/components/uploadListImg/uploadListImg.vue';    import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';    @Component({        components: {            UploadListImg,        }    })    export default class Content extends Vue {        public UploadListsImg: object[] = [            {                name: 'food.jpeg',                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'            },            {                name: 'food2.jpeg',                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'            }        ];        public removeListImg: object[] = []    }复制代码

3.分页的使用

分页我们想要更加简便的使用方式

// 分页组件
    # html 使用方式
    # scriptimport Pagination from '@/components/pagination/pagination.vue';import { Component, Vue, Model, Watch, Provide } from 'vue-property-decorator';@Component({    components: {        Pagination    }})export default class Content extends Vue {    Paginationtotal:number = 0;}复制代码

4.重制按钮的分装

我们重置只需要把当前的分页重置成第一页 20跳数据即可

// 重置按钮
    ## html 使用方式
    ## scriptimport Reset from '@/components/reset/reset.vue';@Component({    components: {        Reset    }})export default class Content extends Vue {    searchReserved = {}}复制代码

5.富文本编译器

关于富文本编译器，我想大家应该不陌生了，我推荐一筐tinyMce来使用到我们当前到项目里面来富文本编译器ts都支持还不是多，我找来很多来尝试，最后决定用tinyMce下载一下这两个，中间踩了很多坑，给我们伸手党线上开箱即食的代码把

把cdn放上速度更快

重要的说一下我们的静态的这个文件放public 下面这个一定要放这，下面的这个一定要放进去不然页面食用不了

## 富文本编译器 ## EditorContent 默认值 onChangeHandler 改变的事件 editorInit 初始配置  ## 基本上图片上传都需要form表单方式上传  FormData
    ## html 使用方式
    ## scriptimport Editor from '@/components/tinyMceEditor/tinyMceEditor.vue'; @Component({        components: {            Editor        }    })export default class Content extends Vue {    // 默认图文详情    public EditorContent: string = '';}复制代码

1.

使用方式

小结

基本的插件都讲了一下有问题可以添加上面的qq群

后面的章节介绍

表单验证 (基础表单验证)

react 会自己写完然后讲解一下

前言