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!