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排除。 ``` 配置文件: jeecg-boot-module-system/src/main/java/org/jeecg/config/ShiroConfig.java 加入配置:filterChainDefinitionMap.put("/test/jeecgDemo/hello", "anon"); ``` ![输入图片说明](https://static.oschina.net/uploads/img/201908/08231321_wyjh.png "在这里输入图片标题") 再访问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菜单【系统管理】-【菜单管理】 ![输入图片说明](https://static.oschina.net/uploads/img/201901/30170002_FM0S.png "在这里输入图片标题") - 其中前端组件配置相对src/views/目录下的 目录名+文件名 - 例如页面src/views/jeecg/helloworld.vue 前端组件配置 jeecg/helloworld ![输入图片说明](https://static.oschina.net/uploads/img/201901/30170031_O53Y.png "在这里输入图片标题") 2. 用户角色授权【系统管理】-【角色管理】-授权 ![输入图片说明](https://static.oschina.net/uploads/img/201901/30170110_TIZa.png "在这里输入图片标题") ![输入图片说明](https://static.oschina.net/uploads/img/201901/30170127_4JzF.png "在这里输入图片标题") 点击菜单访问页面展示Hello World!