丁永辉

Vue 路由传递参数

Mon, 13 Jan 2020 00:00:00 +0000

有两种方式：

一、用name传递参数

两步完成用name传值并显示在模板里：

在路由文件src/router/index.js里配置name属性。

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：
```
<p></p>
```

二、通过标签中的to传参

上边的传参或许很不正规，也不方便，其实工作中多数传参是不用name进行传参的，我们用标签中的to属性进行传参，需要注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

了解基本的语法后，我们改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改。

<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

{path:'/hi1',name:'hi1',component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

vue-router 利用url传递参数 :冒号的形式传递参数

在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。

1.在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}

我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。

2.在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

<template>
    <div>
        <h2></h2>
        <p>新闻ID：</p>
        <p>新闻标题：</p>
    </div>
</template>
 
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

3.在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。

<router-link to="/params/198/jspang website is very good">params</router-link>

正则表达式在URL传值中的应用

上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。

path:'/params/:newsId(\\d+)/:newsTitle',

加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。

npm

Fri, 06 Dec 2019 00:00:00 +0000

名字由来：Node Package(包) Manager(管理器)。

npm 常用命令

npm -v：查看npm当前版本

npm list 或 ls：查看当前目录下安装了哪些node包

npm install –global npm：升级npm

npm config get registry：查看镜像

npm 命令 –help：查看使用帮助

例如：我忘记了uninstall命令的简写了，这个时候可以输入 npm uninstall --help 查看使用帮助

npm init：用来生成package.json文件

npm 下载模块

npm install：一次性把dependencies选项中的依赖项全部安装

npm install 包名：只下载

npm install –save 包名：下载并且保存依赖项（package.json 文件中的 dependencies选项）

npm 删除模块

npm uninstall 包名：只删除，如果有依赖项会依然保存

npm uninstall -save 包名：删除的同时也会把依赖信息也去除

解决 npm 被墙问题

npm 存储包文件的服务器在国外，有时候被墙，速度很慢，索引我们需要解决这个问题。

淘宝 NPM 镜像这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。（淘宝的开发团队把 npm 在国内做了一个备份）

安装淘宝的 cnpm：

# 在任意目录执行都可以
# --global 表示安装到全局，而非当前目录（必须＋[--global]）
npm install --global cnpm

接下来安装包的时候把之前的npm 替换成 cnpm

# 这里还是走国外的 npm 服务器，速度比较慢 
npm install mysql
# 使用 cnpm 就会通过淘宝的服务器来下载 mysql
cnpm install mysql

Linux 常用命令

Tue, 19 Nov 2019 00:00:00 +0000

界面提示说明

当前用户：

Linux 超级用户：root

Windows 超级用户：adminstrator

主机名：

创建服务器时起的名字，可以修改

当前目录：

管理员 /root

普通用户 /home/用户名

# $号：

# 表示超级用户

$ 表示普通用户

常见目录说明

/ 根目录

/root 超级用户的主目录

/home 普通用户的主目录

/bin 命令保存目录（普通用户就可以读取的命令）

/sbin 命令保存目录（超级用户才能使用的目录）

/boot 这里存放的是启动liunx时使用的一些核心文件包括一些链接文件和镜像文件

/dev 这里存放的是liunx的外部设备在liunx中访问设备的方式和访问文件的方式是相同的

/etc 这个目录用来存放所有的系统管理所需要的配置文件和子目录

/lib 这个目录存放着系统最基本的动态链接共享库起作用类似windows里的DDL文件

/mnt 系统挂载目录，U盘

/media 挂载目录，光盘

/misc 网络存储盘

/tmp 临时目录

/proc 直接写入内存

/usr 系统软件资源目录，系统的重要目录

/var 系统相关文档内容，系统的可变文件，比如日志，随时变化

/var/log/ 系统日志位置

常用快捷键命令

tab键 自动补全

ctrl+c 终止当前操作

ctrl+l 清屏

ctrl+r 查找历史命令

基本操作

uname -r 查看版本信息

pwd 查看用户当前的目录路径

ifconfig --help 查看网卡信息

setup 图形界面配置

date 显示日期

cal 显示日历

关机和重启

关机

shutdown -h now 立刻关机

shutdown -h 5(分钟) 5分钟后关机

poweroff 立刻关机

init 0 关机

重启

shutdown -r now 立刻重启

shutdown -r 5(分钟) 5分钟后重启

reboot 立刻重启

init 6 重启

操作命令

切换 cd

命令：cd 目录或文件

cd / 切换到根目录

cd /test 切换到根目录下的test目录

cd ../ 切换到上一级目录或者 cd..

cd ~ 切换到home目录

cd - 切换到上次访问的目录

查看 ls

参数：
 -l：列出长数据串，包含文件的属性与权限数据等
 -a：列出全部文件，连同隐藏的文件（开头为.的文件）一起列出来（常用）
 -d：仅列出目录本身，而不是列出目录的文件数据
 -h：将文件容量以较易读的方式（GB，KB等）列出来
 -R：连同子目录的内容一起列出（递归列出），等于该目录下的所有文件都会显示出来

命令：ls 参数

ls -a 查看当前目录下的所有目录和文件（包括隐藏文件）

ls -l(也可以简写用 ll ) 查看当前目录下的所有目录和文件（列表形式查看，显示更多信息）

ls /filename(目录名) 查看指定目录下的所有目录和文件

ls -lR 列表的形式查看所有目录和文件并且列出当前目录下的所有文件

ls -l blog.md(文件名) 查看文件的时间属性

目录，文件【增，删，改，查】

创建目录或文件/增 mkdir 和 touch

mkdir 命令用于创建目录

参数：
	1.	-m：配置文件权限
	2.	-p：递归建立

命令：

mkdir test 在当前目录下创建一个名为test的目录

mkdir /usr/test 在指定目录下创建一个名为test的目录

mkdir -p admin/include/upload/ 递归创建目录

touch 命令用于修改目录或文件的时间，包括存取时间和更改时间，如果文件不存在则会创建一个新的文件

命令：

touch test 创建文件修改文件时间属性为当前系统时间

修改blog.md文件的时间

删除目录或文件/删 rm

参数：
-f：就是force的意思，忽略不存在的文件，不会出现警告消息
-i：互动模式。在删除前会询问用户是否操作
-r：递归删除，最常用于目录删除（同样会询问是否执行删除操作）

命令：rm -r 目录

删除目录或文件：

rm 文件名 删除当前目录下的文件

rm -f index.html(文件名) 删除当前目录下的文件（不询问）

rm -r test(目录名) 递归删除当前目录下的test目录

rm -rf test 递归删除当前目录下的test目录（不询问）

全部删除：

rm -rf * 当前目录下的所有目录和文件全部删除

rm -rf /* [自杀命令！慎用！] 将根目录下的所有文件全部删除

递归创建和递归删除 每次操作时先询问再执行删除

修改目录或文件/改 mv 和 cp

mv 命令用来为文件或目录改名、或将文件或目录移入其他位置

重命名：

剪切：

示例：将/usr/tmp目录下的test目录剪切到/usr目录下面 mv /usr/tmp/test /usr

cp 命令主要用于复制文件或目录

拷贝：

cp -r 目录名称目录拷贝的目标位置

示例：将/usr/tmp目录下的test目录复制到/usr目录下面 cp /usr/tmp/test /usr

也可以用vim命令进行修改 vi 文件名

搜索目录文件/查 find 和 cat

find 命令用来在指定目录下查找文件。任何位于参数之前的字符串都将被视为欲查找的目录名。如果使用该命令时，不设置任何参数，则find命令将在当前目录下查找子目录与文件。并且将查找到的子目录和文件全部进行显示。

与时间有关的参数：
-mtime n：n为数字，意思为在n天之前的"一天内"被更改过的文件
-mtime +n：列出在n天之前（不含n天本身）被更改过的文件名
-mtime -n : 列出在n天之内（含n天本身）被更改过的文件名
		例如：find /root -mtime 0				在当天目录下查找今天之内有改动的文件

与用户或用户组名有关的参数：
-user name：列出文件所有者为name的文件
-group name：列出文件所属用户组为name的文件
-uid n : 列出文件所有者为用户ID为n的文件
-gid n : 列出文件所属用户组为用户组ID为n的文件
		例如：find /home/blog.md -user blog.md				在目录/home/blog.md中找出所有者为blog.md的文件blog.md

与文件权限及名称有关的参数：
-name filename：找出文件名为filename的文件
-size [+-]SIZE ：找出比SIZE还要大（+）或小（-）的文件
-tpye TYPE ：查找文件的类型为TYPE的文件，TYPE的值主要有：一般文件（f)、设备文件（b、c）、目录（d）、连接文件（l）、socket（s）、FIFO管道文件（p）
-perm mode ：查找文件权限刚好等于mode的文件，mode用数字表示，如0755
-perm -mode ：查找文件权限必须要全部包括mode权限的文件，mode用数字表示
-perm +mode ：查找文件权限包含任一mode的权限的文件，mode用数字表示

例如：

find / -name passwd 查找文件名为passwd的文件

find . -perm 0755 查找当前目录中文件权限的0755的文件

find . -size +12k 查找当前目录中大于12KB的文件，注意c表示byte

压缩与解压文件

Windows中常见的压缩文件有：.zip .rar

Linux中打包文件：.tar 压缩文件：.gz

tar 命令

参数：
-c：新建打包文件
-t：查看打包文件的内容含有哪些文件名
-x：解打包或解压缩的功能，可以搭配-C（大写）指定解压的目录，注意-c,-t,-x不能同时出现在同一条命令中
-j：通过bzip2的支持进行压缩/解压缩
-z：通过gzip的支持进行压缩/解压缩
-v：在压缩/解压缩过程中，将正在处理的文件名显示出来
-f filename：filename为要处理的文件
-C dir：指定压缩/解压缩的目录dir

gzip及bzip2压缩和解压

gzip 实例：压缩 gzip fileName .tar.gz 和.tgz  解压：gunzip filename.gz 或 gzip -d filename.gz
          对应：tar zcvf filename.tar.gz     tar zxvf filename.tar.gz

bz2实例：压缩 bzip2 -z filename .tar.bz2 	解压：bunzip filename.bz2或bzip -d filename.bz2
       对应：tar jcvf filename.tar.gz         解压：tar jxvf filename.tar.bz2

命令：

tar -cvf log.tar 1.log,2.log 或tar -cvf log.* 将文件全部打包成 tar 包

tar -zcvf /tmp/etc.tar.gz /etc 将 /etc 下的所有文件及目录打包到指定目录，并使用 gz 压缩

tar -ztvf /tmp/etc.tar.gz 查看刚打包的文件内容（一定加z，因为是使用 gzip 压缩的）

tar -zxvf etc.tar.gz -C /tmp/ 指定解压缩位置

用户和用户组管理

用户信息文件 /etc/passwd 查看所有用户信息

影子文件 /etc/shadow 查看哪些用户有密码

组信息文件 /etc/group 查看系统中有哪些用户组

1.添加用户

useradd 用户名

2.设置密码

passwd 用户名

千万千万千万要写用户名，不写用户名默认修改root密码

3.删除用户

userdel -r 用户名

-r 连带用户目录一起删除

4.添加组

groupadd 组名

5. 删除组

groupdel 组名

6. 把已经存在的用户加入到我们创建的组中

gpasswd -a 用户名组名 用户加入组中

gpasswd -d 用户名组名 把用户从组中拿出

7.切换用户身份

su 用户名

进程管理

主要三个功能

判断服务器是否健康
查看所有正在运行的进程
强制终止进程

**ps **命令用于显示当前进程的状态

参数：
-a：显示所有进程
-u：显示用户名
-x：显示所有后台进程
USER：用户名
PID：进程id
%CPU：cpu占用率百分比
%MEM：内存占用百分比
TIME：执行的时间
COMMAND：所执行的指令(进程本身)

命令：

ps aux 查看当前系统所有运行的进程（不需要 -） ps -ax 查看不与terminal有关的所有进程 ps -lA 查看系统所有的进程数据 ps axjf 查看联通一部分进程树状态

pstree 命令查看进程树

命令：

pstree -p 显示进程id

pstree -u 显示用户名称

pstree -apnh 显示进程间的关系

top 命令用于实时监控进程动态

命令：

top 显示进程信息

top -c 显示完整命令

top -b 以批处理模式显示程序信息

top -S 以累积模式显示程序信息

top -n 2 设置信息更新次数，更新两次后终止更新显示

top -d 3 设置信息更新时间，周期为3秒

top -p 139 显示指定的进程信息，显示进程号为139的进程信息，CPU、内存占用率等

top -n 10 显示更新十次后退出

进程管理，终止进程

kill 命令用于删除执行中的程序或工作

kill pid 结束单个进程

kill 12345 杀死进程

kill -9 123456 彻底杀死进程

kill 1727 删除副进程

kill 1726 删除主进程

刚才我们删除一个副进程主进程没有删除没有问题。

但是如果我们删除一个主进程name这个进程里面，所有副进程全部消失

pkill -9 进程名 结束一类进程

Vim 文本编辑器

Sun, 10 Nov 2019 00:00:00 +0000

Vim 有三种模式
{

	命令模式

	输入模式

	底线命令模式

}

启动vim,即进入了命令模式在当前状态下，输入字符，则被视为输入了一个命令，而并非真正的输入了字符

常用命令：

i：切换到输入模式，以输入字符

x：删除当前光标所在处的字符

: 切换到底线命令模式，以最低的一行输入命令

如果想要输入更多命令，则需要依靠底线命令模式

输入模式：

字符按键以及shift组合：输入字符

底线命令模式：

w：保存文件

q：退出

ESC 键：可以随时退出底线命令模式和输入模式

Vim/Vi 工作模式：

创建文件：

:vi text.txt / :vi 文件夹/文件名.后缀名

插入内容之后，先按Esc退出当前模式，先输入底线命令，保存文件。

:wq / :x 保存并退出

:q 退出，适用于未修改的文件

:q! 强制退出，适用于修改文件后不保存退出

打开文件：

:vi filename(文件名).

命令模式下：

h：光标向左移动一个字符(相当于左键)

j：光标向下移动一个字符(相当于下键)

k：光标向上移动一个字符(相当于上键)

l：光标向右移动一个字符(相当于右键)

ctrl+f：屏幕向下翻一页

ctrl+b：屏幕向上翻一页

ctrl+d：屏幕向下翻半页

ctrl+u：屏幕向上翻半页

+：光标移动到下一行的第一个非空字符

- ：光标移动到上一行的第一个非空字符

n空格：光标向当前行右移n个字符

0(数字0)：光标移动到当前行的第一个字符，可以为空字符

$：光标移动到当前行的最后一个字符，可以为空字符

H：光标移动到当前屏幕最上方那一行的第一个非空字符

M：光标移动到当前屏幕最中间那一行的第一个非空字符

L：光标移动到当前屏幕最下方那一行的第一个非空字符

G：光标移动到该文章最后一行的第一个非空字符

l word：在光标之后查找word字符串

? word：在光标之前查找word字符串

: s/word1/word2/g：在光标当前行查找word1，并替换成word2

: n1,n2 s/word1/word2/g：在第n1行与第n2行之间查找word1，并替换成word2

: % s/word1/word2/g：整个文章查找word1，并替换成word2

: w：保存

: w[filename]：将编写后的数据保存到硬盘的另一个文件中

: n1,n2 w[filename]：将n1到n2行的内容保存到名为filename的文件中

: r[filename]：编写数据时，读入另一个文件(filename)的数据，添加到光标所在行的下一行

: set nu：显示行号

: set nonu：取消行号

一般模式下的删除、复制、粘贴命令

x：向后删除一个字符(del键)

X：向前删除一个字符(退格键)

nx：向后删除n个字符

dd：删除当前行

V：删除当前行所有字符，保留行

ndd：删除光标所在行的向下n列(包括所在行)

dlG：删除光标所在行到第一行的所有数据

dG：删除光标所在行到最后一行的所有数据

yy：复制光标所在行

ylG：复制光标所在行到第一行的所有数据

yG：复制光标所在行到最后一行的所有数据

ynj：复制光标所在行向下n+1行

dnj：删除光标所在行向下n+1行

p：复制的数据粘贴在光标的下一行

J：将光标所在行与下一行的数据结合成一行

u：撤销

git 基础操作

Sat, 26 Oct 2019 00:00:00 +0000

git

在git的服务器上有项目仓库，现在把这个服务器上的仓库下载下来(本地)，那要用什么命令？

git clone 远程仓库地址

作用：克隆远程仓库到本地

克隆下来的仓库默认是master分支

不要在git管理的仓库里面下载另外一个仓库进来，这个要尽量避免不要出现

执行命令的时候没有error或者fatal就是没问题

本地工作区直接直接gitcommit 能不能提交到本地历史记录区（不可以的）

建议大家在直接提交的命令的时候，先执行git status

git commit 会遇到的问题：

配置config

git config –global user.email ”登录邮箱”

git config –global user.name ”提交记录的用户名”

分支名称后面有 MERGING,代表现在的分支处于冲突状态下

git 基础操作

git status: 查看仓库的文件的状态

git add . : 把工作区的全部改变的文件提交到暂存区里面去

git commit -m ‘说明’：把暂存区里面的修改提交到本地历史记录区

git push -u origin 分支名称(默认master)：把本地历史记录区的提交记录（多个提交记录）提交（同步）到远程仓库上

git 远程仓库地址的添加删除操作

git remote -v: 查看远程地址

git remote remove origin：删除本地项目的远程仓库地址

git remote add origin ssh地址：在本地项目的远程仓库地址列表里面添加一个origin的地址

git 分支操作(master)

git branch：查看当前所在分支(本地分支)

git branch -a : 查看所有分支信息

git branch 分支名称：创建分支

git branch -d 分支名称：删除本地分支

git push origin –delete 分支名称：删除远程分支

git branch 分支名称 HEAD@{number}：恢复删除分支

git fetch：同步远程仓库的分支信息到本地项目

git pull：同步远程仓库的代码到本地项目

git checkout 分支名称：切换当前所在分支

git checkout -b 分支名称：创建分支并且切换到新分支上

git merge 分支名称：合并分支

git push -u origin 分支名称：提交分支到远程仓库

为什么要有分支？团队开发中需要用到，一般开发整个大的功能模块，会分配任务给组内的开发人员，每个人负责的内容是不一样，整个组合在一起的代码就是这个大的功能模块。组内开发的时候就需要用到分支区分每个人的功能，master：生产（线上）环境的代码，beta：新版本功能内测的代码，产品经理，内部人员验收功能用的，dev：当前开发中的代码如我现在负责登录模块，那么我就在dev分支的基础上开一个新的分支出来，git checkout -b login,每完成一部分小功能，建议大家commit一次（粒度很小的提交记录），push操作可以在下班前就可以了

git merge 需要合并的分支名称：当前所在的分支合并需要合并的分支

制造冲突，两个分支修改同一个文件上的同一行，内容不一样，并且都有commit操作（commit操作前要记得add）

解决冲突，找到命令行上面CONFLICT（可能会有多行，也就是多个文件出现冲突），后面跟着的就是出现冲突的文件路径，然后分析并且修改代码，之后执行git add . 和 git commit -m 'xxxx'这个时候再来看分支名称上是否没有了|MERGING这个标志，没有代表解决冲突完成，有代表还是没有解决冲突

git fetch 和 git pull：因为一个项目是团队开发的，如果本地不存在的分支git fetch，如果本地已经存在分支，远程仓库分支比本地要新，这个时候就用git pull origin 分支名称。重点：也可以理解为，pull就是同步远程代码，fetch就是同步远程分支，如果远程仓库新建分支，用fetch同步。

git merge最简洁用法

一、开发分支（dev）上的代码达到上线的标准后，要合并到 master 分支

git checkout dev
git pull
git checkout master
git merge dev
git push -u origin master

二、当master代码改动了，需要更新开发分支（dev）上的代码

git checkout master
git pull 
git checkout dev
git merge master 
git push -u origin dev

重点

status：状态
add：提交到暂存区
push：同步提交
origin：远程
master(可以创建不同名称的分支,不一定是master)：分支
remote：远程地址
branch：分支
checkout：切换
merge：合并
pull：拉取

切换分支时 VScode所打开的对应项目文件，git命令切换完，文件也会随之切换

丁永辉

Vue 路由传递参数

有两种方式：

一、用name传递参数

二、通过 标签中的to传参

vue-router 利用url传递参数 :冒号的形式传递参数

npm

npm 常用命令

解决 npm 被墙问题

Linux 常用命令

界面提示说明

常见目录说明

常用快捷键命令

基本操作

操作命令

目录，文件【增，删，改，查】

压缩与解压文件

用户和用户组管理

进程管理

Vim 文本编辑器

常用命令：

Vim/Vi 工作模式：

创建文件：

打开文件：

命令模式下：

一般模式下的删除、复制、粘贴命令

git 基础操作

git

git 基础操作

git 远程仓库地址的添加删除操作

git 分支操作(master)

git merge最简洁用法

一、开发分支（dev）上的代码达到上线的标准后，要合并到 master 分支

二、当master代码改动了，需要更新开发分支（dev）上的代码

二、通过标签中的to传参