搜索到
104
篇与
的结果
-
-
微信公众号开发之回复用户留言 在微信公众号开发之公众号基础配置一文中，我们介绍了如何对微信公众号进行基础配置。下面基于李森的博客的一个需求说明一下如何实现公众号用户的回复开发。需求描述用户给公众号发送消息时，我们查询博客的内容，然后回复给用户。代码实现其实用户回复的请求，跟微信公众号开发之公众号基础配置中配置的URL是一致的。区别在于我们在微信公众号开发之公众号基础配置中配置的请求是GET请求，用户回复的时候，微信会通过POST请求到后台。定义Controller相应微信请求POST请求定义其实没啥特别的，代码如下 @PostMapping("official") public void post(HttpServletRequest request, HttpServletResponse response) { try { request.setCharacterEncoding("UTF-8"); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } response.setCharacterEncoding("UTF-8"); // 调用核心业务类接收消息、处理消息 // String respMessage = weixinPost(request); String respMessage = messageService.newMessageRequest(request); // 响应消息 PrintWriter out = null; try { out = response.getWriter(); out.print(respMessage); } catch (IOException e) { e.printStackTrace(); logger.error(e.getMessage()); } finally { out.close(); out = null; } }封装实体封装消息基础实体BaseMessage.java/** * 微信自动回复消息封装 */ @Data public class BaseMessage { // 开发者微信号 private String ToUserName; // 发送方帐号（一个OpenID） private String FromUserName; // 消息创建时间 （整型） private long CreateTime; // 消息类型（text/image/location/link） private String MsgType; // 消息id，64位整型 private long MsgId; /** * 位0x0001被标志时，星标刚收到的消息 */ private int FuncFlag; }封装普通文本消息实体TextMessage.java@EqualsAndHashCode(callSuper = true) @Data public class TextMessage extends BaseMessage{ // 消息内容 private String Content; }封装图文消息实体Article.java@Data public class Article { /** * 图文消息描述 */ private String Description; /** * 图片链接，支持JPG、PNG格式，<br> * 较好的效果为大图640*320，小图80*80 */ private String PicUrl; /** * 图文消息名称 */ private String Title; /** * 点击图文消息跳转链接 */ private String Url; }封装多条图文消息实体'NewsMessage.java'@EqualsAndHashCode(callSuper = true) @Data public class NewsMessage extends BaseMessage{ /** * 图文消息个数，限制为10条以内 */ private Integer ArticleCount; /** * 多条图文消息信息，默认第一个item为大图 */ private List<Article> Articles; }封装工具类我们需要将实体转换成xml结构，微信消息都是通过xml格式进行数据交互的。public class MessageUtil { /** * 返回消息类型：文本 */ public static final String RESP_MESSAGE_TYPE_TEXT = "text"; /** * 返回消息类型：音乐 */ public static final String RESP_MESSAGE_TYPE_MUSIC = "music"; /** * 返回消息类型：图文 */ public static final String RESP_MESSAGE_TYPE_NEWS = "news"; /** * 请求消息类型：文本 */ public static final String REQ_MESSAGE_TYPE_TEXT = "text"; /** * 请求消息类型：图片 */ public static final String REQ_MESSAGE_TYPE_IMAGE = "image"; /** * 请求消息类型：链接 */ public static final String REQ_MESSAGE_TYPE_LINK = "link"; /** * 请求消息类型：地理位置 */ public static final String REQ_MESSAGE_TYPE_LOCATION = "location"; /** * 请求消息类型：音频 */ public static final String REQ_MESSAGE_TYPE_VOICE = "voice"; /** * 请求消息类型：推送 */ public static final String REQ_MESSAGE_TYPE_EVENT = "event"; /** * 事件类型：subscribe(订阅) */ public static final String EVENT_TYPE_SUBSCRIBE = "subscribe"; /** * 事件类型：unsubscribe(取消订阅) */ public static final String EVENT_TYPE_UNSUBSCRIBE = "unsubscribe"; /** * 事件类型：CLICK(自定义菜单点击事件) */ public static final String EVENT_TYPE_CLICK = "CLICK"; /** * xml转换为map * * @param request * @return * @throws IOException */ public static Map<String, String> xmlToMap(HttpServletRequest request) throws IOException { Map<String, String> map = new HashMap<String, String>(); SAXReader reader = new SAXReader(); InputStream ins = null; try { ins = request.getInputStream(); } catch (IOException e1) { e1.printStackTrace(); } Document doc = null; try { doc = reader.read(ins); Element root = doc.getRootElement(); List<Element> list = root.elements(); for (Element e : list) { map.put(e.getName(), e.getText()); } return map; } catch (DocumentException e1) { e1.printStackTrace(); } finally { ins.close(); } return null; } /** * @param @param request * @param @return * @param @throws Exception * @Description: 解析微信发来的请求（XML） */ public static Map<String, String> parseXml(HttpServletRequest request) throws Exception { // 将解析结果存储在HashMap中 Map<String, String> map = new HashMap<String, String>(); // 从request中取得输入流 InputStream inputStream = request.getInputStream(); // 读取输入流 SAXReader reader = new SAXReader(); Document document = reader.read(inputStream); // 得到xml根元素 Element root = document.getRootElement(); // 得到根元素的所有子节点 List<Element> elementList = root.elements(); // 遍历所有子节点 for (Element e : elementList) map.put(e.getName(), e.getText()); // 释放资源 inputStream.close(); inputStream = null; return map; } // public static XStream xstream = new XStream(); /** * 文本消息对象转换成xml * * @param textMessage 文本消息对象 * @return xml */ public static String textMessageToXml(TextMessage textMessage) { // XStream xstream = new XStream(); xstream.alias("xml", textMessage.getClass()); return xstream.toXML(textMessage); } /** * @param @param newsMessage * @param @return * @Description: 图文消息对象转换成xml */ public static String newsMessageToXml(NewsMessage newsMessage) { xstream.alias("xml", newsMessage.getClass()); xstream.alias("item", new Article().getClass()); return xstream.toXML(newsMessage); } /** * 对象到xml的处理 */ private static XStream xstream = new XStream(new XppDriver() { public HierarchicalStreamWriter createWriter(Writer out) { return new PrettyPrintWriter(out) { // 对所有xml节点的转换都增加CDATA标记 boolean cdata = true; @SuppressWarnings("rawtypes") public void startNode(String name, Class clazz) { super.startNode(name, clazz); } protected void writeText(QuickWriter writer, String text) { if (cdata) { writer.write("<![CDATA["); writer.write(text); writer.write("]]>"); } else { writer.write(text); } } }; } }); }封装服务层 /** * 微信公众号处理 * * @param request * @return */ @Override public String newMessageRequest(HttpServletRequest request) { String respMessage = null; try { // xml请求解析 Map<String, String> requestMap = MessageUtil.xmlToMap(request); // 发送方帐号（open_id） String fromUserName = requestMap.get("FromUserName"); // 公众帐号 String toUserName = requestMap.get("ToUserName"); // 消息类型 String msgType = requestMap.get("MsgType"); // 用户发送的消息消息内容 String content = requestMap.get("Content"); logger.info("FromUserName is:" + fromUserName + ", ToUserName is:" + toUserName + ", MsgType is:" + msgType + ",content:" + content); // 文本消息 if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_TEXT)) { logger.info("进入方法内"); QueryWrapper<TypechoContents> queryWrapper = new QueryWrapper<>(); queryWrapper.lambda() .like(TypechoContents::getTitle, content) .or() .like(TypechoContents::getText, content); List<TypechoContents> typechoContentsList = typechoContentsMapper.selectTypechoContentsList(content); logger.info("数据查询完成：" + typechoContentsList.size()); if (typechoContentsList.size() <= 0) { //自动回复 TextMessage text = new TextMessage(); String string = "未找到要查询的内容，请换个关键字试试"; text.setContent(string); text.setToUserName(fromUserName); text.setFromUserName(toUserName); text.setCreateTime(new Date().getTime()); text.setMsgType(msgType); respMessage = MessageUtil.textMessageToXml(text); return respMessage; } else if (typechoContentsList.size() > 1) { TextMessage text = new TextMessage(); StringBuilder stringBuilder = new StringBuilder("搜索到以下内容：\r\n"); for (TypechoContents typechoContents : typechoContentsList) { stringBuilder.append("<a href='https://www.xiangcaowuyu.net/").append(typechoContents.getCategory()).append("/").append(typechoContents.getSlug()).append(".html'>").append(typechoContents.getTitle()).append("</a>"); stringBuilder.append("\r\n"); } text.setContent(stringBuilder.toString()); text.setToUserName(fromUserName); text.setFromUserName(toUserName); text.setCreateTime(new Date().getTime()); text.setMsgType(msgType); respMessage = MessageUtil.textMessageToXml(text); return respMessage; } else { //一条回复图文消息 NewsMessage newsMessage = new NewsMessage(); newsMessage.setArticles(new ArrayList<>()); newsMessage.setArticleCount(typechoContentsList.size()); newsMessage.setToUserName(fromUserName); newsMessage.setFromUserName(toUserName); newsMessage.setCreateTime(new Date().getTime()); newsMessage.setMsgType("news"); for (TypechoContents typechoContents : typechoContentsList) { Article article = new Article(); article.setUrl("https://www.xiangcaowuyu.net/" + typechoContents.getCategory() + "/" + typechoContents.getSlug() + ".html"); article.setDescription(typechoContents.getTitle()); List<String> imageUrlList = MessageUtil.getMatchString(typechoContents.getText()); if (imageUrlList.size() <= 0) { article.setPicUrl("https://www.xiangcaowuyu.net/usr/themes/xiangcaowuyu/assets/img/logo.png"); } else { logger.info(imageUrlList.get(0)); article.setPicUrl(imageUrlList.get(0)); } article.setTitle(typechoContents.getTitle()); newsMessage.getArticles().add(article); } respMessage = MessageUtil.newsMessageToXml(newsMessage); return respMessage; } } // 事件推送 else if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_EVENT)) { String eventType = requestMap.get("Event");// 事件类型 // 订阅 if (eventType.equals(MessageUtil.EVENT_TYPE_SUBSCRIBE)) { //文本消息 TextMessage text = new TextMessage(); logger.info(XiangCaoWuYuConfig.getResp()); text.setContent(XiangCaoWuYuConfig.getResp().replace("<br/>","\n")); text.setToUserName(fromUserName); text.setFromUserName(toUserName); text.setCreateTime(new Date().getTime()); text.setMsgType(MessageUtil.RESP_MESSAGE_TYPE_TEXT); respMessage = MessageUtil.textMessageToXml(text); return respMessage; } // 取消订阅后用户再收不到公众号发送的消息，因此不需要回复消息 else if (eventType.equals(MessageUtil.EVENT_TYPE_UNSUBSCRIBE)) {// 取消订阅 } } } catch (Exception e) { logger.error("error......"); } return respMessage; }
-
npm替换淘宝源 由于node下载第三方依赖包是从国外服务器下载，虽然没有被墙，但是下载的速度是非常的缓慢且有可能会出现异常。所以为了提高效率，我们还是把npm的镜像源替换成淘宝的镜像源。有几种方式供我们选择使用cnpm使用阿里定制的cnpm命令行工具代替默认的npm，输入以下代码$ npm install -g cnpm --registry=https://registry.npm.taobao.org检测是否安装成功$ cnpm -v安装成功之后，以后安装依赖包的方式和npm的是一样的，只是npm的命令换成是cnpm就可以了假如你已经习惯了使用npm的安装方式的，不想去下载阿里的cnpm命令工具的话，很简单，我们直接将node的仓库地址换成淘宝仓库地址即可单次使用$ npm install --registry=https://registry.npm.taobao.org永久使用在开发react-native的时候，不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别。所以，为了方便开发，我们最好是直接永久使用淘宝的镜像源直接命令行的设置$ npm config set registry https://registry.npm.taobao.org手动修改设置1.打开.npmrc文件（C:\Program Files\nodejs\node_modules\npm\npmrc，没有的话可以使用git命令行建一个( touch .npmrc)，用cmd命令建会报错） 2.增加 registry =https://registry.npm.taobao.org 即可。检测是否修改成功// 配置后可通过下面方式来验证是否成功 npm config get registry // 或 npm info express注：如果想还原npm仓库地址的话，只需要在把地址配置成npm镜像就可以了npm config set registry https://registry.npmjs.org/
-
百度地图标记色块 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OzWSumAeRHXvCB0aVy1NiIywdsxMhIGZ"> </script> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMapGL.Map("container"); // 创建地图实例 var point = new BMapGL.Point(117.164254,36.661088); // 创建点坐标 map.centerAndZoom(point, 18); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 // 初始化地图，设置中心点坐标和地图级别 map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式 var polygon = new BMapGL.Polygon([ new BMapGL.Point(117.163848,36.660984), new BMapGL.Point(117.164566,36.66126), new BMapGL.Point(117.164634,36.661155), new BMapGL.Point(117.163919,36.660876) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:1,fillColor:"red"}); map.addOverlay(polygon); </script> </body> </html>坐标点越多形状越精确。
-
Vue子组件的索引 在Vue中，当子组件较多时，通过this.$children来一一遍历我们需要的一个组件是比较困难的，尤其是组件动态渲染时，他们的序列是不固定的。Vue提供了子组件索引的方法，用特殊的属性ref为子组件指定一个索引的名字。<html> <head> <title>Vue学习</title> <script src="vue.js"></script> </head> <body> <div id="app"> <component-a ref="compA"></component-a> <button @click="handleMessage">获取组件A的内容</button> {{message}} </div> <script type="text/javascript"> Vue.component("component-a", { data: function () { return { message: '这是组件A的message' } }, template:'<div></div>' }) var app = new Vue({ el: '#app', data: { message: '' }, methods: { handleMessage: function () { this.message = this.$refs.compA.message } } }) </script> </body> </html>
-
Vue中文输入法实时更新数据值 使用v-model是，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新，如果希望总是实时更新，可以用@input来替代v-model。<html> <head> <title>Vue学习</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="请输入"> <input type="text" placeholder="实时更新" @input="handleInput"> <p> {{message}} </p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: '' }, methods:{ handleInput:function(e){ this.message=e.target.value } } }) </script> </body> </html>
-
Vue+element-ui导出el-table中的数据 1.先安装依赖npm install --save xlsx file-saver2.在要导出的vue组件中的script引入import FileSaver from "file-saver" import XLSX from "xlsx"3.导出方法exportExcel() {//执行此方法导出Excel表格 // 为el-table添加一个id：out-table // 当el-table使用了fixed时会导出两次数据，所以要先进行判断 var fix = document.querySelector('.el-table__fixed'); var wb; if (fix) { // 如果有fixed，先移除，然后再添加上 wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix)) document.querySelector("#out-table").appendChild(fix) }else{ wb = XLSX.utils.table_to_book(document.querySelector("#out-table")) } var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" }); try { FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), // 导出的文件名称 "Data.xlsx" ) } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); } return wbout; },这个方法也存在问题，比如样式不够灵活等。
-
el-datepicker设置可选日期范围 1.只能选择当前及以后的日期<el-date-picker v-model="value1" type="date" :picker-options="pickerOptions"> </el-date-picker> data() { return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; } }, }2.只能选择今天以及今天以前的日期data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6 } }, } }3.只能选择今天之后的日期data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now(); } }, } }4.只能选择今天之前的日期data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() > Date.now(); } }, } }5.设置选择三个月之前到今天的日期data (){ return { pickerOptions0: { disabledDate(time) { let curDate = (new Date()).getTime(); let three = 90 * 24 * 3600 * 1000; let threeMonths = curDate - three; return time.getTime() > Date.now() || time.getTime() < threeMonths;; } }, } }组件代码<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions0"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions1"> </el-date-picker>
-
-
vue-big-screen： 一个基于 vue+datav+Echart 框架的大数据可视化（大屏展示）模板 一、项目描述React 版本请点击这里查看，全新界面超级好看！！！(o ﾟ v ﾟ)ノ一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。项目需要全屏展示（按 F11）。项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 按需引入。拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。项目环境：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。请拉取 master 分支的代码，其余是开发分支。友情链接：Vue 官方文档DataV 官方文档echarts 实例，echarts API 文档项目 gitee 地址（国内速度快）二、主要文件介绍文件作用/功能main.js主目录文件，引入 Echart/DataV 等文件utils工具函数与 mixins 函数等views/ index.vue项目主结构views/其余文件界面各个区域组件（按照位置来命名）assets静态资源目录，放置 logo 与背景图片assets / style.scss通用 CSS 文件，全局项目快捷样式调节assets / index.scssIndex 界面的 CSS 文件components/echart所有 echart 图表（按照位置来命名）common/...全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改）三、使用介绍启动项目需要提前安装好 nodejs 与 npm,下载项目后在项目主目录下运行 npm/cnpm install 拉取依赖包。安装完依赖包之后然后使用 vue-cli 或者直接使用命令npm run serve，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view 进行手动安装。封装组件渲染图表所有的 ECharts 图表都是基于 common/echart/index.vue 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。项目配置了默认的 ECharts 图表样式，文件地址：common/echart/theme.json。封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。参数名称类型作用/功能 idString唯一 id，渲染图表的节点（非必填，使用了 $el）classNameStringclass样式名称（非必填）optionsObjectECharts 配置（必填）heightString图表高度（建议填）widthString图表宽度（建议填）动态渲染图表动态渲染图表案例为 components 目录下各个图表组件，index 文件负责数据获取和处理，chart 文件负责监听和数据渲染。chart 文件的主要逻辑为：<template> <div> <Echart :options="options" id="id" height="height" width="width" ></Echart> </div> </template> <script> // 引入封装组件 import Echart from '@/common/echart' export default { // 定义配置数据 data(){ return { options: {}}}, // 声明组件 components: { Echart}, // 接收数据 props: { cdata: { type: Object, default: () => ({}) }, }, // 进行监听，也可以使用 computed 计算属性实现此功能 watch: { cdata: { handler (newData) { this.options ={ // 这里编写 ECharts 配置 } }, // 立即监听 immediate: true, // 深度监听 deep: true } } }; </script>复用图表组件复用图表组件案例为中间部分的 任务通过率与任务达标率 模块，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和样式，然后在复用的组件 components/echart/center/centerChartRate 里进行接收并在对应位置赋值即可。如：在调用处 views/center.vue 里去定义好数据并传入组件//组件调用 <span>今日任务通过率</span> <centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" /> <span>今日任务达标率</span> <centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" /> ... import centerChart from "@/components/echart/center/centerChartRate"; data() { return { rate: [ { id: "centerRate1", tips: 60, ... }, { id: "centerRate2", tips: 40, colorData: { ... } } ] } }更换边框边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看如：<dv-border-box-1></dv-border-box-1> <dv-border-box-2></dv-border-box-2> <dv-border-box-3></dv-border-box-3>更换图表直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去echarts 官方社区里面查看案例。Mixins 解决自适应适配功能使用 mixins 注入解决了界面大小变动图表自适应适配的功能，函数在 utils/resizeMixins.js 中，应用在 common/echart/index.vue 的封装渲染组件，主要是对 this.chart 进行了功能注入。屏幕适配本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，// flexible文件位置: `common/flexible.js`,修改部分如下 function refreshRem() { var width = docEl.getBoundingClientRect().width; // 最小1366px，最大适配2560px if (width / dpr < 1366) { width = 1366 * dpr; } else if (width / dpr > 2560) { width = 2560 * dpr; } // 原项目是1920px我设置成24等份，这样1rem就是80px var rem = width / 24; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }请求数据现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置。axios 的 main.js 配置参考范例（因人而异）import axios from 'axios'; //把方法放到vue的原型上，这样就可以全局使用了 Vue.prototype.$http = axios.create({ //设置20秒超时时间 timeout: 20000, baseURL: 'http://172.0.0.1:80080', //这里写后端地址 });四、更新情况增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。修复了头部右侧的图案条不对称的问题。修复屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。使用 Mixins 注入图表响应式代码。vue-awesome 改成按需引入的方式。封装渲染函数，抽离了数据使逻辑更加清晰。新增地图组件，并添加自动轮播功能五、其余这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
-
jetbrains全家桶2020.12.26破解失败临时解决方法 jetbrains全家桶破解于2020年12月26日再次失效，大家可以通过以下激活码进行激活。UD5T6WF5YW-eyJsaWNlbnNlSWQiOiJVRDVUNldGNVlXIiwibGljZW5zZWVOYW1lIjoi5rC45LmF5YWN6LS577yaIGxvb2tkaXbCt2NvbSIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN1cnJlbnRVc2UiOmZhbHNlLCJwcm9kdWN0cyI6W3siY29kZSI6IkRDIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJJSSIsInBhaWRVcFRvIjoiMjAyMS0wMS0yMCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiREIiLCJwYWlkVXBUbyI6IjIwMjEtMDEtMjAiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IlJNIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJXUyIsInBhaWRVcFRvIjoiMjAyMS0wMS0yMCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUlNWIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlJTVSIsInBhaWRVcFRvIjoiMjAyMS0wMS0yMCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUEMiLCJwYWlkVXBUbyI6IjIwMjEtMDEtMjAiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IlJDIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJSRCIsInBhaWRVcFRvIjoiMjAyMS0wMS0yMCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiRE0iLCJwYWlkVXBUbyI6IjIwMjEtMDEtMjAiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IkNMIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJSUzAiLCJwYWlkVXBUbyI6IjIwMjEtMDEtMjAiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IlJTQyIsInBhaWRVcFRvIjoiMjAyMS0wMS0yMCIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJHTyIsInBhaWRVcFRvIjoiMjAyMS0wMS0yMCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUlNGIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJEUE4iLCJwYWlkVXBUbyI6IjIwMjEtMDEtMjAiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IkFDIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJQREIiLCJwYWlkVXBUbyI6IjIwMjEtMDEtMjAiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiUFdTIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBHTyIsInBhaWRVcFRvIjoiMjAyMS0wMS0yMCIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJQUFMiLCJwYWlkVXBUbyI6IjIwMjEtMDEtMjAiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiUFBDIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBSQiIsInBhaWRVcFRvIjoiMjAyMS0wMS0yMCIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJQU1ciLCJwYWlkVXBUbyI6IjIwMjEtMDEtMjAiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiUFNJIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IkRQIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlJTIiwicGFpZFVwVG8iOiIyMDIxLTAxLTIwIiwiZXh0ZW5kZWQiOnRydWV9XSwibWV0YWRhdGEiOiIwMTIwMjAxMjIxUFBBTTAwMDAwNSIsImhhc2giOiIyMTY1MjE2MC8wOi0xMzY3OTQ1NjAiLCJncmFjZVBlcmlvZERheXMiOjcsImF1dG9Qcm9sb25nYXRlZCI6ZmFsc2UsImlzQXV0b1Byb2xvbmdhdGVkIjpmYWxzZX0=-c1Kpo0VqL6BYALtXWauBc9E6NWpFv3l75uwkEW810fvOHBCWMRGA8BR8nXvLXRZHOIKYomGPElq3fmG9djn9ePXxwe8IdE960WBQjnGEVacLIA+CY7nGwZaRA78QnKke41oDciDfdZxri9nMXZnKPFy0MsJCwGiMkOcCwDCgxTVXgO+ZwIcsNdNV0UlpdVaOAvr2l8QD9gxAi1M1DxVWaS5N50UrreGbd1A9tYJr1vzM0Uqkfw4hpV4FrKrzISzSFiRVhp3X0W+PlwlTK3rh+JkD2fGyrDdAFZHwc5KWclZNZOdXneC9T8n37jcQQOFFsCtbID02hQhuvTz8ktypKw==-MIIETDCCAjSgAwIBAgIBDTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTIwMTAxOTA5MDU1M1oXDTIyMTAyMTA5MDU1M1owHzEdMBsGA1UEAwwUcHJvZDJ5LWZyb20tMjAyMDEwMTkwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDCP4uk4SlVdA5nuA3DQC+NsEnZS9npFnO0zrmMWcz1++q2UWJNuGTh0rwi+3fUJIArfvVh7gNtIp93rxjtrQAuf4/Fa6sySp4c32MeFACfC0q+oUoWebhOIaYTYUxm4LAZ355vzt8YeDPmvWKxA81udqEk4gU9NNAOz1Um5/8LyR8SGsSc4EDBRSjcMWMwMkYSauGqGcEUK8WhfplsyF61lKSOFA6VmfUmeDK15rUWWLbOMKgn2cxFA98A+s74T9Oo96CU7rp/umDXvhnyhAXSukw/qCGOVhwKR8B6aeDtoBWQgjnvMtPgOUPRTPkPGbwPwwDkvAHYiuKJ7Bd2wH7rAgMBAAGjgZkwgZYwCQYDVR0TBAIwADAdBgNVHQ4EFgQUJNoRIpb1hUHAk0foMSNM9MCEAv8wSAYDVR0jBEEwP4AUo562SGdCEjZBvW3gubSgUouX8bOhHKQaMBgxFjAUBgNVBAMMDUpldFByb2ZpbGUgQ0GCCQDSbLGDsoN54TATBgNVHSUEDDAKBggrBgEFBQcDATALBgNVHQ8EBAMCBaAwDQYJKoZIhvcNAQELBQADggIBAB2J1ysRudbkqmkUFK8xqhiZaYPd30TlmCmSAaGJ0eBpvkVeqA2jGYhAQRqFiAlFC63JKvWvRZO1iRuWCEfUMkdqQ9VQPXziE/BlsOIgrL6RlJfuFcEZ8TK3syIfIGQZNCxYhLLUuet2HE6LJYPQ5c0jH4kDooRpcVZ4rBxNwddpctUO2te9UU5/FjhioZQsPvd92qOTsV+8Cyl2fvNhNKD1Uu9ff5AkVIQn4JU23ozdB/R5oUlebwaTE6WZNBs+TA/qPj+5/wi9NH71WRB0hqUoLI2AKKyiPw++FtN4Su1vsdDlrAzDj9ILjpjJKA1ImuVcG329/WTYIKysZ1CWK3zATg9BeCUPAV1pQy8ToXOq+RSYen6winZ2OO93eyHv2Iw5kbn1dqfBw1BuTE29V2FJKicJSu8iEOpfoafwJISXmz1wnnWL3V/0NxTulfWsXugOoLfv0ZIBP1xH9kmf22jjQ2JiHhQZP7ZDsreRrOeIQ/c4yR8IQvMLfC0WKQqrHu5ZzXTH4NO3CwGWSlTY74kE91zXB5mwWAx1jig+UXYc2w4RkVhy0//lOmVya/PEepuuTTI4+UJwC7qbVlh5zfhj8oTNUXgN0AOc+Q0/WFPl1aw5VV/VrO8FCoB15lFVlpKaQ1Yh+DVU8ke+rt9Th0BCHXe0uZOEmH0nOnH/0onD
-
同一nginx服务器部署多个vue项目 项目上使用了大屏，由于大屏的框架样式与业务系统存在冲突，所以决定单独拆分成两个独立的vue项目。一、项目信息首先两个项目，一个web存放的是业务系统，正常访问。另外一个bigscreen作为大屏使用，通过二级目录/bigScreen访问二、web项目处理web项目不需要特殊处理，正常build即可。三、bigscreen项目处理1. 修改配置文件vue.config.js打开项目根目录下的vue.config.js文件，修改public如下publicPath: process.env.NODE_ENV === "production" ? "/bigScreen" : "/",2. 修改src/router/index.js, 项目页面跳转路由const router = new VueRouter({ mode: "history", base: '/bigScreen', routes })3. 配置nginxnginx配置文件，添加如下节点location /bigScreen/ { alias /www/wwwroot/dotnetcore.com.cn/bigScreen/; index index.html index.htm; try_files $uri $uri/ /bigScreen/index.html; # 内部项目跳转路径 }四、项目部署原始项目，还是放到根目录。bigScreen在网站根目录下创建bigScreen文件夹，并将生成的文件上传到bigScreen目录下。
