SAYLINING
SAYLINING

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆

壹周回顾

哈喽，又是元气满满的一个周一，又与大家见面了，周末就是团圆节了，正好咱们的前后端也要团圆了，为什么这么说呢，因为以后的开发可能就需要前后端一起了，两边也终于会师了，还有几天Vue系列就基本告一段落了，大家也好好加油鸭，今天将的内容呢，其实细心的你看到题目应该就能大家猜到了，前提是一直看本系列的小伙伴们，包括之前.net core部分，这里先简单说下上周咱们都说了什么：

周一：《十九║Vue基础: 样式动态绑定+生命周期》重点说了下 Vue 开发中的八个生命周期，这个是一个重点，希望大家可以多看看，这个在以后的开发中会经常遇到；

周二：《二十║Vue基础终篇：组件详解+项目说明》重点说了下组件的使用，包括定义、传值、使用等等，这个更是重中之重，组件的使用在 Vue 的开发中必不可少；

周三：《二十一║Vue实战：开发环境搭建【详细版】》详细的说了下开发环境的搭建，不仅讲了如何搭建，还详细的说明了每一个工具、插件的使用意义；

周四：《二十二║Vue实战：个人博客第一版(axios+router)》根据周三搭建的环境，第一次创建了咱们第一版的个人博客，封装了 axios ，第一次连接上了咱们之前的 .net core api；

周五：《二十三║Vue实战：Vuex 其实很简单》通过一个小 DEMO 说明了 Vuex 是如何对我们的 Vue 实行状态化管理的，让大家对其使用有了一定的了解，为在以后的大项目中使用打下基础；

周五的时候，咱们通过对表单的组件化，来说明了 vuex 的存在意义，今天咱们还是会用到这个 vuex ，而且还会配合着 .net core api，到底是什么呢？请看今天的讲解。

注意：周四的时候，只写了个人博客的首页，周末的时候，已经把详情页更新了，大家可以自行去 Git 查看，文末有地址

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第1张图片
image

零、今天要完成右下角粉色区块的部分

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第2张图片
image

一、如何实现权限验证的过程

大家一定还记得之前在 .net core api 系列文章中《框架之五 || Swagger的使用 3.3 JWT权限验证【修改】》，咱们通过对 JWT 的讲解，实现了对接口的验证，大家可以去了解一下，当时因为是没有前端，所以咱们就直接用的 Swagger 接口文档来手动设置的权限验证，当时群里有很多小伙伴对这个不是很明白，我也是简单说了下，通过手动在 swagger 中输入Header ，变成每次 vue 的 axios 请求的 Header 中添加 Token，这个 Token 就是咱们手动配置的那个，因为当时没有前后端搭配，所以只是比较笼统的说了下这个流程，今天呢，就重点来说下这个授权登陆验证，也为下边的管理后台铺路，这里配合 Vue 前端，再仔细讲讲是如何实现前后端同时验证的：

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第3张图片
image

上图中说的也是很详细了，主要分为两个验证：

1、前端验证（蓝色部分），用户访问一个页面，首先判断是否需要验证登陆，比如管理后台，或者订单系统的下单页（首页和详情页自然是不需要用户登陆的，购物车和订单等必须登陆，当然有些游客也可以购买的除外），然后去验证是否存在 Token，存在就添加到 axios 的 Header 中去请求后端 API，反之则去登陆页登陆；

2、后端验证（绿色部分），这个就是咱们之前在说 .net core api 的时候说到的 JWT 授权验证，根据当前前端 axios 请求中传来的 Token ，解析出是否被篡改，以及是否会相应的权限，这样就可以进一步返回数据了；

这个时候大家一定会有疑惑了，既然现在每一个接口都定义了权限，为什么要俩边都需要验证，只需要后端 api 一个验证不就行了，何必这么麻烦？我认为是这样的：

首先前端验证的主要目的是：通过手动配置，可以让用户去主动获取 Token ，不用每次都去获取，而且也减轻了后端请求的次数，总不能是先去发送请求，再判断当前页面是否需要登陆吧，嗯，总结来说，

前端是为了页面级登陆，后端是为了接口级验证，而且也是想把 vue 前端工程化的思想。

二、结合API设计登录页 —— 实现后端验证

1、引入 ElementUI 样式框架

因为之后需要一个管理后台，所以考虑着增加一个框架，目前比较流行的就是 ElementUI 和 IView，今天咱们先说一下引用 ElementUI

首先，在项目中 执行 npm install，初始化以后，在 node_modules 中查看是否存在 element-ui 文件夹，如果没有，则执行

 npm i element-ui -S

然后就可以看到项目中已经成功安装 elementui 了

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第4张图片
image

然后、在项目的入口配置文件 main.js 中，引用

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

如果项目没有报错，到此则安装成功。

2、添加统一登陆页面

第一、在 src 的 views 文件夹内，添加 Login.vue 页面，并添加内容：

添加路由后，测试页面是否可行

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第5张图片
image

3、配合后台登陆请求

完善 BlogController.cs 页面，稍微调整了下接口，和之前的没有差别，并增加权限验证

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第6张图片
image 
 /// 
        /// 获取博客列表 /// 
        /// 
        /// 
        /// 
        /// 
 [HttpGet] public async Task Get(int id, int page = 1, string bcategory = "技术博文")
        { int intTotalCount = 6; int TotalCount = 1;
            List blogArticleList = new List(); if (redisCacheManager.Get("Redis.Blog") != null)
            {
                blogArticleList = redisCacheManager.Get>("Redis.Blog");
            } else {
                blogArticleList = await blogArticleServices.Query(a => a.bcategory == bcategory);
                redisCacheManager.Set("Redis.Blog", blogArticleList, TimeSpan.FromHours(2));
            }

            TotalCount = blogArticleList.Count() / intTotalCount;

            blogArticleList = blogArticleList.OrderByDescending(d => d.bID).Skip((page - 1) * intTotalCount).Take(intTotalCount).ToList(); foreach (var item in blogArticleList)
            { if (!string.IsNullOrEmpty(item.bcontent))
                {
                    int totalLength = 500; if (item.bcontent.Length > totalLength)
                    {
                        item.bcontent = item.bcontent.Substring(0, totalLength);
                    }
                }
            } var data = new { success = true, page = page, pageCount = TotalCount, data = blogArticleList }; return data;
        } // GET: api/Blog/5
        /// 
        /// 获取详情 /// 
        /// 
        /// 
        [HttpGet("{id}", Name = "Get")] public async Task Get(int id)
        { var model = await blogArticleServices.getBlogDetails(id); var data = new { success = true, data = model }; return data;
        }
 
 
调整 LoginController.cs 的获取 Token 方法：
 
 
  /// 
        /// 获取JWT的方法 /// 
        /// id
        /// 角色
        /// 
 [HttpGet]
        [Route("Token")] public JsonResult GetJWTStr(string name, string pass)
        { string jwtStr = string.Empty; bool suc = false; //这里就是用户登陆以后，通过数据库去调取数据，分配权限的操作 //这里直接写死了
            if (name == "admins" && pass == "admins")
            {
                TokenModelJWT tokenModel = new TokenModelJWT();
                tokenModel.Uid = 1;
                tokenModel.Role = "Admin";

                jwtStr = JwtHelper.IssueJWT(tokenModel);
                suc = true;
            } else {
                jwtStr = "login fail!!!";
            } var result = new {
                data = new { success = suc, token = jwtStr }
            }; return Json(result);
        }

 
 
4、修改 前端的 Login.vue 页面的登陆方法，获取到 Token ，并把其保存到 Vuex 中
 
 
 
  
注意：目前是用的 localStorage 本地存储的方法，Vuex 暂时没有完成，因为在路由 router 中，取不到，有知道的小伙伴请留言
 
 
 
 


 
 
5、修改 vuex 仓库，把 token 存进store中
 
 
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex); const store = new Vuex.Store({ // 初始化的数据
 state: {
    formDatas: null,
    token: ""//定义全局变量 token
 }, // 改变state里面的值得方法
 mutations: {
    getFormData(state, data) {
      state.formDatas = data;
    },
    saveToken(state, data) {//将 token 保存
      state.token = data;
    }
  }
}); // 输出模块
export default store;

 
 
6、这个时候要修改下之前我们封装的 http.js 方法，因为当时我们过滤掉了失败的方法，这里要打开下，大家自行修改下
 
 
 
  
 
   
 
    从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第7张图片 
   
 
  
 
  

    image 
  
 
 
 
 
这个时候，我们再登陆的话，已经发生变化
 
 
 
  
 
   
 
    从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第8张图片 
   
 
  
 
  

    image 
  
 
 
 
 
这个时候大家可以看到，我们成功的登陆了（右上角有欢迎提示），然后 token 也成功的保存到 stroe/localStorage 里（下边控制台输出），
 
 
因为我们在博客页增加了权限，虽然我们是用的 admin 账号，但是 Header 中还没有添加Token，所以现在还是 401，那如何才能有效的增加请求 Header 呢，请往下看，权限验证前端部分。
 
 
三、实现一：登陆拦截验证——路由拦截
 
 
1、修改 router.js 路由，实现按需登陆
 
 
在需要登陆的地方，增加登陆要求字段，
 
 
然后增加 beforeEach 钩子函数（这里有一个问题，只能获取到本地缓存数据，无法获取 Vuex ，正在研究中）
 
 
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import FormVuex from "./views/FormVuex.vue";
import Content from "./views/content";
import Login from "./views/Login";
import store from "./store";

Vue.use(Router); const router = new Router({
  mode: "history", base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
      meta: {
        requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
 }
    },
    {
      path: "/Vuex",
      name: "Vuex",
      component: FormVuex
    },
    {
      path: "/Content/:id",
      name: "Content",
      component: Content
    },
    {
      path: "/Login",
      name: "Login",
      component: Login
    },
    {
      path: "/about",
      name: "about", // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ "./views/Form.vue")
    }
  ]
});

router.beforeEach((to, from, next) => { if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (window.localStorage.Token&&window.localStorage.Token.length>=128) {  // 通过vuex state获取当前的token是否存在
 next();
        } else {
            next({
                path: '/login',
                query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
 })
        }
    } else {
        next();
    }
})

export default router;

 
 
2、修改 http.js 封装方法，自动在请求中把 Token 添加到 Header 中
 
 
上边的路由设置，仅仅是对 Token 进行判断，还没有添加到 Header 里，更没有进行验证
 
 
import store from "../store";
import router from "../router.js"; // 配置API接口地址
var root = "http://localhost:58427/api"; var root1 = "http://123.206.33.109:8018/api"; // 引用axios
var axios = require("axios"); // 自定义判断元素类型JS
function toType(obj) { return {}.toString
    .call(obj)
    .match(/\s([a-zA-Z]+)/)[1]
    .toLowerCase();
} // 参数过滤函数
function filterNull(o) { for (var key in o) { if (o[key] === null) {
      delete o[key];
    } if (toType(o[key]) === "string") {
      o[key] = o[key].trim();
    } else if (toType(o[key]) === "object") {
      o[key] = filterNull(o[key]);
    } else if (toType(o[key]) === "array") {
      o[key] = filterNull(o[key]);
    }
  } return o;
} // http request 拦截器
axios.interceptors.request.use(
  config => { if (window.localStorage.Token&&window.localStorage.Token.length>=128) {//store.state.token 获取不到值？？ // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.Authorization = window.localStorage.Token;
    } return config;
  },
  err => { return Promise.reject(err);
  }
); // http response 拦截器
axios.interceptors.response.use(
  response => { return response;
  },
  error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息并跳转到登录页面
 router.replace({
            path: "login",
            query: { redirect: router.currentRoute.fullPath }
          });
      }
    } return Promise.reject(error.response.data); // 返回接口返回的错误信息
 }
); /* 接口处理函数
  这个函数每个项目都是不一样的，我现在调整的是适用于 https://cnodejs.org/api/v1 的接口，如果是其他接口
  需要根据接口的参数进行调整。参考说明文档地址： https://cnodejs.org/topic/5378720ed6e2d16149fa16bd 主要是，不同的接口的成功标识和失败提示是不一致的。
  另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert */ function apiAxios(method, url, params, success, failure) { if (params) { params = filterNull(params);
  }
  axios({
    method: method,
    url: url,
    data: method === "POST" || method === "PUT" ? params : null, params: method === "GET" || method === "DELETE" ? params : null,
    baseURL: root,
    withCredentials: false })
    .then(function(res) {
      success(res.data);
    })
    .catch(function(err) {
      let res = err.response; if (err) {
        window.alert("api error, HTTP CODE: " + res.status);
      }
    });
} // 返回在vue模板中的调用接口
export default { get: function(url, params, success, failure) { return apiAxios("GET", url, params, success, failure);
  },
  post: function(url, params, success, failure) { return apiAxios("POST", url, params, success, failure);
  },
  put: function(url, params, success, failure) { return apiAxios("PUT", url, params, success, failure);
  },
  delete: function(url, params, success, failure) { return apiAxios("DELETE", url, params, success, failure);
  }
};

 
 
运行项目查看：
 
 
 
  
 
   
 
    从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆_第9张图片 
   
 
  
 
  

    image 
  
 
 
 
 
大家观察可以看到，我们第一次点击 Home 的时候，发现跳转到了 Login 页面，然后登陆后，自动跳转首页，并成功获取到数据，登陆成功！
 
 
四、说明
 
 
今天因为时间的关系，没有把 Vuex 在路由中如何获取研究出来，这里先用了本地缓存来代替了，大家如果有知道的小伙伴，请留言哈~~~不胜感激，
 
 
五、CODE
 
 
前端：
 https://github.com/anjoy8/Blog.Vue
 
 
后端：
 
 
https://github.com/anjoy8/Blog.Core
 
 
QQ群：
 867095512 (blod.core)
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆)

        

            

                
    
                    
  • QQ群采集助手，精准引流必备神器
                        2401_87347160
其他经验分享
                        
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
    
                    
    • 
                    
  • 机器学习与深度学习间关系与区别
                        ℒℴѵℯ心·动ꦿ໊ོ꫞
人工智能学习深度学习python
                        
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
    
                    
    • 
                    
  • 铭刻于星（四十二）
                        随风至

                        
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
    
                    
    • 
                    
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说
                        造命者说

                        
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
    
                    
    • 
                    
  • 2020-01-25
                        晴岚85

                        
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
    
                    
    • 
                    
  • 【iOS】MVC设计模式
                        Magnetic_h
iosmvc设计模式objective-c学习ui
                        
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
    
                    
    • 
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • 谢谢你们，爱你们！
                        鹿游儿

                        
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
    
                    
    • 
                    
  • 微服务下功能权限与数据权限的设计与实现
                        nbsaas-boot
微服务java架构
                        
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
    
                    
    • 
                    
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹
                        黄错错加油

                        
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
    
                    
    • 
                    
  • 《策划经理回忆录之二》
                        路基雅虎

                        
    话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
    
                    
    • 
                    
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码
                        说私域
人工智能小程序
                        
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
    
                    
    • 
                    
  • 消息中间件有哪些常见类型
                        xmh-sxh-1314
java
                        
    消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
    
                    
    • 
                    
  • 那个抄袭的大张伟
                        猫小努

                        
    最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期
    
                    
    • 
                    
  • 三大师传
                        beca酱

                        
    巴尔扎克的作品被誉为“法国社会的一面镜子”。文学大师维克多·雨果对巴尔扎克的评价是：“在最伟大的人物中间，巴尔扎克是名列前茅者；在最优秀的人物中间，巴尔扎克是佼佼者之一。”一个原本寂寂无名的小人物，从地中海的某个海岛上，只身一人来到巴黎，没有朋友，也没有名望。作为一个一文不名的外乡人，凭着赤手空拳赢得了巴黎，征服了整个法兰西，并且赢得了世界。这个人就是十九世纪法国伟大的军事家、政治家，法兰西第一帝
    
                    
    • 
                    
  • 回溯 Leetcode 332 重新安排行程
                        mmaerd
Leetcode刷题学习记录leetcode算法职场和发展
                        
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
    
                    
    • 
                    
  • Python数据分析与可视化实战指南
                        William数据分析
pythonpython数据
                        
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
    
                    
    • 
                    
  • 《庄子.达生9》
                        钱江潮369

                        
    【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
    
                    
    • 
                    
  • 腾讯云技术深度探索：构建高效云原生微服务架构
                        我的运维人生
云原生架构腾讯云运维开发技术共享
                        
    腾讯云技术深度探索：构建高效云原生微服务架构在当今快速发展的技术环境中，云原生技术已成为企业数字化转型的关键驱动力。腾讯云作为行业领先的云服务提供商，不断推出创新的产品和技术，助力企业构建高效、可扩展的云原生微服务架构。本文将深入探讨腾讯云在微服务领域的最新进展，并通过一个实际案例展示如何在腾讯云平台上构建云原生应用。腾讯云微服务架构概览腾讯云微服务架构基于云原生理念，旨在帮助企业快速实现应用的容
    
                    
    • 
                    
  • 第四天旅游线路预览——从换乘中心到喀纳斯湖
                        陟彼高冈yu
基于Googleearthstudio的旅游规划和预览旅游
                        
    第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；换乘中心有4路车，喀纳斯①号车，去喀纳斯湖，路程时长约5分钟；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day4-2-480p
    
                    
    • 
                    
  • linux sdl windows.h,Windows下的SDL安装
                        奔跑吧linux内核
linuxsdlwindows.h
                        
    首先你要下载并安装SDL开发包。如果装在C盘下，路径为C:\SDL1.2.5如果在WINDOWS下。你可以按以下步骤：1.打开VC++，点击"Tools",Options2,点击directories选项3.选择"Includefiles"增加一个新的路径。"C:\SDL1.2.5\include"4，现在选择"Libaryfiles“增加"C:\SDL1.2.5\lib"现在你可以开始编写你的第
    
                    
    • 
                    
  • 直抒《紫罗兰永恒花园外传》
                        雷姆的黑色童话

                        
    没看过《紫罗兰永恒花园》的我莫名的看完了《紫罗兰永恒花园外传》，又莫名的被故事中的姐妹之情狠狠地感动了的一把。感动何在：困苦中相依为命的姐妹二人被迫分离，用一个人的自由换取另一个人的幸福。之后，虽相隔不知几许依旧心心念念彼此牵挂。这种深深的姐妹情谊就是令我为之动容的所在。贝拉和泰勒分别影片开始，海天之间一个孩童凭栏眺望，手中拿着折旧的信纸。镜头一转，挑灯伏案的薇尔莉特正在打字机前奋笔疾书。这些片段
    
                    
    • 
                    
  • Python教程：一文了解使用Python处理XPath
                        旦莫
Python进阶python开发语言
                        
    目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
    
                    
    • 
                    
  • 从鸡肉高汤到记忆的魔法再到有效提示的艺术
                        步子哥
人工智能
                        
    还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
    
                    
    • 
                    
  • 谁家酒器最绝唱，藏在酒厂人未知？景阳冈酒厂先秦藏品大揭秘
                        李虓酒评论

                        
    文/王赛时中国的酒器酒具历史久远，举世闻名。从北京的故宫博物院、中国国家博物馆，到世界各国的大型博物馆，都以能够收藏中国古代酒具而夸耀。但很少有人知道，在山东阳谷景阳冈酒厂，默默地收藏了两千件中国酒器。这些酒器，就封藏在景阳冈的酒道馆里。其中有一些青铜酒器，一睡就是三、四千年，堪称无声国宝，堪作无字史书！今天，我将引领诸位首先窥视一下景阳冈酒道馆的9件先秦藏品，你自己来说震撼不震撼。提示：这只是景
    
                    
    • 
                    
  • LLM 词汇表
                        落难Coder
LLMsNLP大语言模型大模型llama人工智能
                        
    Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数
    
                    
    • 
                    
  • 下载github patch到本地
                        小米人er
我的博客gitpatch
                        
    以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p
    
                    
    • 
                    
  • 509. 斐波那契数(每日一题)
                        lzyprime

                        
    lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
    
                    
    • 
                    
  • 2020.11.19
                        隆非凡

                        
    日精进，今日体验：在维修过程中遇到的问题，把源头找到，在进行下一步开始。不要停留在一个点上，合理调整心态，把当下事做好。
    
                    
    • 
                    
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！
                        成长时间线

                        
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
    
                    
    • 
                                
  • java数字签名三种方式
                                    知了ing
javajdk
                                    
    以下3钟数字签名都是基于jdk7的 
1，RSA 
 

String password="test";
			// 1.初始化密钥
			KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA");
			keyPairGenerator.initialize(51
    
                                
    • 
                                
  • Hibernate学习笔记
                                    caoyong
Hibernate
                                    
    1>、Hibernate是数据访问层框架，是一个ORM(Object Relation Mapping)框架，作者为:Gavin King 
2>、搭建Hibernate的开发环境 
     a>、添加jar包: 
      aa>、hibernatte开发包中/lib/required/所
    
                                
    • 
                                
  • 设计模式之装饰器模式Decorator（结构型）
                                    漂泊一剑客
Decorator
                                    
    1. 概述 
 
 
       若你从事过面向对象开发，实现给一个类或对象增加行为，使用继承机制，这是所有面向对象语言的一个基本特性。如果已经存在的一个类缺少某些方法，或者须要给方法添加更多的功能（魅力），你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上。 
 
      
    
                                
    • 
                                
  • 读取磁盘文件txt，并输入String
                                    一炮送你回车库
String
                                    
    public static void main(String[] args) throws IOException { 
  
 String fileContent = readFileContent("d:/aaa.txt"); 
  
 System.out.println(fileContent); 
   

    
                                
    • 
                                
  • js三级联动下拉框
                                    3213213333332132
三级联动
                                    
    
//三级联动  
   省/直辖市<select id="province"></select>  
   市/省直辖<select id="city"></select>  
   县/区 <select id="area"></select>  
  
    
                                
    • 
                                
  • erlang之parse_transform编译选项的应用
                                    616050468
parse_transform游戏服务器属性同步abstract_code
                                    
             最近使用erlang重构了游戏服务器的所有代码，之前看过C++/lua写的服务器引擎代码，引擎实现了玩家属性自动同步给前端和增量更新玩家数据到数据库的功能，这也是现在很多游戏服务器的优化方向，在引擎层面去解决数据同步和数据持久化，数据发生变化了业务层不需要关心怎么去同步给前端。由于游戏过程中玩家每个业务中玩家数据更改的量其实是很少
    
                                
    • 
                                
  • JAVA JSON的解析
                                    darkranger
java
                                    
    
 
//		{
//			“Total”：“条数”，
//			 Code: 1,
//
//			“PaymentItems”:[
//			{
//			“PaymentItemID”:”支款单ID”,
//			“PaymentCode”:”支款单编号”,
//			“PaymentTime”:”支款日期”,
//			”ContractNo”:”合同号”，
//	
    
                                
    • 
                                
  • POJ-1273-Drainage Ditches
                                    aijuans
ACM_POJ
                                    
    POJ-1273-Drainage Ditches 
http://poj.org/problem?id=1273 
基本的最大流，按LRJ的白书写的 
 
#include<iostream>
#include<cstring>
#include<queue>
using namespace std;
#define INF 0x7fffffff
int ma
    
                                
    • 
                                
  • 工作流Activiti5表的命名及含义
                                    atongyeye
工作流Activiti
                                    
    activiti5 - http://activiti.org/designer/update在线插件安装 
 
activiti5一共23张表 
 
 
Activiti的表都以ACT_开头。 第二部分是表示表的用途的两个字母标识。 用途也和服务的API对应。 
 
ACT_RE_*: 'RE'表示repository。 这个前缀的表包含了流程定义和流程静态资源 （图片，规则，等等）。 
 
A
    
                                
    • 
                                
  • android的广播机制和广播的简单使用
                                    百合不是茶
android广播机制广播的注册
                                    
          Android广播机制简介  在Android中，有一些操作完成以后，会发送广播，比如说发出一条短信，或打出一个电话，如果某个程序接收了这个广播，就会做相应的处理。这个广播跟我们传统意义中的电台广播有些相似之处。之所以叫做广播，就是因为它只负责“说”而不管你“听不听”，也就是不管你接收方如何处理。另外，广播可以被不只一个应用程序所接收，当然也可能不被任何应
    
                                
    • 
                                
  • Spring事务传播行为详解
                                    bijian1013
javaspring事务传播行为
                                    
            在service类前加上@Transactional，声明这个service所有方法需要事务管理。每一个业务方法开始时都会打开一个事务。 
        Spring默认情况下会对运行期例外(RunTimeException)进行事务回滚。这
    
                                
    • 
                                
  • eidtplus operate
                                    征客丶
eidtplus
                                    
    开启列模式: Alt+C 鼠标选择   OR   Alt+鼠标左键拖动 
列模式替换或复制内容(多行): 
右键-->格式-->填充所选内容-->选择相应操作 
OR 
Ctrl+Shift+V(复制多行数据,必须行数一致) 
 
-------------------------------------------------------
    
                                
    • 
                                
  • 【Kafka一】Kafka入门
                                    bit1129
kafka
                                    
    这篇文章来自Spark集成Kafka(http://bit1129.iteye.com/blog/2174765)，这里把它单独取出来，作为Kafka的入门吧 
  下载Kafka 
 http://mirror.bit.edu.cn/apache/kafka/0.8.1.1/kafka_2.10-0.8.1.1.tgz 
 2.10表示Scala的版本，而0.8.1.1表示Kafka
    
                                
    • 
                                
  • Spring 事务实现机制
                                    BlueSkator
spring代理事务
                                    
    Spring是以代理的方式实现对事务的管理。我们在Action中所使用的Service对象，其实是代理对象的实例，并不是我们所写的Service对象实例。既然是两个不同的对象，那为什么我们在Action中可以象使用Service对象一样的使用代理对象呢？为了说明问题，假设有个Service类叫AService，它的Spring事务代理类为AProxyService，AService实现了一个接口 
    
                                
    • 
                                
  • bootstrap源码学习与示例：bootstrap-dropdown（转帖）
                                    BreakingBad
bootstrapdropdown
                                    
    bootstrap-dropdown组件是个烂东西，我读后的整体感觉。 
一个下拉开菜单的设计： 
                  <ul class="nav pull-right">
                        <li id="fat-menu" class="dropdown">

    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-中介者模式-Mediator
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 



/*
 * 中介者模式（Mediator）：用一个中介对象来封装一系列的对象交互。
 * 中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。
 * 
 * 在我看来，Mediator模式是把多个对象（
    
                                
    • 
                                
  • 常用代码记录
                                    chenjunt3
UIExcelJ#
                                    
      
1、单据设置某行或某字段不能修改

//i是行号,"cash"是字段名称
getBillCardPanelWrapper().getBillCardPanel().getBillModel().setCellEditable(i, "cash", false);
//取得单据表体所有项用以上语句做循环就能设置整行了
getBillC
    
                                
    • 
                                
  • 搜索引擎与工作流引擎
                                    comsci
算法工作搜索引擎网络应用
                                    
      
 
    最近在公司做和搜索有关的工作，(只是简单的应用开源工具集成到自己的产品中)工作流系统的进一步设计暂时放在一边了，偶然看到谷歌的研究员吴军写的数学之美系列中的搜索引擎与图论这篇文章中的介绍，我发现这样一个关系(仅仅是猜想) 
  -----搜索引擎和流程引擎的基础--都是图论，至少像在我在JWFD中引擎算法中用到的是自定义的广度优先
    
                                
    • 
                                
  • oracle Health Monitor
                                    daizj
oracleHealth Monitor
                                    
    About Health Monitor 
 
Beginning with Release 11g, Oracle Database includes a framework called Health Monitor for running diagnostic checks on the database. 
 
About Health Monitor Checks 
 
Health M
    
                                
    • 
                                
  • JSON字符串转换为对象
                                    dieslrae
javajson
                                    
        作为前言,首先是要吐槽一下公司的脑残编译部署方式,web和core分开部署本来没什么问题,但是这丫居然不把json的包作为基础包而作为web的包,导致了core端不能使用,而且我们的core是可以当web来用的(不要在意这些细节),所以在core中处理json串就是个问题.没办法,跟编译那帮人也扯不清楚,只有自己写json的解析了. 
  
    
                                
    • 
                                
  • C语言学习八结构体，综合应用，学生管理系统
                                    dcj3sjt126com
C语言
                                    
    实现功能的代码： 
# include <stdio.h>
# include <malloc.h>

struct Student
{
	int age;
	float score;
	char name[100];
};


int main(void)
{
	int len;
	struct Student * pArr;
	int i,
    
                                
    • 
                                
  • vagrant学习笔记
                                    dcj3sjt126com
vagrant
                                    
    想了解多主机是如何定义和使用的, 所以又学习了一遍vagrant 
  
1. vagrant virtualbox 下载安装 
https://www.vagrantup.com/downloads.html 
https://www.virtualbox.org/wiki/Downloads 
  
查看安装在命令行输入vagrant 
  
  
2.
    
                                
    • 
                                
  • 14.性能优化-优化-软件配置优化
                                    frank1234
软件配置性能优化
                                    
    1.Tomcat线程池 
 
修改tomcat的server.xml文件： 
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads="1200" m
    
                                
    • 
                                
  • 一个不错的shell 脚本教程 入门级
                                    HarborChung
linuxshell
                                    
    一个不错的shell 脚本教程 入门级 
建立一个脚本 　　Linux中有好多中不同的shell，但是通常我们使用bash (bourne again shell) 进行shell编程，因为bash是免费的并且很容易使用。所以在本文中笔者所提供的脚本都是使用bash（但是在大多数情况下，这些脚本同样可以在 bash的大姐，bourne shell中运行）。 　　如同其他语言一样
    
                                
    • 
                                
  • Spring4新特性——核心容器的其他改进
                                    jinnianshilongnian
spring动态代理spring4依赖注入
                                    
    Spring4新特性——泛型限定式依赖注入 
Spring4新特性——核心容器的其他改进 
Spring4新特性——Web开发的增强 
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  
Spring4新特性——Groovy Bean定义DSL 
Spring4新特性——更好的Java泛型操作API  
Spring4新
    
                                
    • 
                                
  • Linux设置tomcat开机启动
                                    liuxingguome
tomcatlinux开机自启动
                                    
    执行命令sudo gedit /etc/init.d/tomcat6 
 
然后把以下英文部分复制过去。（注意第一句#!/bin/sh如果不写，就不是一个shell文件。然后将对应的jdk和tomcat换成你自己的目录就行了。 
 
#!/bin/bash 
 
# 
 
# /etc/rc.d/init.d/tomcat 
 
# init script for tomcat precesses
    
                                
    • 
                                
  • 第13章 Ajax进阶（下）
                                    onestopweb
Ajax
                                    
    index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
    
                                
    • 
                                
  • Troubleshooting Crystal Reports off BW
                                    blueoxygen
BO
                                    
    http://wiki.sdn.sap.com/wiki/display/BOBJ/Troubleshooting+Crystal+Reports+off+BW#TroubleshootingCrystalReportsoffBW-TracingBOE 
  
Quite useful, especially this part:  
SAP BW connectivity 
For t
    
                                
    • 
                                
  • Java开发熟手该当心的11个错误
                                    tomcat_oracle
javajvm多线程单元测试
                                    
    #1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 
测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为
    
                                
    • 
                                
  • 正则表达式大全
                                    yang852220741
html编程正则表达式
                                    
    今天向大家分享正则表达式大全，它可以大提高你的工作效率 
正则表达式也可以被当作是一门语言，当你学习一门新的编程语言的时候，他们是一个小的子语言。初看时觉得它没有任何的意义，但是很多时候，你不得不阅读一些教程，或文章来理解这些简单的描述模式。 
一、校验数字的表达式 
 
数字：^[0-9]*$ 
n位的数字：^\d{n}$ 
至少n位的数字：^\d{n,}$ 
m-n位的数字：^\d{m,n}$
    
                                
    •