vue-好看的版本更新记录

本文档展示了如何基于Vue和ElementUI来创建一个版本更新记录的页面,并将其集成到SpringBoot应用中。通过创建特定的Controller,从classpath读取资源文件,实现了对静态资源(如HTML, CSS, JS, JSON)的处理。更新日志存储在version.json文件中,每次更新只需添加新的日志条目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-好看的版本更新记录

更新历史

名称内容
版本1.0
创建时间2021-10-26
更新时间2021-10-26

功能清单

  • 基于vue、element实现版本更新日志的显示
  • 基于json文件记录更新日志

最终效果

image

集成流程

拉取github地址

https://github.com/mathcoder23/vue-version-log

集成到Spring Boot

拷贝github中的资源到Spring Boot的resouce文件夹的version下。并创建以下Controller

package com.eface.platform.ai.administer.gateway.commapi;

import lombok.extern.slf4j.Slf4j;
import org.pettyfox.base.web.dto.rest.RestObjectResponse;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.Resource;
import org.springframework.core.io.ResourceLoader;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.nio.charset.StandardCharsets;

/**
 * 服务器软件版本信息
 *
 * @author Petty Fox
 */
@Controller
@RequestMapping("/api/commApi/version")
@Slf4j
public class VersionController {

    @Value("${project.version}")
    private String serviceVersion;
    @javax.annotation.Resource
    private ResourceLoader resourceLoader;

    @GetMapping("version.html")
    public void version(HttpServletResponse response) throws IOException {
        response(response, "classpath:/version/version.html", "text/html");
    }

    @GetMapping("element-index.css")
    public void element(HttpServletResponse response) throws IOException {
        response(response, "classpath:/version/element-index.css", "text/css");
    }

    @GetMapping("element-index.js")
    public void elementJs(HttpServletResponse response) throws IOException {
        response(response, "classpath:/version/element-index.js", "application/javascript");
    }

    @GetMapping("vue.js")
    public void vue(HttpServletResponse response) throws IOException {
        response(response, "classpath:/version/vue.js", "application/javascript");
    }

    @GetMapping("version.json")
    public void versionJson(HttpServletResponse response) throws IOException {
        response(response, "classpath:/version/version.json", "application/json");
    }

    @GetMapping("/")
    @ResponseBody
    public RestObjectResponse<String> version() {
        return RestObjectResponse.ok(serviceVersion);
    }

    private void response(HttpServletResponse response, String filename, String type) throws IOException {
        Resource resource = resourceLoader.getResource(filename);
        InputStream is = resource.getInputStream();
        InputStreamReader isr = new InputStreamReader(is, StandardCharsets.UTF_8);
        BufferedReader br = new BufferedReader(isr);
        String data = "";
        StringBuffer sb = new StringBuffer();
        while ((data = br.readLine()) != null) {
            sb.append(data).append("\n");
        }
        br.close();
        isr.close();
        is.close();

        String html = sb.toString();
        response.setContentType(type + ";charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(html);
    }
}


访问路径:/api/commApi/version/version.html

更新日志到version.json

{
  "title": "xxx平台更新日志",
  "logs": [
    {
      "date": "2021-10-25",
      "version": "1.0.2",
      "contentFeature": [
        "调整版本号显示"
      ],
      "contentBug": [
      ]
    },
    {
      "date": "2021-09-30",
      "version": "1.0.0",
      "content": [
        "新增 初始化框架",
        "新增 初始化框架"
      ]
    }
  ]
}

每次更新,添加一条logs日志

### Vue-Demi 的版本更新日志及升级指南 Vue-Demi 是一个用于兼容 Vue 2 和 Vue 3 的工具库,它通过抽象化 API 差异来帮助开发者更轻松地编写可以在两个版本之间运行的代码[^1]。以下是关于 Vue-Demi 的版本更新内容以及如何进行升级的相关说明。 #### 更新内容概述 Vue-Demi 的每次版本更新通常会涉及以下几个方面: 1. **API 支持扩展** 随着 Vue 官方不断推出新功能或调整现有功能的行为方式,Vue-Demi 可能会对这些变化做出适配和支持。例如,在某些版本中新增了对 `defineComponent` 或者 Composition API 中特定函数的支持。 2. **性能优化** 开发团队可能会针对内部实现机制进行改进以提升加载速度和执行效率。这包括减少不必要的依赖注入次数或是精简打包体积等措施。 3. **Bug 修复** 如果发现任何已知问题影响到正常使用场景,则会在后续迭代过程中予以解决。比如之前存在当项目同时引入多个不同版本时可能导致冲突的情况已被妥善处理。 4. **文档完善与示例补充** 每次发布新版都会同步更新官方文档,并提供更多实际应用案例供用户参考学习。 #### 如何升级至最新版? 要将您的项目迁移到最新的 Vue-Demi 版本,请按照以下方法操作: 1. **检查当前使用的版本号** 使用命令行工具查看本地安装包的具体信息: ```bash npm list vue-demi ``` 2. **修改 package.json 文件中的指定范围** 打开项目的根目录下的 `package.json` 文件,找到有关 `"vue-demi"` 字段的位置并将其设置为目标版本号(可以是确切数值也可以采用通配符形式如 ^x.y.z 表达允许自动匹配更高次要修订级别)。例如: ```json { "dependencies": { "vue-demi": "^0.13.8" } } ``` 3. **重新安装依赖项** 运行如下指令完成下载过程的同时还会依据配置文件自动生成 lock 锁定清单记录具体选用情况以便未来重现环境一致性: ```bash npm install ``` 4. **验证改动效果** 启动开发服务器观察是否存在异常报错现象;如果一切正常则表明成功切换到了目标状态! ```javascript // 测试是否能够正确调用 VueDemi 提供的功能接口 import { isVue2, isVue3 } from 'vue-demi'; console.log(`Running on ${isVue2 ? 'Vue 2' : (isVue3 ? 'Vue 3' : 'Unknown')}`); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值