HelloWorld
最后更新于：2022-04-02 07:09:08
Hello World
===
前后端分离框如何快速进入开发，请参照下面hello world实现demo
### 一、后台服务代码实现
```
@RestController
@RequestMapping("/test/jeecgDemo")
@Slf4j
public class JeecgDemoController {
/**
* hello world
*
* @param id
* @return
*/
@GetMapping(value = "/hello")
public Result hello() {
Result result = new Result();
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! 输出到页面，页面代码如下：
```
';
{{ msg }}
```
#### 代码说明：
1、data() 方法中定义数据对象msg
2、数据对象msg输出到页面，表达式如下：
{{ msg }}
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!