Hello World

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

一、后台请求实现

  1. @RestController
  2. @RequestMapping("/test/jeecgDemo")
  3. @Slf4j
  4. public class JeecgDemoController {
  6.     /**
  7.      * hello world
  8.      * 
  9.      * @param id
  10.      * @return
  11.      */
  12.     @GetMapping(value = "/hello")
  13.     public Result<String> hello() {
  14.         Result<String> result = new Result<String>();
  15.         result.setResult("Hello World!");
  16.         result.setSuccess(true);
  17.         return result;
  18.     }
  19. }

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

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

输入图片说明

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

  1. {
  2.     "success": true,
  3.     "message": null,
  4.     "code": null,
  5.     "result": "Hello World!",
  6.     "timestamp": 1548833208562
  7. }

二、前台vue页面实现

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

  1. <template>
  2.   <div>
  3.     {{ msg }}
  4.   </div>
  5. </template>
  7. <script>
  8.   import {getAction} from '@/api/manage'
  9.   export default {
  10.     data () {
  11.       return {
  12.         msg: ""
  13.       }
  14.     },
  15.     methods: {
  16.       hello () {
  17.         var url = "/test/jeecgDemo/hello"
  18.         getAction(url).then((res) => {
  19.           if (res.success) {
  20.             this.msg = res.result;
  21.           }
  22.         })
  23.       }
  24.     },
  25.     created() {
  26.       this.hello();
  27.     }
  28.   }
  29. </script>

代码说明：

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

  1.      hello () {
  2.         var url = "/test/jeecgDemo/hello"
  3.         getAction(url).then((res) => {
  4.           if (res.success) {
  5.             this.msg = res.result;
  6.           }
  7.         })
  8.       }

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!