Question

前后端分离框如何快速进入开发，请参照下面hello world实现demo

一、后台服务代码实现

@RestController
@RequestMapping("/test/jeecgDemo")
@Slf4j
public class JeecgDemoController {

    /**
     * hello world
     * 
     * @param id
     * @return
     */
    @GetMapping(value = "/hello")
    public Result<String> hello() {
        Result<String> result = new Result<String>();
        result.setResult("Hello World!");
        result.setSuccess(true);
        return result;
    }
}

访问请求http://localhost:8080/jeecg-boot/test/jeecgDemo/hello 会提示token无效， 所以需要配置下拦截器ShiroConfig排除。

配置文件： jeecg-boot-module-system/src/main/java/org/jeecg/config/ShiroConfig.java 
加入配置：filterChainDefinitionMap.put("/test/jeecgDemo/hello", "anon");

再访问http://localhost:8080/jeect-boot/test/jeecgDemo/hello，会返回结果如下：

{
    "success": true,
    "message": null,
    "code": null,
    "result": "Hello World!",
    "timestamp": 1548833208562
}

二、前台vue页面实现

（1）创建vue页面src/views/jeecg/helloworld.vue 调用后台请求，获取返回的Hello World! 输出到页面，页面代码如下：

<template>
  <div>
    \{\{ msg \}\}
  </div>
</template>

<script>
  import {getAction} from '@/api/manage'
  export default {
    data () {
      return {
        msg: ""
      }
    },
    methods: {
      hello () {
        var url = "/test/jeecgDemo/hello"
        getAction(url).then((res) => {
          if (res.success) {
            this.msg = res.result;
          }
        })
      }
    },
    created() {
      this.hello();
    }
  }
</script>

代码说明：

1、data() 方法中定义数据对象msg 2、数据对象msg输出到页面，表达式如下： <div> {{ msg }} </div> 3、定义一个方法，发起请求获取后台响应，后台实现的是get方法，引入getAction方法

import {getAction} from '@/api/manage'

定义方法调用：

hello () {
  var url = "/test/jeecgDemo/hello"
  getAction(url).then((res) => {
    if (res.success) {
      this.msg = res.result;
    }
  })
}

4、Vue生命周期 created 中调用方法

created() {
  this.hello();
}

hello方法中 this.msg = res.result; 把请求返回的Hello World! 赋值给msg数据对象，msg值改变则页面显示也改变。

三、配置菜单

1. 配置helloword菜单【系统管理】-【菜单管理】

• 其中前端组件配置相对src/views/目录下的 目录名+文件名
• 例如页面src/views/jeecg/helloworld.vue 前端组件配置 jeecg/helloworld

1. 用户角色授权【系统管理】-【角色管理】-授权 点击菜单访问页面展示Hello World!