Anthony的技术博客

查看Waline文档,并点击Deploy,文档上有大概步骤,也可以参考,要使用免费的数据库,我就选择MongoDB,可以免费申请 Waline-Vercel部署 部署Waline到Vercel 打开Vercel分配的地址,测试评论,就会显示下图,是因为需要配置数据库 申请免费的MongoDB 访问MongoDB官网,并点击免费开始使用,跳转到注册页面,点击使用Google账号登陆,也可以自己注册,这里是为了方便使用Google登陆,登陆之后需要同意一些协议,和调查,随便填写,没有很大关系 选择免费的,并点击下面的Create 等待一会,会自动开始创建 创建成功,然后点击,Connect,设置ip,设置任何地方都可以访问 点击Choose a connection method,在弹出的窗口选择Compass 获取链接地址,这里有个坑,Waine使用的包比较旧,新版本的协议是:mongod+srv,旧版本使用的mongodb,这里的选项,要使用旧版本,1.11 or earlier 步骤1获取到的是:MONGO_HOST 查看Waline文档,查看MongoDB需要的环境配置 具体的配置如下: MONGO_HOST 就是从上面的步骤一 获取到的 默认ssl=true MONGO_AUTHSOURCE 从上面步骤4获取到的 MONGO_USER 前面创建的用户名 MONGO_PASSWORD 前面创建的密码 MONGO_PORT 设置默认值 MONGO_REPLICASET 如果是默认值的话,就是Cluster0, 自己修改的话,就用自己的 MONGO_DB = waline, 这个值也可以随便填, 不用手动创建库,waline会自动创建 环境变量配置好之后,重新部署下就行了 评论地址是:vercel分配的域名 后台系统是:vercel分配的域名/ui

机器人设置消息分类消息分两种: 普通文本消息(比如test) 命令消息(以'/'开头的文本,比如 /test ) 默认在群里只能收到命令消息,和机器人私聊可以接收到全部的消息,如果想让机器人在群里也能接收到全部的消息,操作如下访问BotFather,输入/setprivacy,选择自己的机器人,选择DISABLED,就可以了

基本概念Rime 是一个输入法框架，并不是狭义上的“输入法”，而是将各种输入法的共性抽象出来的算法框架。通过不同的配置文件，Rime 可以支持多种输入方案（Schema），这个所谓的输入方案就是我们狭义上的“输入法”。比如朙月拼音输入法就是 Rime 自带的一种输入方案，另外还有比如四叶草输入法（https://github.com/fkxxyz/rime-cloverpinyin）等等。鼠须管、小狼毫、中州韵分别是 Rime 在不同操作系统下的实现程序。Rime 的配置、词库文件均使用文本方式，便于修改。所有文件均要求以 UTF-8 编码。在配置文件中，以 # 号开头表示注释。 配置文件所在的目录Rime 有两个重要的配置目录： 共享配置目录 【中州韻】 /usr/share/rime-data/ 【小狼毫】 "安裝目錄\data" 【鼠鬚管】 "/Library/Input Methods/Squirrel.app/Contents/SharedSupport/" 用户配置目录 【中州韻】 ~/.config/ibus/rime/ （0.9.1 以下版本爲 ~/.ibus/rime/） 【小狼毫】 %APPDATA%\Rime 【鼠鬚管】 ~/Library/Rime/ 共享目录下放置的是 Rime 的预设配置，在软件版本更新时候，也会自动更新该目录下的文件。所以请不要修改该目录下的文件。 用户目录则放置用户自定义的配置文件。我们要做的修改都放在用户目录下。 对于鼠须管而言，用户目录初始时只有如下几个文件。 installion.yaml 文件记录的是当前 Rime 程序的版本信息。其中有一个字段 installation_id 用来在同步用户词典时唯一标记当前 Rime 程序。 user.yaml 文件记录用户的使用状态。比如上次“重新部署”的时间戳，上次选择的输入方案等。 build 目录下放的是每次“重新部署”后生成的文件。包括字典文件编译后生成的「.bin」文件，包括与自定义配置合并后生成的各种 yaml 配置文件。 xxx.userdb 目录下放的是对应输入方案的用户词典。即用户在使用时候选择的词组、词频等动态信息，这个目录是实时更新的。 sync 目录是用来做用户数据同步的。每个 sync/installation_id 目录对应不同电脑上的 Rime 程序的用户数据。（如果你由多台电脑安装了 Rime，并设置了同步。）按照作者的说法，Rime 的用户词典同步原理是： 手工从其他电脑复制或者从网盘自动同步 ⇒ sync/*/*.userdb.txt ⇒ 合并到本地 *.userdb ⇒ 导出到 sync/<installation_id>/*.userdb.txt。 关于调试Rime 的日志目录放在如下为止： 【中州韻】 /tmp/rime.ibus.* 【小狼毫】 %TEMP%\rime.weasel.* 【鼠鬚管】 $TMPDIR/rime.squirrel.* 早期版本 用户配置目录/rime.log 修改配置如果想要修改配置，请不要直接修改原有的 xxx.yaml 文件，而是应该新建一份 xxx.custom.yaml 文件，其中 xxx 与原文件名相同。 在 .custom.yaml 文件中对于要修改的配置项，都需要放在 patch 根节点下面。 每次修改配置，都需要在鼠须管的菜单中选择“重新部署”后才能生效。 修改候选词个数Rime 默认每次出现的候选词个数为 5 个，我们可以将其修改为 1~9 之间的任意数。 在用户目录下新建一个 default.custom.yaml 文件（default.yaml 文件可以在共享配置目录下找到），写入如下内容： 123456789patch: "menu/page_size": 9 # 字段名加不加双引号都可以 # 或者是這樣patch: menu: page_size: 8# 但是注意这种写法是覆盖整个 menu 字段。好在默认情况下，menu 下一级也只有 page_size 字段，如果是有多个下级字段，请不要这么写。 上面的 default 文件是修改所有输入方案的候选词个数，如果只想针对某个输入方案做调整，比如对于朙月输入方案，那么只需要在用户目录下建立 luna_pinyin.custom.yaml 文件并写入如上内容，再重新部署即可。（注意，对输入方案定义文件 xxx.schema.yaml 的修改，新建的文件名只需要是 xxx.custom.yaml，并不需要加上 schema，写成 xxx.schema.custom.yaml 这样。） 使用，使用快捷键F4，然后像拼音打字选候选字一样，选择就好 输入方案的可切换状态，请参考后续的 switches 章节 主题鼠须管的外观配置文件是 squirrel.yaml（小狼毫的外观配置文件是 weasel.yaml）。所以我们需要在用户配置目录下新建一个 squirrel.custom.yaml，参考或者拷贝开源项目的写法，通常有很多个主题，我们可以通过 style/color_scheme 来选择一个主题 开源项目的主题文件 参考: 鼠须管输入法配置 - 哈呜.王 (hawu.me) Rime Squirrel 鼠须管输入法配置详解 - 知乎 (zhihu.com)

搭建使用阿里云,或者腾讯等轻量云服务器,一键搭建 教程WordPress地址和站点地址的含义和区别WordPress 地址没有子站点就忽略,和站点地址一样就行站点地址就是浏览器地址栏输入的地址 如果地址填入错误,导致不能进入网站,需要手动修改数据库 1select option_name,option_value from options where option_name = 'siteurl' or option_name='home' 在云服务器控制面板强制重启,导致数据无法启动12rm -f /www/server/data/ib_*rm -f /www/server/data/mysql-bin* 常用的插件 插件 Elementor Essential Addons for Elementor SMTP Mailer Starter Templates Yoast SEO

表单验证简单版123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899<template> <div class="login"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>通用后台管理系统</span> </div> <el-form label-width="80px" :model="form" ref="form"> <el-form-item label="用户名" prop="username" :rules="[ {required:true,message:'请输入用户名',trigger:'blur'}, {min:6,max:12,message:'长度在6-12位字符',trigger:'blur'}, ]"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" :rules="[ {required:true,message:'请输入密码',trigger:'blur'}, {min:6,max:12,message:'长度在6-12位字符',trigger:'blur'}, ]"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login('form')">登录</el-button> </el-form-item> </el-form> </el-card> </div></template><script>export default { data() { return { form: { username: "", password: "" } } }, methods:{ login(form){ this.$refs[form].validate((valid)=>{ if(valid){ console.log("验证通过") this.axios.post("http://localhost",this.form).then( res=>{ console.log(res) if(res.data.status === 200){ localStorage.setItem("username",res.data.username) this.$message({ message:res.data.message, type:'success' }) this.$router.push('/home') } } ) .catch(err=>{ console.error(err) }) }else { console.error("验证不通过") } }) } }}</script><style scoped lang="scss">.login { width: 100%; height: 100%; position: absolute; background: cadetblue; .box-card { width: 450px; margin: 200px auto; .el-button { width: 100%; } }}</style> 自定义校验123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119<template> <div class="login"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>通用后台管理系统</span> </div> <el-form label-width="80px" :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login('form')">登录</el-button> </el-form-item> </el-form> </el-card> </div></template><script>export default { data() { // 验证用户名 const validateName = (rule, value, callback) => { if (value === '') { callback(new Error("请输入用户名")) } else if (value === '123456') { console.log("11111111111") callback(new Error('换个用户名,猜到啦')) } else { callback() } } const validatePassword = (rule, value, callback) => { if (value === '') { callback(new Error("请输入密码")) } else if (!value === '123456') { callback(new Error('换个密码,猜到啦')) } else { callback() } } return { form: { username: "", password: "" }, rules: { username: [{validator: validateName, trigger: 'blur'}], password: [{validator: validatePassword, trigger: 'blur'}], } } }, methods: { login(form) { this.$refs[form].validate((valid) => { if (valid) { console.log("验证通过") // this.axios.post("http://localhost", this.form).then( // res => { // console.log(res) // if (res.data.status === 200) { // localStorage.setItem("username", res.data.username) // this.$message({ // message: res.data.message, // type: 'success' // }) // this.$router.push('/home') // } // } // ) // .catch(err => { // console.error(err) // }) } else { console.error("验证不通过") } }) } }}</script><style scoped lang="scss">.login { width: 100%; height: 100%; position: absolute; background: cadetblue; .box-card { width: 450px; margin: 200px auto; .el-button { width: 100%; } }}</style> 自定义校验封装新建一个vaildate.js 123456789101112131415161718192021// 用户名匹配export function nameRule(rule,value,callback){ if (value === '') { callback(new Error("请输入用户名")) } else if (value === '123456') { console.log("11111111111") callback(new Error('换个用户名,猜到啦')) } else { callback() }}export function passwordRule(rule,value,callback){ if (value === '') { callback(new Error("请输入密码")) } else if (value === '123456') { callback(new Error('换个密码,猜到啦')) } else { callback() }} 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697<template> <div class="login"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>通用后台管理系统</span> </div> <el-form label-width="80px" :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login('form')">登录</el-button> </el-form-item> </el-form> </el-card> </div></template><script>import {nameRule,passwordRule} from "@/utils/vaildate";export default { data() { return { form: { username: "", password: "" }, rules: { username: [{validator: nameRule, trigger: 'blur'}], password: [{validator: passwordRule, trigger: 'blur'}], } } }, methods: { login(form) { this.$refs[form].validate((valid) => { if (valid) { console.log("验证通过") // this.axios.post("http://localhost", this.form).then( // res => { // console.log(res) // if (res.data.status === 200) { // localStorage.setItem("username", res.data.username) // this.$message({ // message: res.data.message, // type: 'success' // }) // this.$router.push('/home') // } // } // ) // .catch(err => { // console.error(err) // }) } else { console.error("验证不通过") } }) } }}</script><style scoped lang="scss">.login { width: 100%; height: 100%; position: absolute; background: cadetblue; .box-card { width: 450px; margin: 200px auto; .el-button { width: 100%; } }}</style> 遍历路由渲染菜单栏src>common>menu.vue 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<template> <div class="menu"> <el-aside width="200px"> <el-menu router default-active="2" class="el-menu-vertical-demo" background-color="cornflowerblue" text-color="#fff" active-text-color="#ffd04b"> <template v-for="(item,index) in menus"> <div> <el-submenu :index="index + '' " :key="index" v-if="!item.hidden"> <template slot="title"> <i :class="item.iconClass"></i> <span>{{ item.name }}</span> </template> <el-menu-item-group v-for="(child,index) in item.children" :key="index"> <el-menu-item :index="child.path"> <i :class="child.iconClass"></i> {{ child.name }} </el-menu-item> </el-menu-item-group> </el-submenu> </div> </template> </el-menu> </el-aside> </div></template><script>export default { data(){ return{ menus:[] } }, created() { console.log(this.$router.options.routes) this.menus=this.$router.options.routes }, methods: { }}</script><style scoped lang="scss">.menu{ .el-aside{ height: 100%; .el-menu{ height: 100%; .fa{ margin-right: 10px; } } .el-submenu .el-menu-item{ min-width: 0; } }}</style> route.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136import Vue from 'vue'import Router from 'vue-router'// import Home from '../components/Home.vue'Vue.use(Router)export default new Router({ routes:[ { path:'/', // 重定向 redirect:'/login', // 路由懒加载 hidden:true, component:()=>import('@/components/Login.vue') // 异步组件 }, { path:'/login', name:'Login', hidden:true, // 路由懒加载 component:()=>import('@/components/Login.vue') // 异步组件 }, { path:'/home', // component:Home hidden:true, // 路由懒加载 component:()=>import('@/components/Home.vue') // 异步组件 }, { path:'/home2', // component:Home hidden:true, // 路由懒加载 component:resolve =>require(['@/components/Home.vue'],resolve) // 异步组件 }, { path:'*', hidden:true, // 路由懒加载 component:()=>import('@/components/404.vue') }, { path:"/home", name:"学生管理", iconClass:'fa fa-user', // 默认重定向 redirect:'/home/student', component:()=>import('@/components/Home.vue'), children:[ { path:'/home/student', name:'学生列表', iconClass:"fa fa-list", component:()=>import("@/components/students/StudentList.vue") }, { path:'/home/info', name:'信息列表', iconClass:"fa fa-list", component:()=>import("@/components/students/InfoList.vue") }, { path:'/home/infos', name:'信息管理', iconClass:"fa fa-list-alt", component:()=>import("@/components/students/InfoLists.vue") }, { path:'/home/work', name:'作业列表', iconClass:"fa fa-list-ul", component:()=>import("@/components/students/WorkList.vue") }, { path:'/home/workd', name:'作业管理', iconClass:"fa fa-th-list", component:()=>import("@/components/students/WorkMent.vue") } ] }, { path:"/home", name:"数据分析", iconClass:'fa fa-bar-chart', component:()=>import('@/components/Home.vue'), children:[ { path:'/home/dataview', name:'数据概览', iconClass:"fa fa-list-alt", component:()=>import("@/components/dataAnalysis/DataView.vue") }, { path:'/home/mapview', name:'地图概览', iconClass:"fa fa-list-alt", component:()=>import("@/components/dataAnalysis/MapView.vue") }, { path:'/home/travel', name:'信息管理', iconClass:"fa fa-list-alt", component:()=>import("@/components/dataAnalysis/TraveMap.vue") }, { path:'/home/score', name:'分数地图', iconClass:"fa fa-list-alt", component:()=>import("@/components/dataAnalysis/ScoreMap.vue") } ] }, { path:"/users", name:"用户中心", iconClass:'fa fa-user', component:()=>import('@/components/Home.vue'), children:[ { path:'/users/user', name:'权限管理', iconClass:"fa fa-user", component:()=>import("@/components/users/User.vue") } ] }, ], mode:'history'}) 面包屑的使用不同的路由,面包屑显示的信息会自动变化bread.vue 12345678910111213141516171819202122<template> <div> <el-card> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index" >{{item.name}}</el-breadcrumb-item> </el-breadcrumb> </el-card> </div></template><script>export default {}</script><style scoped></style> home.vue 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<template> <div class="home"> <Header></Header> <el-container class="content"> <Menu>menu</Menu> <el-container> <el-main> <Breadcrumb/> <div class="cont"> <router-view></router-view> </div> </el-main> <el-footer> <Footer></Footer> </el-footer> </el-container> </el-container> </div></template><script>import Header from "@/components/common/Header.vue";import Footer from "@/components/common/Footer.vue";import Menu from "@/components/common/Menu.vue";import Breadcrumb from '@/components/common/Breadcrumb.vue'export default { components: { Header, Footer, Breadcrumb, Menu, }, data() { return {} }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped lang="less">.home { width: 100%; height: 100%; .content{ position: absolute; width: 100%; top: 60px; bottom: 0; .cont{ margin: 20px 0; } }}</style> Card 卡片12345<!-- body-style的使用 --><el-card :body-style="{padding:'0px'}"> <div style="padding-top: 4px;display: flex"> </div</div></el-card> 级联选择器新版本props的使用级联选择器太高可以在全局样式里给.el-cascader-panel设置高度为200px:props=”{ expandTrigger: ‘hover’, value: ‘cat_id’, label: ‘cat_name’, children: ‘children’ }” 多选框 1234567891011121314151617<div> <el-checkbox-group v-model="checkboxGroup1"> <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group></div>const cityOptions = ['上海', '北京', '广州', '深圳']; export default { data () { return { checkboxGroup1: ['上海'], checkboxGroup2: ['上海'], checkboxGroup3: ['上海'], checkboxGroup4: ['上海'], cities: cityOptions }; } Avatar 头像12<el-avatar shape="square" size="small" src="https://baidu.com/logo"></el-avatar> Table 表格el-table怎样隐藏某一列el-table-column上添加v-if="false" 1234567891011121314151617181920212223<el-table v-loading="loading" :data="bczglList" @selection-change="handleSelectionChange"> <el-table-column label="id" align="center" prop="id" v-if="false" /> <el-table-column label="班次组编号" align="center" prop="bczbh" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['kqgl:bczgl:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['kqgl:bczgl:remove']" >删除</el-button> </template> </el-table-column></el-table> 先记着Vue同一个dom元素绑定多个点击事件如何绑定 1<el-button @click="dialogVisible = false;clearTempData()">取 消</el-button> 模板获取值 123<template slot-scope="scope"> <el-tag type="warning" v-for="ids in scope.row.typeID.split(',')">{{getGameType(ids)}}</el-tag></template> Store 数据 1agentId: _this.$store.getters.name.agentId,

安装Vue局部安装局部安装并使用vue-cli 4.x版本,和创建项目 12345678910111213141516171819202122# 先创建一个文件夹# 初始化一个node项目npm init -y# 局部安装vuenpm i -D @vue/cli# 查看vue的版本# 局部安装要用npx命令C:\Users\mmzcg\WebstormProjects>npx vue -V@vue/cli 5.0.8# 创建一个项目# 为啥不能用npm运行npx vue create project-one# 进入项目并且运行cd project-onenpm run serve# 也可以用uinpx vue ui 全局安装12345npm install -g @vue/clivue create my-projectvue ui 安装Element-UI全局安装12# 安装npm i element-ui -S 1234// main.js 使用import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI) 按需引入123# 安装npm i element-ui -Snpm install babel-plugin-component -D 123456789101112131415161718192021222324252627// main.js// 全局引入// import ElementUI from 'element-ui'// import 'element-ui/lib/theme-chalk/index.css'// Vue.use(ElementUI)// 按需引入import {Button} from 'element-ui'Vue.use(Button)// babel.config.jsmodule.exports = { // 自动生成的 presets: [ '@vue/cli-plugin-babel/preset' ], // 从官网上复制的 "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]} 如果没有找到.babelirc文件,找找babel.config.js文件 一个一个import 按需引入有点麻烦,在根目录下面创建一个plugins文件夹,在这个文件夹下面创建element.js 123import Vue from 'vue'import {Button} from 'element-ui'Vue.use(Button) 在main.js引入element.js 1import '../element.js' 安装CSS预处理器Sass安装的是sass,使用的时候是scss…. 留意 12npm install --save-dev node-sassnpm install --save-dev sass-loader 12345678# 注意这里是scss<style scoped lang="scss">.hello{ background: yellow; .el-button{ color: red }} Less12npm i less less-loader --save-devnpm i less less-loader --save-dev 1234567<style scoped lang="less">.hello{ background: yellow; .el-button{ color: red }} 重置样式下面的代码可以搜索reset.css在src/assets 下创建css文件夹,在这个文件下创建reset.css文件,粘贴 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;} 在App.vue或者其他的组件中使用 1234567891011<style lang="scss">@import url('./assets/css/reset.css');#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style> 安装图标库12345678# 安装npm i -D font-awesomemain.jsimport 'font-awesome/css/font-awesome.min.css'# 使用<i class="fa fa-user"></i> 安装axios123456npm i axios -Smain.jsimport axios from "axios";# 挂在之后,就可以全局使用了Vue.prototype.axios = axios 安装vue-router12# vue-router3 和 4 的配置不一样npm install [email protected] 创建文件和文件夹src->router->index.js 1234567891011121314151617181920212223import Vue from 'vue'import Router from 'vue-router'import Home from '../components/Home.vue'Vue.use(Router)export default new Router({ routes:[ { path:'/home', component:Home } ], mode:'history'})main.jsimport router from './router'new Vue({ render: h => h(App), router,}).$mount('#app') 路由懒加载和异步组件123456789101112131415export default new Router({ routes:[ { path:'/home', // 路由懒加载 component:()=>import('@/components/Home.vue') }, { path:'/home2', // 异步组件 component:resolve =>require(['@/components/Home.vue'],resolve) } ], mode:'history'}) setToken封装src→utils→settoken.js 1234567891011export function setToken(key,token){ return localStorage.setItem(key,token)}export function getToken(key){ return localStorage.getItem(key)}export function delToken(key){ return localStorage.removeItem(key)} 使用 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<script>import {nameRule,passwordRule} from "@/utils/vaildate";import {setToken} from "@/utils/setToken";export default { data() { return { form: { username: "", password: "" }, rules: { username: [{validator: nameRule, trigger: 'blur'}], password: [{validator: passwordRule, trigger: 'blur'}], } } }, methods: { login(form) { this.$refs[form].validate((valid) => { if (valid) { console.log("验证通过") this.axios.post("http://localhost", this.form).then( res => { console.log(res) if (res.data.status === 200) { setToken("username", res.data.username) this.$message({ message: res.data.message, type: 'success' }) this.$router.push('/home') } } ) .catch(err => { console.error(err) }) } else { console.error("验证不通过") } }) } }}</script> 配置代理服务器123456789101112131415161718192021const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, devServer:{ // 运行自动打开浏览器, open:true, // 如果不配置这个,自动打开浏览器,就是0.0.0.0:8080 host:"localhost", proxy:{ '/api':{ target:'http://127.0.0.1', changeOrigin:true, pathRewrite:{ '^/api':'' } } } }}) 40412345{ path:'*', // 路由懒加载 component:()=>import('@/components/404.vue')}

插件1.安装git插件2.运行命令,才能在界面上显示Git 设置打开文件的时候,显示的模式 本地图片的格式使用 Obsidian 时，粘贴的图片路径会变成[[]] 的格式，在像 Typora 的软件上，就不适配。可以在设置里，关闭 Wiki 链接的选项，粘贴图片后的格式就会自动变成了。

内链内链图片相对路径在source/下创建一个图片的目录,比如起名叫img的文件夹在文章中引入 比如 第二种相对路径将_config.yml文件中的配置项post_asset_folder设为true后，执行命令 1$ hexo new post_name 在source/_posts中会生成文章post_name.md和同名文件夹post_name。将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。 1 如果有遇到问题参考:Hexo博客搭建之在文章中插入图片 内链文章相对路径比如我的博客:[需要显示的文字](../310/#CloudFront加速Vercel) ../ 相对路径,不是md文件的相对路径,是生成的public文件夹你的文章和内链文章的相对路径 310 是指abbrlink: 310,如果没有就使用标题 #CloudFront加速Vercel 是指 310这篇文章的#CloudFront加速Vercel这个标题,也可以不用写,如果写了,就会自动跳到页面的这个锚点

服务器硬盘扩容在线硬盘扩容 阿里云OSS+AWS CloudfrontCloudFront加速Vercel