• 导入（excel）+导出（excel）+国际化(i18n)+

    一、基于前后端配合

    这里主要是用后台提供的接口

    1.导入（excel）

    思路：确认导入 执行方法importFile 调用后台接口

    1. // 车型导入数据
    2. const ImportCarcate = function (data) {
    3.     return axios({
    4.         method: 'post',
    5.         url: `/lzkc/manager/car/typeNos/batch`,
    6.         data: data
    7.     })
    8. }
    1.     // 导入
    2.     importFile() {
    3.       console.log(this.uploadLoading); 
    4.       if (this.uploadLoading) { // 是false 初始值 则不继续执行
    5.         return;
    6.       }
    7.       this.uploadLoading = true; // 设置为true 开始执行
    8.       this.importInterface(this.dataList) // 传递数据
    9.         .then((res) => {
    10.           this.uploadLoading = false; // 设置为false
    11.           if (res.resultStatus) { 
    12.             this.step = 3;
    13.             this.successNum = res.resultData.successNum;
    14.             this.failNum = res.resultData.errorNum;
    15.             this.key = res.resultData.errorExcelUrl;
    16.           }
    17.         })
    18.         .catch((err) => {
    19.           console.error(err);
    20.           this.uploadLoading = false;
    21.         });
    22.     },

    2.导入（批量上传图片）

    思路：和导入 同理↑

    3.导出（excel）

    调用接口，传递参数

    1.     //导出
    2.     exportFile() {
    3.       this.loading = true;
    4.       GStoreexport().then((res) => {
    5.         const blob = new Blob([res]);
    6.         const fileName = "门店列表.xlsx"; // 设置下载的文件名
    7.         const elink = document.createElement("a"); // 创建a标签
    8.         elink.download = fileName; // 指定a标签的下载名
    9.         elink.style.display = "none"; // 隐藏a标签
    10.         elink.href = URL.createObjectURL(blob); // 解析 blob格式地址 赋值给a标签
    11.         document.body.appendChild(elink); // 添加到页面中
    12.         elink.click(); // 实现点击下载 
    13.         URL.revokeObjectURL(elink.href); // 清除a标签的地址
    14.         this.loading = false;
    15.         this.$message.success("导出成功");
    16.       });
    17.     },
    18.  
    19. // 导出接口
    20. const GStoreexport = function (params) {
    21.     return axios({
    22.         method: 'get',
    23.         responseType: 'blob',
    24.         url: '/lzkc/manager/stores/export',
    25.         params: params
    26.     })
    27. }

    二、前端基于插件

    README.md:

    1. ## 后台管理系统
    2.   某个个后台管理系统，包含商品管理 用户管理 订单等等信息。 
    3.  
    4. 前端开发内容：
    5.     PC端(比如:京东)  移动端(手机预览的网页)  小程序  后台管理界面  
    6.  
    7. 后台开发：
    8.     服务器： 后台语言 java、 php、 python 、大数据、人工智能 
    9.  
    10. 架构师： --- 技术总监 
    11.  
    12. 前后端分离：
    13.     用户 --- >前端-视图-数据---->后台-提供接口 ---> 数据库  
    14.  
    15. ## 技术点
    16.     Vue + Vue-router  + Vuex + Element-ui + Axios  + Echarts + 其他三方库
    17.  
    18.  
    19. ## 项目搭建
    20. 1. vue create vue-ego 
    21. 2. vue-router vuex 
    22. 3. axios 
    23. 4. vue add element --(按需)
    24.  
    25.  
    26. ## 项目初始化
    27. 1. 删除无用的组件 home.vue about.vue hello... 
    28. 2. css初始化  
    29. 3. incofont 图标导入
    30.  
    31.  
    32. ## 后台服务
    33. 1. node.js服务  
    34. 2. express 
    35. 3. jwt（生成token）jsonwebtoken   解析token: 安装： jwt-decode 
    36. 4. mysql
    37. 5. mockjs  -- 模拟数据 
    38.    1. 安装： cnpm i mockjs -S 
    39.    2. 引入： 
    40.       node.js: const Mock = require('mockjs')
    41.       前端js:  import Mock from 'mockjs'
    42.  
    43.     3. 语法：
    44.        Mock.mock() 
    45.  
    46.  
    47. ## 路由大配置
    48. 1. 页码布局配置 同级登录界面
    49.  
    50.  
    51. ## 商品管理界面 
    52.  
    53.  
    54. ### 类目选择
    55.  
    56.  
    57. ### 上传图片
    58. 1. upload 图片上传
    59. 2. 后台配置
    60.    1. 后台安装 multer 模块   同时引入fs模块
    61.    2. router.js入口文件导入模块
    62.        const fs=require('fs')
    63.         const multer=require('multer')
    64.    3. 上传图片 配置upload
    65.  
    66. ### 富文本编辑
    67. 1. 百度编译器
    68. 2. wangEditor 
    69.  
    70. wangEditor使用步骤：
    71. 1. 官网网址：https://www.wangeditor.com/doc/ 
    72. 2. 基本使用
    73.     1. 安装：npm i wangeditor --save 
    74.     2. 引入模块：
    75.        import E from "wangeditor"
    76.     3. 使用wangeditor
    77.         const editor = new E("#div1")
    78.         editor.create()
    79.  
    80. 3. 常用配置
    81.     1. 清空内容
    82.          editor.txt.clear() 清空编辑器内容。
    83.  
    84.     2. 设置内容
    85.          editor.txt.html('') 获取 html 
    86.  
    87.     3. 配置菜单
    88.        1. 配置菜单使用 editor.config.menus 定义显示哪些菜单和菜单的顺序
    89.      
    90.     4. 配置 onchange 回调函数 
    91.        配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行
    92.  
    93.  
    94. ## 国际化
    95.  
    96. ### vuei8n 
    97. 1. 介绍：
    98.    Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。
    99.  
    100. 2. 安装
    101.    1. npm install vue-i18n
    102.    2. main.js导入或者是单独的文件
    103.         import Vue from 'vue'
    104.         import VueI18n from 'vue-i18n'
    105.  
    106.         Vue.use(VueI18n)
    107.  
    108.  
    109. 3. 使用步骤
    110.    1.  如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。
    111.         // import Vue from 'vue'
    112.         // import VueI18n from 'vue-i18n'
    113.         //
    114.         // Vue.use(VueI18n)
    115.     2. 准备翻译的语言环境信息
    116.         const messages = {
    117.                 en: {//英文
    118.                     home: {
    119.                         hello: 'hello world',
    120.                         xx:xx,
    121.                         ...
    122.                     },
    123.                     goods:{
    124.  
    125.                     }
    126.                 },
    127.                 zh: {//中文
    128.                     home: {
    129.                         hello: '你好 世界',
    130.                         xx:xx,
    131.                         ...
    132.                     },
    133.                     goods:{
    134.                         
    135.                     }
    136.                 }
    137.             }
    138.     3.  通过选项创建 VueI18n 实例
    139.         const i18n = new VueI18n({
    140.             locale: 'en', // 设置地区
    141.             messages, // 设置地区信息
    142.         })
    143.  
    144.     4.  通过 `i18n` 选项创建 Vue 实例
    145.         new Vue({ i18n }).$mount('#app')
    146.  
    147.  
    148.     5. 使用语法：
    149.        
      {{ $t("home.hello") }}
    150.  
    151.  
    152. ### element 国际化
    153. 1. 导入
    154.      import Element from 'element-ui'
    155.  
    156. 2. 导入语言环境
    157.     import enLocale from 'element-ui/lib/locale/lang/en'
    158.     import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
    159.  
    160.     目前 Element 内置了以下语言：
    161.         简体中文（zh-CN）
    162.         英语（en）
    163.         德语（de）
    164.         葡萄牙语（pt）
    165.         西班牙语（es）
    166.         丹麦语（da）
    167.         法语（fr）
    168.         ... 
    169.  
    170. 3. 配置语言环境
    171.    const messages = {
    172.         en: {
    173.             message: 'hello',
    174.             ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
    175.         },
    176.         zh: {
    177.             message: '你好',
    178.             ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
    179.         }
    180.     }
    181.  
    182.  
    183. 4. 配置使用
    184.     Vue.use(Element, {
    185.         i18n: (key, value) => i18n.t(key, value)
    186.     })
    187.  
    188.  
    189. ## 登录--路由拦截
    190.  
    191.  
    192.  
    193. ## echarts 
    194. 1. 安装：npm install echarts -S
    195. 2. 使用方式
    196.    1. 导入echarts在组件内使用
    197.    2. 导入全局 挂载原型上 全局使用
    198.    3. 开发成vue插件 
    199.  
    200.  
    201. 3. 使用 -main.js
    202.    1. import * as echarts from 'echarts'
    203.         Vue.prototype.$echarts = echarts;
    204.  
    205.     2. 直接使用
    206.        this.$echarts.xxx
    207.  
    208.  
    209. ## 规格参数
    210.  
    211.  
    212.  
    213.  
    214. ## 订单列表
    215.  
    216.  
    217.  
    218. ## vue-PDF
    219. 参考：gitHub： https://github.com/FranckFreiburger/vue-pdf
    220.  
    221. 步骤：
    222. 1. npm install --save vue-pdf
    223. 2. import pdf from 'vue-pdf'
    224. 3.  components: {
    225.     pdf
    226.   }
    227. 4.  "./static/relativity.pdf">
    228.  
    229.  
    230. 问题：
    231.     pdf打印的时候 看到视图  乱码的中文
    232.  
    233. vue-pdf网址:https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7
    234.  
    235. ## vue-tour
    236. 1. npm i  vue-tour
    237. 2. 使用
    238.     import Vue from 'vue'
    239.     import App from './App.vue'
    240.     import VueTour from 'vue-tour'
    241.  
    242.     require('vue-tour/dist/vue-tour.css')
    243.  
    244.     Vue.use(VueTour)
    245.  
    246.     new Vue({
    247.     render: h => h(App)
    248.     }).$mount('#app')
    249.

    1.导出为pdf

    插件：vue-pdf

    github地址：https://github.com/FranckFreiburger/vue-pdf

     npm地址：vue-pdf - npm

     解决pdf文件位置：vue中本地pdf文件加载错误，文件不显示_生活的小欢呼的博客-CSDN博客_vue-pdf 不显示

    解决pdf乱码：

    Fix fonts issue in printing by arioth · Pull Request #130 · FranckFreiburger/vue-pdf · GitHub

    1.下载

    npm install vue-pdf

    2.import 引入， 使用组件注册，并使用

    3.代码写法：

    2.  
    3. <script>
    4. //1. 安装pdf : npm i vue-pdf -S
    5. //2. 导入pdf  3. 使用组件
    6. import pdf from "vue-pdf";
    7. //获取pdf文件
    8. // const source = pdf.createLoadingTask("./sxt.pdf");
    9. export default {
    10.   components: {
    11.     pdf,
    12.   },
    13.   data() {
    14.     return {
    15.       dialogVisible: false,
    16.       num: 1,
    17.       currentPage: 0,
    18.       pageCount: 0,
    19.       numPages: undefined,
    20.       src: source,
    21.     };
    22.   },
    23.   mounted() {
    24.     // this.src.promise.then((pdf) => {
    25.     //   this.numPages = pdf.numPages;
    26.     // });
    27.   },
    28.   methods: {
    29.     //打印合同
    30.     // print() {
    31.     //   this.$refs.mypdf.print();
    32.     // }
    33.   }
    34. };
    35. script>
    36.  
    37. <style>
    38. style>

    2.图片下载

     得到图片的base64编码

     3.导出为excel

    1.下载

    npm install file-saver xlsx -S

    npm install script-loader - D

    2.在src目录下新建一个excel文件夹，存入Blob.js和Export2Excel.js文件

    js文件存放位置： 

    https://gitee.com/wei-shuai-lei/vuetwo

    3.在common文件夹里新建js文件夹再新建util.js 

    1. /***
    2.  * export2Excel(columns,list) 导出excel表格
    3.  * columns Arrary=[{},{}]  表头 =[{title:'',key:''}]
    4.  * list =[] table的数据 [{},{}]
    5.  */
    6. export function export2Excel(columns,list,name){
    7.     require.ensure([], () => {
    8.         const { export_json_to_excel } = require('../../excel/Export2Excel');
    9.         let tHeader = []
    10.         let filterVal = []
    11.         console.log(columns)
    12.         if(!columns){
    13.             return;
    14.         }
    15.         columns.forEach(item =>{
    16.             tHeader.push(item.title)
    17.             filterVal.push(item.key)
    18.         })
    19.         const data = list.map(v => filterVal.map(j => v[j]))
    20.         export_json_to_excel(tHeader, data,name);
    21.     })
    22. }

    4.国际化

    1.vue-i18n：

    通过原型上的 vuei18n.locale

    介绍 | Vue I18n

    1. 介绍：

       Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

    2. 安装

       1. npm install vue-i18n

       2. main.js导入或者是单独的文件

            import Vue from 'vue'

            import VueI18n from 'vue-i18n'

            Vue.use(VueI18n)


     

    3. 使用步骤

       1.  如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。

            // import Vue from 'vue'

            // import VueI18n from 'vue-i18n'

            //

            // Vue.use(VueI18n)

        2. 准备翻译的语言环境信息

            const messages = {

                    en: {//英文

                        home: {

                            hello: 'hello world',

                            xx:xx,

                            ...

                        },

                        goods:{

                        }

                    },

                    zh: {//中文

                        home: {

                            hello: '你好 世界',

                            xx:xx,

                            ...

                        },

                        goods:{

                           

                        }

                    }

                }

        3.  通过选项创建 VueI18n 实例

            const i18n = new VueI18n({

                locale: 'en', // 设置地区

                messages, // 设置地区信息

            })

        4.  通过 `i18n` 选项创建 Vue 实例

            new Vue({ i18n }).$mount('#app')


     

        5. 使用语法：

           

    {{ $t("home.hello") }}


     

    2.element中的国际化

    ### element 国际化

    1. 导入

         import Element from 'element-ui'

    2. 导入语言环境

        import enLocale from 'element-ui/lib/locale/lang/en'

        import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

        目前 Element 内置了以下语言：

            简体中文（zh-CN）

            英语（en）

            德语（de）

            葡萄牙语（pt）

            西班牙语（es）

            丹麦语（da）

            法语（fr）

            ...

    3. 配置语言环境

       const messages = {

            en: {

                message: 'hello',

                ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)

            },

            zh: {

                message: '你好',

                ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)

            }

        }


     

    4. 配置使用

        Vue.use(Element, {

            i18n: (key, value) => i18n.t(key, value)

        })


     

    5.富文本编辑

    ### 富文本编辑

    1. 百度编译器

    2. wangEditor

    wangEditor使用步骤：

    1. 官网网址：wangEditor

    2. 基本使用

        1. 安装：npm i wangeditor --save

        2. 引入模块：

           import E from "wangeditor"

        3. 使用wangeditor

            const editor = new E("#div1")

            editor.create()

    3. 常用配置

        1. 清空内容

             editor.txt.clear() 清空编辑器内容。

        2. 设置内容

             editor.txt.html('') 获取 html

        3. 配置菜单

           1. 配置菜单使用 editor.config.menus 定义显示哪些菜单和菜单的顺序

         

        4. 配置 onchange 回调函数

           配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行

    6. a标签下载

    <a href="https://img9.51tietu.net/pic/20190918/p0iwg2kzx13p0iwg2kzx13.jpg" download="123456.jpg">下载图片a>

    a标签主要是用download这个属性去下载的，download指定下载的文件名，href为下载路径

    1. download 有跨域的问题，非同源会相当于导航
    2. 再服务端设置 
      Content-Disposition ,使用 http 响应头 Content-Disposition Content-Disposition

    3. 先下载源数据文件，生成blog对象，再使用 URL.creatObjectURL() 创建一个非跨域的数据源 然后再页面写入a标签支持下载

      1.    这里使用element UI里提供的上传, 再上传成功拿到file （再file.raw 中）
      2. 转换成非跨域的数据源
      3.      
      4.       class="avatar-uploader"
      5.       action="http://localhost:8888/upload"
      6.       :show-file-list="false"
      7.       :on-success="handleAvatarSuccess"
      8.       name="file"
      9.     >
      10.       <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      11.       <i v-else class="el-icon-plus avatar-uploader-icon">i>
      12.     
      13.  
      14.     handleAvatarSuccess(res, file) {
      15.       console.log(res);
      16.       console.log(file);
      17.       console.log(URL.createObjectURL(file.raw));
      18.       this.imageUrl = URL.createObjectURL(file.raw);
      19.     },

    7. URL.createObjectURL、Blob 实现保存文件 

    1. 生成blob对象再使用 URL.createobjectURL() 创建一个非跨域的数据源，然后在页面写入a标签支持下载
    2. Blob 表示二进制类型的大对象。通常是影像、声音或多媒体文件
    3. 通过URL.createobjectURL(blobVal)，获取要保存的文件的一个URL，这个ur1带hash，保存在内存中
    4. 用URL.revokeObjectURL()来释放这个object URL，通知浏览器可以不必继续引用这个文件了
       

    后台：

    1. // 上传视频
    2. app.post('/uploadVideo', upload.single('file'), (req, res) => {
    3.     if (req.file) {
    4.         // console.log("上传成功");
    5.         res.send({ message: '上传成功啦' })
    6.     } else {
    7.         console.log("失败....");
    8.         res.send("失败了.....")
    9.     }
    10.  
    11. })

    前台：

    这里使用element ui的上传 ，上传成功后，点击按钮下载视频

    1.     
    2.       class="avatar-uploader"
    3.       action="http://localhost:8888/uploadVideo"
    4.       :show-file-list="false"
    5.       :on-success="videosSuccess"
    6.       name="file"
    7.     >
    8.       <video
    9.         v-if="videoUrl"
    10.         :src="videoUrl"
    11.         :autoplay="videoUrl ? true : false"
    12.         controls
    13.         :crossorigin="false"
    14.       />
    15.       <i v-else class="el-icon-plus avatar-uploader-icon">i>
    16.     
    17.     <button v-if="videoUrl" id="btn" @click="btnClick">下载视频button>
    18.  
    19. // ------------------------------------------------------------------
    20.     videosSuccess(res, file) {
    21.       console.log(res);
    22.       console.log(file);
    23.       console.log(URL.createObjectURL(file.raw));
    24.       this.videoUrl = URL.createObjectURL(file.raw);
    25.     },
    26.     btnClick() {
    27.       if (this.videoUrl) {
    28.         // 创建a标签
    29.         const a = document.createElement("a");
    30.         // 设置 下载地址 和文件名 并隐藏
    31.         a.href = this.videoUrl;
    32.         a.download = "宣传视频.mp4";
    33.         a.style.display = "none";
    34.         // 添加到body
    35.         document.body.appendChild(a);
    36.         // 点击下载
    37.         a.click();
    38.         // 清除URL
    39.         URL.revokeObjectURL(this.videoUrl);
    40.         // 删除a标签 
    41.         document.body.removeChild(a);
    42.       } else {
    43.         this.$message.error("要下载的视频有问题, 请找管理员");
    44.       }
    45.     },

    8.file、Blob、FormData

    1.  
      1. File对象的初始化 (new File )
      2. 第一个参数是一个字符串数组，你可以理解为就是文件内容
      3. 第二个参数就是文件名字符串。
      4. new File(["First Line Text","Second Line Text"],FileName);
    2.  
      1. repeat(n) 返回一个新字符串，表示将原字符串重复n次
      2. abc'.repeat(10)
    3.  
      1. File继承了所有Blob的属性
      2. File对象可以看作一种特殊的Blob对象，
    4.  
      1. oldBlob.slice([start [, end [, contentType]]])
      2. blob 对象可以通过 .slice() 得到一个新的 blob对象
    5.  
      1. FormData为序列化表单
      2. let data = new FormData();
      3. data . append("key"，"alue"）
      4. 把data作为传给服务器的数据
    6. 测试接口网站， https://httpbin.org/
    7. 实际工作中加入id 和 计数
    1.       //  创建 file对象
    2.       file: new File(["aaabbbccc"], "test"),
    3.       //  分片大小
    4.       size: 3,
    5.       // 上传地址
    6.       url: "https://httpbin.org/post",
    7.  
    8. ----------------------------------------------------------------
    9.     // 分片上传
    10.     async fileSize() {
    11.       for (let i = 0; i < this.file.size; i += this.size) {
    12.         const chunk = this.file.slice(i, i + this.size);
    13.         // console.log(chunk);
    14.         let updata = new FormData();
    15.         updata.append("chunkData", chunk);
    16.         const res = await fetch(this.url, { method: "post", body: updata });
    17.  
    18.         // res.json().then(res=>console.log(res.files.chunkData))
    19.       }
    20.     },

  • 相关阅读:
    第十五届蓝桥杯c++b组赛后复盘和真题展示
    autosar 诊断入门
    解读数据可用性赛道：如何讲好模块化区块链的叙事？
    适用于 Oracle® 电子商务套件的 ECM（企业内容管理）软件
    微信支付（小程序）-java实现与小程序实现
    本周四晚19：00知识赋能第六期第5课丨OpenHarmony WiFi子系统
    ORB-SLAM2 ---- ORBextractor::ComputeKeyPointsOctTree函数
    量化交易进行回测时有哪些有意义的统计指标？
    【openGauss】运维常用的SQL
    SpringCloud OpenFeign
  • 原文地址：https://blog.csdn.net/weixin_60968779/article/details/126684307