SpringBoot+Vue开发记录(四)

news2024/11/18 5:29:11

说明: 本篇文章的主要内容是软件架构以及项目的前端Vue创建

一、软件架构

我道听途说的,听说这个东西很关键很重要什么的。
软件架构(software architecture)是一个系统的草图,是一系列相关的抽象模式,用于指导大型软件系统各个方面的设计。软件架构描述的对象是直接构成系统的抽象组件。在实现阶段,这些抽象组件被细化为实际的组件,比如具体某个类或者对象。
一般都是特别有经验的大佬才能画出正经的架构图,有了好的架构图,开发起来事半功倍。

不过软件架构多数是针对大项目来做的,当然,我们的刷题网站也会是一个大项目吧。
有了架构图后,我们就可以更好地分工,听说那些大厂招人也就是让招的人开发维护扩展某个模块中的某个功能
在这里插入图片描述
在这里插入图片描述

说来惭愧,我没有多少画架构图的经验的,现在也就是边学边看边设计设计,就简单地照猫画虎一下。
大概画成这样:
在这里插入图片描述

二、前端Vue创建

注意:你需要完成前置条件,即安装配置好vue

1. 打开vue ui

在这里插入图片描述

2. 创建项目

在这里插入图片描述

在这里插入图片描述
设置好项目路径后进行创建
在这里插入图片描述
确定好后继续:
在这里插入图片描述
我们用vue3框架
在这里插入图片描述
等它创建了,这个要等很久时间的
在这里插入图片描述
建好了:
在这里插入图片描述

3. 安装插件与依赖

安装这些插件
在这里插入图片描述
接下来安装依赖:
在这里插入图片描述

在这里插入图片描述
我们用的样式为element-plus,用这个样式只是为了方便,当然要是你html,js,css很腻害的话,自己写也是没有一点问题的。
在这里插入图片描述

怎么用这个样式呢?我们可以查看官方文档:https://element-plus.org/zh-CN/#/zh-CN。

三,运行前端Vue项目

我们可以在Vscode中打开项目

在这里插入图片描述
运行:
在这里插入图片描述
点击新建终端
在这里插入图片描述
在这里插入图片描述
输入:

npm run serve

在这里插入图片描述
ok了:
在这里插入图片描述
然后直接点击链接就行了:
在这里插入图片描述
在这里插入图片描述

四、结语

好了,我们的架构设计和前端Vue也就创建好了。
明天的内容大概是
数据库设计与创建和产品原型图的绘制

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1621246.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安装Selenium库的方法最终解答!_Python库

安装Python库Selenium 我的环境:Window10,Python3.7,Anaconda3,Pycharm2023.1.3 Selenium Selenium是一个开源的自动化测试工具,它支持多种编程语言(如Python、Java等),能够在不同…

代码托管基础操作

在待上传代码文件夹中右键,打开Git Bash Here依次输入以下命令: git init(在本地初始化一个代码仓库,具体表现为会在你的文件夹里出现一个隐藏的.git文件夹) git add .(先把代码放到本地的一个缓冲区)添加当前目录下的…

基于达梦数据库开发-Java篇

文章目录 前言一、示例展示1.环境准备2.采用基础的jdbc调用3.采用扩展的mybatis调用 二、注意事项1.使用路径注解2.数据库对象的准确引用 三、可能异常1.无效的表或视图名2.无效的表或视图名3.网络通信异常 总结 前言 达梦提供了JDBC方式的驱动以便进行Java开发。默认情况下相…

3个比较不错的Linux云音乐应用程序整理

在现代音乐流媒体时代,基于云的音乐应用程序因其便利性和可访问性而变得非常流行。Linux 用户尤其寻求可靠且功能丰富的音乐播放器来无缝地享受他们喜爱的音乐。 在这里,我们探讨了三个最好的基于云的音乐应用程序,每个应用程序都提供专为 L…

函数的查询

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 在实际使用中经常会需要查询数据库中已有的函数或者某一个函数的内容,下面就介绍一下如何查询函数。 和存储过程类似,这也需要使用到数据字典user_s…

污水处理设备运维注意事项有哪些

污水处理设备的运维是确保污水处理效率和处理质量的关键环节。良好的运维不仅可以延长设备的使用寿命,还能确保污水处理过程的稳定性和可靠性。以下是一些污水处理设备运维的重要注意事项: 1. 定期检查和维护 设备检查:定期对污水处理设备进…

ctfshow web入门 web180--web185

web180 import requests import recom re.compile("admin") def repisTrue(char):url f"http://自己环境的网址/api/?id1%27and%27{char}%27%27{char}&page1&limit10"res requests.get(url)w com.search(res.text)if w is not None:return T…

【第6节】Lagent AgentLego 智能体应用搭建

目录 1 基础课程2 安装环境2.1 教程要求2.2 安装 Lagent 和 AgentLego 3 实践操作3.1 Lagent:轻量级智能体框架3.1.1 Lagent Web Demo 使用3.1.2 用 Lagent 自定义工具 3.2 AgentLego:组装智能体“乐高”3.2.1 AgentLego 直接使用部分3.2.2 AgentLego We…

关于csgo pubg等游戏卡死问题,原因是英伟达显卡的问题

在正常使用过程中,常常出现,卡死,卡屏问题,经过调查是英伟达驱动的问题,在30系40系明显 显卡超频 本来30系40系就存在不稳定的问题,超频更加导致了此问题,会在驱动中卡死,就是掉驱…

233 基于matlab的多通道非负矩阵分解(MNMF)算法

基于matlab的多通道非负矩阵分解(MNMF)算法。其能够寻找到一个非负矩阵W和一个非负矩阵H,满足条件VW*H,从而将一个非负的矩阵分解为左右两个非负矩阵的乘积。使用EM准则对混合信号进行分解。程序已调通,可直接运行。 233 多通道非…

Linux 的情况下实现贪吃蛇 -- 第二十八天

1. 打印地图 keypad(stdsrc,1) 参数表示是否接收,1表示接收指令 2.思路:初始化initNcurses(), 封装地图函数实现地图gamePic() 分三部分实现:2.1: 在第0行:打印 "--",&quo…

六、e2studio VS STM32CubeIDE之代码自动补全

目录 一、概述/目的 二、eclipse c/c自动补全 2.1 修改实现原理 2.2 修改插件cdt.ui的方法 2.2.1 资料来源 2.2.2 修改的主要流程或逻辑 2.2.3 失败的原因 三、呼吁st和Renesas厂家支持自动补全代码 六、e2studio VS STM32CubeIDE之代码自动补全 一、概述/目的 eclipse…

使用Perf诊断PostgreSQL性能问题

1 编译参数 使用perf获取完整的堆栈信息需要下面几个编译参数: -O0:编译器不做优化-ggdb3:增加了为GDB优化的调试信息,级别是3-g3:增加了调试信息,级别是3-fno-omit-frame-pointer:保留完成的…

《生成式AI导论》学习笔记

1.课程定位 2.什么是生成式人工智慧? 3. 今日的生成式人工智慧厉害在哪里? 4.训练不了人工智慧?那我训练自己 5.训练不了人工智慧?你可以训练你自己(中)——拆解问题使用工具 6.大语言模型修炼史——第一阶…

【电控仿真分析笔记】

命令滤波器分析 前馈系数0.9 转速反馈延迟为一阶低通滤波器500 ki/kp的PI控制器 速度环命令滤波 增加前馈延迟的命令滤波 加入命令滤波器 iq:

后台图书管理系统:SSM整合开发案例

代码已经完善,文章内容会在后续补充 代码地址(https://javazhang.lanzn.com/ig8tf1wd2aba 密码:1234) 1.1 .SpringConfig 代码 Configuration ComponentScan({"com.itheima.service" }) PropertySource("classpath:jdbc.properties") Import({JdbcConfig…

在mac上安装node.js及使用npm,yarn相关命令教程

1、安装node.js 官网:Node.js — Download Node.js 选择需要的版本,点击DownLoad 2、点击继续,直到安装成功。 2.1打开终端输入命令node -v 显示版本号则说明已安装成功 3、全局安装yarn命令 1、sudo npm install --global yarn &#xf…

C++笔记:类和对象(一)->封装

类和对象 认识类和对象 先来回忆一下C语言中的类型和变量,类型就像是定义了数据的规则,而变量则是根据这些规则来实际存储数据的容器。类是我们自己定义的一种数据类型,而对象则是这种数据类型的一个具体实例。类就可以理解为类型&#xff0c…

精度论文Generative Prompt Model for Weakly Supervised Object Localization

Generative Prompt Model for Weakly Supervised Object Localization 中国科学院大学&&浙江大学CVPR20231.Abstract 当从图像类别标签中学习对象定位模型时,弱监督对象定位(WSOL)仍然具有挑战性, 传统的鉴别训练激活模型的方法忽略了具有代表性但鉴别性较差的对象…

【深度学习】DDoS-Detection-Challenge aitrans2024 入侵检测,基于机器学习(深度学习)判断网络入侵

当了次教练,做了个比赛的Stage1,https://github.com/AItransCompetition/DDoS-Detection-Challenge,得了100分。 一些记录: 1、提交的flowid不能重复,提交的是非入侵的数量和数据flowid,看check.cpp可知。 2、Stage…