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; } } ``` 访问请求 `http://localhost:8080/jeecg-boot/test/jeecgDemo/hello` 会提示token无效， 需要在拦截器`ShiroConfig`配置下排除。 类l路径：`jeecg-boot-base/jeecg-boot-base-core/org.jeecg.config.shiro.ShiroConfig` 加入下面代码 ``` filterChainDefinitionMap.put("/test/jeecgDemo/hello", "anon"); ```  再访问http://localhost:8080/jeecg-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  2. 用户角色授权【系统管理】-【角色管理】-授权   点击菜单访问页面展示Hello World!