（一）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菜单 ，点击查看