【VUE小型网站开发】初始环境搭建

1. 初始化VUE项目

1.1 创建vue项目

在这里插入图片描述

1.2 删除多余的界面

根据自己情况删除红框内的文件
在这里插入图片描述
清理app页面代码

1.3 引入vue-router

1.3.1 下载vue-router

npm install vue-router

1.3.2 配置vue-router

在 main.js 或 main.ts 中引入 vue-router

import './assets/main.css'
import router from './router';
import { createApp } from 'vue'
import App from './App.vue'// createApp(App).mount('#app')
const app = createApp(App);
app.use(router);
app.mount('#app');

在项目中创建一个 router 目录，并在其中创建 index.js 文件来配置路由：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home,},{path: '/about',name: 'About',component: About,},
];const router = createRouter({// history: createWebHistory(process.env.BASE_URL),history: createWebHistory(),routes,
});export default router;

1.3.3 创建视图组件

在 src/views 目录下创建两个简单的视图组件 Home.vue 和 About.vue：

<!-- src/views/Home.vue -->
<template><div><h1>Home Page</h1></div>
</template><script>
export default {name: 'Home',
};
</script><style scoped>
</style>

1.4 引入elementui

1.4.1 下载element-plus

因为用的是vue3版本，所以引入element-plus

npm install element-plus

1.4.2 配置element-plus

在 main.js 或 main.ts 中引入 element-plus

import './assets/main.css'import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import { createApp } from 'vue'
import App from './App.vue'// createApp(App).mount('#app')
const app = createApp(App);
//使用路由器
app.use(router);
//使用ElementPlus
app.use(ElementPlus);
app.mount('#app');

1.5 创建侧边栏组件

1.5.1 在 src/components 目录下创建 SideBar.vue 组件：

<script setup>
import { RouterLink } from 'vue-router';
</script><template><el-menu :router="true" default-active="1" class="el-menu-vertical-demo"><el-sub-menu index="1"><template #title><span>一级菜单</span></template><el-menu-item index="home"><span>首页</span></el-menu-item><el-menu-item index="about"><span>关于</span></el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><span>二级菜单</span></template><el-menu-item index="2-1" :to="{ name: 'AnotherPage' }"><span>另一个页面</span></el-menu-item><el-sub-menu index="2-2"><template #title><span>三级菜单</span></template><el-menu-item index="2-2-1" :to="{ name: 'SubPage' }"><span>子页面</span></el-menu-item></el-sub-menu></el-sub-menu></el-menu>
</template><style scoped>
.el-menu-vertical-demo {height: 100%;
}
</style>

1.5.2 更新主应用APP.VUE组件

<!-- src/App.vue -->
<script setup>
import { RouterView } from 'vue-router';
import SideBar from './components/SideBar.vue';
</script><template><div id="app"><el-container style="height: 100vh; width: 100%;"><el-aside width="200px"><SideBar /></el-aside><el-main><div class="router-view-container"><RouterView /></div></el-main></el-container></div>
</template><style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;height: 100vh;width: 98vw;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;line-height: 200px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;padding: 20px;height: 100%;overflow: auto;
}.router-view-container {flex-grow: 1;overflow: auto;padding: 20px; /* 可选：恢复内边距 */
}
</style>

2. 初始化Java项目

2.1 创建Java项目

2.1.1 创建springboot项目

在这里插入图片描述
添加为maven项目

2.1.2 修改jdk配置

因为使用的是jdk8，所以需要修改配置
在这里插入图片描述

修改idea Java项目配置

修改maven 配置指定Java版本和springboot版本

修改application

2.2 创建初始化接口

2.2.1 添加web maven

 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>RELEASE</version><scope>compile</scope></dependency>

2.2.2 创建testController

package com.tool.tooladmin.algorithm;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/test")
public class testController {@GetMapping("/test")public Map<String, Object> test() {Map<String, Object> map = new HashMap<>();map.put("code", 200);map.put("msg", "test");return map;}
}

2.2.3 修改application

server:port: 8888servlet:# 应用的访问路径context-path: /tool-admin
spring:application:name: tool-admin

启动验证可以正常访问即可

3. 封装统一http请求（Vue）

3.1 安装axios

npm install axios

3.2 创建封装请求的文件，http.js

// http.js
import axios from 'axios';
import { ElMessageBox, ElMessage } from 'element-plus';// 创建axios实例
const service = axios.create({// baseURL: process.env.VUE_APP_BASE_API, // api的base_urlbaseURL: 'http://localhost:8080', // api的base_urltimeout: 5000 // 请求超时时间
});// 请求拦截器
service.interceptors.request.use(config => {// 可以在这里添加请求头等信息return config;},error => {// 请求错误处理console.log(error); // for debugPromise.reject(error).then(() => {// 可以在这里进行错误处理return Promise.reject(error);});}
);// 响应拦截器
service.interceptors.response.use(response => {const res = response.data;// 根据返回的状态码做相应处理，例如这里以200为正确响应if (res.code !== 200) {ElMessageBox.alert(res.message, '错误', { type: 'error' }).then(() => {if (res.code === 50008 || res.code === 50012 || res.code === 50014) {// 根据错误代码进行对应操作，例如登录失效等}});return Promise.reject('error');} else {return response.data;}},error => {console.log('err' + error); // for debugElMessage({message: '服务器异常',type: 'error',duration: 5 * 1000});return Promise.reject(error);}
);export default service;

3.3 在main.js中引入这个封装后的请求文件

import './assets/main.css'import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import { createApp } from 'vue'
import App from './App.vue'
import http from './utils/http'; // 引入封装的http请求// createApp(App).mount('#app')
const app = createApp(App);
//使用路由器
app.use(router);
//使用ElementPlus
app.use(ElementPlus);
//将http请求挂载到全局
app.config.globalProperties.$http = http;
app.mount('#app');

4. 解决跨域问题（Java）

4.1 创建CorsConfig

package com.tool.tooladmin.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {/*** 跨域配置*/@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);// 设置访问源地址config.addAllowedOriginPattern("*");// 设置访问源请求头config.addAllowedHeader("*");// 设置访问源请求方法config.addAllowedMethod("*");// 有效期 1800秒config.setMaxAge(1800L);// 添加映射路径，拦截一切请求UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);// 返回新的CorsFilterreturn new CorsFilter(source);}
}

5. 调用

5.1 修改Home.vue

<!-- src/views/Home.Vue -->
<template><div><h1>Home Page</h1></div>{{ message }}
</template><script>
export default {name: 'Home',data() {return {message: null}},methods: {fetchData() {this.$http.get('/test/test').then(response => {console.log(response);this.message = response.msg;}).catch(error => {console.error(error);});}},mounted() {// 当组件挂载到DOM上后调用方法this.fetchData();}
};
</script><style scoped>
</style>