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

一、开发工具与技术选型

  1. idea
  2. hbuilder/记事本/webstorm/
  3. jdk1.8
  4. maven3.6.0
  5. springboot 2.x
  6. 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项目搭建

  1. Vue环境需要安装两个东西
  • NodeJS
  • npm
  1. 直接搜索下载 NodeJS 即可,安装成功之后,npm 也就有了,链接为:https://nodejs.org/en/。安装成功之后,可以 在 cmd 命令哈验证是否安装成功:
    在这里插入图片描述
  2. npm的环境安装完成之后,接下来安装vue的工具
npm install -g vue-cli       # 只需要第一次安装时执行
vue init webpack my-project  # 使用webpack模板创建一个vue项目
cd my-project                #进入到项目目录中
npm install                  # 下载依赖(如果在项目创建的最后一步选择了自动执行npm install,则该步骤可以省略)
npm run dev                  # 启动项目
  1. 启动成功之后,访问http://localhost:8080
    在这里插入图片描述
  2. 接下来编写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请求格式,表单有两个输入框,分别是用户名和年龄。

  1. 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
  1. 最后定义路由。进入webpack.config.js,找到devServer标签,修改为:
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    proxy: {
      '/hello/*': {
        target: 'http://localhost:8084/',
        secure: false,
        changeOrigin: true
      }
    }
  }

表示hello打头的所有请求,路由到http://localhost:8084这个地址

  1. 打开命令行,执行 npm run dev
    在这里插入图片描述
  2. 访问http://localhost:8080/
    在这里插入图片描述
  3. 此时表示前后端已经调通。
Logo

前往低代码交流专区

更多推荐