OpenGL学习之路(二)

1 引子

在上一篇读书笔记中,我们对书本中给出的例子进行详细的分析。首先是搭出一个框架;然后填充初始化函数,在初始化函数中向OpenGL提供顶点信息(缓冲区对象)和顶点属性信息(顶点数组对象),并启用顶点数组对象;最后填充绘制函数,首先清空颜色缓存,然后调用glDrawArray来绘制基本图形。例子中使用的坐标都是二维坐标,所以画出来的图形是二维图形(这里是两个三角形),而我们知道OpenGL最主要是用来进行三维图形的渲染的,所以有必要在学习OpenGL相关API之前对三维变换做一个简要的介绍。其实这一部分应该属于红宝书中第五章的内容,这里我们将其提前了,在读书笔记(二)就拿出来介绍——这是我们三维渲染的最基本的知识点,也是最关键的知识点,理解起来也有一定的难度。本次读书笔记主要讲述平移、旋转、缩放变换的变换矩阵,投影变换将在下一篇读书笔记再做记录。本篇读书笔记主要是自己对一些数学概念的理解和记录,仅供参考,如有不同理解的,大家可以一起讨论哈!

2  点、坐标系与向量

讨论三维变换之前,得先了解点、向量和坐标系这些基本数学概念。这部分内容可能比较抽象,下面记录的是我对这些概念的一些理解。

2.1 位置的相对性

在日常生活中,我们在向别人描述一个陌生的地方的时候,通常会选择一个他熟悉的地方作为一个参考点。例如:我们向老外介绍河北的一座古城邯郸,老外知道北京,我们就会说邯郸在北京往西南走300km;如果老外知道石家庄,那我们也可以告诉他,邯郸在石家庄往南走100km。这说明,位置是一个相对的概念,要描述一个位置,首先要选择参考点;参考点的选择是任意的,所选取的参考点不同,位置的描述也就不同。

在几何中,位置用“点”这一概念来描述,即点是一个只有位置没有大小的量。描述一个点和描述一个位置是一回事,刚才已经说了位置是一个相对的概念,所以首先就要用到参考点。我们以最简单的一维数轴为例来说明描述点的位置,如下图所示:

对于数轴上同一点$A$,要描述$A$点的位置,先要选取任意一个参考点,如果选择的参考点是$O_1$,则$A$点在$O_1$点右边$l_1$的地方;如果选择的参考点是$O_2$,则$A$点在$O_2$点左边$l_2$的地方。通过数轴和参考点,我们就将数轴上的几何点用抽象的数字表达出来了。

2.2 坐标系与向量

从图上可以看出,数轴上的点只能沿着数轴方向进行变化,即它是一维的。如果点在一个平面上或一个空间中变化,那么数轴这一工具是无法描述的。这时就要引入二维坐标系和三维坐标系来描述点的位置。介绍坐标系之前,首先介绍一下向量的概念。

在我们还是十七八岁学习高一几何的时候,我们就已经接触到了向量——既有大小,又有方向的量,用一个有向线段来表示。说白了,向量定义了一个方向、一个长度和一个单位长度。如上图中,$O_1A$和$AO_2$就是两个向量,大小分别为$l_1$和$l_2$,方向为水平向右。

一个平面上,有无数这样的向量。但是关于向量,有一个非常重要的法则——使用平行四边形法则来对任何一个向量进行分解。平行四边形法则来自于物理学中力的分解与合成,后被引入数学中加以抽象来描述向量的分解与合成。所谓平行四边形法则,指的是任何一个平面向量都可以用一个不共线的两个向量表示。于是,平面中无数的向量就可以用两个不共线的向量来表示。由这两个向量及它们的公共起点构成的数学结构就是二维坐标系,用坐标系就可以描述二维平面上的任意点,当然也可以描述二维平面上的任意向量,这两个向量就是线性代数中的基向量。我们知道,在数学中,向量是位置无关的(即自由向量),只要大小相等,方向相同的两个向量就是同一个向量(这和物理学中的力不一样)。所以要描述二维空间中的点,还需要一个参考点,于是就定义了这两个向量的公共起点作为参考点——即我们熟知的坐标原点。坐标轴向量和坐标原点就构成了坐标系,可以用坐标系来描述其中的任何向量和任一点。

三维坐标系和二维坐标系是类似的,使用两次平行四边形法则,从而将任意一个三维向量表示为三个不共面的三维向量(基向量)来表示,这三个向量移到一起的公共起点定义为三维坐标系的坐标原点。二维和三维笛卡尔坐标系就是基向量垂直的二维和三维坐标系,也是应用最为广泛的坐标系,也称为平面直角坐标系空间直角坐标系

下面,我们来看看向量的表示方法。同样在我们懵懵懂懂的青春岁月里,我们就已经知道向量有两种表示方法:第一种是符号表示法,如$\mathbf{a}, \mathbf{b}$等;另一种是坐标表示法,这里对坐标表示做较详细的说明。刚才已经说了,任意一个二维向量都可以用两个不共线的向量来表示,假设两个基向量为$\mathbf{i}$和$\mathbf{j}$,且长度为1。则对任一个向量$\mathbf{a}=x_a\mathbf{i} + y_a\mathbf{j}$,这样,向量$\mathbf{a}$可用一个有序对$(x_a, y_a)$来唯一表示,这就是向量的坐标表示。三维乃至$N$维向量的坐标表示都是一样的。在这里,博主还是想强调一下,向量的坐标并不是该向量在坐标轴上的投影,只有笛卡尔坐标是向量在基向量上的投影。所以,在普通坐标系下,一个向量的坐标不是很好求,但在直角坐标系下,就变得很好求了——求投影,这也是笛卡尔坐标系应用的如此广泛的原因。下面我们来看看,什么是投影,其实高一数学中也已经接触到了,如下图所示:

假设$c$为向量$\mathbf{a}$在向量$\mathbf{b}$上的投影,那么:

\begin{equation} c = \mathbf{a} \cos<\mathbf{a}, \mathbf{b}>\end{equation}

所以,在二维直角坐标系中,如果二维向量$\mathbf{a}$长度为$l$,该向量与$x$轴和$y$轴的夹角分别为$\alpha$和$\beta$,则我们很容易得到该向量的坐标表示为$\mathbf = (l\cos\alpha, l\cos\beta)^\text{T}$;同样地,对三维空间向量$\mathbf{b}$,其长度为$L$,与$x$轴、$y$轴和$z$轴的夹角分别为$\alpha$、$\beta$和$\gamma$,则其坐标表示为$\mathbf{b}=(L\cos\alpha, L\cos\beta, L\cos\gamma)^\text{T}$。

2.3 点的表示

刚才我们定义了坐标系——坐标原点和三个不共面的向量组成,并且三维空间中的任意向量都可以由这三个向量唯一表示,但我们没有讲点怎么由坐标系来定义。设在三维笛卡尔坐标系中,坐标原点为$O$,三个基向量分别为$\mathbf{i}$,$\mathbf{j}$,$\mathbf{k}$,我们要求$P$点的坐标,那么

$$\vec{OP} = x_{1}\mathbf{i} + y_{1}\mathbf{j} + z_{1}\mathbf{k}$$

于是,点$P$可以表示为

$$P = x_{1}\mathbf{i} + y_{1}\mathbf{j} + z_{1}\mathbf{k} + \mathbf{O}$$

所以,要想表示一个三维的点,可以用四维坐标来表示,例如刚才的$P$可以表示为$P = (\begin{array}{cccc} x_1 & y_1 & z_1 & 1\end{array})$,这就是齐次坐标。对顶点来说,齐次坐标才是其真正的表示方式。向量可以表示为$\mathbf{v} = (\begin{array}{cccc} x_1 & y_1 & z_1 & 0\end{array})$。

3 线性变换与齐次坐标

3.1 概述

代数中的线性变换的概念很抽象,涉及到向量空间、线性映射之类的概念,在这里不做过多解释,如下想了解可以度娘或必应。给一个通俗点的解释,三维线性变换就是将点/向量的坐标值做一个运算,使其坐标值发生改变,这在几何中的反映就是几何体的形状被改变了。在计算机图形学中,线性变换一般是指平移、旋转、缩放、投影(正交投影和透视投影)以及这些基本变换的综合运算。通过刚才的描述,我们知道一下几点信息:几何中的点或向量由四个坐标值确定,而坐标值是由坐标系确定的,坐标系又是由三个不共面的向量和坐标原点构成。也就是说,对于同一点,在不同的坐标系下,描述它的坐标值是不一样的,而变换就是建立这两种不同描述之间的联系——所以在以前我们称之为坐标变换。例如:在坐标系$\mathbf{O}_1-\mathbf{i}_1\mathbf{j}_1\mathbf{k}_1$坐标系下,某一点可以描述为$P$点可以用四元祖$(x_1, y_1, z_1, o_1)$描述,

\begin{equation}\label{p2}P = \begin{array}{cccc} (x_1 & y_1 & z_1 & o_1)\end{array}\left(\begin{array}{c}\mathbf{i}_1 \\ \mathbf{j}_1 \\ \mathbf{k}_1 \\ \mathbf{O}_1\end{array}\right) = (\begin{array}{cccc} \mathbf{i}_1 & \mathbf{j}_1 & \mathbf{k}_1 & \mathbf{o_1}\end{array})\left(\begin{array}{c}x_1 \\ y_1 \\ z_1 \\ o_1 \end{array}\right)\end{equation}

在另一个坐标系为$\mathbf{O}_2-\mathbf{i}_2\mathbf{j}_2\mathbf{k}_2$,可以用另一个有序元组描述它,设为$(x_2, y_2, z_2, o_2)$

\begin{equation}\label{p1}P = \begin{array}{cccc} (x_2 & y_2 & z_2 & o_2)\end{array}\left(\begin{array}{c}\mathbf{i}_2 \\ \mathbf{j}_2 \\ \mathbf{k}_2 \\ \mathbf{O}_2\end{array}\right) = (\begin{array}{cccc} \mathbf{i}_2 & \mathbf{j}_2 & \mathbf{k}_2 & \mathbf{O_2}\end{array})\left(\begin{array}{c}x_2 \\ y_2 \\ z_2 \\ o_2 \end{array}\right)\end{equation}

那么怎么建立$(\ref{p1})$和$(\ref{p2})$之间的联系呢?还是之前我们说的,任意一个三维向量都可以表示用三个不共面的向量表示,所以$\mathbf{i}_2, \mathbf{j}_2, \mathbf{k}_2$可以用$\mathbf{i}_1, \mathbf{j}_1, \mathbf{k}_1$线性表出:

$$\mathbf{i}_2 = T_{11} \mathbf{i}_1 + T_{21} \mathbf{j}_1 + T_{31} \mathbf{k}_1 + 0 \mathbf{O}_1$$

$$\mathbf{j}_2 = T_{12} \mathbf{i}_1 + T_{22} \mathbf{j}_1 + T_{32} \mathbf{k}_1 + 0 \mathbf{O}_1$$

$$\mathbf{k}_2 = T_{13} \mathbf{i}_1 + T_{23} \mathbf{j}_1 + T_{33} \mathbf{k}_1 + 0 \mathbf{O}_1$$

$$\mathbf{O}_2 = T_{14} \mathbf{i}_1 + T_{24} \mathbf{j}_1 + T_{34} \mathbf{k}_1 + T_{44} \mathbf{O}_1$$

 即:

$$(\begin{array}{cccc}\mathbf{i}_2 & \mathbf{j}_2 & \mathbf{k}_2 & \mathbf{O}_2 \end{array}) = (\begin{array}{cccc}\mathbf{i}_1 & \mathbf{j}_1 & \mathbf{k}_1 & \mathbf{O}_1 \end{array})\left(\begin{array}{cccc}T_{11} & T_{12} & T_{13} & T_{14} \\T_{21} & T_{22} & T_{23} & T_{24}\\T_{31} & T_{32} & T_{33} & T_{34}\\0 & 0 &0& T_{44}\end{array}\right)$$

于是,我们就可以写出从$(\begin{array}{cccc}x_1 & y_1 & z_1 & o_1 \end{array})^{\text{T}}$变换到$(\begin{array}{cccc}x_2 & y_2 & z_2 & o_2 \end{array})^{\text{T}}$的变换表达式为:

$$\left(\begin{array}{c}x_2 \\ y_2 \\ z_2 \\ o_2 \end{array}\right) = (\begin{array}{cccc}\mathbf{i}_1 & \mathbf{j}_1 & \mathbf{k}_1 & \mathbf{O}_1 \end{array})\left(\begin{array}{cccc}T_{11} & T_{12} & T_{13} & T_{14} \\T_{21} & T_{22} & T_{23} & T_{24}\\T_{31} & T_{32} & T_{33} & T_{34}\\0.0 & 0.0 &0.0& T_{44}\end{array}\right)\left(\begin{array}{c}x_1 \\ y_1 \\ z_1 \\ o_1 \end{array}\right) $$

其中,将

$$T=\left(\begin{array}{cccc}T_{11} & T_{12} & T_{13} & T_{14} \\T_{21} & T_{22} & T_{23} & T_{24}\\T_{31} & T_{32} & T_{33} & T_{34}\\0.0 & 0.0 &0.0& T_{44}\end{array}\right)$$

称为坐标变换矩阵。接下来主要就是讲解怎么求基本的坐标变换(仿射变换)矩阵。

3.2 缩放

缩放应该是所有线性变换中最简单的变换了。执行缩放操作,例如将一个向量缩放为原来的$s$倍,相当于原点不变,$x$、$y$、$z$三个坐标轴缩放为原来的$s$倍。根据3.1介绍的,缩放操作的变换矩阵为:

$$T_s = \left(\begin{array}{cccc}s & 0 & 0 & 0 \\ 0 & s & 0 & 0 \\ 0 & 0 & s & 0 \\ 0 & 0 & 0 & 1\end{array}\right)$$

3.3 平移

所谓平移,就是在坐标系中的三个坐标轴保持不变,原点沿着平移向量移动到新位置。假设平移向量为$v_p = (\begin{array}{cccc}x_p & y_p & z_p & 0 \end{array})$同样,根据可以得到,平移操作的变换矩阵为:

$$T_p = \left(\begin{array}{cccc}1 & 0 & 0 & x_p \\ 0 & 1 & 0 & y_p \\ 0 & 0 & 1 & z_p \\ 0 & 0 & 0 & 1\end{array}\right)$$

3.4 旋转

最后来推导最难的旋转变换矩阵。与平移、旋转矩阵的不同,旋转矩阵就不那么直观了。下面,我们来具体看一下旋转矩阵的推导,这个推导是执行三次向量的平行四边形法则进行分解得到,整个分解过程如下图所示:

三次分解由不同的颜色表示出来了,分别是红色、浅蓝色和紫色。

已知条件:$\mathbf{i}$、$\mathbf{j}$和$\mathbf{k}$是三维笛卡尔坐标系的基向量,原点为$O$,旋转轴为$\mathbf{u}$,也是单位向量,向量$\mathbf{i'}$为$x$方向的基向量$\mathbf{i}$绕旋转轴$\mathbf{u}$旋转$\theta$后的新向量——旋转后坐标系$x$轴的基向量。

我们的目的:将向量$\mathbf{i'}$用基向量$\mathbf{i}$、$\mathbf{j}$和$\mathbf{k}$表示出来。

第一步向量分解:将$\mathbf{i'}$分解为沿着旋转轴$\mathbf{u}$的向量$\vec{OA}$和垂直于$\mathbf{u}$的向量$\vec{OB}$,则:

\begin{equation}\label{341}\mathbf{i'} = \vec{OA} + \vec{OB}\end{equation}

且:

\begin{equation}\label{342}\vec{OA} = u_x \mathbf{u} = u_x^2\mathbf{i} + u_xu_y\mathbf{j} + u_xu_z\mathbf{k}\end{equation}

第二步向量分解:将$\mathbf{i}$分解为沿着旋转轴$\mathbf{u}$的向量$\vec{OA}$和垂直于$\mathbf{u}$的向量$\vec{OC}$,则

$$\mathbf{i} = \vec{OA} + \vec{OC}$$

且:

\begin{equation}\label{344}\vec{OC} = \mathbf{i} - u_x\mathbf{u} = (1-u_x^2)\mathbf{i} - u_xu_y\mathbf{j} - u_xu_z\mathbf{k} \end{equation}

第三步向量分解:建立$\vec{OB}$与$\vec{OC}$之间的联系,将向量$\vec{OB}$分解为沿着$\vec{OC}$方向的向量$\vec{OD}$和垂直于$\vec{OB}$的向量$\vec{OE}$,则

\begin{equation}\label{345}\vec{OB} = \vec{OD} + \vec{OE}\end{equation}

根据$\ref{344}$可得:

\begin{equation}\label{346}\vec{OD} = |\vec{OB}|\cos\theta\frac{\vec{OC}}{|\vec{OC}|} = \cos\theta \vec{OC} = \cos\theta(\mathbf{i} - u_x\mathbf{u}) = (1-u_x^2)\cos\theta \mathbf{i} - u_xu_y\cos\theta \mathbf{j} -u_xu_z\cos\theta \mathbf{k} \end{equation}

另外,注意到$\vec{OE}$和$\vec{OC}$垂直,$\mathbf{u}$是旋转轴,则$\mathbf{u}$与平面$OEBD$垂直,所以$\mathbf{u}$与$OE$垂直,则$\vec{OE}$在向量$\mathbf{u}$和向量$\vec{OC}$的叉乘向量上,假设 $\vec{OF} = \mathbf{u} \times \vec{OC}$,于是:

$$\vec{OE} = k\vec{OF} = k\mathbf{u}\times \vec{OC}=k\mathbf{u}\times (\mathbf{i} - u_x\mathbf{u}) = k \mathbf{u}\times \mathbf{i}$$

所以现在求出$k$就可以了,由叉乘定义:$|\vec{OF}| = |\mathbf{u}||\vec{OC}|sin(90) = |\vec{OC}| = |\vec{OB}|$,所以:$k=\sin\theta$,最后得到

\begin{equation}\label{349}\vec{OE}=\sin\theta \mathbf{u}\times (\mathbf{i} - u_x\mathbf{u}) = \sin\theta \left(\begin{array} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ u_x & u_y & u_z \\ 1 & 0 & 0 \end{array}\right) =  u_z\sin\theta\mathbf{j} -u_y\sin\theta\mathbf{k}\end{equation}

将$(\ref{346})$和$(\ref{349})$代入$(\ref{345})$得:

\begin{equation}\label{3410}\vec{OB} = (1-u_x^2)\cos\theta\mathbf{i} - (u_xu_y\cos\theta - u_z\sin\theta)\mathbf{j} - (u_xu_z\cos\theta + u_y\sin\theta)\mathbf{k} \end{equation}

最后,将$(\ref{342})$和$(\ref{3410})$代入$(\ref{341})$可得

$$\mathbf{i'} = (\cos\theta + u_x^2(1-\cos\theta))\mathbf{i} + (u_xu_y(1-cos\theta) + u_z\sin\theta)\mathbf{j} + (u_xu_z(1-\cos\theta) - u_y\sin\theta)\mathbf{k} + 0\mathbf{O}$$

其余两个变换后的基向量$\mathbf{i'}$和$\mathbf{j'}$也可以由$\mathbf{i}$、$\mathbf{j}$和$\mathbf{k}$表示出来,最终得到齐次旋转矩阵为

$$M_r = \left(\begin{array}{cccc}\cos\theta+u_x^2(1-\cos\theta)& u_xu_y(1-\cos\theta)-u_z\sin\theta & u_xu_z(1-\cos\theta+u_y\sin\theta & 0 \\ u_yu_x(1-\cos\theta)+u_z\sin\theta & \cos\theta+u_y^2(1-\cos\theta) & u_yu_z(1-\cos\theta)-u_x\sin\theta & 0 \\ u_zu_x(1-\cos\theta)-u_y\sin\theta & u_zu_y(1-\cos\theta)+u_x\sin\theta & \cos\theta+u_z^2(1-\cos\theta) & 0 \\ 0 & 0 & 0 & 1\end{array}\right)$$

4 总结

最后总结一下,在这篇博文中我们讲述了点及其相对性,接着介绍了向量的概念,由平行四边形法则引出坐标系的概念,然后介绍了点在坐标系下的表示,最后介绍了坐标变换和变换矩阵的概念,给出了三种基本变换——平移变换、旋转变换和缩放变换的变换矩阵。这些矩阵综合运用,就构成了三维空间中复杂的变换了,三维变换是三维图形绘制的基础,也是学习OpenGL时较难理解的知识点之一。

转载于:https://www.cnblogs.com/lijihong/p/5396819.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418641.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1881)vue之电商管理系统电商系统之双层for循环渲染数据

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

iOS之本地推送通知使用介绍

推送通知作用&#xff1a;可以让不在前台运行的app,告知用户app内部发生了什么事情 如何发送本地通知&#xff1a; 发送本地通知步骤&#xff1a; 1.创建本地通知对象 2.设置本地通知内容 3.调度本地通知 具体实现代码&#xff1a; 注意&#xff1a;iOS7通过上述代码可以完成发…

前端学习(1882)vue之电商管理系统电商系统之设置字体颜色并添加标签

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

前端学习(1883)vue之电商管理系统电商系统之每次只能打开一个菜单项并解决边框问题

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

第一次冲刺阶段(三)

今天下午我们团队进行了第三次站立会议&#xff0c;总结了昨天的进展状况&#xff0c;的的确确出现很多问题&#xff0c;进展微乎其微&#xff0c;我们对安卓开发知识不熟悉&#xff0c;导致我们举步维艰&#xff0c;很考验耐性与团队的协作能力&#xff0c;我们必须坚持下去&a…

前端学习(1884)vue之电商管理系统电商系统之实现侧边栏的折叠和展开

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

前端学习(1885)vue之电商管理系统电商系统之首页路由的重定向

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1886)vue之电商管理系统电商系统之首页路由的重定向主页侧边栏路由链接的改造

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

Android adb logcat使用技巧

前言 新买的笔记本E431装了最新版的Eclipse&#xff0c;搞定了Android开发环境&#xff0c;可是logcat里查看东西居然仅仅显示level&#xff0c;没有错误的具体信息。我本身也不是一个愿意折腾图形界面&#xff0c;更喜欢纯命令行的操作&#xff0c;因此今天在明昊师兄的建议下…

前端学习(1887)vue之电商管理系统电商系统之通过路由的形式显示用户列表

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1888)vue之电商管理系统电商系统之在sessionStrorage中保存按钮的激活状态

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1889)vue之电商管理系统电商系统之绘制用户列表组件的基本布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1890)vue之电商管理系统电商系统之绘获取用户列表数据

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1891)vue之电商管理系统电商系统之el-table渲染表格

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

20145302张薇《Java程序设计》实验三报告

20145302张薇《Java程序设计》实验三&#xff1a;敏捷开发与XP实践 实验内容 使用git上传代码使用git实现代码开发实践实现代码的重载 使用git上传代码 git initgit add .git commit -m "注释"git push origin master出现error&#xff1a;fetch-first解决办法&#…

前端学习(1892)vue之电商管理系统电商系统之为表格添加索引列

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

install kinect driver for ARM---38

原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ The video describes connecting a Microsoft Kinect to the NVIDIA Jetson TK1 Development Kit. The Kinect provides 3D depth information about a scene. This is commonly referred to as a RGBD device bec…

前端学习(1893)vue之电商管理系统电商系统之自定义状态列的效果

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

tomcat学习笔记1

tomcat是一个开源软件&#xff0c;是由java语言编写的&#xff0c;它工作的话需要运行在jvm虚拟机中&#xff0c;说到jvm不得不说下java这个大名鼎鼎的编程 语言了 java这个编程语言最优秀的特点要数write once , run anywhere 额&#xff01;怎么听起来有点流氓的感觉 没错&…

前端学习(1894)vue之电商管理系统电商系统之通过作用域插槽操作列

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…