（一）hello word

1、在如图demo文件夹下可以编写自己的后端代码。

我们编写hello的接口代码如下：

@RestController
@RequestMapping("/hello")
@Slf4j//日志打印
public class HelloController {
    @GetMapping("/hello")
    public Result<String> hello(){
        Result<String> result = new Result<>();
        result.success("interface data hello");
        return result;
    }
}

2、打开webstorm寻找如下图目录编写前端代码，视图加载的根目录在views目录，原项目本身测试建立了jeecg目录，我们在jeecg下新建视图文件

新建hello.vue如下：

<template>



    <div>
      this is hello page<!--页面信息-->
      {{msg}}<!--绑定从后端拿到的信息-->
    </div>
</template>

<script>
  import {getAction} from '../../api/manage'

  export default {
    name: 'hello',
    data(){
      return {
        msg:""
      }
    },
    methods:{
      hello(){
        var url = "/hello/hello"
        getAction(url).then((res)=>{
          console.log(res);
            if(res.success){
              this.msg = res.message;//  获取网络数据
            }
        })
      }
    },
    created() {
     this.hello();// 生命周期执行
    }

  }
</script>

<style scoped>

</style>

3、查看配置文件可以看到前端项目里配置有后端地址

4、启动项目进行配置，进入菜单管理新增菜单

菜单新增配置项目如下：

5、配置admin拥有访问hello菜单的权限，进入角色管理进行授权

授权图如下：

6、刷新页面，出现hello菜单 ，点击查看