>要画高可用原型，顺便学了vue，3.0也出了，现在正在用MyAppBox练手，感觉还挺快，这里记录下，省着忘；

> [开源地址](https://gitee.com/shixixiyue/VueAppBox)

# 1. 环境
* node.js
* vue-cli
* .net core
* mysql

node.js我也没学过，vue架子安装网上都有教，随便找的；.net core用的webapi做后台，我没用过正好试一试...

vue ui这东西可不错，装了element-ui、echarts等插件

***首先建项目***，VS2017建的 .net core MVC项目 底层代码还是沾过来的，直接就能用（而且有SQLServer类了）；再建一个 基于Vue.js Web应用程序，这样他俩就在一个解决方案下了，

![解决方案](https://shixixiyue.gitee.io/blog2//post-images/1684482594606.png)

vue项目发布路径指到 .net core下的 wwwroot 里，然后将启动页面改喽，这样启动AppServer就能运行了

![路径](https://shixixiyue.gitee.io/blog2//post-images/1684482614975.png)

![启动](https://shixixiyue.gitee.io/blog2//post-images/1684482620593.png)

***其次是通讯***，vue 用 axios.post 提交，webapi 接收，.net core的Controlle只能接收一个post，多个的话还得再分一层，干脆把功能标识放到参数里，另外时间戳和token也是必要的，token涉及到了拦截器（不能每个类都判断一遍token），我之前写过，拿过来改改就能用，这样提交格式就固定了，返回统一使用MsReturned类，我自己写的，

    {
        Action: "Get", //动作标识
        data: {}, //提交的数据
        MenuId: "-1" //菜单ID 判断权限用
        jsTimeStamp: '' //时间戳
    }
    //token在config.headers["Authorization"]里


后台用OnActionExecuting拦截

    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        //这里token我直接存的用户实体的json 加密后的，所以很长~
        string Token = filterContext.HttpContext.Request.Headers["Authorization"];
    }

还有个方法是得到请求字符串（文件上传的还没试过）

    /// <summary>
    ///  根据请求信息返回请求串
    /// </summary>
    /// <param name="request">请求信息</param>
    /// <returns>请求串</returns>
    public static string QueryString(HttpRequest request)
    {
        string text = "";
        using (var ms = new MemoryStream())
        {
            request.Body.Seek(0, 0);
            request.Body.CopyTo(ms);
            var b = ms.ToArray();
            var postParamsString = Encoding.UTF8.GetString(b);
            text = postParamsString.ToString();
        }
        return text;
    }

>

    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        //得到Token
        string Token = filterContext.HttpContext.Request.Headers["Authorization"];
        //得到请求路径
        string path = filterContext.HttpContext.Request.Path;
        //得到请求参数
        string body = QueryString(filterContext.HttpContext.Request);
        //任何页面都判断body 转json 和 Action MenuId 字段是否存在 
        //   如果错误返回"参数错误" code 5001
        //判断Token
        //  如果是登录页面，就不判断Token了
        //  非登录页，Token转用户 和 MenuId比对（MenuId=-1就不对比了），
        //    如果用户错误 返回" 重新登录 " code 5002
        //    如果没权限 返回" 访问权限错误 " code 5003
    }

axios的用法和配置网上都有，我又包了一层，适合我的项目

    /**
     * @description 提交
     * @param {String} url 地址 会自动拼接 /api/
     * @param {String} Action 请求事件名 默认是Get 参数 默认为{}
     * @param {Object} data 传递的参数 默认为{}
     * @return {Object} 返回结果
     */
    export default async (url = "", Action = "Get", data = {}, MenuId = "-1") => {
      let jsTimeStamp = new Date().getTime();
      //得到当前路由的菜单ID
      if (_this && _this.$route.meta.activeMenu) {
        MenuId = _this.$route.meta.activeMenu;
      }
      //提交的参数
      let opt = { Action, data, MenuId, jsTimeStamp };
      // console.log("发送消息:" + url);
      // console.log("发送消息:" + JSON.stringify(opt));
      return service
        .post(`/api/${url}`, opt)
        .then(res => {
          // console.log("返回消息:" + JSON.stringify(res));
          return res;
        })
        .catch(err => {
          console.error("返回出错:" + err);
          return err;
        });
    }


Controller中接收

    [SysPageFilte]
    public class System1Controller : SysControllerBase
    {
        // 用户类
        // POST: api/System1
        [HttpPost]
        public ActionResult<string> Post([FromBody] dynamic data)
        {
            string jsTimeStamp = data.jsTimeStamp;
            string Action = data.Action == null ? "Get" : data.Action;
            return "";
        }
    }

在vue中创建api文件夹，文件名和Controller类名一致（其实也是表名，也是实体名）


![用户类](https://shixixiyue.gitee.io/blog2//post-images/1684482646120.png)


>
    import server from "@/utils/axios.js";
    /**
     * @description 用户类
     */
    export default class System1 {
      constructor() {}
      /**
       * @description 得到用户List
       */
      static async get() {
        //this.name就是类名 就是System1
        let result = await server(this.name);
        return result;
      }
    }

vue中用的时候就是

    import { System1 } from "@/api";
    ...
    async initPage() {
        this.sys1Data = await System1.get();
    }

至此通讯就打通了，剩下就是撸代码了，

# 2. Vue.Router 路由
路由挺闹心，涉及子路由，动态路由，跳转，传参，拦截

但是网上也都有，没什么难度，这里主要记一下，我架子上定义了页面路径，在项目里叫功能（功能有地址，菜单没地址），这个地址传过来之后都作为子路由，上级是登录和框架 固定的路由，子路由在框架下，这里用到了node.js的方法，判断文件是否存在，如果不存在则不创建路由

    const modulesFiles = require.context("../../view", true);
    if(modulesFiles.keys().includes("./" + item.url))

还有一个懒加载页面，网上抄的

    //懒加载页面
    export default vuename => () => import(`@/view/${vuename}`);


先记这么多，下次记录封装个 dialog selectTree


![功能](https://shixixiyue.gitee.io/blog2//post-images/1684482662408.png)

![字典](https://shixixiyue.gitee.io/blog2//post-images/1684482669222.png)

![角色](https://shixixiyue.gitee.io/blog2//post-images/1684482676406.png)

Vue笔记（1）

读书摘要（一）

> [数字绘](https://gitee.com/zxhm/DataDraw)是一个开源的在线流程图项目就不介绍了，因为没有接触过PHP的发布，所以在这里记录下。




# 1. 准备

* 服务器环境是 Windows Server 2012R2（由腾讯支持）；

* 安装MySql数据库；

* 下载[数字绘](https://gitee.com/zxhm/DataDraw)程序，并解压：

    ![日志](https://shixixiyue.gitee.io/blog2//post-images/1684482160768.jpg)

* 下载发布程序[phpstudy](http://phpstudy.php.cn/wenda/406.html)并安装；

# 2. 开始安装

> 1.打开网站根目录，将DataDraw复制到根目录（以前的文件删掉或替换），并将所有文件只读去掉，增加文件权限

   ![打开网站根目录](https://shixixiyue.gitee.io/blog2//post-images/1684482174941.png)

   ![复制](https://shixixiyue.gitee.io/blog2//post-images/1684482187180.png)

> 2. 配置端口

   ![配置端口](https://shixixiyue.gitee.io/blog2//post-images/1684482202072.png)

> 3. 新建数据库，数据库SQL语句在DataDraw/mysql.sql中

   ![配置端口](https://shixixiyue.gitee.io/blog2//post-images/1684482213137.png)

> 4. 配置数据库地址，编辑application/database_sample.php文件，填写数据库信息，并重命名为database.php，编辑application/config_sample.php文件，主要修改最后部分的支付宝支付和微信支付信息，并重命名为config.php

   ![配置端口](https://shixixiyue.gitee.io/blog2//post-images/1684482221045.png)

> 5. 启动

   ![启动](https://shixixiyue.gitee.io/blog2//post-images/1684482235411.png)

   ![启动](https://shixixiyue.gitee.io/blog2//post-images/1684482242480.png)

# 3. 后续
此时就可以正常访问了，外网访问需要在腾讯云控制台开放端口；自己注册账号后可以使用admin登录系统修改页面并关闭注册，还可以进行其他配置，就不细说了，可以自己操作（初始用户名 admin@datadraw.net 初始密码 admin）。

   ![配置端口](https://shixixiyue.gitee.io/blog2//post-images/1684482251541.png)

Windows搭建私人在线流程图数字绘

> 之前介绍了[My AppBox V2.0](index.html#2019060301.md)，今天把拦截器补上，适用[FineUICore](https://core.fineui.com)，实现登录超时跳转，url参数获取，以及操作日志的保存；


# 1. 继承扩展和引用

在Controller层，所有页面都引用了 SysPageController ，所以拦截器的扩展只针对 SysPageController 类就可以了，在 System.Web.Mvc 中扩展拦截器直接继承 Controller 类，扩展 OnResultExecuted 方法，在 Microsoft.AspNetCore.Mvc 中挪了位置，要继承 ActionFilterAttribute 类中的 OnResultExecuted 方法：

    /// <summary>
    /// 回发权限控制
    /// </summary>
    public class SysPageFilter : ActionFilterAttribute
    {
        #region 回发权限控制 OnResultExecuted
        /// <summary>
        /// 覆盖
        /// </summary>
        /// <param name="filterContext"></param>
        public override void OnResultExecuted(ResultExecutedContext filterContext)
        {
            //
            base.OnResultExecuted(filterContext);
        }
    }

需要在 SysPageController 头上添加引用：

    /// <summary>
    /// 拦截器
    /// </summary> 
    [SysPageFilter] //注解
    public class SysPageController : BaseController
    {
        //
    }

# 2. 超时登录的JS

当用户登录超时（直接判断Session在不在），需要弹出是否重新登录的提示，只需要抛出一段js就行了，执行的并不是跳转页面，而是触发顶层框架上的退出按钮方法：

    //得到重新登录的js
    private string GetSysLoginJs()
    {
        //确定后执行的js
        string js = "top.window.F.doPostBack({url: 'btnHomePage_Click',disableControl: 'btnHomePage'}); ";
        string conjs = "";
        //如果顶层已经弹出了就不在此弹出了
        conjs += "if(top.$('div.relodeMsg.f-messagebox-alert').length==0){";
        Alert a = new Alert();
        a.CssClass = "relodeMsg";
        a.Message = "登录已过期<br/>点击【确定】跳转到登录页面";
        a.Title = "提示";
        a.OkScript = js;
        a.IconFont = IconFont.Warning;
        a.Target = Target.Top;
        conjs += a.GetShowReference();
        conjs += "}";
        return conjs;
    }

# 3. 是否第一次回发

我还为 HttpRequest 扩展了一个方法，判断是否是 Ajax 回发，如果为真则认为是点击按钮触发的拦截，与打开菜单区分

    /// <summary>
    /// HttpRequest 扩展
    /// </summary>
    public static class HttpRequestEx
    {
        /// <summary>
        /// 是否是ajax回发
        /// </summary>
        /// <param name="req"></param>
        /// <returns></returns>
        public static bool IsAjax(this HttpRequest req)
        {
            bool result = false;
            //请求头标识
            var xreq = req.Headers.ContainsKey("x-requested-with");
            if (xreq)
            {
                result = req.Headers["x-requested-with"] == "XMLHttpRequest";
            }

            return result;
        }
    }

# 4. 上代码，注意看注释

没有难点，注意看注释

    internal class SysPageFilter : ActionFilterAttribute
    {
    /// <summary>
    /// 覆盖
    /// </summary>
    /// <param name="filterContext"></param>
    public override void OnResultExecuted(ResultExecutedContext filterContext)
    {
        //得到用户
        var value = filterContext.HttpContext.Session.GetString("LoginUser");
        if (string.IsNullOrEmpty(value))
        {
            string conjs = GetSysLoginJs();
            PageContext.RegisterStartupScript(conjs);
            return;
        }
        JObject _value = JObject.Parse(value);
        Mssystem_1 lodeuser = (Mssystem_1)_value.ToObject(typeof(Mssystem_1));

        //为空时跳转 注意当前页面不是登录页面
        if (filterContext.RouteData.Values.Values.ToList()[1].ToString() != "SysLogin" && lodeuser == null)
        {
            string conjs = GetSysLoginJs();
            PageContext.RegisterStartupScript(conjs);
            return;
        }
        //是否第一次回发， 即加载页面
        if (!filterContext.HttpContext.Request.IsAjax())
        {
            string curMenuId = "";
            //得到当前菜单ID
            curMenuId = filterContext.HttpContext.Request.Query["MenuId"];
            if (!string.IsNullOrEmpty(curMenuId))
            {
                bool b = true;//按钮权限开关，默认开
                //如果是超级管理员，直接跳过权限
                if (lodeuser.isadmin)
                {
                    b = false;
                }
                if (b)
                {
                    //判断该用户是否有该菜单权限
                    if (!lodeuser.menuids.Contains(Convert.ToInt32(curMenuId)))
                    {
                        string conjs = GetSysLoginJs();
                        PageContext.RegisterStartupScript(conjs);
                        return;
                    }
                    //得到数据库中 用户 菜单权限 显示的按钮ID 
                    List<string> btnids = BLLsystem_1.GetUserBtnByMenu(lodeuser.sys10.System_10_10, curMenuId, false);
                    if (btnids != null)
                    {
                        StringBuilder sb = new StringBuilder();
                        foreach (string item in btnids)
                        {
                            //隐藏 也可以执行除隐藏之外的代码
                            sb.Append("if(F.ui." + item + "){F.ui." + item + ".hide();};");
                        }
                        //抛出 
                        PageContext.RegisterStartupScript(sb.ToString());
                    }
                }
                //记录日志 用户点击菜单
                BLLsystem_16.ClickMenuLog(lodeuser.System_1_10.ToString(), curMenuId);
            }
        }
        //如果不用是第一次回发 记录点击的按钮
        else
        {
            //加入算法获取MenuId
            string MenuId = "";
            //参数很难获取，谁会赶紧告诉我
            string url = ((HttpRequestHeaders)((DefaultHttpRequest)filterContext.HttpContext.Request).Headers).HeaderReferer;
            string query = url.Split("?")[1];
            foreach (var item in query.Split('&'))
            {
                foreach (var _item in item.Split('='))
                {
                    if (_item == "MenuId")
                    {
                        MenuId = item.Split('=')[1];
                    }
                }
            }
            if (!string.IsNullOrEmpty(MenuId))
            {
                //触发事件名称，由后台判断是否是一个按钮方法
                string streve = filterContext.RouteData.Values.Values.ToList()[2].ToString();
                //记录日志 用户点击按钮
                BLLsystem_16.ButtonLog(lodeuser.System_1_10.ToString(), MenuId, streve);
            }
        }
        base.OnResultExecuted(filterContext);
    }
    }


![日志](https://shixixiyue.gitee.io/blog2//post-images/1684482136255.png)

My AppBox V2.0 - 拦截器

刚写了个winform的安装程序，

>#### 导言
>刚写了个winform的安装程序，在此做下记录

# 1. 及时处理

挺常用的，以下来自引用：

因为winform的消息循环是一个线程来处理，那么假如你的某个操作比较耗时，那么消息处理得等你这个耗时操作做完了才能继续，而Application.DoEvents方法就是允许你在耗时操作的内部调用它，而去处理消息队列中的消息。 


    Application.DoEvents

在此做下记录

# 2. 资源嵌入和使用

因为我想着最后生成的是一个大exe，里面用到的包通过嵌入资源的方式都生成到exe中了（exe的文件会很大），用的时候再拿出来

![嵌入资源](https://shixixiyue.gitee.io/blog2//post-images/1684479164938.png)

用的时候通过读取资源文件流，保存到临时文件，安装完成后再删除

            //获得正在运行类所在的名称空间
            Type type = MethodBase.GetCurrentMethod().DeclaringType;
            string _namespace = type.Namespace;
            //临时文件
            string folderPath = Application.StartupPath + @"\临时文件res";
            Directory.CreateDirectory(folderPath);
            //获得当前运行的Assembly
            Assembly _assembly = Assembly.GetExecutingAssembly();

            //文件名
            string name = "activemq.zip";
            //根据名称空间和文件名生成资源名称
            string resourceName = _namespace + ".res."+ name;
            //根据资源名称从Assembly中获取此资源的Stream
            Stream stream = _assembly.GetManifestResourceStream(resourceName);
            //全部的资源名
            //string[] resNames = _assembly.GetManifestResourceNames();
            byte[] srcBuf = new Byte[stream.Length];
            stream.Read(srcBuf, 0, srcBuf.Length);
            stream.Seek(0, SeekOrigin.Begin);
            //保存文件到本地
            try
            {
                using (FileStream fs = new FileStream(folderPath+ @"\"+ name, FileMode.OpenOrCreate, FileAccess.Write))
                {
                    fs.Write(srcBuf, 0, srcBuf.Length);
                    fs.Close();
                }
            }
            catch (Exception ex)
            {
            }


删除

    DirectoryInfo subdir = new DirectoryInfo(Application.StartupPath + @"\临时文件res");
    subdir.Delete(true);          //删除子目录和文件


# 3. 解压

jar包利用代码解压后文件损坏了……，网上找了好几个，终于有一个是可以用的，可以做到无损。还是用的 ICSharpCode.SharpZipLib.dll 也作为资源嵌入了

        ZipHelper.UnpackFiles(Application.StartupPath + "\\临时文件res\\activemq.zip", @"c:\MQ");//解压

        jar uf更新
        
        jar xf解压

>



        /// <summary>
        /// 解压缩文件
        /// </summary>
        /// <param name="zipFile">待解压缩的文件</param>
        /// <param name="directory">解压缩后文件存放的目录</param>
        public static bool UnpackFiles(string zipFile, string directory)
        {
            if (!Directory.Exists(directory))
                Directory.CreateDirectory(directory);

            ZipInputStream stream = new ZipInputStream(File.OpenRead(zipFile));
            ZipEntry theEntry = null;
            while ((theEntry = stream.GetNextEntry()) != null)
            {
                string directoryName = Path.GetDirectoryName(theEntry.Name);
                string fileName = Path.GetFileName(theEntry.Name);
                if (directoryName != string.Empty)
                    Directory.CreateDirectory(directory + "\\" + directoryName);

                if (fileName != string.Empty)
                {
                    FileStream streamWriter = File.Create(Path.Combine(directory, theEntry.Name));
                    int size = 2048;
                    byte[] data = new byte[size];
                    while (true)
                    {
                        size = stream.Read(data, 0, data.Length);
                        if (size > 0)
                            streamWriter.Write(data, 0, size);
                        else
                            break;
                    }
                    streamWriter.Close();
                }
            }
            stream.Close();
            return true;
        }


# 4. 运行bat

启动MQ时候直接运行的bat

        System.Diagnostics.Process proc = new System.Diagnostics.Process();
        proc.StartInfo.WorkingDirectory = @"c:\MQ\bin\win64"; 
        proc.StartInfo.FileName = "activemq.bat";
        proc.StartInfo.Arguments = string.Format("10");//this is argument
        proc.StartInfo.CreateNoWindow = false;
        //proc.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;//这里设置DOS窗口不显示，经实践可行
        proc.Start();

读书摘要

PMBOK第五版官方中文版

导言

1. 及时处理