前后端分离项目demo

前后端分离项目demo

前后端分离demo,整合日常开发所需用到的业务点的实现:github地址

  • v1.0版本(2020-06-13 - 2020-06-14)

    1.更新说明:

    1.1: Springboot整合shiro,实现用户的用户认证和授权
    1.2: 场景描述:用户需要登陆才能访问相关接口,未登录会提示登陆()

    2.接口介绍:

    接口名称请求地址作用
    登录请求http://localhost:8080/test/login传入账号密码登录
    登出http://llocalhost:8080/test/logout用户退出
    加载权限列表http://llocalhost:8080/test/loadPermission获取权限列表
    提示登陆http://llocalhost:8080/test/loginRemind提示登陆,用户未登录会请求到这里

    2.1:
    加载接口请求图如下:
    加载接口请求图

    3.参考:

    书籍:<<跟我学shiro>>,张开涛著
    springboot整合shiro(完整版)
    springboot与shiro整合(示例)

    4.总结:

    4.1:主要是这个类,认证和授权的逻辑都在里面写;权限的校验通过拦截器拦截所访问的接口,获取到目前访问接口的所需权限,调用shiro的Subject相关接口可以校验权限,没有权限会抛相应的异常,捕捉处理即可,另外通过标签注明,标签的左右还有在加载的时候获取所有的权限标签,然后按照角色分配。

    package com.ample16.backend.shiro;
    
    import com.ample16.backend.entity.User;
    import org.apache.shiro.SecurityUtils;
    import org.apache.shiro.authc.*;
    import org.apache.shiro.authz.AuthorizationInfo;
    import org.apache.shiro.authz.SimpleAuthorizationInfo;
    import org.apache.shiro.realm.AuthorizingRealm;
    import org.apache.shiro.subject.PrincipalCollection;
    
    public class MyShiroRealm extends AuthorizingRealm {
        Boolean cachingEnabled = true;
    
        /**
         * 授权操作 对传入的用户进行授权
         *
         * @param principalCollection
         * @return
         */
        @Override
        protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
            SimpleAuthorizationInfo simpleAuthorInfo = new SimpleAuthorizationInfo();
            User primaryPrincipal = (User) principalCollection.getPrimaryPrincipal();
            System.out.println("======primaryPrincipal=========" + primaryPrincipal);
            simpleAuthorInfo.addStringPermission("how_are_you");//给当前用户授权url为hello的权限码
            System.out.println("经试验:并不是每次调用接口就会执行,而是调用需要操作subject的permission相关接口就会执行");
            return simpleAuthorInfo;
        }
    
        /**
         * 认证操作 传入token UsernamePasswordToken 包含账号密码
         *
         * @param authcToken
         * @return
         * @throws AuthenticationException
         */
        @Override
        protected AuthenticationInfo doGetAuthenticationInfo(
                AuthenticationToken authcToken) throws AuthenticationException {
            //获取基于用户名和密码的令牌
            //实际上这个authcToken是从LoginController里面currentUser.login(token)传过来的
            UsernamePasswordToken token = (UsernamePasswordToken) authcToken;
            String account = token.getUsername();
            String password = new String(token.getPassword());
            User user = new User();
            if (account.equals("kaka") && password.equals("123456")) {
                user.setUsername("kaka");
                user.setPassword("123456");
            } else {
                user = null;
            }
            if (user == null) {
                throw new AuthenticationException("用户不存在");
            }
    
            //进行认证,将正确数据给shiro处理
            //密码不用自己比对,AuthenticationInfo认证信息对象,一个接口,new他的实现类对象SimpleAuthenticationInfo
            /*	第一个参数随便放,可以放user对象,程序可在任意位置获取 放入的对象
             * 第二个参数必须放密码,
             * 第三个参数放 当前realm的名字,因为可能有多个realm*/
            AuthenticationInfo authcInfo = new SimpleAuthenticationInfo(user, user.getPassword(), this.getName());
            //AuthenticationInfo authcInfo=new SimpleAuthenticationInfo(user,user.getPassword(),new MySimpleByteSource(account), this.getName());
    
            //清之前的授权信息
            super.clearCachedAuthorizationInfo(authcInfo.getPrincipals());
            SecurityUtils.getSubject().getSession().setAttribute("userInfo", user);
            return authcInfo;//返回给安全管理器,securityManager,由securityManager比对数据库查询出的密码和页面提交的密码
            //如果有问题,向上抛异常,一直抛到控制器
        }
    }
    
  • v1.1版本(待更新)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴为你提供一个Django+Vue3+ElementPlus前后端分离demo。 ## 后端部分 首先,我们需要创建一个Django项目。在命令行中输入以下命令: ``` django-admin startproject project_name ``` 然后,我们需要创建一个应用程序。在命令行中输入以下命令: ``` python manage.py startapp app_name ``` 接下来,我们需要安装一些必要的库。在命令行中输入以下命令: ``` pip install djangorestframework django-cors-headers ``` 接下来,我们需要在`settings.py`文件中添加以下代码: ```python INSTALLED_APPS = [ ... 'rest_framework', 'corsheaders', 'app_name', ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] CORS_ORIGIN_ALLOW_ALL = True ``` 现在,我们已经完成了后端部分的设置。我们可以开始编写API。 在`app_name`中创建一个名为`api.py`的文件,并编写以下代码: ```python from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def hello_world(request): return Response({"message": "Hello, World!"}) ``` 这是一个简单的API,当我们向`/api/hello`发送GET请求时,它将返回一个JSON响应,其中包含“Hello, World!”消息。 最后,在`urls.py`文件中添加以下代码: ```python from django.urls import path from . import api urlpatterns = [ path('api/hello', api.hello_world), ] ``` 现在,我们已经完成了后端部分的设置。我们可以在终端中运行`python manage.py runserver`命令来启动服务器。 ## 前端部分 首先,我们需要安装Vue CLI。在命令行中输入以下命令: ``` npm install -g @vue/cli ``` 然后,我们需要创建一个Vue项目。在命令行中输入以下命令: ``` vue create project_name ``` 接下来,我们需要安装ElementPlus。在命令行中输入以下命令: ``` npm i element-plus -S ``` 接下来,我们需要在`main.js`文件中添加以下代码: ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app') ``` 现在,我们已经完成了前端部分的设置。我们可以开始编写页面。 在`src`中创建一个名为`HelloWorld.vue`的文件,并编写以下代码: ```vue <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: '' } }, created() { fetch('http://localhost:8000/api/hello') .then(response => response.json()) .then(data => this.message = data.message) } } </script> ``` 这是一个简单的页面,它将从我们的API中获取消息并显示在页面上。 最后,在`App.vue`文件中添加以下代码: ```vue <template> <HelloWorld /> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { components: { HelloWorld } } </script> ``` 现在,我们已经完成了前端部分的设置。我们可以在终端中运行`npm run serve`命令来启动前端服务器。 现在,我们可以在浏览器中访问`http://localhost:8080`,应该可以看到一个页面,其中包含“Hello, World!”消息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值