(二)从零搭建通用管理系统后台SpringBoot+Vue详细流程——前后端项目创建

前言

上节我们已经完成了基础的开发环境准备，本节主要从面向初学者从创建前后端项目开始，讲的会比较详细，如果已经有过几次创建项目的经验，可以忽略本节，让我们开始吧！

一、后端项目创建

（一）创建项目

1.打开idea，创建新项目

2.左边生成器选择Spring Initiaizr

3.名称这里我起的是ruoxi，如果你是初学者，建议名称和我一样吧，为了方便后面直接copy代码，否则还要改包名很麻烦。

4.语言选择 Java

5.类型选择Maven

6.JDK选择jdk17

7.具体配置参考下图：

​

8.依赖就选择一个Spring Web即可，然后创建。（其它依赖我会将pom文件粘贴出来）

9.删除不必要的文件

10.创建如下目录，注意RuoxiApplication类的路径，必须在com.ruoxi包下，该类需要在所有类的最顶层路径上。

（三）Hello World 示例

在controller包中创建HelloWorldController

@RestController
public class HelloWorldController {
    @RequestMapping("/hello")
    public String helloWorld() {
        return "Hello World!";
    }
}

编辑application.yml文件，这里主要指定程序运行端口及访问根路径

server:
  port: 8080
  servlet:
    context-path: /ruoxi

启动springboot项目。

方式一：右键RuoxiApplication，单击“运行”；

方式二：单击idea窗口顶部“运行”按钮。

控制台如下图所示，无任何错误，说明项目启动成功！标注的地方说明了程序的运行端口及根路径。

打开浏览器输入http://localhost:8080/ruoxi/hello就可以看到“hello word”了。其中localhost为本机地址，8080为程序运行端口，/ruoxi为程序根路径，/hello为我们在HelloWorldController中定义的接口路径。访问效果如图：

如果在浏览器中成功展示hello world！说明后端项目搭建没有问题啦，如有问题，欢迎留言共同探讨解决。

二、创建前端项目

 （一）创建项目 

进入后端项目文件夹，通过cmd打开当前文件夹，如下图：

（如果是win10系统，右键菜单里可能没有”在此处打开命令窗口”，如果需要，可以关注微信公众号“小马马冲冲冲”,回复“右键cmd”即可免费获取对应的注册项脚本）

执行命令npm init vue，后续内容可参考下图，我选择‘否’的读者可以更据自己情况选择‘是’，我选择‘是’的，建议和我一样选择‘是’。

此时我们的项目文件下就会多出来一个ui-ruoxi-admin的文件夹，如图：

右键菜单“通过Code打开”，如图：

进入vscode后，先确认下自己打开的文件是否正确，打开后确保根路径为‘ui-ruoxi-admin’；到这里我们前端项目就创建成功了，下面我们同样写一个hello word来体验一下。

（二）H ello world 示例

删除src文件夹下的所有内容；在src文件夹下创建App.vue文件，内容如下：

<script setup></script>

<template>

  <router-view></router-view>

</template>

<style scoped></style>

创建一个用于展示hello world 的页面，在src文件夹下创建目录及文件view/HelloWorldView.vue文件，内容如下：

<script setup></script>

<template>

  <div>Hello World</div>

</template>

<style scoped></style>

注册页面路由，在src文件夹下创建目录及文件router/index.js文件，内容如下：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({

  history: createWebHashHistory(import.meta.env.BASE_URL),

  routes: [

    {

      path: '/hello',

      component: () => import('@/views/HelloWorldView.vue')

    }

  ]

})

export default router

创建全局css样式，在src文件夹下创建目录及文件assets/main.css文件，内容如下：

html,body,#app{

  height: 100%;

  width: 100%;

  padding: unset;

  margin: unset;

}

下载vue依赖，打开控制台，执行指令npm i

一切准备就绪，开始运行项目；方式一：控制台执行 npm run dev

方式二：勾选左侧资源管理器的npm脚本 选项，然后展开底部的 npm脚本 框，点击 dev选项的右侧运行按钮。

正常情况下，运行无论哪种方式，运行成功后控制台会显示下图内容：

http://localhost:5173/  即为项目地址，在注册路由时，我们对helloword页面定义的路径是/hello，那么访问http://localhost:5173/hello即可。​

三、vscode配置

这里我把自己的vscode使用的插件及配置放出来供大家参考，都是一些我认为在写代码过程中比较好用的配置。

插件列表

​

vscpde设置

{

  //ESLint 设置

  "eslint.validate": ["javascript", "vue"],



  //编辑器 设置

  "editor.fontSize": 16,

  "editor.tabSize": 2,

  "editor.minimap.enabled": false, //关闭快速预览

  "editor.formatOnSave": true,

  "editor.suggestSelection": "first",

  "editor.linkedEditing": true,

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": "explicit"

  },

  "[jsonc]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },



  //命令窗口设置

  "terminal.integrated.defaultProfile.windows": "Command Prompt",

  "terminal.integrated.tabs.enabled": true,

  "terminal.integrated.tabs.location": "left",



  //git 设置

  "git.autofetch": true,

  "git.enableSmartCommit": true,

  "git.ignoreMissingGitWarning": true,



  //主题设置

  "workbench.colorTheme": "One Dark Pro",

  "explorer.confirmDelete": false,

  "security.workspace.trust.untrustedFiles": "open",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

}

.prettierrc.json

{

  "$schema": "https://json.schemastore.org/prettierrc",

  "semi": true,

  "tabWidth": 2,

  "singleQuote": false,

  "printWidth": 180,

  "trailingComma": "none"

}

以上就是本节内容啦，简单的创建项目教程，下节我们开始写登录业务逻辑。在本节遇到什么问题欢迎留言共同探讨解决！