web开发全过程总结
目录
利用pnpm创建vue3的文件
使用pnpm创建项目
项目配置
在idea中创建Spring Boot项目
配置基础项目架构(三层架构)
利用pnpm创建vue3的文件
1.打开cmd,以管理员的身份运行
2.切换到自己想要建立项目的文件的目录下或者直接在文件中以cmd的形式打开
输入指令安装pnpm
npm install -g pnpm
结果为
使用pnpm创建项目
输入
pnpm create vue
输入指令后出现
根据提示输入项目名称,包名(需要小写)
因为含有了ESlint的插件,则无需勾选eslint和prettier
如果勾选了eslint和prettier,则应该这样选
依次将复制并运行
出现改页面则项目建立成功,可以在文件相应位置查看创立的文件。
项目配置
1.点击左上角的三条横线,点击文件,再点击打开文件夹,找到我们新创立的文件夹打开
2.删除不用的组件
将assets,components,stores,views中的文件清空。
3.打开App.vue,将组件中的内容修改为
4.打开终端,再打开GitBash
5.安装hushy(如果选择了ESlint和Prettier)
依次输入指令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"pnpm lint-staged
修改husky/pre-commit中的内容为
git init
pnpm dlx husky-init && pnpm install
git add .
pnpm i lint-staged -D
git commit -m '描述性信息'
配置package.json
{// ... 省略 ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}{"scripts": {// ... 省略 ..."lint-staged": "lint-staged"}
}
6.安装sass依赖
pnpm add sass -D
7.构建用户仓库和持久化-Pinia
pnpm add pinia-plugin-persistedstate -D
在main.js中导入pinia
在stores中创建一个user.js文件
// 从pinia库中导入defineStore函数,用于定义一个新的store
import { defineStore } from 'pinia';
// 从vue库中导入ref函数,用于创建一个响应式引用
import { ref } from 'vue';// 定义一个名为useUserStore的store,用于管理用户相关的状态
export const useUserStore = defineStore(// store的唯一标识符,通常用于调试和持久化'user',// 一个函数,返回一个包含state和actions的对象() => {// 使用ref创建一个响应式的token变量,初始值为空字符串const token = ref(''); // 定义一个设置token的函数,该函数接收一个参数t,并将其赋值给token.value// 这样做可以确保token是一个响应式引用,并且当它的值改变时,任何依赖于它的Vue组件都会重新渲染const setToken = (t) => (token.value = t); // 返回包含token和setToken的对象,这样它们就可以在store的外部被访问和使用了return { token, setToken };},// store的配置对象,这里启用了持久化功能{// 设置persist为true以启用持久化,这意味着store的状态将在页面刷新或重新加载时被保存和恢复// 注意:这里只是简单地启用了持久化,但没有指定具体的持久化策略(如存储位置、密钥等)persist: true // -->持久化}// 注意:上面的代码示例中,直接使用{ persist: true }可能不会按预期工作,// 因为Pinia本身并不直接支持持久化配置。持久化通常是通过插件(如pinia-plugin-persistedstate)来实现的。// 因此,需要先安装该插件,并在Pinia配置中正确地使用它。
);
8.安装axios(数据交互)
pnpm add axios
9.配置element-ui组件,依次输入指令
pnpm install element-plus
pnpm add element-plus
pnpm add -D unplugin-vue-components unplugin-auto-import
在main.js中全局导入
vue3就配置完成,前端部分基本配置好了.
在idea中创建Spring Boot项目
1.建立spring boot项目,按如下所选
勾选spring boot
点击pom.xml打开编辑启动器选择依赖项
配置基础项目架构(三层架构)
创立如下三层架构
控制器层(controller):用来接受前端发送的请求,对请求进行处理,并响应数据
服务层(service):主要处理业务逻辑,它介于控制器层和数据访问层之间。通过定义服务层接口 和实现类 Impl
,可以清晰地分离接口定义和具体实现,同时利用 MyBatis-Plus 提供的通用方法,减少重复代码,提高开发效率。因为使用MyBatis-Plus,需加入依赖
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.10.1</version>
</dependency>
Dao层(mapper):数据访问层,主要与数据库相关,负责数据访问操作
实体类(POJO):定义实体类,用于映射数据库中的 表。使用了 MyBatis-Plus 提供的注解来指定表名、字段名以及主键生成策略。
在pojo中封装一个响应类Reasult,用于封装 API 的响应结果。
package com.exercise.mybatisplus.pojo;public class Result {private Integer code; // 1=成功, 0=失败private String msg; // 响应信息private Object data; // 返回数据public Result() {}public Result(Integer code, String msg, Object data) {this.code = code;this.msg = msg;this.data = data;}// 成功(无数据)public static Result success() {return new Result(1, "success", null);}// 成功(带数据)public static Result success(Object data) {return new Result(1, "success", data);}// 失败public static Result error(String msg) {return new Result(0, msg, null);}//Get和Set方法
}
后端的基本配置就配好了,后面主要就是创建数据库并连接和利用apifox测试。
更详细的web项目构建请跳转最新初学者入门JavaWeb——后端_如何做第一个后端java开源项目-CSDN博客
手把手教你轻松使用pnpm建立Vue3项目(包含配置)_pnpm 使用-CSDN博客
相关文章:
web开发全过程总结
目录 利用pnpm创建vue3的文件 使用pnpm创建项目 项目配置 在idea中创建Spring Boot项目 配置基础项目架构(三层架构) 利用pnpm创建vue3的文件 1.打开cmd,以管理员的身份运行 2.切换到自己想要建立项目的文件的目录下或者直接在文件中以cmd的形式打开 输入指令安装pnpm n…...
经典Java面试题的答案——Java 基础
大家好,我是九神。这是互联网技术岗的分享专题,废话少说,进入正题: 1.JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境…...
Fiddler 指定链接断点
问题背景 在使用Fiddler进行抓包和mock数据时,由于前端页面通常依赖多个前置接口(如JS、CSS、登录态等),导致抓包过程中难以精准定位到目标接口。这种复杂性增加了调试和mock数据的难度。 常见挑战 前置接口过多:页…...
C# 语法篇:字段的定义和运算
对于字段来说,是在对象创建时就被初始化了;而构造函数的运行是在这之后。 因此,不能对字段进行需要用到“构造函数赋值的变量”的运算,因为此时这些变量的值都为0或者随机值,编译器不允许这时候做运算。 因此…...
音频应用的MediaSession冲突
前提条件 系统级应用,使用了sharedUserId 应用在AndroidManifest.xml中声明了系统级UID:android:sharedUserId"android.uid.system"该配置使应用具有系统级权限,可以访问系统级API和资源 使用MediaSession框架 应用通过MediaSessi…...
【QT】类A接收TCP数据并通过信号通知类B解析
以下是基于Qt的完整示例代码,包含类A接收TCP数据并通过信号通知类B解析的实现: ------------------ ClassA.h 网络数据接收类 ------------------ #pragma once#include <QTcpServer> #include <QTcpSocket> #include <QObject>class…...
【Jitsi Meet】(腾讯会议的平替)Docker安装Jitsi Meet指南-使用内网IP访问
Docker安装Jitsi Meet指南-使用内网IP访问 下载官方代码配置环境变量复制示例环境文件并修改配置:编辑 .env 文件: 修改 docker-compose.yml 文件生成自签名证书启动服务最终验证 腾讯会议的平替。我们是每天开早晚会的,都是使用腾讯会议。腾…...
微服务架构中的多进程通信--内存池、共享内存、socket
目录 1 引言 2 整体架构简介 3 疑问 3.1 我们的共享内存消息机制是用的posix还是system V 3.2 rmmt中,不同线程之间的比如访问同一个内存,用的什么锁控制的 3.3 疑问:假如一个进程发送给了另外两个进程,然后另外两个进程都同…...
使用 adb 命令截取 Android 设备的屏幕截图
使用 adb 命令截取 Android 设备的屏幕截图。以下是两种常见的方法: 方法一:截屏后保存到电脑 adb shell screencap -p /sdcard/screenshot.png adb pull /sdcard/screenshot.png解释: adb shell screencap -p /sdcard/screenshot.png&…...
Jenkins服务器配置密钥对
1. 在 Jenkins 服务器上执行以下命令 # 生成 SSH 密钥对 ssh-keygen -t rsa -b 2048 -f ~/.ssh/id_rsa -N ""# 查看公钥内容 cat ~/.ssh/id_rsa.pub 2. 将显示的公钥内容复制,然后在目标服务器上执行 # 在目标服务器上执行 mkdir -p /root/.ssh chmod …...
Docker中部署Alertmanager
在 Docker 中部署 Alertmanager(通常与 Prometheus 告警系统配合使用)的步骤如下: 一、拉取镜像prom/alertmanager docker pull prom/alertmanager二、 创建 Alertmanager 配置文件 首先准备Alertmanager的配置文件 alertmanager.yml(如存…...
Keil软件中STM32(ARM)与C51兼容方法
推荐其他UP主:Keil5安装教程(包含C51与MDK共存) - Kojull - 博客园 我已经实现了!...
青少年编程与数学 02-019 Rust 编程基础 19课题、项目发布
青少年编程与数学 02-019 Rust 编程基础 19课题、项目发布 一、准备工作1. 创建和配置项目2. 编写代码和测试3. 文档注释 二、构建发布版本1. 构建优化后的可执行文件2. 静态链接(可选) 三、发布到 crates.io1. Crates.io核心功能使用方法特点最新动态 2…...
一洽小程序接入说明
接入说明 文档以微信小程序作为示例介绍,其他小程序接入操作与此类似 1、添加校验文件 开发者使用微信小程序提供的 webview 组件可以实现打开一洽的H5对话 小程序的“域名配置”中添加一洽的对话域名地址,需要获取校验文件提供给一洽放在域名根目录下…...
RabbitMQ的基本使用
RabbitMQ 是一个非常流行的消息中间件,用于实现生产者与消费者之间的异步通信。它基于 AMQP 协议(高级消息队列协议),支持多种编程语言和平台。 以下是 RabbitMQ 的基本使用说明,包括安装、核心概念、基本操作和 Pyth…...
CSS专题之常见布局
前言 石匠敲击石头的第 13 次 作为一名前端开发,在日常开发中,写页面是必不可少的工作,但有时候发现很多的页面结构都是类似的,所以打算写一篇文章来梳理一下日常开发中常见的布局,如果哪里写的有问题欢迎指出。 单列…...
CentOS 7连接公司网络配置指南
在物理主机上安装了一个CentOS 7,需要连接公司的网络,但是公司的网络需要输入用户名密码才能连接 解决方案 需要 同时设置 wifi-sec.key-mgmt 和 802-1x 参数。以下是分步操作: 1. 创建基础 Wi-Fi 连接 sudo nmcli con add con-name &quo…...
RustDesk CentOS自建中继节点
一、需开放端口 TCP: 21115, 21116, 21117, 21118, 21119 UDP: 21116 二、安装docker 1.使用 root 权限登录 CentOS。确保 yum 包更新到最新 yum update 2. 卸载旧版本 yum remove docker 3. 安装 Docker 所需依赖 yum -y install yum-utils device-mapper-persistent-d…...
CentOS 7上部署BIND9 DNS服务器指南
场景假设: 我们要为内部网络 192.168.1.0/24 搭建一个权威 DNS 服务器。 域名:mylab.localDNS 服务器 IP:192.168.1.10我们将配置正向解析 (hostname -> IP) 和反向解析 (IP -> hostname)。 一、安装 BIND9 更新系统并安装 BIND 及工…...
面试突击:消息中间件之RabbitMQ
一:你们项目中哪里用到了RabbitMQ ? 难易程度:☆☆☆ 出现频率:☆☆☆☆ 我们项目中很多地方都使用了RabbitMQ , RabbitMQ 是我们项目中服务通信的主要方式之一 , 我们项目中服务通信主要有两种方式实现 : 通过Feign实现服务调用通过MQ实现服…...
基于 ESP32 与 AWS 全托管服务的 IoT 架构:MQTT + WebSocket 实现设备-云-APP 高效互联
目录 一、总体架构图 二、设备端(ESP32)低功耗设计(适配 AWS IoT) 1.MQTT 设置(ESP32 连接 AWS IoT Core) 2.低功耗策略总结(ESP32) 三、云端架构(基于 AWS Serverless + IoT Core) 1.AWS IoT Core 接入 2.云端 → APP:WebSocket 推送方案 流程: 3.数据存…...
将 /dev/vdb1 的空间全部合并到 /dev/mapper/centos-root(即扩展 CentOS 的根分区)
要将 /dev/vdb1 的 1TB 空间合并到 /dev/mapper/centos-root(即扩展 CentOS 的根分区),可以采用 LVM(逻辑卷管理) 的方式。以下是详细步骤: 步骤 1:检查当前磁盘和 LVM 情况 1.1 确认 /dev/vdb…...
CentOS Stream安装MinIO教程
1. 下载 MinIO 二进制文件 # 进入 MinIO 安装目录 sudo cd /usr/local/bin/# 下载 MinIO 二进制文件(替换为最新版本链接) wget https://dl.min.io/server/minio/release/linux-amd64/minio chmod x minio2. 创建专用用户和存储目录 # 创建 minio 用户…...
游戏引擎学习第299天:改进排序键 第二部分
回顾并为当天内容做准备 我们会现场编写完整的游戏代码。回顾上周发现自己对游戏中正确的排序规则并没有清晰的理解。主要原因是我们更擅长三维游戏开发,缺乏二维游戏和二维游戏技术的经验,对于二维精灵排序、模拟三维效果的最佳方案等没有太多技巧和经…...
设计模式----软考中级软件设计师(自用学习笔记)
目录 1、设计模式的要素 2、设计模式的分类 3、简单工厂模式 4、工厂方法 5、抽象工厂 6、生成器 7、原型 8、单例模式 9、适配器 10、桥接 11、组合模式 12、装饰 13、外观 14、享元 15、代理 16、责任链 17、命令 18、解释器 19、迭代器 20、中介者 21、…...
uniapp如何设置uni.request可变请求ip地址
文章目录 简介方法一:直接在请求URL中嵌入变量方法二:使用全局变量方法三:使用环境变量方法四:服务端配置方法五:使用配置文件(如config.js):总结 简介 在uni-app中,uni.request 用…...
Centos上搭建 OpenResty
一、OpenResty简介 OpenResty 是基于 Nginx 的扩展平台,完全兼容 Nginx 的核心功能(如 HTTP 服务和反向代理),同时通过内嵌 LuaJIT 支持,允许开发者用 Lua 脚本灵活扩展业务逻辑。它简化了动态逻辑的实现。 二、安装…...
Kotlin与物联网(IoT):Android Things开发探索
在物联网(IoT)领域,Kotlin 凭借其简洁性、安全性和与 Java 生态的无缝兼容性,逐渐成为 Android Things 开发的有力工具。尽管 Google 已于 2022 年宣布停止对 Android Things 的官方支持,但其技术思想仍值得探索&#…...
WIFI信号状态信息 CSI 深度学习篇之CNN(Python)
本博客是一篇非新手导向的CNN处理CSI图像帧的教程,基于tensorflow框架构建CNN模型进行训练,训练对象依然是前述博客中所提到的CSI图像帧(500 x 90 x 1)。代码里用到了深度可分离卷积,这种结构在减少计算量和参数数量方…...
深度学习实战 04:卷积神经网络之 VGG16 复现三(训练)
在后续的系列文章中,我们将逐步深入探讨 VGG16 相关的核心内容,具体涵盖以下几个方面: 卷积原理篇:详细剖析 VGG 的 “堆叠小卷积核” 设计理念,深入解读为何 332 卷积操作等效于 55 卷积,以及 333 卷积操作…...
欧拉系统离线部署docker
https://www.cnblogs.com/hsh96/p/18150538 Docker 离线安装指南 本文介绍了如何在 Linux 系统上进行 Docker 的离线安装。首先,确保欧拉系统安装的是server版本,否则没有tar工具。 您需要下载 Docker 的离线安装包。您可以从以下链接获取所需的安装包&a…...
Java 中 final 与 static 的区别
Java 中 final 与 static 的区别 在 Java 中,final 和 static 是两个不同的关键字,它们的核心作用和不可变性特性有本质区别: 一、final 的核心作用 1. 变量(不可变引用) 不可重新赋值:final 修饰的变量…...
多模态实时交互边界的高效语音语言模型 VITA-Audio 介绍
介绍 VITA-Audio是由Zuwei Long等研究者提出的端到端大型语音语言模型,其核心目标是通过跨模态令牌生成技术,解决传统语音交互系统中首音频令牌生成延迟高的问题。该模型的创新点主要体现在: 低延迟:VITA-Audio 是首个能够在初次…...
LLM | 论文精读 | NAACL 2025 | Clarify When Necessary:教语言模型何时该“问一句”再答!
🔍 解读 NAACL 2025 重磅论文《Clarify When Necessary》:教语言模型何时该“问一句”再答! 🧩 一、现实问题:大模型“看不懂装懂”有多危险? 我们每天用的 ChatGPT、Claude 等大型语言模型(LL…...
MySQL 8.0 OCP 英文题库解析(七)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题51~60 试题51:…...
深度解析Vue项目Webpack打包分包策略 从基础配置到高级优化,全面掌握性能优化核心技巧
深度解析Vue项目Webpack打包分包策略 从基础配置到高级优化,全面掌握性能优化核心技巧 一、分包核心价值与基本原理 1.1 为什么需要分包 首屏加载优化:减少主包体积,提升TTI(Time to Interactive)缓存利用率提升&am…...
MySQL——基本查询内置函数
目录 CRUD Create Retrieve where order by limit Update Delete 去重操作 聚合函数 聚合统计 内置函数 日期函数 字符函数 数学函数 其它函数 实战OJ 批量插入数据 找出所有员工当前薪水salary情况 查找最晚入职员工的所有信息 查找入职员工时间升序排…...
实现图片自动压缩算法,canvas压缩图片方法
背景: 在使用某些支持webgl的图形库(eg:PIXI.js,fabric.js)场景中,如果加载的纹理超过webgl可处理的最大纹理限制,会导致渲染的纹理缺失,甚至无法显示。 方案 实现图片自动压缩算…...
零基础设计模式——创建型模式 - 单例模式
第二部分:创建型模式 - 单例模式 (Singleton Pattern) 欢迎来到创建型模式的第一站——单例模式!这是最简单也最常用的设计模式之一。 核心思想:关注对象的创建过程,将对象的创建与使用分离,降低系统的耦合度。 单例…...
数据挖掘:从数据堆里“淘金”,你的数据价值被挖掘了吗?
数据挖掘:从数据堆里“淘金”,你的数据价值被挖掘了吗? 在这个数据爆炸的时代,我们每天都在产生海量信息:社交媒体上的点赞、网购时的浏览记录,甚至是健身手环记录下的步数。这些数据本身可能看似杂乱无章…...
k8s1.27版本集群部署minio分布式
需求: 1.创建4个pv,一个pv一个minio-pod。使用sts动态分配pvc(根据存储类找到pv)。----持久化 2.暴露minio的9001端口。(nodeport)----管理界面 镜像:minio/minio:RELEASE.2023-03-20T20-16-18Z--->换国内源 说明…...
雷军:芯片,手机,平板,SUV一起发
大家好,我是小悟。 5月19日,雷军在微博上宣布,5月22日晚7点将举办小米战略新品发布会。 这场被官方称为“人车家全生态”战略升级的重要活动,一口气带来了小米手机SoC芯片“玄戒O1”、旗舰手机小米15S Pro、小米平板7 Ultra&…...
使用Dockerfile构建含私有Maven仓库依赖包的Java容器
背景 需要用JDBC方式访问ArgoDB星环提供了ArgoDB jar包应用将以Container的方式运行我希望打包成镜像之后,镜像启动就能测试连接是否成功连接URL串需要能够传递进去 失败的方案一:本地文件导入POM pom.xml 配置本地路径 <dependency><groupI…...
AI指令模板综述(Prompt Review)
文章目录 DeepSeek DeepSeek 参考:DeepSeek学术指令大全 找到有价值的研究方向 "作为我的学术研究助手,你需要基于以下要求为我生成5个具有学术价值的创新选题: 请聚焦于[具体研究领域,如’社交媒体用户行为’或’深度学习…...
软件架构之-论分布式架构设计及其实现
论分布式架构设计及其实现 摘要正文 摘要 2023年2月,本人所在集团公司承接了长三角地区某省渔船图纸电子化审查项目开发,该项目旨在为长三角地区渔船建造设计院、渔船审图机构提供一个便捷化的服务平台。在次项目中,我作为项目成员参与了整个…...
零售EDI:Belk Stores EDI需求分析
Belk Stores 成立于 1888 年,是美国历史最悠久的家族百货连锁品牌之一,总部位于北卡罗来纳州夏洛特市。作为美国东南部领先的零售企业,Belk 在16个州拥有近300家门店,主要经营服装、鞋履、美妆、家居用品等多个品类,服…...
LangChain4j入门(六)整合提示词(Prompt)
前言 提示词(Prompt)是用户输入给AI模型的一段文字或指令,用于引导模型生成特定类型的内容。通过提示词,用户可以告诉AI“做什么”、 “如何做”以及“输出格式”,从而在满足需求的同时最大程度减少无关信息的生成。有…...
【HarmonyOS 5】金融应用开发鸿蒙组件实践
【HarmonyOS 5】金融应用开发鸿蒙组件实践 一、鸿蒙生态观察 2024 年 1 月 18 日: 发布 原生鸿蒙操作系统星河版,面向开发者开放申请,余承东宣布鸿蒙生态设备数达 8 亿台;建设银行、邮储银行等完成鸿蒙原生应用 Beta 版本开发。 …...
cv2.VideoWriter_fourcc(*‘mp4v‘)生成的视频无法在浏览器展
看这个博主的博客,跟我碰到的问题的一致,都是使用AVC1写视频时报编码器不存在的异常,手动编译opencv-python或者使用conda install -c conda-forge opencv安装依赖即可。 博主博客:Python OpenCV生成视频无法浏览器播放问题说明及…...
MD编辑器推荐【Obsidian】含下载安装和实用教程
为什么推荐 Obsidian ? 免费 (Typora 开始收费了)Typora 实现的功能,它都有!代码块可一键复制 文件目录支持文件夹 大纲支持折叠、搜索 特色功能 – 白板 特色功能 – 关系图谱 下载 https://pan.baidu.com/s/1I1fSly…...