最简单的springboot+vue项目骨架搭建

最新推荐文章于 2024-06-16 14:44:22 发布

丿镜花水月

最新推荐文章于 2024-06-16 14:44:22 发布

阅读量3.7k

点赞数 4

分类专栏：前后端分离文章标签：前后端分离 springboot vue

本文链接：https://blog.csdn.net/maniacer/article/details/102370932

版权

前后端分离专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

本文介绍了SpringBoot项目最基本功能的搭建，以及Vue项目最基本环境搭建，通过一个hello接口实现前后端分离通信

一、开发工具与技术选型

idea
hbuilder/记事本/webstorm/
jdk1.8
maven3.6.0
springboot 2.x
vue2.x

二、后台服务搭建

在搭建后台服务之前，应确保本地电脑已经安装并配置好jdk1.8，并安装idea。

1. 新建项目

File–new–project
选择spring initializr
填写项目信息
选择Web-spring web
修改application.properties。因为vue默认占用8080端口，此处后台服务修改端口为8084
编写一个controller，对外暴露一个接口。此处只有controller层，返回一个字符串

package com.jf.springbootserver.platform.controller;

import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author : zhaochuanzhen
 * @description :
 * @date : 2019/10/8 9:54
 */
@RestController
public class HelloController {

    @RequestMapping(value = "/hello", produces = "application/json;charset=utf-8")
    @ResponseBody
    public String login(@RequestBody User user) {
        return "hello " + user.getUsername() + ";你今年" + user.getAge() + "岁了";
    }
}

此处使用User实体类封装

package com.jf.springbootserver.platform.controller;

import java.io.Serializable;

/**
 * @author : zhaochuanzhen
 * @description :
 * @date : 2019/10/7 8:47
 */
public class User implements Serializable {
    private Integer id;
    private String username;
    private Integer age;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

此时一个只有一个接口的后台服务已经搭建完成，在真正的开发中，此服务应该集成MyBatis、Redis、Elasticsearch等等其他的逻辑，可以按照需求自己添加maven配置、并自行配置application.properties。

三、Vue项目搭建

Vue环境需要安装两个东西

NodeJS
npm

直接搜索下载 NodeJS 即可，安装成功之后，npm 也就有了，链接为：https://nodejs.org/en/。安装成功之后，可以在 cmd 命令哈验证是否安装成功：
npm的环境安装完成之后，接下来安装vue的工具

npm install -g vue-cli       # 只需要第一次安装时执行
vue init webpack my-project  # 使用webpack模板创建一个vue项目
cd my-project                #进入到项目目录中
npm install                  # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
npm run dev                  # 启动项目

启动成功之后，访问http://localhost:8080
接下来编写Vue的逻辑。首先使用记事本或者其他文本编辑工具进入App.vue，我这里继续使用idea。将内容修改如下

	<template>
  <div id="login">
    <form>
      <label for="username">用户名</label><input type="text" v-model.trim="formData.username" name="username">
      <label for="age">用户名</label><input type="text" v-model.trim="formData.age" name="age">
      <input type="button" value="登录" @click="doLogin">
    </form>
  </div>
</template>

<script>
  import utils from "./utils/utils"

  export default {
    name: 'login',
    data() {
      return {
        formData: {
          username: "",
          age: 0
        }
      }
    },
    methods: {
      doLogin() {
        let success = (response) => {
          alert(JSON.stringify(response.data));
        };
        utils.axiosMethod({
          method: "POST",
          url: "/hello/",
          data: this.formData,
          callback: success
        })
      }
    }
  }
</script>

此处定义了一个表单，POST请求格式，表单有两个输入框，分别是用户名和年龄。

app.vue依赖于一个utils.js，需要在app.vue同级目录下创建一个utils文件夹，并且编写utils.js

import axios from 'axios'

const utils = {
  axiosMethod: (config) => {
    axios({
      method: config.method,
      url: config.url,
      params: config.params ? config.params : null,
      data: config.data ? config.data : null
    }).then(config.callback).catch(config.catch ? config.catch : () => {
    })
  }
}

export default utils

最后定义路由。进入webpack.config.js，找到devServer标签，修改为：

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    proxy: {
      '/hello/*': {
        target: 'http://localhost:8084/',
        secure: false,
        changeOrigin: true
      }
    }
  }