Wikp~-CSDN博客

原创 05_MVVM模型

简述MVVMMVVM模型在Vue中的体现，大致是如下的对应关系：M：模型（Model）：对应data中的数据V：视图（View）：模板VM：视图模型（ViewModel）：Vue实例对象放到实际的代码中，大致就是如下关系：总结MVVM模型1.M:模型(Model) : data中的数据。2.V:视图(View) : 模板代码。3.VM:视图模型(ViewModel) : Vue实例。观察发现:1.data中所有的属性,最后都出现在了vm身上。2.vm身上所有的属性及 Vue

2022-02-24 15:30:17 546

原创 04_el与data的两种写法

我们之前常见的 el 和 data 书写方法是运用如下方式来与容器进行关联的：但是其实 el 还有另外一种写法，这两者是可以视情况选择的，如下图：同样的， data 实际上也有另外一种写法，之前我们使用的data写法其实是一种对象式写法，然而data其实还有一种写法，叫做函数式写法，这种写法在之后组件的学习中会非常常用：其中这个function并不是data调用的，而是Vue帮忙调用的，因此如果我们输出this的话会输出Vue的实例对象。当然，写function毕竟还是比较麻烦的，我们一般写的

2022-02-24 10:59:19 569

原创 03_数据绑定

日常小技巧/注意项记录换行：前言我们在之前其实就已经利用 “ v-bind ” 做过了数据绑定的操作：但是今天的数据绑定和之前 v-bind 的绑定还是有所不同的，会比它更加的高级。单向数据绑定之前我们所使用的利用 v-bind 进行数据绑定的方式其实就是单向数据绑定，这也是利用 v-bind 进行绑定的特点之一。<div id="root"> 单向数据绑定:<input type="text" v-bind:value="name"><br

2022-02-23 00:39:27 155

原创 02_Vue模板语法

日常小技巧记录分隔线：Vue模板语法的两大类插值语法 —— {{}}指令语法插值语法插值语法上一节就用过，大致的形式如下，在容器中是由双大括号展现的：模板语法

2022-02-21 17:09:36 375

原创 Vue中值得注意的几个小细节①

这里会记录一些Vue学习中的小知识点：Vue实例和容器只能是一一对应的，不存在多对一或者一对多的情况，否则会出现报错。现在刚接触用的都是比较基础的vue用法，当之后数据量大了之后，例如容器中存在上百个动态数据，可以使用组件来为vue分流。注意区分：js表达式和js代码（语句），插入语法“ {{}} ”中只能存放js表达式。①表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：（1）a —— 变量（2）a+b —— 运算表达式（3）demo(1) —— 函数调用表达式（4）x

2022-02-08 13:48:13 191

原创 01_hello案例

实用快捷键① " ！+ tab " 调用html主题结构。② " div # id + tab " 可以直接出现带指定id的div结构。

2022-02-06 08:30:50 90

原创开始前的准备，Vue环境配置

Vue的安装方式：直接用script引入（推荐）。运用NPM和命令行工具来搭配引入。引入Vue如图新建文件，并在指定位置中引入下载的js包：在html文件中引入vue：  <script type="text/javascript" src="../js/vue.js"></script>成功引入后我们可以打开该html对应的页面，并按f12在Console中看到如下的反馈：下载Vue的开发者工具

2022-01-18 16:31:35 7930

原创 Vue基础概念

Vue的特点采用组件化模式，提高代码复用率、且让代码可以更好的维护。声明式编码，让编程人员无需直接操作DOM，进而提高代码的开发效率。使用了虚拟DOM+Diff算法，从而尽可能的复用DOM节点。示例如下：Vue官网一些值得留意的模块“API” —— 遇到不会的方法可以在这里面查询。“Cookbook” —— 官方推荐的一些不错的小技巧。“工具” 和 “核心插件” ——后期进一步学习所需要留意的，例如“ ‘Vue CLI’ ：脚手架的使用 ” 等。“Awesome Vue”、“浏览和

2022-01-17 18:59:02 484

原创 Android 连接数据库实现登录注册功能（SQLite）

SQLite Home Page - SQLite 官方网站提供了最新的 SQLite 安装版本，最新的 SQLite 资讯以及完整的 SQLite 教程。PHP SQLite3 - 网站提供了 SQLite 3 数据库的 PHP 支持的完整细节。SQLite JDBC Driver: - SQLite JDBC，由 Taro L. Saito 开发的，是一个用于 Java 中访问和创建 SQLite 数据库文件的库。DBD-SQLite-0.31 - SQLite Perl driver 驱动

2021-10-29 02:01:50 13665 8

原创简单了解JSON Web Token（JWT）

JWT是什么JWT即JSON Web Token，它是一个非常轻巧的规范，它可以允许我们在用户和服务器之间传递安全可靠的信息。它的实质其实就是一个字符串，由头部（Header）、载荷（Payload）与签名（Signature）三部分组成。其中：Header的作用是描述JWT的最基本的信息，例如：类型、签名的算法；Payload中则是存放着用户的信息或者是想要返回给用户的内容，是一个装载信息的容器；Signature其实就是一个对信息进行加密的一个过程，在其中我们还需要提供一个key来作为密钥，从

2021-09-14 23:44:37 148

原创登录接口②（生成token——jsonwebtoken模块的应用）

模块的安装和导入想要生成token，首先要用到jsonwebtoken这个模块:cnpm i jsonwebtoken --save安装好这个模块后，接下来就是我们的老规矩，引入模块const jwt= require('jsonwebtoken');生成token这里首先我用payload来定义验证成功后我们生成给用户的token的数据内容，像此处就是定义了返回内容为user的id，name以及avatar（头像）；token里面我用了jsonwebtoken的一个expiresIn的方

2021-09-13 20:33:43 508

原创 OpenGL：应用纹理的四个步骤以及纹理坐标的几何变换

（1）创建纹理对象，并为它装载一个纹理• glGenTextures(1, &texName);• glBindTexture(GL_TEXTURE_2D,texName);• void glTexImage2D(GLenum target,GLint level,GLint components,GLsizei width, glsizei height,GLint border, GLenum format,GLenumtype, const GLvoid *pixels);程序的

2021-06-25 01:55:50 685

原创 OpenGL：三维几何变换

OpenGL平移glTranslatef( Tx , Ty , Tz )OpenGL—旋转绕x轴旋转：glRotatef( degree, 1, 0, 0 );绕y轴旋转：glRotatef( degree, 0, 1, 0 );绕z轴旋转：glRotatef( degree, 0, 0, 1 );绕任意轴旋转：以下是原理解析：//Rotate deg degree along the axis that passes through// (x1, y1, z1) and (

2021-06-24 19:08:15 964

原创 OpenGL：glPushMatrix()；和glPopMatrix()；的作用及其原理分析

今天做到一道题，大致就是问glPushMatrix();和glPopMatrix();存在会对图形绘制造成什么影响，为了能够清晰的反应到底会存在什么影响，我特地写了两行代码：代码①：void draw1(){ //glClear(GL_COLOR_BUFFER_BIT); //注释掉为了能反映每次循环三角形的位置 glBegin(GL_POLYGON); // 多边形 glColor3f(0.0, 0.0, 1.0); glVertex2f(0.05, -0.65); glVertex

2021-06-24 13:17:10 3625 1

原创 OpenGL：二维几何变换②

使用通用基准点通用基准点旋转也就是设置图形围绕某一点旋转。实例：void draw1(){ glBegin(GL_POLYGON); // 多边形 glColor3f(1.0, 1.0, 1.0); glVertex3f(-0.5, -0.5, 0); glColor3f(1.0, 0, 0); glVertex3f(-0.5, 0.5, 0); glColor3f(0, 0, 1.0); glVertex3f(0.5, 0.5, 0); glColor3f(0, 1.0, 0); g

2021-06-22 20:59:50 765

原创 OpenGL：二维几何变换①

图形变换的基本原理①变换图形就是要变换图形的几何关系，即改变顶点的坐标；②保持图形的原拓扑关系不变（各个点的连接方式）仿射变换图形的仿射变换遵循两点：1、“平直性”：即直线经过变换后依旧还是直线。2、“平行性”：二维图形之间的相对位置关系保持不变，平行线依然是平行线，且直线上点的位置顺序不变。点、直线、多边形变换的原理T是指二维变换矩阵二维几何变换函数平移glTranslatef( Tx, Ty, Tz,);实例：void draw1(){ glBegin(GL_POLY

2021-06-22 15:17:39 928 2

原创 OpenGL：着色模型(平滑方式和单色方式)

这次学习以之前写过的渐变色正方形为例：void display(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); // 多边形 glColor3f(1.0,1.0,1.0); glVertex3f(-0.5,-0.5,0); glColor3f(1.0,0,0); glVertex3f(-0.5,0.5,0); glColor3f(0,0,1.0); glVertex3f(0.5,0.5,0); glColor3f(0,1.0,0)

2021-06-22 03:01:05 1098

原创 OpenGL：点属性函数，线属性函数

点属性函数点的默认大小为1像素void glPointSize(GLfloat size)void Display( ){glClear(GL_COLOR_BUFFER_BIT);glPointSize(5.0); //将点的大小设置为5像素glBegin(GL_POINTS);glVertex2f(0.0, 0.0);glVertex2f(0.5, 0.5);glEnd();glFlush();线属性函数线宽函数Void glLineWidth(GLfloat widt

2021-06-22 02:26:08 360

原创 OpenGL：颜色索引模式的使用方式

在OpenGL中，颜色索引模式是不同于RGBA颜色模式的，在这个模式中，数据代表的是一个索引，要得到真正的颜色，还需要去查询索引表。表达式为：glutInitDisplayMode(GLUT_SINGLE|GLUT_INDES) //索引模式使用方法：（1）选择颜色使用gllndex*系列函数可以在颜色表中选择颜色，其中运用最多的是：void glIndexi(GLint c);（2）设置颜色表OpenGL并直接没有提供设置颜色表的方法，因此设置颜色表需要使用操作系统的支持。为给

2021-06-22 01:33:23 572

原创 OpenGL怎么绘制一个有彩虹色渐变的正方形

在OpenGL的基本输出图元方式中，是可以通过设定各个顶点的颜色来实现颜色的渐变的，如下列代码：void display(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); // 多边形 glColor3f(1.0, 1.0, 1.0); glVertex3f(-0.5, -0.5, 0); glColor3f(1.0, 0, 0); glVertex3f(-0.5, 0.5, 0); glColor3f(0, 0, 1.0); glVe

2021-06-21 18:14:36 1634

原创 Vs如何配置OpenGL环境

1、打开Vs并创建一个C++空白项目2、点击 “项目”—“管理Nuget程序包…”3、然后点击“浏览”—在搜索栏输入“NupenGL”，把两个插件都下载下来4、最后测试一下#include <GL/glut.h> void Show() { glClear(GL_COLOR_BUFFER_BIT); glRectf(-0.1f, -0.1f, 0.5f, 0.5f); glFlush(); } int main(int argc, char *ar

2021-06-21 17:35:56 3932 4

原创 OpenGL输出图元③（OpenGL中绘制图元的缺点及改进方法）

OpenGL中绘制图元的缺点我们以绘制一个三角形为例，并且给每个顶点指定不同的颜色和法向量：glBegin(GL_TRIANGLES); glColor3fv(c0); glNormal3fv(n0); glVertex3fv(v0); glColor3fv(c1); glNormal3fv(n1); glVertex3fv(v1); glColor3fv(c2); glNormal3fv(n2); glVertex3fv(v2);glEnd();仅仅是一个简单的三角形加了一些附

2021-06-21 16:55:41 199

原创 OpenGL输出图元②（多边形填充区函数）

绘制矩形OpenGL提供了一个特殊的矩形函数，比用glVertex描述的填充区有更高的效率： - glRect* ( x1 , y1 , x2 , y2); - glRecti ( 200, 100, 50, 250);绘制三角形glBegin (GL_TRIANGLES); glVertex2f ( 0.0, 0.0); glVertex2f ( 0.2, 0.0); glVertex2f ( 0.3, 0.15); glVertex2f ( 0.2, 0.3); g

2021-06-20 16:16:59 302

原创 OpenGL输出图元①（基本图元）

glut编程的基本模式首先要写一个主函数：int main(int argc, char **argv){ //初始化 glutInit(&argc, argv); //初始化显示模式 glutInitDisplayMode(GLUT_SINGLE, GLUT_RGB); //初始化窗口 glutInitWindowSize(600, 400); glutInitWindowPosition(200, 100); //创建窗口 glutCreateWindow("Green T

2021-06-20 15:45:37 244

原创图形学基本知识整理（概述 + 硬件知识）

两个基本概念计算机图形学：试图从非图像形式的数据描述来生成（逼真的）图像。数字图像处理：旨在对图像进行各种加工以改善图像的视觉效果。图形用户界面的发展开关界面：由指示灯和机械开关组成的操纵界面(80年代以前)命令行界面CLI：由终端和键盘组成的字符界面(80年代)图形用户界面GUI：由多种输入设备和光栅图形显示设备构成的图形用户界面（GUI）。PC，工作站，WIMP(W-windows、I-icons、M-menu、P-pointing、devices)界面，所见即所得（ 90年代）多通

2021-06-20 02:44:53 1992

原创登录接口①（只是返回状态，没有返回token的登录接口制作）

登录接口的创建在之前的学习中，我成功创建了注册接口，但是在学完注册接口是远远不够的，所以今天就学习了登录接口。首先要先理清登录接口的要实现的几个基本功能：1、接收用户名和密码2、查询数据库是否存在此用户3、验证输入的密码是不是正确的接收邮箱和密码考虑到接收用户名和密码这个过程是将前端的信息提取过来然后与数据库的内容进行校对，所以我选择了post语句：router.post("/login",async ctx=>{ ...})查询数据库是否存在此用户因为当我们从前端获取到

2021-06-19 02:49:32 1937

原创对注册接口进行加密（对数据库中的密码进行加密）

经过之前的学习，我们已经可以通过接口将用户信息存储到数据库中，但是很明显存储过程中还存在着一些问题，就是我们的密码在数据库中是直接明文储存的，如下图：考虑到密码加密这块我们使用的await其实已经是一个异步的方法来运行了，如下图：但是后面的加密的方式用到的还是异步（Async）的方法，所以在双重异步的作用下可能有冲突，导致了本该储存在数据库中加密的密码没有得到加密，如下图（这个图是npm官网提供的用法）：因此我尝试了一下用bcrypt的同步运行方式进行操作，具体使用模板（出自https://ww

2021-06-15 23:47:39 342 1

原创全球公认头像（gravatar）的使用

全球公认头像的作用当我们注册一个账号用到邮箱时，如果说这个邮箱在全球公认头像(http://cn.gravatar.org/)这个网站上注册并上传过图片了，那么我们就可以调取这个头像，如果没有上传或者注册过的话，那我们就会用默认的头像来作为他的头像。gravatar的安装cnpm i gravatargravatar的引入和调用//引入gravatarconst gravatar= require('gravatar');//gravatar的使用模板//pg是一种图片格式，网站中还有g，

2021-06-08 15:21:20 840 2

原创疯狂出现Cannot find module ‘xxx‘的错误

今天写代码疯狂出现Cannot find module ‘xxx’ 的错误，而且所有的依赖之前都是安装过了的，于是乎一气之下就用了下面的代码全部重新装了一遍，然后就好了：cnpm instal

2021-06-08 14:32:33 413

原创注册接口的创建与使用（内含bodyParser模块和bcryptjs模块的安装与使用）

在注册接口时，我们需要需要获取前端传递过来的数据信息，因此我们需要安装bodyParser这个模块（这篇博客是我koa+MongoDB学习系列中的其中一篇，有一些地方看不懂的可以结合之前发布的博客）。bodyParser模块的安装在终端中输入完成安装：cnpm i koa-bodyparser --save引入并使用bodyParser//引入bodyparserconst bodyParser=require('koa-bodyparser');//使用bodyParser（我使用的位置是

2021-06-07 03:13:06 422

原创 mongoose模板——用户模型创建

先前尝试了用koa框架来简单地搭建测试接口，这次来尝试一下通过mongoose来实现用户模型的创建引入mongoose以及Schema模板//引入mongooseconst mongoose=require('mongoose');//引入Schema模板const schema=mongoose.Schema;实例化数据模板借助Schema模板我们可以对想要创建的数据库的字段进行命名并且对该字段的内容作出相应的要求：//实例化数据模板const UserSchema=new schem

2021-06-06 20:07:49 280

原创 Koa框架下创建测试接口

创建测试接口创建前的准备自行在项目根目录下创建一个文件夹来存放接口，如图（users.js就是之后要写测试接口的地方）：①引入koa -router，并实例化接口//引入koa-routerconst Router =require('koa-router');//实例化接口const router=new Router();②做一个测试接口//testrouter.get('/test',async ctx =>{ ctx.status=200; ctx.bo

2021-06-06 16:57:15 194 4

原创 node.js 连接MongoDB

1、模块下载要在js中连接MongoDB首先需要安装需要的模块（所有操作都在vsc的终端上进行）：cnpm install mongoose --save 安装完成后：2、连接MongoDB引入mongoose模块：const mongoose=require('mongoose');数据库连接：//test是我在MongoDB中创建的数据库名，这里我还加了连接是否成功的反馈mongoose.connect('mongodb://localhost:27017/test')

2021-06-06 14:48:45 190

原创 MongoDB安装配置（Windows）

MongoDB 下载官网下载地址：https://www.mongodb.com/download-center/community1、下载 .msi 文件，下载后打开，按操作提示安装即可。在安装过程中，可以通过点击 “Custom(自定义)” 按钮来设置你的安装目录：2、创建数据目录MongoDB会将数据存在指定的db目录下。但是这个目录是不会自己主动生成的，所以需要我们自己创建。（注：数据目录一定要在根目录下，如：C:\ 或 D:\ 等）这里因为我电脑C盘快炸了，所以安装在了G盘，所以

2021-06-06 13:55:18 191 4

原创 Nodemon环境配置

nodemon最基础的作用在node.js的学习中，个人认为nodemon最实用的地方就是可以在你保存的同时就实现网页的刷新，从而更加便捷得去得到你所编写的网页的效果。全局环境配置npm install -g nodemon在package.json里面的设置 "scripts": { //xxx是你的项目名 "nodemon":"nodemon xxx.js" },使用方法完成这些设置后，在terminal终端输入nodemon就可以运行项目啦！...

2021-06-06 01:25:35 312

原创 Koa的安装运行

Koa的安装运行安装Koa依赖koa依赖安装命令：npm install koa --savekoa-router依赖安装命令：npm install koa-router --save创建Koa项目完成上述依赖搭建后就可以开始编写第一个Koa项目了：//引入koaconst Koa=require('koa');//引入路由const Router =require('koa-router');//实例化 const app=new Koa();const router=

2021-06-06 01:14:06 900

原创初始化package.json

初始化 package.json1、初始化命令npm init注：在终端输入完代码并回车后会出现如下参数配置：项目名称项目的版本号项目的描述项目的密码项目的作者最后输入yes，创建成功2、生成 node_modules文件输入下列代码即可自动生成一个node_modules文件npm install3、安装插件或依赖npm install xxx --save ...

2021-06-05 21:37:45 589

weixin_52908396的博客