前端模板的使用

三 前端模板框架的使用

1.要求 
	仔细写，有可能是字母写错，如果确实遇到问题先跳过
2.前端模板代码
	a.复制到目录下解压 然后打开控制台
	b.执行npm install 下载模板需要的依赖
	c.执行npm run dev 启动模板
		http://localhost:9528/
3.学习如何使用
	a.首先阅读readme
		线上演示地址
			https://panjiachen.gitee.io/vue-admin-template
	b.重要目录结构
		config			跟配置文件有关 只要修改了这里面的内容 我们需要重启项目
		static			第三方静态资源有关
		api				主要定义访问后端接口的js
		components		和项目相关的组件
		router			主要定义页面与路径之间的一个关联关系
		views			定义的页面
4.修改登录接口
	改造为后端JAVA接口
		1.在config/dev.env.js中修改BASE_API为自己项目的地址
		BASE_API: '"http://localhost:8000/edu"'
		遇到跨域问题
		添加注解 @CrossOrigin

具体模拟登录代码如下

@RestController
@RequestMapping("/edu")
@CrossOrigin
public class EduLoginController {

    @PostMapping("user/login")
    public RetVal login()
    {
       return RetVal.success().data("username","admin").data("password","admin");
    }
    @GetMapping("user/info")
    public RetVal info()
    {
        List<String> roles = new ArrayList<>();
        roles.add("admin");
        return RetVal.success().data("roles",roles).data("name","admin")
                .data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }
}