# Demo

**Repository Path**: moonstarKira/demo

## Basic Information

- **Project Name**: Demo
- **Description**: 用户文章管理系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-02
- **Last Updated**: 2023-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 创建vue项目步骤
    1.vue create 项目名 创建项目
        安装命令：npm/cnpm/yarn
    2.安装eslint 一种代码规范，约束代码风格
    3.封装组件库
        安装element-ui包
        yarn add element-ui 安装的是支持vue2的包
        新建element-ui文件夹
            新建index.js文件，
            导入包
            import Vue from 'vue'
            import ElementUI from 'element-ui'
            import 'element-ui/lib/theme-chalk/index.css'
            Vue.use(ElementUI)

            在main.js在使用
    4.封装请求库
        安装axios
        yarn add axios



### git使用
    <font color=red>先在gitee创建仓库，设置项目</font>
    初始化项目：
        git init
        暂存当前所有项目，到内存
        git add.
        git commit -m '项目模板'

    bash项目
    初始化,第一次建立连接时使用：
        git remote add origin 项目地址
        git push -u origin "master"
### 本地持久化
    默认安装的是vue3版本，vue2版本：yarn add vuex-persistedstate@3.2.1
    安装完后在store里引入：
    import createPersistedstate from 'vuex-persistedstate'
      plugins: [createPersistedstate()],

### token
    登陆密钥，用户登录时后台返回一个token保存到store里面
    注意：token是有时效性，用户登陆过期后要清除用户信息


### vuex

    const store = new Vuex.Store({
        state: {
            //相当于自定义组件中的data
        },
        getters:{
            //相当于自定义组件中的computed
            //不会改变state中的数据,会生成一个新的数据，起到包装作用
                当state中数据改变时,getters中数据也会改变。相当于自定义组件中的computed,getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
                Getter 接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数。
                使用方法

                this.$store.getters.方法名
                mapGetters

        },
        mutations: {
            //相当于自定义组件中的methods，只能做同步的操作
            //对state中的数据进行修改,mutations是更改state中数据的唯一方法
            //使用方法
                方法1： this.$store.commit("mutations中函数名称"，参数)来触发mutation函数，可以传参
                mapMutation

        },
        actions: {
            //异步操作，例如ajax请求
            //使用commit 触发 mutations
            //在这里，我们写异步操作，因为mutations中只能处理同步操作，但是
            //actions还是要通过触发mutation的方式间接变更数据。
                相当于在action中处理异步操作，处理完之后，触发mutation来修改数据。
                配合commit，dispatch使用
                使用方法
                    方法2： mapActions使用方法同上
                    方法1： 通过this.$store.dispatch("action中函数名称")来触发  异步函数,并且传参
        }
    })

### echarts的使用
    安装echarts：npm install echarts --save
    项目中引入：import * as echarts from 'echarts'
    单独引入使用 import { 变量名 } from 'echarts'
    echarts 內部用的是命名导出，export const 变量名 多个

### 表单属性ref
    ref 属性涉及Dom 元素的获取(el-form表单对象)。javasrcipt获取Dom元素是通过：document.querySelector（".input"）获取dom元素节点 。
    Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是:ref 绑定控件，$refs 获取控件。

### 传入对象解构赋值
    先把传给形参的对象结构赋值
    在函数里，函数名和函数值一样可以只写一个

### 上传用户头像
    上传头像时，不用原生的input标签，因为比较难改样式
    而是把原生标签绑定到btn里面，通过ref属性，点击btn触发input的点击事件

    上传文件时，要把文件转换成base64字符串，在把它渲染到页面
    前端上传文件到js缓存里有两种方法：
        // 要求：选择文件，给到img标签做预览
        // img标签的src值只能是图片“链接地址”（外链http：//开头，图片文件相对路径）
        // 或者是图片的base64字符串（而且字符串还必须是data：image/png;base64,图片转base64字符串
        // --------------------------------------------------------------------------------
        // 解决方案1：文件 -> 内存临时地址（这地址只能在js内存里，不能发给后台）
        // 语法：URL.createOjectURL(文件)
        // 返回值：内存临时地址
        // this.avatar = URL.createObjectURL(files[0])
        // --------------------------------------------------------------------------------
        // 解决方案2：文件-> base64字符串（可以发给后台）
        const fr = new FileReader()
        fr.readAsDataURL(files[0])// 传入文件对象开始读
        fr.onload = (e) => { // onload等待把文件读成base64字符串后会触发onload事件函数
          this.avatar = e.target.result // e.target.result保存读取完的结果，显示在src里面
        }

### 文章发布遇到的问题
    v-model 和:model
        v-model:指的是数据双向绑定
        ：model:是v-bind:model的简写，是单向数据绑定，指从父组件传递指=值给子组件

### v-for的使用
    v-for在哪个上面绑定，就会循环渲染哪个标签
    一些封装的组件标签不能使用v-for，可以在外面包一个template，在template里面使用

### 富文本编辑器
    富文本：就是可以带标签和样式的字符串，一般用于设置一个文章/产品的主体内容
            富文本编辑器的内容实际上是一段标签
    基于vue-quill-editor实现富文本编辑器
    安装：yarn add vue-quill-editor/npm install vue-quill-editor --save
    网址：https://www.npmjs.com/package/vue-quill-editor
    后台响应的文本是html格式的文本需要在标签里用 v-html解析

### 修改组件内样式
    vue中style标签有scoped属性，此属性防止css样式污染，对组件进行限定css作用域，当有scoped属性时，它的css只作用于当前组件中的元素。
    原理：
        scoped属性其实就是给每个dom节点元素都添加了不重复的自定义属性（data-v-xxxx）；
        在编译时再给样式的末尾添加属性选择器进行样式私有化，设置了scoped属性，在浏览器编译后会在标签里添加添加一个属性 data-v-xxxxx，即使是两个互不相关的组件使用了相同的类名，通过这个自定义属性也能标识，使样式互不影响。

    四种情况：
        1.父组件和子组件都没添加scoped    
            父组件可能会覆盖子组件的style
        2.父组件未添加scoped，子组件添加了scoped
            子组件的自定义属性使得子组件的权重增加，覆盖本来会对子组件产生作用的父组件样式。
        3.父组件添加scoped，子组件未添加
            父组件元素都添加上data-v-  属性，包括子组件的根节点，但是子组件的内层样式 不会受到影响，这也是直接修改element-ui或者vant-ui子组件不生效的原因，要借助深度作用选择器或样式不写在scoped中。
            如果只修改子组件根节点的样式，还是可以写到父组件的scoped CSS里面，因为一个子组件的根节点会同时存在 两个data-v属性的，一个是父组件本来的，另一个是子组件根节点上面的；（见上图左边部分）；所以也会影响到子组件的根节点元素。
        4.父组件添加scoped，子组件也添加
            子组件使用自己的样式，不受父组件影响。

        解决办法，使用深度作用选择器
            父元素使用/deep/或者>>>穿透？
            sass之类的预处理器无法正确解析>>>，所以这种情况下用/deep/或者::v-deep取代

### 表单校验
    问题：把cate_id改成id，prop也改成id，trigger为change，但是验证规则不消失？？？？
    
    content 对应quill-editor富文本编辑器，不是el提供的标签
    el-input可以用trigger：blur校验
    下拉框、下拉菜单、复选框都是在change事件时进行校验

    富文本编辑器校验：要自己绑定校验事件,并且绑定的是change事件

### 前端读取图片以及传图片文件给后台
    通过input[type='file']让用户选择文件，通过事件对象.target.files拿到用户选择的文件对象
    前端需求：把图片通过src预览到页面,
        1.把图片转成base64字符串：new FileReader()
        给src赋予base64字符串的值，特点以data:image/png;base64,开头

        2.文件转成图片链接地址：URL.createObjectURL(读取到的文件)
        注意：此地址只能在前端使用，不能通过vue变量保存此值放到img标签里，只能通过对标签进行dom操作setattribute操作

    后台需求：
        1.base64字符串传递给后台
        2.用new FormData()表单数据直接装读取到的文件本身，再传递给后台
### 后端返回图片
    后端返回的图片不是完整图片路径
    原因：服务器域名以后可能发生变化，所以数据库里的地址只有相对路径
    要求：前端请求图片时，后端告诉你图片文件真身所在服务器域名，前端自己拼接前缀

    问题：
    组件创建时，会用data里的默认值，让template里的标签先渲染一次，
    发送网络请求时，data里的数据会更新，template里使用此变量的dom也会更新
    解决：
        用v-if，有值的时候再渲染此dom
    
### 格式化时间
    安装格式化时间第三方包
    yarn add dayjs
    // 基于dayjs封装一个全局函数来格式化时间（任意组件可以使用$formDate）
    Vue.prototype.$formatDate = (dateObj) => {
    // 借助dayjs内置方法把日期对象格式化为，并且把格式化的字符串返回到调用的
        return dayjs(dateObj).format('YYYY-MM-DD HH:mm:ss')
}


### 分页使用
        <el-pagination
        :page-sizes="[2, 3, 5, 10]"
        :page-size.sync="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">j
        </el-pagination>

         :page-sizes：
            每次列表展示数据的条数
        layout：
            分页的布局，值分别表示：
                总页数，条数/页，（prev+pager+next这三个属性是分页的基本属性上一页，页数，下一页），跳转到第几页
        ：total:指定总页数

        属性.sync:
            表示外部组件（elementui）与原生组件的data里的数据间双向绑定


### 打包项目
    package.json：serve开启服务，打包项目，
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },       

    问题：打开index.html,出现了404问题
    原因：
    1.默认打包，index.js引入其他打包的文件用的是绝对地址
    地址是以/开头，（当要找到index.html打开文件是所在服务器的根地址（文件夹））
    要确保vscode+liveserver插件打开时，根目录是dist文件夹
    如果把dist文件夹交给后台运维工程师部署到服务器上面，dist的内容就得在服务器的根目录上面才行
    但是服务器一般会有多个项目，不让用根目录直接放一个项目
    解决办法:
        webpack会让你写一个配置项：pubicPath（控制index.js引入其它资源的前缀地址）
        vue.config.js（脚手架配置文件，webpack配置文件）
        publicPath：默认值 '/' 确保开发环境下是这个值，因为开发环境下，服务器会把所有打包在内存里面且作为服务器的根目录文件夹，绝对地址
        生产环境，准备上线，这时就要用相对地址，publicPath：'./'
        路径不以/开头，就是默认以./开头

    项目中有些包不需要，所以不会打包到dist，所以dist的体积会比开发环境的小
    但是还有一些外部组件比如elementui的包可以去掉
    方法：
        在vue.config.js里配置：
            /////

### cdn
    cdn全称Content Delivery Network 内容分发网络，我们用它来提高访问速度
    把一些静态资源：css js 图片 视频 放在第三方cdn服务器上面，可以加速访问速度
    unpkg.com
    unpkg.com/:package@:version/:file