Hello World 前后端分离框如何快速进入开发，请参照下面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; } } ``` 请求 /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值改变则页面显示也改变。 ###三、配置菜单 配置helloword菜单【系统管理】-【菜单管理】  - 其中前端组件配置相对src/views/目录下的 目录名+文件名 - 例如页面src/views/jeecg/helloworld.vue 前端组件配置 jeecg/helloworld  用户角色授权【系统管理】-【角色管理】-授权   点击菜单访问页面展示Hello World!