用宝塔轻松部署java springboot的前后端分离项目
1.介绍传统启动java项目需要上传jar然后用命令行nohup java -jar去启动，然后前端也是单独启动，同时还需配置nginx，稍不留神出了差错就要定位很久，而宝塔运维面板对于前后端分离的项目，只需一个步骤就可以集合管理前后端同时自动设置好nginx和域名等，很方便，还能实时监测系统占用查看日志也很方便，所以推荐这种方式 2.前置准备 云服务器安装完宝塔 这个直接百度有一键脚本 宝塔安装jdk 软件商店搜索jdk即可 这次项目是用的1.8 宝塔安装数据库 并将后端的配置中的正式环境数据库地址改为宝塔的数据库信息 购买一个域名（没有就用ip:端口访问 最好是买一个） springboot项目已打包成jar 前端项目已打包（这里是vue3项目 打包的是dist包） 3.步骤创建一个文件夹，上传你的jar包和前端包注意前端包要解压 网站里添加java项目 不出意外你保存完就能看到项目运行了点击项目，在左侧可以看到项目的启动日志，方便看为啥挂了 左侧的ssl可以申请免费域名证书，开启https访问，注意你先将你的域名解析到你的服务器 然后访问你的域名就可以浏览你的网站了！
用chatgpt为网站首页绘制一个canvas星空特效
1.介绍canvas 是 HTML5 引入的一个强大元素，用于在网页上绘制图形。它为开发者提供了一种在网页里绘制2D图形的机制，并且可以在其上进行动态图形渲染。canvas 元素本身是一个容器，必须通过 JavaScript 来绘制图像。一个简单的 canvas 元素示例如下： <canvas id="myCanvas" width="400" height="300"></canvas> 1.1 如何使用获取 Canvas 画布在 JavaScript 中，你需要获取 canvas 元素的 2D 渲染上下文，该上下文提供了绘制线条、矩形、文本等的方法： const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d'); 1.2 常用功能 图片绘制: 可以通过 drawImage() 方法在 canvas 上显示图片。 动画: 通过不断更新 can...
使用 Tailwind CSS 引入小米字体 告别原生自带丑字体
1.效果展示整体效果更加圆润丝滑，看的也比较舒服，之前的微软雅黑啥的总感觉在看word文档，很不舒服 2.引入步骤src的assets目录下新建fonts文件夹放入字体文件编写fonts.css fonts.css内容： @font-face { font-family: 'Miss Font'; font-style: normal; font-weight: 400; font-display: swap; src: url('Miss_Font_1.woff2') format('woff2');}@font-face { font-family: 'Miss Font'; font-style: normal; font-weight: 400; font-display: swap; src: url('Miss_Font_2.woff2') format('woff2');}@font-fa...
简单易用的css动画库 Animate.css
1. Animate.css 是什么？Animate.css 是一个跨浏览器的 CSS 动画库，提供了许多预设的、流畅的动画效果。用户只需添加几个 CSS 类名，就可以轻松实现复杂的动画效果，无需编写任何 JavaScript 代码。 2. 为什么使用 Animate.css？ 简单易用：通过添加或删除类名，你可以触发动画，这使得实现动画效果变得非常直观。 高性能和跨浏览器：Animate.css 专为性能进行了优化，并在多数现代浏览器中表现良好。 丰富的动画选择：无需从零开始设计动画，库中提供了大量预制动画，如“fadeIn”、“bounce”、“zoomIn”等。 与 Vue 配合完美：Vue 提供了 transition 组件，可以与 Animate.css 轻松结合，为你的 Vue 应用添加精美动画。 3.开始动手3.1 安装打开命令行，执行如下安装命令： npm install animate.css --save 3.2 引入在 main.js 文件中引入它： import 'animate.css'; 引入后，就可以添加相关动画效果了。 3.3...
vue中回车或其他键盘按键的事件监听
1.前言很多交互做的好一点的网站，都会有这样的功能，当输入完用户名、密码后，直接敲击回车键就能完成登录了在 Vue 开发里，用户与页面交互举足轻重，键盘输入是常见交互形式。精准监听键盘事件，能提升应用功能与体验，像表单提交时监听回车键，以及在游戏、文本编辑、导航控制等场景对各类按键响应处理，都可让交互更便捷高效。下面，我们深入探究 Vue 中回车及其他常用键盘值的事件监听实现，助力开发者打造更灵活、交互性强的 Vue 应用。 2. 代码实现在你需要添加监听的组件脚本中添加代码： <script setup>// 省略...import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'// 省略...// 按回车键后，执行登录事件function onKeyUp(e) { console.log(e) if (e.key == 'Enter') { onSubmit() }}/...
vue中的请求拦截、响应拦截和全局路由拦截
1. 前言本篇将为 axios 请求库添加请求拦截器、响应拦截器，通过它们，就可以在请求之前，或者请求结束以后定制一些个性化需求。 2. 拦截器关于拦截器的详细文档，可访问官方地址：https://www.axios-http.cn/docs/interceptors ，官方对它的解释是： 在请求或响应被 then 或 catch 处理前拦截它们。 // 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });// 添加响应拦截器axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return respo...
vue3开发h5页面实现扫描二维码功能
安装依赖html5-qrcode 是一个用于在现代浏览器中进行二维码扫描的 JavaScript 库。它利用 HTML5 的 getUserMedia API 来访问设备的摄像头，并使用 QRCode 库来解码二维码。这个库非常适合在 Web 应用中实现二维码扫描功能，尤其是在移动设备上。 npm install html5-qrcode 实例组件<template> <div> <button @click="startScan">扫码</button> <p v-if="qrCodeContent" style="display: inline-block; margin-left: 10px;">{{ qrCodeContent }}</p> <div id="reader" style="width: 100%;"></di...
vue3+vite初始化项目
为什么使用vite1. 启动速度和热更新速度Vite：Vite 利用了现代浏览器原生支持的 ES 模块（ESM），在开发环境下直接使用原生 ESM 进行模块加载，无需打包，因此启动速度非常快。热更新（HMR）也几乎是即时的，因为 Vite 只更新发生变化的模块，而不是整个应用。 Vue CLI：Vue CLI 使用 Webpack 进行打包，启动和热更新速度相对较慢，尤其是在大型项目中。 2. 开发体验Vite：Vite 的开发体验更加流畅，因为它不需要等待整个应用打包完成就可以开始开发。开发者可以更快地看到代码变化的效果。 Vue CLI：Vue CLI 在开发过程中需要等待打包完成，尤其是在项目规模较大时，开发体验相对较差。 3. 现代工具链Vite：Vite 是一个现代化的构建工具，支持 TypeScript、JSX、CSS 预处理器等现代前端开发所需的工具链。它还内置了对 Vue 3 的支持，并且可以轻松集成其他工具和插件。 Vue CLI：虽然 Vue CLI 也支持现代工具链，但它的架构和配置相对复杂，尤其是在需要自定义配置时。 4. 生态系统Vite：Vite 的生...
vue3 路由的引入和配置
在 Vue 中，router 是一个核心插件，负责管理应用的路由配置，实现单页面应用（SPA）中的页面导航和组件切换，使得开发者能够通过定义路由映射来动态加载和渲染不同的组件，从而构建复杂的用户界面和交互体验。官方网站https://router.vuejs.org/ router的安装npm install vue-router@4 具体的版本会在package.json里体现 路由定义与导出 index.js: import Main from '../view/Main.vue'import Login from '../view/login/login.vue'import { createWebHashHistory, createRouter } from 'vue-router'const routes = [ { path: '/', component: Main }, { path: '/login'...
Vue 中 KeepAlive 的用法全解析
1. 前言在 Vue 开发过程中，我们常常会碰到组件频繁切换的情况。大家都知道，组件每一次切换时的创建与销毁，其实都在消耗着系统资源，这可能会对应用的性能产生影响，甚至让用户体验大打折扣。而 Vue 为我们提供的 KeepAlive 组件，就像是一把优化性能的利器。它能够将那些需要频繁切换的组件实例缓存起来，当再次用到这些组件时，直接从缓存中调取，而不是重新创建，从而显著提升应用的运行效率与响应速度。无论是小型项目还是大型复杂应用，了解并掌握 KeepAlive 的用法，都能帮助我们更好地优化 Vue 应用，让我们的开发工作更加得心应手。接下来，咱们就深入地了解一下它的具体用法。 2. KeepAlive 基本概念与用法KeepAlive 是 Vue 内置的一个组件，其核心作用就是缓存组件实例。在一般的 Vue 应用场景里，比如通过 v - if 或者 v - show 指令切换组件，又或者是在路由切换时的 <router - view> 部分，组件默认是会被销毁然后重新创建的。但 KeepAlive 改变了这种模式。假设我们有 ComponentA 和 Compon...
