type
status
date
slug
summary
tags
category
icon
password
安装Node.js
我们需要Node.js来构建Vue
在此我推荐用nvm来管理Node.js版本，nvm对于Node.js就像anaconda对于Python一样。
当你需要在多个Node.js版本之间切换时，nvm会很有用。
如果你不需要nvm，请在Node.js官网下载偶数版本，推荐20,18
如果使用nvm，则需要卸载之前安装过的Node.js，没安装过则可以忽略。 选择nvm，
本地下载最新版。解压安装程序并运行。安装流程不多赘述，不过要记住安装时选择的目录。 ==一共有两个目录，一个是nvm目录，一个是Nodejs目录==
配置nvm环境
打开系统环境变量，配置NVM_HOME，填写nvm目录，配置NVM_SYMLINK，填写Nodejs目录
然后在path里添加%NVM_HOME%与%NVM_SYMLINK%
快捷键Win+R，打开CMD，输入nvm -v，正确出现版本则安装完成
输入
列出可安装的版本
选择LTS列下的偶数版本 输入
进行安装 然后输入
启用这个版本 启用完成之后输入
与
进行验证，出现版本号则安装完成
选择前端框架Vue
先了解一下Vue和单页面应用。 Vue.js（简称 Vue）是一个用于构建用户界面的 渐进式 JavaScript 框架单页面应用（Single Page Application, SPA） 是一种 Web 应用模式，整个应用只有一个 HTML 页面，通过动态加载内容（如 JavaScript）实现页面切换，无需重新加载整个页面。
创建一个新的空文件夹来开始进行Vue的搭建 进入VSCode，打开这个空文件夹，打开终端输入
，之后左边会出现一堆文件。根据它的提示依次输入
，
最后Ctrl+鼠标左键，点击蓝色的地址。 以后每次运行都可以在对应的目录下输入
便会得到这样一个页面
在VSCode插件商店搜索Vue安装官方插件
安装第三方库
安装element
element提供了开箱即用的各种组件，可以拿来就用而不用自己写，如果你想要其他的组件库请自行寻找 在终端输入
在全局注册element 打开main.ts，写入
安装router Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，让构建单页面应用(SPA)变得轻而易举。 终端输入
安装axios Vue 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。 终端输入
实现登录与注册
创建一个登录视图
在创建登录注册View之前，先把它自带的样式删干净。 找到src目录下的style.css,全部删除
找到App.vue，删除 template 和 style 里的内容
使用Vue在你更改内容后会实时热更新网页上的内容，十分便捷直观。 当你删完之后你应该会发现页面一片空白了现在开始创建登录视图 在src下新建views，创建Login.vue
这仅仅是一个最基础的框架，还没有实现任何功能
实现路由
首先安装@types/node
修改vite.config.ts
在src下创建新文件shims-vue.d.ts
创建路由 在src下创建新文件夹router，在里面创建index.ts
在main.ts里全局使用router 写入
和
在App.vue里加入
现在我们打开浏览器，输入 http://localhost:5173/login 就可以看见我们刚刚写的登录视图了
实现前后端Api对接
创建前端Api 在src下创建新文件api，创建新文件index.ts
创建新文件LoginApi.ts，这个方法可以将用户名与密码传给后端
接下来打开IDEA 首先实现跨域资源共享 (CORS) 跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种基于 HTTP 头的安全机制，用于控制不同源的网页资源（如前端 JavaScript）能否访问另一个源的服务器数据。它是浏览器强制实施的策略，旨在防止恶意网站窃取用户数据。
新建软件包config，新建Java类CorsConfig
接下来新建一个登录控制器UserController
这是一个最最简单的控制器，接收参数是前端传来的user，dbuser来获取数据库里与前端传来的username对应的用户，所以在这里可以发现，数据库的用户名不能有重复的。后面就是几个简单的判断。 这个控制器实现了基本功能，但是安全性和健壮性不是很高，我在这仅仅作为演示。
回到我们的Vue 修改如图所示的代码，调用登录方法并将返回值赋给response，我们打印一下response
现在你可以在登录界面输入用户名与密码，登录一下试试，你会发现页面上方会弹出登录后端返回的信息，说明Api对接成功了。 按F12打开控制台，可以看到console.log打印出来的信息
关于工程化与约定
写到这里，想必你会有一点疑惑，为什么要创建这么多文件夹，这么多文件，而且命名风格与格式要求，这里就简单介绍一下工程化与约定。
在软件开发中，工程化和约定是提升团队协作效率、保障代码质量和维护性的两大核心手段。 1. 工程化（Engineering）定义：通过工具、流程、标准化技术栈等手段，将开发、构建、测试、部署等环节系统化、自动化，减少人为不可控因素。 核心目标：
- 自动化：通过工具（如 Webpack、GitHub Actions）替代重复劳动。
- 标准化：统一技术栈、目录结构、构建流程等。
- 可维护性：代码结构清晰，文档完善，便于后续迭代。
- 质量保障：集成代码检查（ESLint）、测试（Jest）、性能监控等。
比如我们用Spring boot和Vue等工具来实现快速开发，而不用重复造轮子，这就是一种工程化的体现。
2. 约定（Convention）定义：团队或社区达成的共识性规则，包括代码风格、命名规范、设计模式等，通常通过文档或工具固化。 核心目标：
- 一致性：统一代码风格（如变量命名用
camelCase还是snake_case）。
- 降低认知成本：新成员快速理解项目结构（如
src/components存放组件）。
- 减少决策成本：避免在琐碎细节上争论（如缩进用空格还是 Tab）。
我们之所以创建这么多文件夹和文件，是为了统一规范，可快速帮助我们理解整个项目的结构。 什么地方该放什么，哪些文件有什么关联，这个文件的作用是什么，通过一种达成共识的约定，我们可以快速上手并修改。 比如我们约定，将所有视图文件都放在views里，又或者将所有控制器都放在controller里。 Java的命名风格是驼峰命名，每个单词开头大写。MySQL命名风格是下划线，每个单词中间加一个下划线。
简单写一个注册视图并对接Api
注册视图
注册视图和登录视图的框架完全一样，只是改了名字，你完全可以复制登录框架的代码，在登录的代码基础上改一改就是注册视图了。
我在此还是贴上我的代码
可以发现并没有改太多的地方。
对接注册api
我将原来的LoginApi改名为Api，更通用一点，记得改名后要把之前导入这个Api的地方同样也改名。
然后添加
之前是在function前面加上export，导出方法，现在可以在后面统一export
当然你也可以在每个函数面前加export，两种不同的方法罢了。
我们来到IDEA，编写后端的Controller
在UserController里添加
最后进行测试，别忘记运行两个项目 输入用户名密码点击注册后，你应该可以在MySQL数据库的用户表里看见刚刚注册的用户信息