![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
fly_ship
这个作者很懒,什么都没留下…
展开
-
egg.js使用token
根据用户信息,生成token ,并相应给客户端客户端存储在localstorage中可短短每次请求数据,请求头携带token服务器接收请求时验证请求头的token,验证成功则相应数据 async index() { let user = { username: "xiaoming" } // 引用了egg-jwt这个插件以后,就可以使用这个应用程序(this.app.jwt)的sign加秘方法 // 用户登原创 2021-08-25 14:04:26 · 638 阅读 · 0 评论 -
让一个元素100%显示
让一个元素在屏幕100%显示,那么需要他的所有父级元素均为100%原创 2021-08-25 13:47:34 · 168 阅读 · 0 评论 -
Vue导航守卫
router.beforeEach((to, from, next) => { next()//没有用处,继续访问})to 访问到哪from 从哪访问next 继续访问router.beforeEach((to, from, next) => { if (to.path !== "/login") { //如果不是从登录页来的,判断本地存储是否已经有了用户名 if (localStorage.getItem("usr")) { //若已经有了usr,原创 2021-08-10 09:51:00 · 104 阅读 · 0 评论 -
Vue路由(晓舟报告笔记)
vue create xxx不要选默认的那个,选人工,然后下面选上router,然后一路回车 <router-link to="/">Home</router-link> 相当于<a>这些路径存在router文件夹下的index.js中点击/about就会跳到component组件 => views下的About组件点击rout-link标签会用to属性跳转到相应url,然后找到这个url对应的组件,从views下显示出来小组件放在componen原创 2021-08-10 09:50:51 · 125 阅读 · 0 评论 -
Vue数据传输(晓舟报告笔记)
看一下结构后台serve.js没啥用处,就是写了一个fruitList模拟数据库,然后提供三个方法get、post、deleteconst Koa = require("koa");const parser = require("koa-parser"); //获取post请求数据const router = require("koa-router")(); //设置路由const cors = require('koa2-cors'); //允许跨域const app = new Koa(原创 2021-08-09 13:40:48 · 134 阅读 · 0 评论 -
如何利用package.json启动一个node项目
拿到一个文件夹,里面由两个文件package.json和serve.js在这个文件夹的位置打开powershell输入npm install,会自动安装package.json中指定的依赖安装完毕后输入npm start服务器端口开启原创 2021-08-09 13:12:40 · 1599 阅读 · 0 评论 -
Vue生命周期钩子
new vue() 可以创造一个实例其实所有的组件都是Vue实例实例化的过程中会默认调用一些函数(Vue默认定义好的),这些函数就叫做钩子初始化一个项目,里面写上created和mounted方法,发现我们没有调用也会被自动执行,所以我们就可以将想要提前初始化数据写在这些钩子里<template> <div><h1>helloworld</h1></div></template><script>expor原创 2021-08-07 22:38:34 · 86 阅读 · 0 评论 -
Vue 组件传值(晓舟报告笔记)
父级向子级传递数据子级向父级传递数据非父子级传递数据父级可以通过属性向child传递数据子级想父级传递数据需要用自定义事件<!-- 父级 app.vue --><template> <div> <h1>{{ childData }}</h1> <!-- 绑定message属性传递给child内部 --> <child @myevent="changeData" :msg="message"原创 2021-08-07 16:00:10 · 98 阅读 · 0 评论 -
Vue 创建Vue项目(晓舟报告笔记)
npm install -g @vue/cli安装完成之后可以使用vue命令vue create helloworld创建的项目目录结构如下所示:node_modules:存放项目依赖包public:存放静态文件(例如图片等)src:项目源文件,后续开发几乎都在这个目录下进行main.js为项目的入口文件App.vue是单文件组package.json记录了vue项目的所有依赖,其中有个script属性,可以定义一些命令(npm run serve啥的)//main.js//i原创 2021-08-06 17:55:19 · 242 阅读 · 1 评论 -
ajax(晓舟报告笔记)
//get查看router.get("/fruits", ctx => { ctx.body = dataList;})//post添加router.post("/fruits", ctx => { let fruit = ctx.request.body.fruit; dataList.push(fruit); ctx.body = dataList;})数据是存在服务器的内存里面的,服务器重启的话数据就会消失push(数组末尾添加)//p原创 2021-07-31 10:28:30 · 255 阅读 · 0 评论 -
nunjucks基础3cookie与session(晓舟报告笔记)
网站服务器程序可以在浏览器中写入cookie,然后浏览器再次访问这个网站时,就会带着这个cookie。const router = require("koa-router")();const Koa = require("koa");const nunjucks = require("nunjucks");const views = require("koa-views");const app = new Koa();app.use(views(__dirname + '/views', {原创 2021-07-30 15:00:24 · 306 阅读 · 0 评论 -
nunjucks基础2(晓舟报告笔记)
nunjucks中文文档https://nunjucks.bootcss.com/templating.html我们以晓舟报告的网站为例,视频列表中会显示多条数据,显示的数据条数取决于数据库中的数据量。所以页面的内容应该是应该根据后台数据动态显示。那么如何动态显示数据列表的,实例代码如下所示。//获取get请求的参数router.get("/", async ctx => { let fruits = ["香蕉", "苹果", "鸭梨"] await ctx.render("i原创 2021-07-29 21:29:08 · 141 阅读 · 0 评论 -
nunjucks基础1(晓舟报告笔记)
通过Koa创建了一个web服务器,并可以根据用户请求路径的不同响应不同的页面,但是每一个页面的内容都是通过字符串的方式给送给浏览器的,这样的开发方式并不友好,我们更希望直接发送html页面。模板引擎可以解决这个问题,通过模板引擎,可以直接设置响应的html页面,并且可以把后台数据绑定到模板中,然后发送给客户端。const Koa = require("koa"); const nunjucks = require("nunjucks");const views = require("koa-vie原创 2021-07-29 19:49:20 · 271 阅读 · 0 评论 -
form表单点击后无法提交到相应url
原代码 <form action="/login" method="GET"></form> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="登录">修改 <form action="/login" method="GET">原创 2021-07-29 18:22:14 · 808 阅读 · 0 评论 -
Node基础(晓舟报告笔记)
node可以看成是一种js运行的环境。Koa是一个基于Node的web服务器开发框架,需要cnpm安装。const Koa = require("koa"); const app = new Koa();app.listen(3000,() => { console.log("server is running")});这里引入的Koa是一个构造函数,通过new关键字可以创建一个koa应用。然后通过app的listen方法设置监听端口,运行这个程序就可以移动一个koa服务器了。原创 2021-07-29 16:51:08 · 213 阅读 · 0 评论 -
ul下li的添加与删除jQuery
<div> <input type="text" value=""> <button>添加</button> <ul> <li>西瓜</li> <li>香蕉</li> <li>苹果</li> </ul> </div&.原创 2021-07-22 22:48:07 · 364 阅读 · 0 评论 -
jQuery轮播图
<style> img { width: 400px; height: 200px; } .active { background-color: grey; }</style> <div> <img class="img" src="images/1.png" alt=""> </div> <button class="a原创 2021-07-22 21:45:03 · 41 阅读 · 0 评论 -
Javascript正则表达式
//中括号表示指定范围 var str = "qa123_"; var reg = /^[a-z0-9A-Z_]{5,8}$/; //\w代表数字母下划线 var regg = /^\w{5,8}$/; //\d代表数字0-9 var regg = /^\d{5,8}$/; //\s空格或换行 //?匹配0位或一位 //.匹配所有 /...原创 2021-07-22 10:30:35 · 55 阅读 · 0 评论 -
js动态创建元素方法的区别
documen.write()用的少直接将内容写入页面的内容流,但是文档流执行完毕,它会导致页面重绘类似 window.onlond() = function{} //整个页面加载完成再调用jsinner.innerHTMLdocument.createElement()<div class = "inner">...</div><div class = "create">...</div>var inner = document.que原创 2021-05-13 11:51:09 · 100 阅读 · 0 评论 -
浏览器出现Cannot set property ‘onclick‘ of null的问题
当js文件放在head里面时,如果绑定了onclick事件,就会出现这样的错误,是因为W3School的写法是浏览器先加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到onclick绑定的按钮节点,于是报错。因此,需要把js文件放在底部加载,就会避免该问题。在JS外包一个window.οnlοad=function(){}也可以解决...原创 2021-05-05 22:19:25 · 303 阅读 · 0 评论 -
Javascript预解析
变量提升函数提升原代码var num = 10fun();function fun() { console.log(num) var num = 20}预解析var num //变量提升//函数提升function fun() { var num //变量提升到作用域的最前面 console.log(num)//此时num未赋值 num = 20}num = 10fun();控制台输出undefined原代码f1();原创 2021-04-24 21:49:23 · 74 阅读 · 0 评论 -
盒子模型
盒子模型基本盒子模型的组合两个盒子靠在一起时,只会有一个外边距,是二者中大的那个.box1{ background-color: aqua; border:5px rebeccapurple; border: 5px blue solid; border-left: 8px red solid; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; pad原创 2021-01-31 15:29:44 · 59 阅读 · 0 评论 -
新闻界面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新闻页面</title> <style> body{ fo原创 2021-01-13 14:34:37 · 183 阅读 · 0 评论 -
CSS-1 基础
CSS (Cascadins Style sheets)层叠样式表html主要做结构,CSS则是样式选择器:声明基础选择器:1、标签选择器:某一类标签全部选出来,但不能差异化更改 <style> /* 选择器{样式} */ /* 给谁改 {改什么样式} */ p { color:red; /* 修改文字大小 12像素 */ font-size: 12px;原创 2020-11-25 18:30:29 · 144 阅读 · 0 评论 -
html-11 注册界面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相亲</title></head><body> <h4>黑Miss胶会员注原创 2020-10-25 17:20:03 · 223 阅读 · 0 评论 -
html-10 表单
表单用途:收集用户信息组成:表单域,表单控件,提示信息表单域可以将表单元素信息提交给服务器(后台)<form action=地址 method=提交方式 name="name1">写表单元素之前,应该有个表单域把他们包含表单控件input <form> <!-- text文本框 --> <!-- maxlength="6" --> 用户名:<input type="text" name="username原创 2020-10-25 17:19:07 · 134 阅读 · 0 评论 -
html-9 列表标签
列表标签无序列表(most important)<ul></ul><ul></ul>中间只能放<li></li><li></li>中间可以放任意<h4>你最喜欢的食物?</h4><ul><li>腐乳</li><li>臭豆腐</li><li>柠檬/li&g...原创 2020-08-06 15:34:35 · 98 阅读 · 0 评论 -
html-8 合并单元格
合并单元格rowspan跨行,竖着最上为目标单元格colspan跨列,横着最左侧为目标单元格合并步骤:1.先确定row还col;2.在目标单元格上写合并代码;3.删除多于单元格原创 2020-08-06 15:06:49 · 98 阅读 · 0 评论 -
html-7 小说排行榜案例
小说排行榜案例 <table align="center" width="500" height="249" border="1" cellspacing="0"> <thead> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <t...原创 2020-08-06 15:06:00 · 1123 阅读 · 0 评论 -
html-7 表格
表格<table> <tr><td></td> <td></td> <td></td></tr> <tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr></table>嵌套关系<table></table>表...原创 2020-08-06 15:04:44 · 81 阅读 · 0 评论 -
html-6 注释标签与特殊字符
注释标签与特殊字符注释:<!-- 注释 --> 快捷键 Ctrl + /原创 2020-08-06 15:03:56 · 163 阅读 · 0 评论 -
html-5 链接标签
链接标签超链接(anchor):<a></a>href(必要属性):为指向的网址target: _self 为在当前窗口打开(默认),_blank 为在新窗口打开 <a href="http://www.qq.com" target="_blank" >内部链接 <a href="http://www.qq.com">腾讯</a>外部链接 <a href="公司简介.html">...原创 2020-08-06 15:01:47 · 115 阅读 · 0 评论 -
html-4 路径
路径相对路径////同一级:直接写名字 <img src="1.png"/>下一级:文件夹名字/图片名字 <img src="images/1.png">上一级:../图片名 <img src="../1.png"/>绝对路径\\\\第一种,从盘符开始,不方便跨机器使用第二种,网络盗图<img src="https://i0.hdslb.com/bfs/sycp/creative_img/20...原创 2020-08-06 15:01:07 · 101 阅读 · 0 评论 -
html-3 盒子标签 图像标签
盒子标签 布局 <div> <span><div>独占一行<span>一行可以放多个图像标签 <h4>图像标签的使用</h4> <img src="1.png"/>属性:src alt title <h4>alt 替换文本 图像显示不出来是用文字替换</h4> <img src="11.png" alt="替换文字"/> <...原创 2020-08-06 14:59:49 · 421 阅读 · 0 评论 -
html-2 文本标签
文本标签<!DOCTYPE type>文档声明标签 放在最前面<html lang="en">语言种类<html lang="zh-cn"> <h1>标题标签</h1> <h2>文字加粗一行显示,后面不能写其他内容</h2> <h3>字号由大到小递减</h3> <h4>重要性递减</h4> <h5></h5&g...原创 2020-08-06 14:58:21 · 75 阅读 · 0 评论 -
html-1
准备知识Web标准结构:html表现:CSS行为:Javascript<html></html>单标签<br />包含关系<head> <title></title><head>并列关系<head> </head><body> </body>基础格式<html> <head> <...原创 2020-08-06 14:56:31 · 63 阅读 · 0 评论