Site updated: 2023-01-10 10:44:49
This commit is contained in:
qinglong committed
1 parent
974c51d52e
commit
18b196f622
143 files changed
+206
-254
No files matched your search
@@ -6,6 +6,19 @@
|
||||
"description": "天生我材必有用",
|
||||
"home_page_url": "https://blog.jingxiyuan.cn",
|
||||
"items": [
|
||||
{
|
||||
"id": "https://blog.jingxiyuan.cn/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/",
|
||||
"url": "https://blog.jingxiyuan.cn/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/",
|
||||
"title": "Vue根据路由传参修改页面数据",
|
||||
"date_published": "2023-01-10T02:19:00.000Z",
|
||||
"content_html": "<h4 id=\"引言\"><a class=\"anchor\" href=\"#引言\">#</a> 引言</h4>\n<p>在开发前端页面时会存在相同的页面展示，只是菜单名称不同、数据类型不同的情况。如果再拷贝一个页面来展示后期就需要维护两个页面，同时也增加了工作量。但是只使用一个页面通过传参来改变数据就方便多了。</p>\n<h4 id=\"路由配置\"><a class=\"anchor\" href=\"#路由配置\">#</a> 路由配置</h4>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token key atrule\">path</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'/test/:type/:menuIndex'</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'Test'</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token key atrule\">component</span><span class=\"token punctuation\">:</span> _import('xxx/Test.vue')</pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr></table></figure><h4 id=\"菜单配置\"><a class=\"anchor\" href=\"#菜单配置\">#</a> 菜单配置</h4>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><template<span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <el<span class=\"token punctuation\">-</span>menu</pre></td></tr><tr><td data-num=\"3\"></td><td><pre> class=\"aside<span class=\"token punctuation\">-</span>menu\"</pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token punctuation\">:</span>default<span class=\"token punctuation\">-</span>active=\"menuIndex.toString()\"</pre></td></tr><tr><td data-num=\"5\"></td><td><pre> @select=\"handleSelect\"</pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <el<span class=\"token punctuation\">-</span>menu<span class=\"token punctuation\">-</span>item</pre></td></tr><tr><td data-num=\"8\"></td><td><pre> index=\"1\"</pre></td></tr><tr><td data-num=\"9\"></td><td><pre> class=\"aside<span class=\"token punctuation\">-</span>menu<span class=\"token punctuation\">-</span>item\"</pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <template <span class=\"token comment\">#title></span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span<span class=\"token punctuation\">></span>TEST1</span<span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <el<span class=\"token punctuation\">-</span>icon <span class=\"token punctuation\">:</span>size=\"20\"<span class=\"token punctuation\">></span><TrendCharts /<span class=\"token punctuation\">></span></el<span class=\"token punctuation\">-</span>icon<span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> </template<span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> </el<span class=\"token punctuation\">-</span>menu<span class=\"token punctuation\">-</span>item<span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <el<span class=\"token punctuation\">-</span>menu<span class=\"token punctuation\">-</span>item</pre></td></tr><tr><td data-num=\"17\"></td><td><pre> index=\"2\"</pre></td></tr><tr><td data-num=\"18\"></td><td><pre> class=\"aside<span class=\"token punctuation\">-</span>menu<span class=\"token punctuation\">-</span>item\"</pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <template <span class=\"token comment\">#title></span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span<span class=\"token punctuation\">></span>TEST2</span<span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <el<span class=\"token punctuation\">-</span>icon <span class=\"token punctuation\">:</span>size=\"20\"<span class=\"token punctuation\">></span><Orange /<span class=\"token punctuation\">></span></el<span class=\"token punctuation\">-</span>icon<span class=\"token punctuation\">></span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> </template<Line truncated
|
||||
"tags": [
|
||||
"工作",
|
||||
"解决问题",
|
||||
"Vue",
|
||||
"Vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "https://blog.jingxiyuan.cn/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/",
|
||||
"url": "https://blog.jingxiyuan.cn/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/",
|
||||
@@ -43,8 +56,8 @@
|
||||
"解决问题",
|
||||
"KLineChart",
|
||||
"KLineChart",
|
||||
"自定义指标",
|
||||
"K线"
|
||||
"K线",
|
||||
"自定义指标"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -138,8 +151,8 @@
|
||||
"date_published": "2022-11-09T01:47:00.000Z",
|
||||
"content_html": "<h4 id=\"引言\"><a class=\"anchor\" href=\"#引言\">#</a> 引言</h4>\n<ul>\n<li>今天在部署 vue 项目时发现生产环境的端口只有一个，而且被多个项目公用了，刚好此项目又没有配置服务名而是直接使用的根路径。没办法只有修改项目配置重新编译了！</li>\n</ul>\n<h4 id=\"配置\"><a class=\"anchor\" href=\"#配置\">#</a> 配置</h4>\n<ul>\n<li>在项目根目录添加两个文件。</li>\n</ul>\n<p><span class=\"blue\">.env.alpha</span></p>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>NODE_ENV = 'production'</pre></td></tr><tr><td data-num=\"2\"></td><td><pre>VUE_APP_BASE_URL = '/'</pre></td></tr></table></figure><p><span class=\"blue\">.env.prod</span></p>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>NODE_ENV = 'production'</pre></td></tr><tr><td data-num=\"2\"></td><td><pre>VUE_APP_BASE_URL = '/projectName'</pre></td></tr></table></figure><ul>\n<li>在<span class=\"label success\"> package.json</span> 文件内添加不同环境的打包指令</li>\n</ul>\n<figure class=\"highlight json\"><figcaption data-lang=\"JSON\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token property\">\"serve\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service serve\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token property\">\"build\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token property\">\"build-test\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build --mode alpha\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token property\">\"build-prod\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build --mode prod\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token property\">\"lint\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service lint\"</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><ul>\n<li>\n<p>项目中<span class=\"yellow\"> base_url</span> 需要使用<span class=\"red\"> process.env.VUE_APP_BASE_URL</span> 替换</p>\n</li>\n<li>\n<p>编译命令</p>\n</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">yarn</span> build-test <span class=\"token comment\">#使用.env.alpha 配置文件中的参数</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token function\">yarn</span> build-prod <span class=\"token comment\">#使用.env.prod 配置文件中的参数</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token function\">yarn</span> build <span class=\"token parameter variable\">--mode</span> alpha <span class=\"token comment\">#使用.env.alpha 配置文件中的参数</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token function\">yarn</span> build <span class=\"token parameter variable\">--mode</span> prod <span class=\"token comment\">#使用.env.prod 配置文件中的参数</span></pre></td></tr></table></figure>",
|
||||
"tags": [
|
||||
"Linux",
|
||||
"项目部署",
|
||||
"工作",
|
||||
"解决问题",
|
||||
"Vue",
|
||||
"Vue",
|
||||
"项目部署"
|
||||
@@ -166,8 +179,8 @@
|
||||
"date_published": "2022-11-04T07:21:00.000Z",
|
||||
"content_html": "<h4 id=\"描述\"><a class=\"anchor\" href=\"#描述\">#</a> 描述</h4>\n<ul>\n<li>今天需要把一个 web 项目部署到 ubuntu 服务器上，结果直接使用 apt install nodejs 安装的 nodejs 版本过低，导致编译失败。最后通过查看官网文档获取到了 ubuntu 最新 nodejs 的安装命令。</li>\n</ul>\n<h4 id=\"过程\"><a class=\"anchor\" href=\"#过程\">#</a> 过程</h4>\n<ul>\n<li>卸载旧的 nodejs（此命令会卸载掉相关依赖包）</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> autoremove <span class=\"token parameter variable\">--purge</span> nodejs</pre></td></tr></table></figure><ul>\n<li>安装 NodeJS</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">curl</span> <span class=\"token parameter variable\">-fsSL</span> https://deb.nodesource.com/setup_16.x <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> <span class=\"token parameter variable\">-E</span> <span class=\"token function\">bash</span> - <span class=\"token operator\">&&</span> <span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-y</span> nodejs</pre></td></tr></table></figure><ul>\n<li>安装 yarn</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">curl</span> <span class=\"token parameter variable\">-sL</span> https://dl.yarnpkg.com/debian/pubkey.gpg <span class=\"token operator\">|</span> gpg <span class=\"token parameter variable\">--dearmor</span> <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> <span class=\"token function\">tee</span> /usr/share/keyrings/yarnkey.gpg <span class=\"token operator\">></span>/dev/null</pre></td></tr><tr><td data-num=\"2\"></td><td><pre></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main\"</span> <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> <span class=\"token function\">tee</span> /etc/apt/sources.list.d/yarn.list</pre></td></tr><tr><td data-num=\"4\"></td><td><pre></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> update <span class=\"token operator\">&&</span> <span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> <span class=\"token function\">yarn</span></pre></td></tr></table></figure><ul>\n<li>初始化 (到项目根目录执行)</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">yarn</span> <span class=\"token function\">install</span></pre></td></tr></table></figure><ul>\n<li>编译（到项目根目录执行，完成后会生成 dist 目录）</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">yarn</span> build</pre></td></tr></table></figure><ul>\n<li>安装 nginx</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">apt</span> <span class=\"token function\">install</span> nginx</pre></td></tr></table></figure><ul>\n<li>配置 nginx (编译 /etc/nginx/sites-available/default)</li>\n</ul>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>server <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> listen 80 default_server;</pre></td></tr><tr><td data-num=\"3\"></td><td><pre> listen <span class=\"token punctuation\">[</span><span class=\"token punctuation\">:</span><span class=\"token punctuation\">:</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">:</span>80 default_server;</pre></td></tr><tr><td data-num=\"4\"></td><td><pre></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\"># SSL configuration</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token comment\">#</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token comment\"># listen 443 ssl default_server;</Line truncated
|
||||
"tags": [
|
||||
"Linux",
|
||||
"项目部署",
|
||||
"工作",
|
||||
"解决问题",
|
||||
"Vue",
|
||||
"vue",
|
||||
"NodeJS",
|
||||
@@ -269,21 +282,6 @@
|
||||
"Valine",
|
||||
"评论"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "https://blog.jingxiyuan.cn/2022/10/21/%E6%9E%81%E7%A9%BA%E9%97%B4Docker%E7%89%88mariadb%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE/",
|
||||
"url": "https://blog.jingxiyuan.cn/2022/10/21/%E6%9E%81%E7%A9%BA%E9%97%B4Docker%E7%89%88mariadb%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE/",
|
||||
"title": "极空间Docker版mariadb安装与配置",
|
||||
"date_published": "2022-10-21T01:06:00.000Z",
|
||||
"content_html": "<h4 id=\"介绍\"><a class=\"anchor\" href=\"#介绍\">#</a> 介绍</h4>\n<ul>\n<li>mariadb 属于 mysql 的一个分支，完全兼容 mysql，使用方式和 mysql 无区别。</li>\n</ul>\n<h4 id=\"安装\"><a class=\"anchor\" href=\"#安装\">#</a> 安装</h4>\n<ul>\n<li>本文介绍安装的镜像为 linuxserver_mariadb 的 10.5.13-r0-ls45，原则上使用最新版即可</li>\n<li>配置文件映射<br />\n<img data-src=\"https://file.jingxiyuan.cn/images/2022/10/21/2022-10-21-09-20-56.jpg\" alt=\"\" /></li>\n<li>端口<br />\n<img data-src=\"https://file.jingxiyuan.cn/images/2022/10/21/2022-10-21-09-21-49.jpg\" alt=\"\" /></li>\n<li>环境（MYSQL_ROOT_PASSWORD 为数据库 root 用户密码）<br />\n<img data-src=\"https://file.jingxiyuan.cn/images/2022/10/21/2022-10-21-09-22-43.jpg\" alt=\"\" /></li>\n<li>到此已经可以在内网使用了，<a href=\"https://blog.jingxiyuan.cn/2022/11/13/%E6%95%B0%E6%8D%AE%E5%BA%93%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7/\">连接方法</a>同 mysql 一样</li>\n</ul>\n<div class=\"note info\">\n<p>按本文设置内网连接信息为：<br />\nip：极空间内网 ip<br />\n 端口：3306<br />\n 用户名：root<br />\n 密码：<span class=\"red\">MYSQL_ROOT_PASSWORD</span> 对应的值</p>\n</div>\n<h4 id=\"配置\"><a class=\"anchor\" href=\"#配置\">#</a> 配置</h4>\n<ul>\n<li>配置 nginx 反向代理</li>\n</ul>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>stream <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>\t</pre></td></tr><tr><td data-num=\"3\"></td><td><pre>\t<span class=\"token comment\">#极空间 - docker-mariadb</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre>\tupstream mariadb <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre>\t\thash $remote_addr consistent;</pre></td></tr><tr><td data-num=\"6\"></td><td><pre>\t\tserver 192.168.0.254<span class=\"token punctuation\">:</span>3306; <span class=\"token comment\">#192.168.0.254 为极空间内网 ip</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre>\t<span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre>\tserver <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre>\t\tlisten 8090; <span class=\"token comment\">#8090 为 nginx 监听端口，需要在路由器开放 8090 端口并映射给极空间内网 IP（nginx 部署在极空间上）</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre></pre></td></tr><tr><td data-num=\"12\"></td><td><pre>\t\tproxy_connect_timeout 30s;</pre></td></tr><tr><td data-num=\"13\"></td><td><pre>\t\tproxy_timeout 300s;</pre></td></tr><tr><td data-num=\"14\"></td><td><pre>\t\tproxy_pass mariadb;</pre></td></tr><tr><td data-num=\"15\"></td><td><pre>\t<span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> </pre></td></tr><tr><td data-num=\"17\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure>",
|
||||
"tags": [
|
||||
"极空间",
|
||||
"Docker",
|
||||
"mysql",
|
||||
"极空间",
|
||||
"Docker",
|
||||
"mariadb"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in new issue
Block a user