• 在线教育项目-day04【讲师前端开发】


    1.项目结构

    ├── build // 构建脚本
    ├── config // 全局配置
    ├── node_modules // 项目依赖模块
    ├── src //项目源代码
    ├── static // 静态资源
    └── package.jspon // 项目信息和依赖配置

    src
    ├── api // 各种接口
    ├── assets // 图片等资源
    ├── components // 各种公共组件,非公共组件在各自view下维护
    ├── icons //svg icon
    ├── router // 路由表
    ├── store // 存储
    ├── styles // 各种样式
    ├── utils // 公共工具,非公共工具,在各自view下维护
    ├── views // 各种layout
    ├── App.vue //***项目顶层组件***
    ├── main.js //***项目入口文件***
    └── permission.js //认证入口

    2. 登录功能改造

    1. 更改地址

    改成本地地址,注意是http

     

    可以看到有两个方法,一个叫login,一个叫info

     登录方法需要返回token

     获取信息需要roles,name,avatar

    3.开发接口

    我们就返回他需要的值就可以了,进行一个测试。

     代码:

    @RestController
    @RequestMapping("/eduservice/user")
    public class EduLoginController {
        @PostMapping("login")
        public R login(){
    
            return R.OK().data("token","dumeng");
        }
        @GetMapping("info")
        public R info(){
            return R.OK().data("roles","[admin]").data("name","dumeng").data("avatar","http://hbimg.b0.upaiyun.com/a09c6d214b2136bbccb4d527bbced72f920a58774274-5W126J_fw658");
        }
    
    }

    将服务启动

    修改我们前端中的src->api->login.js

     更改我们刚才定义的地址

    4.测试 

    将前端框架重启,然后进行测试。

     可以看到请求路径已经更改过来了。

    这里没登进去会出现一个跨域问题:

    通过一个地址访问另一个地址,这个过程如果三个地方有任何一个不一样,就会出现跨域问题

    1.访问协议

    2.ip地址

    3.端口号

    因为前端框架地址是http://localhost:9528/

    而后端是8001就会产生这个问题

    跨域的解决方式:

    1.我们后端接口的controller上加注解@CrossOrigin

     2.使用网关解决

    重新启动SpringBoot框架,重新启动前端框架

  • 相关阅读:
    JavaScript数据结构——模仿ES6中定义的类似的Set类
    webpack简单的项目配置发生的错误
    三国
    把握中国经济的大局与动力
    人生道路
    C++
    https://计算机等级分类总结
    https://计算机四级
    https://计算机三级
    https://计算机二级
  • 原文地址:https://www.cnblogs.com/dmzna/p/12803236.html
Copyright © 2020-2023  润新知