安装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 - nvm中文官网

本地下载最新版。解压安装程序并运行。安装流程不多赘述，不过要记住安装时选择的目录。 ==一共有两个目录，一个是nvm目录，一个是Nodejs目录==

配置nvm环境

打开系统环境变量，配置NVM_HOME，填写nvm目录，配置NVM_SYMLINK，填写Nodejs目录

然后在path里添加%NVM_HOME%与%NVM_SYMLINK%

快捷键Win+R，打开CMD，输入nvm -v，正确出现版本则安装完成

输入

1
nvm list available

列出可安装的版本

选择LTS列下的偶数版本输入

1
nvm install 版本号

进行安装然后输入

1
nvm use 版本号

启用这个版本启用完成之后输入

1
node -v

与

1
npm -v

进行验证，出现版本号则安装完成

选择前端框架Vue#

先了解一下Vue和单页面应用。 Vue.js（简称 Vue）是一个用于构建用户界面的 渐进式 JavaScript 框架单页面应用（Single Page Application, SPA） 是一种 Web 应用模式，整个应用只有一个 HTML 页面，通过动态加载内容（如 JavaScript）实现页面切换，无需重新加载整个页面。

创建一个新的空文件夹来开始进行Vue的搭建进入VSCode，打开这个空文件夹，打开终端输入

1
npm create vite@latest ./ -- --template vue-ts

，之后左边会出现一堆文件。根据它的提示依次输入

1
npm install

，

1
npm run dev

最后Ctrl+鼠标左键，点击蓝色的地址。以后每次运行都可以在对应的目录下输入

1
npm run dev

便会得到这样一个页面

在VSCode插件商店搜索Vue安装官方插件

安装第三方库#

安装element

安装 | Element Plus

element提供了开箱即用的各种组件，可以拿来就用而不用自己写，如果你想要其他的组件库请自行寻找在终端输入

1
npm install element-plus --save

在全局注册element 打开main.ts，写入

1
import { createApp } from 'vue'
2
import './style.css'
3
import App from './App.vue'
4
import ElementPlus from 'element-plus'
5
import 'element-plus/dist/index.css'
6

7
const app = createApp(App)
8
app.use(ElementPlus)
9
app.mount('#app')

安装router Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，让构建单页面应用(SPA)变得轻而易举。终端输入

1
npm install vue-router@4

安装axios Vue 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。终端输入

1
npm install axios

实现登录与注册#

创建一个登录视图#

在创建登录注册View之前，先把它自带的样式删干净。找到src目录下的style.css,全部删除

找到App.vue，删除 template 和 style 里的内容

使用Vue在你更改内容后会实时热更新网页上的内容，十分便捷直观。当你删完之后你应该会发现页面一片空白了现在开始创建登录视图在src下新建views，创建Login.vue

1
<template>
2
    <div class="login-container">
3
        <el-card class="login-card">
4
            <div class="login-header">
5
                <h2>登录</h2>
6
            </div>
7

8
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form"
9
                @submit.prevent="handleLogin">
10
                <el-form-item prop="username">
11
                    <p>用户名：</p>
12
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" />
13
                </el-form-item>
14
                <el-form-item prop="password">
15
                    <p>密码：</p>
16
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
17
                        show-password />
18
                </el-form-item>
19
                <el-form-item prop="remember" class="remember-me">
20
                    <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
21
                </el-form-item>
22
                <el-form-item>
23
                    <el-button type="primary" class="login-btn" native-type="submit" :loading="loading">登录</el-button>
24
                </el-form-item>
25
            </el-form>
26
            <div class="login-footer">
27
                <el-link type="primary" @click="forgetDialogVisible = true">忘记密码?</el-link>
28
                <el-link type="primary" @click="registerDialogVisible = true">注册账号</el-link>
29
            </div>
30
        </el-card>
31
        <!-- 忘记密码对话框 -->
32
        <el-dialog v-model="forgetDialogVisible" title="忘记密码" width="30%">
33
            <span>请联系系统管理员重置密码</span>
34
            <template #footer>
35
                <el-button @click="forgetDialogVisible = false">关闭</el-button>
36
            </template>
37
        </el-dialog>
38

39
        <!-- 注册对话框 -->
40
        <el-dialog v-model="registerDialogVisible" title="注册账号" width="30%">
41
            <span>请联系系统管理员创建账号</span>
42
            <template #footer>
43
                <el-button @click="registerDialogVisible = false">关闭</el-button>
44
            </template>
45
        </el-dialog>
46
    </div>
47
</template>
48

49
<script setup>
50
import { ref, reactive } from 'vue'
51
import { ElMessage } from 'element-plus'
52
import { useRouter } from 'vue-router'
53

54
const router = useRouter()
55

56
// 表单引用
57
const loginFormRef = ref(null)
58

59
// 响应式数据
60
const loginForm = reactive({
61
    username: '',
62
    password: '',
63
    remember: false
64
})
65

66
const loading = ref(false)
67
const forgetDialogVisible = ref(false)
68
const registerDialogVisible = ref(false)
69

70
// 验证规则
71
const loginRules = reactive({
72
    username: [
73
        { required: true, message: '请输入用户名', trigger: 'blur' },
74
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
75
    ],
76
    password: [
77
        { required: true, message: '请输入密码', trigger: 'blur' },
78
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
79
    ]
80
})
81

82
// 登录方法
83
const handleLogin = async () => {
84
    try {
85
        // 验证表单
86
        const valid = await loginFormRef.value.validate()
87
        if (!valid) return
88
        loading.value = true
89
        // 这里替换为实际的登录API调用
90
        // const response = await axios.post('/api/login', loginForm)
91

92
        // 模拟登录成功
93
        await new Promise(resolve => setTimeout(resolve, 1000))
94

95
        ElMessage.success('登录成功')
96
        router.push('/')
97
    } catch (error) {
98
        ElMessage.error(error.response?.data?.message || '登录失败')
99
    } finally {
100
        loading.value = false
101
    }
102
}
103

104
</script>
105

106
<style scoped>
107

108
.login-container {
109
    display: flex;
110
    justify-content: center;
111
    align-items: center;
112
    min-height: 100vh;
113
    background-color: #f5f7fa;
114
}
115

116
.login-card {
117
    width: 400px;
118
    padding: 20px;
119
    border-radius: 5px;
120
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
121
}
122

123
.login-header {
124
    text-align: center;
125
    margin-bottom: 30px;
126
}
127

128
.login-header h2 {
129
    color: #409EFF;
130
}
131

132
.login-form {
133
    margin-top: 20px;
134
}
135
.login-btn {
136
    width: 50%;
137
    margin: 0 auto;
138
}
139

140
.login-footer {
141
    display: flex;
142
    justify-content: space-between;
143
    margin-top: 10px;
144
}
145
</style>

这仅仅是一个最基础的框架，还没有实现任何功能

实现路由#

首先安装@types/node

修改vite.config.ts

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3
import path from 'path'
4

5
export default defineConfig({
6
  plugins: [vue()],
7
  resolve: {
8
    alias: {
9
      '@': path.resolve(__dirname, './src')
10
    }
11
  }
12
})

在src下创建新文件shims-vue.d.ts

1
declare module '*.vue' {
2
    import { DefineComponent } from 'vue'
3
    const component: DefineComponent<{}, {}, any>
4
    export default component
5
}

创建路由在src下创建新文件夹router，在里面创建index.ts

1
import { createRouter, createWebHistory } from "vue-router";
2

3
const router = createRouter({
4
    history: createWebHistory(),
5
    routes: [
6
        {
7
            path: '/login',
8
            name: 'Login',
9
            component: () => import('@/views/Login.vue'),
10
        }
11
    ]
12
})
13

14
export default router

在main.ts里全局使用router 写入

1
import router from './router'

和

1
app.use(router)

在App.vue里加入

1
<router-view />

现在我们打开浏览器，输入 http://localhost:5173/login 就可以看见我们刚刚写的登录视图了

实现前后端Api对接#

创建前端Api 在src下创建新文件api，创建新文件index.ts

1
import axios from 'axios';
2

3
// 创建axios实例
4
const api = axios.create({
5
  baseURL: '<http://localhost:8080>', // SpringBoot后端API基础URL
6
  timeout: 5000
7
});
8

9
export default api;

创建新文件LoginApi.ts，这个方法可以将用户名与密码传给后端

1
import api from '@/api'
2

3
// 用户登录
4
export function login(username: string, password: string) {
5
  return api.post('/user/login', {
6
    username,
7
    password
8
  })
9
}

接下来打开IDEA 首先实现跨域资源共享 (CORS) 跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种基于 HTTP 头的安全机制，用于控制不同源的网页资源（如前端 JavaScript）能否访问另一个源的服务器数据。它是浏览器强制实施的策略，旨在防止恶意网站窃取用户数据。

新建软件包config，新建Java类CorsConfig

1
package com.example.demo.config;
2

3
import org.springframework.context.annotation.Configuration;
4
import org.springframework.web.servlet.config.annotation.CorsRegistry;
5
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
6

7
@Configuration
8
public class CorsConfig implements WebMvcConfigurer {
9
    @Override
10
    public void addCorsMappings(CorsRegistry registry) {
11
        registry.addMapping("/**")
12
                .allowedOrigins("<http://localhost:5173>") // 前端地址
13
                .allowedMethods("GET", "POST", "PUT", "DELETE")
14
                .allowedHeaders("*")
15
                .allowCredentials(true);
16
    }
17
}

接下来新建一个登录控制器UserController

1
package com.example.demo.controller;
2

3
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
4
import com.example.demo.entity.User;
5
import com.example.demo.mapper.UserMapper;
6
import org.springframework.beans.factory.annotation.Autowired;
7
import org.springframework.web.bind.annotation.PostMapping;
8
import org.springframework.web.bind.annotation.RequestBody;
9
import org.springframework.web.bind.annotation.RequestMapping;
10
import org.springframework.web.bind.annotation.RestController;
11

12
@RestController
13
@RequestMapping("/user")
14
public class UserController {
15
    @Autowired
16
    private UserMapper userMapper;
17

18
    @PostMapping("/login")
19
    public String login(@RequestBody User user) {
20
        System.out.println("登录："+user);
21
        QueryWrapper<User> wrapper = new QueryWrapper<>();
22
        wrapper.eq("username", user.getUsername());
23
        User dbUser = userMapper.selectOne(wrapper);
24
        if (dbUser == null) {
25
            return "该用户不存在！";
26
        } else if (!dbUser.getPassword().equals(user.getPassword())) {
27
            return "密码错误！";
28
        }
29
        return "登录成功";
30
    }
31
}

这是一个最最简单的控制器，接收参数是前端传来的user，dbuser来获取数据库里与前端传来的username对应的用户，所以在这里可以发现，数据库的用户名不能有重复的。后面就是几个简单的判断。这个控制器实现了基本功能，但是安全性和健壮性不是很高，我在这仅仅作为演示。

回到我们的Vue 修改如图所示的代码，调用登录方法并将返回值赋给response，我们打印一下response

1
const response = login(loginForm.username, loginForm.password)
2
console.log(response)
3
ElMessage.warning(response.data)

现在你可以在登录界面输入用户名与密码，登录一下试试，你会发现页面上方会弹出登录后端返回的信息，说明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#

注册视图#

注册视图和登录视图的框架完全一样，只是改了名字，你完全可以复制登录框架的代码，在登录的代码基础上改一改就是注册视图了。

我在此还是贴上我的代码

1
<template>
2
    <div class="register-container">
3
        <el-card class="register-card">
4
            <div class="register-header">
5
                <h2>注册</h2>
6
            </div>
7

8
            <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="register-form"
9
                @submit.prevent="handleRegister">
10
                <el-form-item prop="username">
11
                    <p>用户名：</p>
12
                    <el-input v-model="registerForm.username" placeholder="请输入用户名" prefix-icon="User" />
13
                </el-form-item>
14

15
                <el-form-item prop="password">
16
                    <p>密码：</p>
17
                    <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
18
                        show-password />
19
                </el-form-item>
20

21
                <el-form-item prop="repassword">
22
                    <p>重复密码：</p>
23
                    <el-input v-model="registerForm.repassword" type="password" placeholder="请重复密码" prefix-icon="Lock"
24
                        show-password />
25
                </el-form-item>
26

27
                <el-form-item prop="remember" class="remember-me">
28
                    <el-checkbox v-model="registerForm.remember">记住我</el-checkbox>
29
                </el-form-item>
30

31
                <el-form-item>
32
                    <el-button type="primary" class="register-btn" native-type="submit"
33
                        :loading="loading">注册</el-button>
34
                </el-form-item>
35
            </el-form>
36

37
            <div class="register-footer">
38
                <el-link type="primary" @click="forgetDialogVisible = true">忘记密码?</el-link>
39
                <el-link type="primary" @click="router.push('/login')">登录账号</el-link>
40
            </div>
41
        </el-card>
42

43
        <!-- 忘记密码对话框 -->
44
        <el-dialog v-model="forgetDialogVisible" title="忘记密码" width="30%">
45
            <span>请联系系统管理员重置密码</span>
46
            <template #footer>
47
                <el-button @click="forgetDialogVisible = false">关闭</el-button>
48
            </template>
49
        </el-dialog>
50
    </div>
51
</template>
52

53
<script setup lang="ts">
54
import { ref, reactive } from 'vue'
55
import { ElMessage, type FormInstance } from 'element-plus'
56
import { useRouter } from 'vue-router'
57
import { register } from '@/api/Api'
58

59
const router = useRouter()
60

61
// 表单引用
62
const registerFormRef = ref<FormInstance | null>(null)
63

64
// 响应式数据
65
const registerForm = reactive({
66
    username: '',
67
    password: '',
68
    repassword: '',
69
    remember: false
70
})
71

72
const loading = ref(false)
73
const forgetDialogVisible = ref(false)
74

75
// 验证规则
76
const registerRules = reactive({
77
    username: [
78
        { required: true, message: '请输入用户名', trigger: 'blur' },
79
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
80
    ],
81
    password: [
82
        { required: true, message: '请输入密码', trigger: 'blur' },
83
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
84
    ],
85
    repassword: [
86
        { required: true, message: '请重复密码', trigger: 'blur' },
87
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
88
        {
89
            validator: (_rule: any, value: string, callback: (error?: Error) => void) => {
90
                if (value === '') {
91
                    callback(new Error('请再次输入密码'));
92
                } else if (value !== registerForm.password) {
93
                    callback(new Error('两次输入的密码不一致'));
94
                } else {
95
                    callback(); // 验证通过时，不带参数调用 callback
96
                }
97
            },
98
            trigger: 'blur'
99
        }
100
    ],
101
})
102

103
// 注册方法
104
const handleRegister = async () => {
105
    try {
106
        // 验证表单
107
        const valid = await registerFormRef.value.validate()
108
        if (!valid) return
109

110
        loading.value = true
111

112
        const response = await register(registerForm.username, registerForm.password)
113
        if (response.data == '注册成功') {
114
            router.push('/login')
115
        } else {
116
            ElMessage.error('用户名已存在')
117
        }
118
    } catch (error) {
119
        ElMessage.error(error.response?.data?.message || '注册失败')
120
    } finally {
121
        loading.value = false
122
    }
123
}
124
</script>
125

126
<style scoped>
127
.register-container {
128
    display: flex;
129
    justify-content: center;
130
    align-items: center;
131
    min-height: 100vh;
132
    background-color: #f5f7fa;
133
}
134

135
.register-card {
136
    width: 400px;
137
    padding: 20px;
138
    border-radius: 5px;
139
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
140
}
141

142
.register-header {
143
    text-align: center;
144
    margin-bottom: 30px;
145
}
146

147
.register-header h2 {
148
    color: #409EFF;
149
}
150

151
.register-form {
152
    margin-top: 20px;
153
}
154

155
.register-btn {
156
    width: 50%;
157
    margin: 0 auto;
158
}
159

160
.register-footer {
161
    display: flex;
162
    justify-content: space-between;
163
    margin-top: 10px;
164
}
165
</style>

可以发现并没有改太多的地方。

对接注册api#

我将原来的LoginApi改名为Api，更通用一点，记得改名后要把之前导入这个Api的地方同样也改名。

然后添加

1
const register = (username: string, password: string) => {
2
  return api.post('/user/register', {
3
    username,
4
    password
5
  })
6
}

之前是在function前面加上export，导出方法，现在可以在后面统一export

1
export {
2
  login,
3
  register
4
}

当然你也可以在每个函数面前加export，两种不同的方法罢了。

我们来到IDEA，编写后端的Controller

在UserController里添加

1
@PostMapping("/register")
2
public  String register(@RequestBody User user) {
3
    QueryWrapper<User> wrapper = new QueryWrapper<>();
4
    wrapper.eq("username", user.getUsername());
5
    User dbUser = userMapper.selectOne(wrapper);
6
    System.out.println(dbUser);
7
    System.out.println(user);
8
    if (dbUser == null) {
9
        userMapper.insert(user);
10
        return "注册成功";
11
    }
12
    return "用户名已存在";
13
}

最后进行测试，别忘记运行两个项目输入用户名密码点击注册后，你应该可以在MySQL数据库的用户表里看见刚刚注册的用户信息