第17章 前端之全局存储：Vuex=Store Store用于对数据进行存储，并共享以为所有需要的Vue页面中的调用提供数据及其方法支撑；Vuex是Store的内置引用包，即如果想要前端Vue程序支撑Store必须在新建Vue程序；如果Vue程序没有引用Vuex包则，在Vue程序引用Vuex包。 1 定义src\store\index.js import { createStore } from 'vuex' export default createStore({ state: { token: null,//实例化“TokenJwt”字符串。 tokenExpire: null,//实例化“TokenJwt”字符串的过期时间。 }, getters: {}, mutations: { //通过该方法把“TokenJwt”字符串，进行全局存储。 saveToken: function(state, data) { state.token = data;

1 Vue与uni-app Uni-app是基于Vue的，但以不完成等同于Vue，Vue的前端实现只能使用浏览器进行渲染显示，而uni-app的前端实现，可以在小程序、App、浏览器都能够进行渲染显示。 2 Vue与Razor 1、如果没能指定需要前后端分离实现，本从建议首先考虑Razor，因为Vue的变化太过频繁，会由于搭建环境的迭代变化从而导致，前端实现不能被正常运行。 2、从前端实现的角度来说Razor，不如Vue, Vue有丰富的组件，可供渲染显示使用；Vue彻底脱离了后端代码，只关注前端实现，从专业性和团队开发来说依然是Vue胜出。 3、Razor实质上是一种特殊的“*.cs”文件，即它是后端实现的扩展和延伸，与后端实现有着紧密的耦合关系，不能脱离后端而单独存在。Vue只关注与后端数据的绑定和交互操作，不关心后端的逻辑实现，可以完全脱离后端而单独存在，从耦合的角度来说依然是Vue胜出。 3 VSCode与HBuilderX VSCode与HbuilderX是两个IDE开发环景两者都可以对Vue和uni-app前端进行开发实现，当前来说使用VSCode开发uni-app前

ateHelper类: 通过该类中的成员方法，实现时间戳与时间之间的相互转换。 StatusCode枚举: 该枚举定义了5种HTML状态代码：CODE200(服务器已成功处理了请求）/CODE401(未授权,请求要求身份验证）/CODE403(服务器拒绝请求）/CODE404(服务器找不到请求的网页）/CODE500(服务器内部错误，无法完成请求）。 ApiResponse类: 通过该类的拷贝构造方法，通过HTML状态代码枚举的1个指定实例所对应的错误的信息，实例化消息模型类的1个指定实例。 IUser接口：通过继承于该接口具体实现类中的成员方法，获取TokenJwt字符串，或已经登录用户的用户名。 AspNetUser类：IUser接口，通过该类中的成员方法，获取TokenJwt字符串，或已经登录用户的用户名。 PermissionHandler类: 通过该类中的成员方法，获取1个已经登录用户的所属权限的菜单项。 AuthorizationSetup类: 自定义依赖注入认证中间件，把认证操作实例依赖注入到.Net(Core)框架内置依赖注入容器中。 对以上功能更为具体实

TestMuchTableResult类: 把角色/Api控制器行为方法/权限类、Api控制器行为方法类和权限类的级联实例存储到该类的属性成员中。 IRoleModulePermissionRepository接口: 通过继承于该接口的具体实现类中的方法成员，获取角色/Api控制器行为方法/权限类、Api控制器行为方法类和权限类的级联实例。 RoleModulePermissionRepository类：IRoleModulePermissionRepository接口，通过该类中的方法获取角色/Api控制器行为方法/权限类、Api控制器行为方法类和权限类的级联实例。 IRoleModulePermissionServices接口: 通过继承于该接口的具体实现类中的方法成员，获取角色/Api控制器行为方法/权限类、Api控制器行为方法类和权限类的级联实例。 RoleModulePermissionServices类：IRoleModulePermissionServices接口，通过该类中的方法获取角色/Api控制器行为方法/权限类、Api控制器行为方法类和权限类的级联实例。 Cust

TokenInfoViewModel：通过该实体类及其属性成员实例，获取“JwtBearer”令牌加密字符串。 MD5Helper：把1个字符串使用MD5/SHA(哈希)加密后，返回该加密后的字符串。 AppSecretConfig：通过该类中的方法，从“appsettings.json”配置文件中获取安全加密相关的数据信息。 TokenModelJwt：在用户登录成功后，把登录用户的编号及其角色存储到该类中的属性成员中。 JwtHelper：通过该类中的方法，把Jwt令牌模型类的1个指定实例转化为相应的(TokenJwt)字符串值；或把(TokenJwt)字符串值转化为相应的Jwt令牌模型类的1个指定实例。 PermissionItem：通过该实体类实例存储1个指定角色与1个指定控制器行为方法的权限映射关系。 PermissionRequirement：通过该类中属性成员存储当前程序中的必要的权限数据。 JwtToken：通过该类中的方法，获取令牌视图模型类的1个指定实例，为指定用户的登录操作提供数据支撑。

复制原程序“index.html”页的内容到当前程序员“index.html”页。 注意：是内容复制，如果是页面替换复制，则必须重新把“index.html”页的属性中的“生成操作”设定为：“嵌入的资源”。

1 “swg-login.html”登录按钮不能触发异常 由于.Net框架默认支持“HTTPS”协议从而导致“swg-login.html”登录按钮不能触发，其异常信息如下：“Mixed Content: The page at 'https://localhost:7037/swg-login.html' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.8.3.min.js'. This request has been blocked; the content must be served over HTTPS.”，如下图所示。

Blog.Core-master”程序没有使用.Net7框架内置的index.html页对api方法进行渲染显示，而是通过对“Swagger”和“SwaggerUI”内置中间件的自定义操作，调用根目录下的自定义index.html页对api方法进行渲染显示。

说实话本人通过Vue页面实现前端对后端数据的渲染显示也是初学咋练，但后端实现本人却是老鸟，对于后端开发者来说如果，渲染显示的软件是浏览器，除非团队中有Vue方面的大拿，不管是PC浏览器还是移动PC浏览器，Razor页面是最好的选择； 如果是通过App或小程序进行渲染显示那么Vue是必需且唯一的选择。 Vue页面的实现不管是语言还是开发环境当前都于处于急剧迭代的阶段，即它们都还不成熟，1年前的前端项目不能被运行是常态，因此建议最好集成当前最新的开发包，这样也许前端项目的运行兼容周期会长一些。 由于上述因素在开发开发环境：VSCode与Hbuilder X，的选择是准则是：小孩才作选择，大人全都要；这是向现实认命和妥协，只有在两个者能够明显分出高下的时候，才是开者才能作出最终的选择。 VSCode：能够获取最新的Vue包，但上手和配置比较麻烦，特别对于App或小程序的uni-app尤其此。 Hbuilder X：所支持Vue包的最新版本是：3.28，但当前Vue的最新包最新版本是：5.x,但Hbuilder X最大的优点是上手简单，特别对于App或小程序的uni-app开发，除非特

“Blog.Core-master”示例程序中接口及其具体实现类的注入操作，是通过第3方依赖注入中间件“Autofac”来以反射方式把Service.dll 程序集中所有接口及其具体实现类的实例依赖注入内置容器中。.Net(Core).x框架是中的内置依赖注入容器是不支持程序集注入的。 从最佳实践角度来说，.Net(Core).x框架中的内置容器的功能不如第3方依赖注入中间件“Autofac”强大，但是除非十分必要，不要在基于.Net(Core).x框架的程序中集成 “Autofac”，这虽然使依赖注入的定义相对比较麻烦和出现一些重复性代代码，但简化了整个程序的实现，提升了程序的健壮性和容错性。