SpringBoot+Vue开发记录(四)

说明: 本篇文章的主要内容是软件架构以及项目的前端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.mzph.cn/bicheng/2844.shtml

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

相关文章

AI商业智能的一些分享

本文主要讲AI商业相关的(特别是营销相关的)一些知识点,比较零散。 简单总结 AI商业智能: 1)将人员经验抽象化为算法规则, 2)打造数据驱动的精益运营能力, 3)长期保持价格竞争力并将商品毛利让…

Day 21 LAMP架构和DNS域名

LAMP架构简介 针对不同的后端开发语言,使用不同的架构,后端项目开发语言有:Java,PHP,Python...... 针对于PHP项目 LAMP架构 LinuxApacheMysql/MariadbPhp LNMP架构 LinuxNginxMysql/MariadbPhp 针对于Java项目 w…

国密SSL证书在等保、关保、密评合规建设中的应用

在等保、关保、密评等合规建设中,网络和通信安全方面的建设是非常重要的部分,需要实现加密保护和安全认证,确保传输数据机密性、完整性以及通信主体可信认证。国密SSL证书应用于等保、关保和密评合规建设中,不仅能够提升网络信息系…

【C++】vector常用函数总结及其模拟实现

目录 一、vector简介 二、vector的构造 三、vector的大小和容量 四、vector的访问 五、vector的插入 六、vector的删除 简单模拟实现 一、vector简介 vector容器&#xff0c;直译为向量&#xff0c;实践中我们可以称呼它为变长数组。 使用时需添加头文件#include<v…

【Burpsuite靶场】XSS专题精讲

【个人】&#xff1a;NEUQ大一学生 【专业】&#xff1a;通信工程 (Communication Engineering) 【个人方向】&#xff1a;网安、开发双管齐下 【座右铭】&#xff1a;真正的英雄主义,就是看清生活的真相后依然热爱生活 -- 罗曼.罗兰 一、认识XSS&#xff08;跨站脚本攻击&…

零基础转行网络安全,难度大吗?

说有难度那是肯定会有的&#xff0c;事在人为&#xff0c;我之前是从事于Java后端开发的&#xff0c;后面转行学网络安全&#xff0c;花了些时间&#xff0c;现在拿到了比之前开发更高的薪资&#xff0c;觉得还是挺满足的&#xff01; 1.网络安全岗位 1.1安全运维工程师 负责监…

【Python数据库】MySQL

文章目录 [toc]创建数据库创建数据表数据插入数据查询数据更新 个人主页&#xff1a;丷从心 系列专栏&#xff1a;Python数据库 学习指南&#xff1a;Python学习指南 创建数据库 import pymysqldef create_database():db pymysql.connect(hostlocalhost, userroot, passwor…

Maven多模块快速升级超好用Idea插件-MPVP

功能&#xff1a;多模块maven项目快速升级指定版本插件&#xff0c;并提供预览和相关升级模块日志能力。 可快速进行版本升级&#xff0c;进行部署到Maven仓库。 安装&#xff1a; 可在idea插件中心进行安装 / 下载资源拖动安装 MPVP(Maven) - IntelliJ IDEs Plugin | Marke…

遥测终端赋能水库泄洪监测预警,筑牢度汛安全防线!

4月10日&#xff0c;水利部召开水库安全度汛视频会议。会议要求着力强化水库防洪“四预”措施&#xff0c;加快构建雨水情监测预报“三道防线”&#xff0c;完善预警信息发布机制&#xff0c;推进数字孪生水利工程建设&#xff0c;为科学调度指挥决策提供支持。强调坚决牢牢守住…

Ubuntu Pycharm安装

下载PyCharm&#xff0c;https://www.jetbrains.com/pycharm/download/?sectionlinux 然后按照下图执行安装&#xff1a; 安装的时候可能出现的问题&#xff1a; 问题1&#xff1a;No JDK found. Please validate either PYCHARM_JDK, JDK_HOME or JAVA_HOME environment var…

【熵与特征提取】从近似熵,到样本熵,到模糊熵,再到排列熵,包络熵,散布熵,究竟实现了什么?(第六篇)——“散布熵”及其MATLAB实现

今天讲散布熵&#xff0c;之前用了几篇文章分别讲述了功率谱熵、奇异谱熵、能量熵、近似熵、样本熵、模糊熵、排列熵、包络熵这8种类型的熵&#xff1a; Mr.看海&#xff1a;【熵与特征提取】基于“信息熵”的特征指标及其MATLAB代码实现&#xff08;功率谱熵、奇异谱熵、能量…

使用API有效率地管理Dynadot域名,自查账户信息

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

使用Python进行异常处理与日志记录的最佳实践

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 使用Python进行异常处理与日志记录的最佳实践 异常处理和日志记录是编写可靠且易于维护的软…

Hive——DML(Data Manipulation Language)数据操作语句用法详解

DML 1.Load Load语句可将文件导入到Hive表中。 hive> LOAD DATA [LOCAL] INPATH filepath [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1val1, partcol2val2 ...)];关键字说明&#xff1a; local&#xff1a;表示从本地加载数据到Hive表&#xff1b;否则从HD…

Linux gcc day7

动态链接和静态链接 形成的可执行的程序小&#xff1a;节省资源--内存&#xff0c;磁盘 无法c静态库链接的方法 原因是我们没有安装静态c库&#xff08;.a&#xff09; 所以要安装 sudo yum install -y glibc-static gcc static静态编译选项提示错误&#xff1a;/usr/lib/ld:ca…

一些常见的Windows命令

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言看版本号查找端口启动程序杀死某个端口查看全部端口看ip进入目录就是总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#x…

【算法分析与设计】重复的DNA

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 DNA序列 由一系列核苷酸组成&#xff0c;缩写为 A, C, G 和 T.。 例如&#xff0c;"ACGAATTCCG" 是一个 DNA序列 。 在研究…

「 网络安全常用术语解读 」软件物料清单SBOM详解

1. 概览 软件物料清单&#xff08;Software Bill of Materials&#xff0c;SBOM&#xff09;是软件成分信息的集合&#xff0c;SBOM文件中记录了软件产品或服务所使用组件、库、框架的清单&#xff0c;用于描述软件构建过程中使用的所有组件及其关系&#xff0c;以实现软件供应…

顺序表的应用-通讯录

顺序表的应用-通讯录 1.操作2.功能要求2.1.功能要求2.2.思路小结2.3.文件梳理2.4.代码实现"SeqList.h""Contact.h""SeqList.c""Contact.c""test.c" 1.操作 链接: 顺序表专题 这篇文章介绍了顺序表的概念与基本操作。 本文将…

ctfshow web入门 SQl注入 web191--web200

web191 多了一个正则绕过 上脚本布尔盲注 用ord #author:yu22x import requests import string url"http://70adf0cb-2208-4974-b064-50a4f4103541.challenge.ctf.show/api/index.php" sstring.ascii_lettersstring.digits flag for i in range(1,45):print(i)for j…