当前位置：首页 > news >正文

项目启动以及Vue初识

news 来源：原创 2025/5/29 11:45:22

C/S架构

优点

缺点

B/S架构

优点

缺点

如何选择

C/S架构

B/S架构

单体架构

集群架构

分布式架构

微服务

VUE初识

选项式API

组合式API

响应式数据

Vue Router

编辑

路由

服务端路由

单页面应用

客户端路由

编辑

RouterLink组件

RouterView组件

B端

C端

业务需求

题目列表，刷题，竞赛的列表，竞赛的用户排名，比赛，自动判题，题目管理，竞赛管理

用户需求

我的竞赛，我的消息，获取比赛结果，查看历史竞赛排名

系统需求

用户登录，注册，用户管理，安全防护(身份认证，防sql注入，防止xss攻击),SEO优化

用户:

登陆，注册，退出登录

个人中心，个人信息浏览，修改

我的消息-查看-列表 -删除

我的竞赛-列表，未开赛，显示未开赛，已经开赛，没有结束，显示开始答题，已经结束，竞赛练习，竞赛排名查看

竞赛:

列表:推荐竞赛 (已经报名竞赛，显示已经报名，未报名，显示报名按钮，已经开赛-报名:显示开始答题，未报名，显示未报名)

历史竞赛-竞赛练习，竞赛排名

分页

根据时间筛选

比赛 -题目切换，题目提交，题目允许，判题，题目运行结果获取

管理端:

管理员-登陆，退出登录

题库管理;列表-难度，题目名称搜索，支持分页，增删改

竞赛管理:列表-创建时间，竞赛名称搜索，支持分页，增删改，发布，撤销发布

C端用户管理-列表-用户id,手机号，用户昵称搜索，支持分页，拉黑，解禁

定时任务管理-增删改查

题库:列表-根据题目难度筛选，关键字全文搜索

分页

刷题-题目切换，题目提交，题目运行，判题，题目运行结果获取

C/S架构

客户端需要安装程序-> 服务器

<-提供Socket服务和数据库服务

客户端需要承担更多业务逻辑，可以直接操作数据库等服务

QQ，微信，王者荣耀等

优点

大部分业务都可以在客户端完成，充分利用本地的计算机资源

响应速度快，个性化定制能力强，对信息安全的控制能力强

缺点

需要安装客户端才能使用

维护成本高，优于每个客户端都需要安装，因此随着客户端的数量增加，维护成本也会相应增加，此外，不同版本的客户端可能需要不同的维护策略，进一步增加了维护的复杂性

B/S架构

客户端浏览器 HTTP请求   服务器程序 数据库操作请求 数据库

->        -> (第三方组件)

<-        <-

HTTP响应数据库操作响应

客户端是浏览器，不同的BS架构的应用客户端是同一个，并且都是浏览器，客户端不处理任何业务逻辑，所有业务交给服务器处理，如果操作第三方的组件或者服务也是通过服务操作的

优点

客户端0维护，只需要安装一个浏览器即可，维护成本低，只需要维护服务器即可，所有业务都集中在服务器端，业务拓展非常方便

缺点

服务业安全与业务处理能力需要花费很大精力和成本

不同浏览器支持不尽如人意

如何选择

C/S架构

实时性交互强，比如游戏，实时的监控

个性化定制的业务，企业内部的办公系统，特定行业的专业软件

网络带宽受限的环境

B/S架构

简化客户端的维护和部署

能够快速更新迭代

快速的推广

单体架构

可扩展性差:随着业务发展，单体应用的规模会不断增大，各个业务耦合度比较大，导致开发的维护变得困难

技术栈受限:单体架构通常使用单一的技术栈，无法充分利用团队的技术专长和现有资源，也无法有针对性的选择技术栈

可靠性问题:单体应用中一个模块的故障可能导致整个应用崩溃，可靠性比较低

集群架构

资源利用率低:在集群架构中，资源分配和管理通常比较集中，这种集中式资源管理方式可能导致资源分配不够灵活，无法满足系统的灵活性和可扩展性

容错与隔离型不足:各个业务耦合度大，组件之间的紧密耦合使得故障传播的可能性增加

部署与升级复杂:在集群架构中，部署和升级通常需要协调多个组件和节点，这可能导致复杂性和风险增加

分布式架构

高耦合度:分布式架构对于服务的拆分，往往粗粒度，这使得各个业务间的耦合问题，并没有解决，限制了系统的灵活性和可扩展性。

容错与隔离性不足:由于耦合度大，由于组件之间的紧密以来关系，故障的传播和放大效应也可能更加明显

微服务

优势:更细粒度的垂直拆分

易于开发和维护:每个微服务负责的业务比较清晰，体量小，开发和维护的成本降低

容错性高:一个服务发生故障，可以使故障隔离在耽搁服务中，不影响整体服务故障

扩展性好:每个服务都是独立运行的，我们可以结合项目实际情况进行扩展，按需伸缩

技术选型灵活:每个微服务都是单独的团队运维，可以根据业务特点和团队特点,需选择适合的技术栈

带来的挑战:

服务依赖:随着服务数量增多，服务之间关系变复杂，一个服务更改考虑其他服务的影响

运维成本:一个业务流程会涉及多个微服务共同完成，有更多的服务需要编辑，部署，运行，甚至可能是不同语言，不同运行环境

开发和测试:一个业务流程可能涉及多个微服务共同完成，服务调用引入网络延迟，不可靠的网络，如何进行容错处理等畏难而退

服务监控:在一个单体架构中,很容易实现对服务等监控，因为所有功能都在一个服务中，微服务架构下，不仅需要对整个链路进行监控，还需要对每一个服务实现监控

负载均衡:微服务架构中的服务实例数量可能非常庞大，因此需要有效的服务发现和负载均衡机制来管理请求流量和保证高可用性。

微服务划分目标

业务边界清晰，最小化变更，最大化复用，性能稳定简洁，积木式可拆解

微服务划分原则:单一职责原则，高内聚低耦合原则，服务自治原则，单向依赖原则（严禁循环依赖，双向依赖)

按照业务划分，按照技术划分，按照实际情况划分

业务划分:

后台数据管理:题库管理，竞赛管理，C端用户管理，定时任务管理

用户服务:登陆，注册，退出登录，个人中心，我的竞赛，我的信息

题库竞赛服务:题库列表，竞赛列表，竞赛报名，查看排名，竞赛或者刷题时候题目切换，提交代码，运行代码，获取代码执行结果

技术方面划分

gateway-网关

system-管理端

friend-用户端

job-定时任务

judge-判题任务

技术选型:

前端

项目开发前，项目开发过程中，

vue3,作为前端框架 JS+HTML，页面样式SCSS(CSS的预处理器,丰富了很多特性)

后端

项目开发前，项目开发过程中

后端:

springcloud Alibaba 作为后端核心框架

组件健全且易用，阿里巴巴技术支持

社区支持

VUE初识

启动啥的就不写了，很好查找，
zhaojingbin@lingchensandiandehai ~ % sudo npm cache clean --force
Password:
npm warn using --force Recommended protections disabled.
zhaojingbin@lingchensandiandehai ~ % sudo npm install -g @vue/cli
npm error code CERT_HAS_EXPIRED
npm error errno CERT_HAS_EXPIRED
npm error request to https://registry.npm.taobao.org/@vue%2fcli failed, reason: certificate has expired
npm error A complete log of this run can be found in: /Users/lcl/.npm/_logs/2024-12-16T10_18_20_926Z-debug-0.log
zhaojingbin@lingchensandiandehai ~ % npm config set registry https://registry.npmmirror.com
zhaojingbin@lingchensandiandehai ~ % sudo npm install -g @vue/cli
npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecatedadded 833 packages in 37szhaojingbin@lingchensandiandehai ~ % sudo npm create vue@latest
Need to install the following packages:
create-vue@3.12.2
Ok to proceed? (y) y> npx
> create-vueVue.js - The Progressive JavaScript Framework✔ 请输入项目名称： … vue-demo
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ › 否正在初始化项目 /Users/lcl/vue-demo...项目初始化完成，可执行以下命令：cd vue-demonpm installnpm run devzhaojingbin@lingchensandiandehai ~ % cd vue-demo
zhaojingbin@lingchensandiandehai vue-demo % sudo npm installadded 145 packages in 20s42 packages are looking for fundingrun `npm fund` for details> vue-demo@0.0.0 dev
> viteVITE v6.0.3  ready in 269 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools➜  press h + enter to show help
记住MAC需要多用sudo这个开通权限即可

-node_modules:支持项目运行的依赖文件(后期开发中会引入多个依赖包)

-Public:存放静态资源和公共资源，比如favicon.ico网站图标

-src:项目开发主要文件夹

-index.html:入口的html文件

-package.json:项目的描述文件

vite.config.js:项目的配置文件

模版<template>

使用html语法，描述整个组件的结构和布局

-使用模版中可以使用vue的模版语法进行绑定数据，处理时间以及定义组件的DOM结构等

每个*.vue文件最多可以包含一个顶层<template>块

脚本<script>

这部分包含组件等JavaScript代码，定义了组件的行为逻辑，每个vue文件，最多包涵一个<script>块

<script setup>专为组合式api设计等特殊的语法塘，他允许你在一个更加简洁，更加直观的方式编写组件逻辑

<style>通常使用CSS或者CSS预处理器编写样式，定义了组件的样式和布局，用户控制组件的外观和样式，每个vue文件可以包含多个<style>标签

API风格:选项式API,组合式API，选项式API我们可以使用多个选项的对象来描述

选项式API

<script>
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 `this` 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count++}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {console.log(`The initial count is ${this.count}.`)}
}
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

组合式API

<script setup>
import { ref, onMounted } from 'vue'// 响应式状态
const count = ref(0)// 用来修改状态、触发更新的函数
function increment() {count.value++
}// 生命周期钩子
onMounted(() => {console.log(`The initial count is ${count.value}.`)
})
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

响应式数据

当数据发生变化时候，能够自动更新和通知与之相关的视图和组件，实现视图的实时响应，在Web开发中，响应式数据是实现动态交互和实时更新的关键，他简化了开发过程，提高了用户体验

// 响应式状态,作为一个对象

//reactive把当前对象看为响应式对象，ref是对象的外层又包了一层对象

假如是ref,
<script setup>
import { ref, reactive,onMounted } from 'vue'// 响应式状态,作为一个对象
//reactive把当前对象看为响应式对象，ref是对象的外层又包了一层对象
const counter = reactive({count: 0
})// 用来修改状态、触发更新的函数
function increment() {
//counter.value.count++;counter.count++console.log(counter)
}</script><template><button @click="increment">Count is: {{ counter.count }}</button>
</template>

Vue Router

路由

网络层的概念，路由器从上个接口收到数据包，根据数据包的目的地址进行定向并且转发到另一个接口的过程

服务端路由

通常发生在Web服务层，当用户请求一个URL时，服务器会根据URL的路径决定执行那个后端代码，并且生成返回的HTML页面给客户端

单页面应用

网页中，点击连接或者进行操作，只加载了一个页面，也就是主页面，但是主页面有不同的组件，点击链接或者进行其他操作时组件会根据我们的需求动态的改变，而无需加载整个页面

客户端路由

单页面中，当用户通过客户端访问不同路径时候，路径的映射函数会利用诸如，HistoryAPi

事件，这样的浏览器API来管理应用当前应该渲染的视图，方式的优点是不用重新加载整个页面，根据用户请求动态加载

优点:

用户的体验更加流程:SPA最大特点是页面无需重新刷新即可更新试图，这为用户提供了更快速，更流畅的导航体验，用户无需等待整个页面刷新，只需要等待相关组件或者数据的更新，大大减少了页面跳转的加载时间

更好的交互性和响应性:SPA允许前端应用更加精细的控制用户界面的变化，通过动态更新页面的部分内容，SPA可以实现更加丰富的交互效果和更加快速的响应，从而提升用户使用体验

更好的前后端分离

缺点:

初次加载时间长,SPA需要加载很多JS和CSS资源，导致初次加载页面时可能需要较长的时间，这可能会给用户带来不便，尤其是网络较慢的情况下，

SEO挑战:传统的SPA对搜索引擎不友好，爬虫无法很好解析JS动态生成的内容