我是小白菜鸟-CSDN博客

原创 Web前端必做笔记之一：Nunjucks基础使用（三）

Web前端必做笔记之一：Nunjucks基础使用（三）怎么使用Post请求来处理表单数据index.html文件中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid

2021-12-06 20:54:01 384

原创 Web前端必做笔记之一：Nunjucks基础使用（二）

Web前端必做笔记之一：Nunjucks基础使用（二）怎么使用get处理表单数据？views目录下中的index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=

2021-12-05 21:32:10 700

原创 Web前端必做笔记之一：Nunjucks基础使用（一）

Web前端必做笔记之一：Nunjucks基础使用在上一节我们说到引入Nunjucks现在我们用ctx来渲染模版views下面的模版index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie

2021-12-04 20:33:47 1236

原创 Web前端必做笔记之一：Nunjucks模版入门

Web前端必做笔记之一：Nunjucks模版入门我们通过Koa创建了一个web服务器，并可以根据用户请求路径的不同响应不同的页面，但是么一个页面的内容都是通过字符串的方式发送给浏览器的，这样的开发方式并不友好，我们更希望发送HTML页面模版引擎就可以解决这个问题，通过模版引擎，可以直接设置响应的html页面，并且可以把后台数据绑定到模版中，然后发送给客户端。这里我们选择一个功能完善，容易上手的模版引擎：nunjucks安装nunjucks在koa框架下安装nunjucks需要两个第三方模块koa

2021-12-03 18:36:45 210

原创 Web前端必做笔记之一：Koa框架基础（三）

Web前端必做笔记之一：Koa框架基础（三）如果我们需要引入一张图片，那src路径写什么，如果拷贝一个图片与server.js同级，这是无法访问的，因为访问图片是，客户端来访问网站，是不能直接通过浏览器访问到服务器中的文件的，那我们就需要用koa来设置需要使用命令下载koa-static，可以设置静态文件目录npm install --save koa-staticconst Koa = require('koa'); const router = require('koa-router')

2021-12-02 18:13:18 827

原创 Web前端必做笔记之一：Koa框架基础（二）

Web前端必做笔记之一：Koa框架基础（二）在之前我们说到用Koa创建好了一个服务器，就可以进行访问，但是访问的是Not Found,这是没有给页面一个响应的内容，那我们就要用到app.use()方法server.js中const Koa = require('koa'); const app = new Koa(); //创建应用// //引入一个中间件，中间件即是一个函数，中间件是请求和响应中间运行 app.use(async (ctx) => { //use后面是一个

2021-12-01 20:00:05 381

原创 Web前端必做笔记之一:Koa框架基础(一)

Web前端必做笔记之一:Koa框架基础Koa是一个基于Node的web服务器开发框架，通过Koa我们可以更便捷的开发web服务器。首先我们需要安装Koa安装之前，先初始化一个项目一个新建空目录，在该目录中打开命令行工具，执行npm init初始化完成之后，执行下面命令安装Koanpm install --save koa在我们的创建server.js文件中就可以用koa来创建服务器const Koa = require('koa'); //这个koa引入的是一个构造函数，需要这个构造函

2021-11-30 19:02:17 568

原创 Web前端必做笔记之一：使用Node来创建服务器

Web前端必做笔记之一：使用Node来创建服务器当我们访问一个网站的时候，是谁在给我们提供内容丰富的网页内容，答案是服务器。浏览器可以通过互联网想服务器发送请求，，例如我们在浏览器的地址栏输入http://baidu.com后，按下回车键，浏览器就会向百度服务器发送一个请求，服务器收到请求之后，会把百度的首页内容以文本的方式发送给浏览器，然后我们就看到了网页。我们要记住几个最基本的概念1.请求：浏览器向服务器要数据2.响应：服务器给浏览器发送数据3.地址：我们可以通过域名或ip访问到一个网站，域

2021-11-29 20:09:07 432

原创 Web前端必做笔记之一:NodeJs核心模块

Web前端必做笔记之一:NodeJs核心模块fs模块是node的文件系统模块，通过此模块的readFile方法可以读取文件，我们创建一个readFile.js文件，然后在其目录创建一个txt文件，内容为hello node,然后编辑readFile.js文件在rf.js中代码const fs = require("fs");fs.readFile("test.txt", (err,data) => { if(err){ //错误 console.lo

2021-11-28 19:21:24 178

原创 Web前端必做笔记之一：NodeJs基础

Web前端必做笔记之一：NodeJs基础在使用NodeJS之前，我们需要安装好Node我们来写个加法模块add.js中function add(a , b){ return a + b;}module.exports = add;在main.js中const add = require('./add.js');let result = add(10,20);console.log(result);// node的模块化语法// require() 引入一个外部模块

2021-11-27 20:17:58 318

原创 Web前端vue必做笔记之一:Vue中的Render函数

Web前端vue必做笔记之一:Vue中的Render函数首先我们在不使用组件的方式来渲染模版组件js中<script>export default { props:{ tag:String, }, //使用这个render函数可以动态创建标签 render(createElement){ return createElement("this.String",{},"hello 小明"); //第一个参数

2021-11-26 19:09:42 723

原创 Web前端vue必做笔记之一：使用ref获取dom元素

Web前端vue必做笔记之一：使用ref获取dom元素<template> <img ref="imgRef" alt="Vue logo" src="./assets/logo.png"> </template><script>import {ref ,onMounted} from 'vue'export default { name:'App', setup(){ //templ

2021-11-25 19:00:26 401

原创 Web前端vue必做笔记之一:使用.syncx修饰符

Web前端vue必做笔记之一:使用.syncx修饰符子组件中<template> <div class="document"> <h1 class="title">{{title}}</h1> <div class="content">{{content}}</div> <button class="btn" @click="changeTitle"

2021-11-24 17:50:27 570

原创 Web前端vue必做笔记之一：如何使用$attrs,inheritAttrs让你的组件可以更加灵活配置

Web前端vue必做笔记之一：如何使用$attrs,inheritAttrs让你的组件可以更加灵活配置组件MyInt.vue中<template> <div class="input-container">  <input v-bind="$attrs" :value="value" @input="$emit('input')"/> {{$a

2021-11-23 18:05:37 517

原创 Web前端vue必做笔记之一：Vuex实现状态持久化

Web前端vue必做笔记之一：Vuex实现状态持久化在Vuex主文件index.js文件中`import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);import * as getters from './getters'; export default new Vuex.Store({ state:{ //保存都是保存在内存中的，一刷新页面数据就会丢失 isPlayed:false },

2021-11-22 19:35:07 858

原创 Web前端vue必做笔记之一：列表动画（vue小技巧）

Web前端vue必做笔记之一：列表动画（vue小技巧）<template> <div id="app">  <transition-group tag="ul" name="list"> <li class="item" @click="deleteItem(item)

2021-11-21 18:21:41 375

原创 Web前端vue必做笔记之一：实现环形进度条

Web前端vue必做笔记之一：实现环形进度条在progress-circle.js中<template> <div class="progress-circle"> <svg :width="size" :height="size" viewBox="0 0 100 100"> <circle r="50" cx="50" cy="50" fill="transparent" class="progr

2021-11-20 18:36:31 1180

原创 Web前端vue必做笔记之一:Vuex基本使用（二）

Web前端vue必做笔记之一:Vuex基本使用（二）我们来看看这个功能首先我们看到Vuex的主目录index.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);import state from './state';import mutations from './mutations';import * as actions from './actions';import * as getters from '

2021-11-19 18:34:45 740

原创 Web前端vue必做笔记:vuex基本使用（一）

Web前端vue必做笔记:vuex基本使用（一）Vuex是做什么的？官方解释：Vuex是一个专门为Vue.js应用程序开发的状态管理模式它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态管理模式到底是什么？可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？如果是这样的话，为什么官方还要专门出一个插件Vuex呢，难道我

2021-11-18 17:43:44 934

原创 Web前端vue必做笔记之一:路由功能

Web前端vue必做笔记之一:路由功能配置路由index.jsimport { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'import Blog from '../views/Blog.vue'import Video from '../views/Video.vue'import Login from '../views/Login.vue'const rou

2021-11-17 19:26:07 273

原创 Web前端vue必做笔记之一:组合api实现水果列表

Web前端vue必做笔记之一:组合api实现水果列表我们要实现这种功能<template> <h1>水果列表</h1> <form @submit.prevent="insert"> <div> <label for="">名称：</label> <input type="text" v-model="name"&

2021-11-16 17:38:39 1066

原创 Web前端vue必做笔记之一:组合api的优势

Web前端vue必做笔记之一:组合api的优势//counter.jsexport default function(number){ function increase(){ number.value++ } function decrease(){ number.value-- } return { increase, decrease }}//这个模块就是

2021-11-15 21:39:47 723

原创 Web前端vue必做笔记之一：组合api-计算属性

Web前端vue必做笔记之一：组合api-计算属性<template> <h1>{{number}}</h1></template><script> //先把computed引入出来 import {computed} from 'vue'export default { setup(){ //计算 const number = computed(()=>{

2021-11-14 22:33:32 910

原创 Web前端vue必做笔记之一:组件api-组件的生命周期

Web前端vue必做笔记之一:组件api-组件的生命周期beforeCreate > 使用 setup()create > 使用setup()beforeMount > onBeforeMountmounted > onMountedbeforeUpdate > onbeforeUpdateupdated > onUpdatedbeforeUnmount > onBeforeUnmountUNmounted > onUnmoun

2021-11-13 20:12:49 419

原创 Web前端vue必做笔记之一：组合api-响应式变量

Web前端vue必做笔记之一：组合api-响应式变量<template> <div> <h1>{{title}}</h1> <button @click="sayHi">按钮</button> </div></template><script>export default { //这种是option api(选项api)

2021-11-12 19:02:45 786

原创 Web前端vue必做笔记之一：token验证登录状态

Web前端vue必做笔记之一：token验证登录状态当我们登录页不输入账号和密码时，直接访问内容页路径，会发现也可以进行访问，这就会产生一个bug,这是就需要进行token验证登录<template> <div> <form @submit.prevent="login"> <div> <label for=""&gt

2021-11-11 21:53:41 1074

原创 Web前端vue必做笔记之一：登录功能实现

Web前端vue必做笔记之一：登录功能实现import {createRouter, createWebHashHistory} from 'vue-router'import Home from './components/Home'import Blog from './components/Blog'import Login from './components/Login'const router = createRouter({ history:createWebHashHist

2021-11-10 20:49:34 1717

原创 Web前端必做笔记之一：列表渲染与图片切换功能

Web前端必做笔记之一：列表渲染与图片切换功能<template> <div id="app"> <h1>列表渲染与图片切换功能</h1> <img :src="src" alt=""> <button v-for="(item,index) in list" :key="index" @click="change

2021-11-09 21:57:12 209

原创 Web前端vue必做笔记之一:路由基础-页面跳转

Web前端vue必做笔记之一:路由基础-页面跳转首先我们一定要在main.js中引入router.js//main.js中import { createApp } from "vue";import App from "./App.vue";import router from './router.js'const app = createApp(App)app.use(router);app.mount("#app");<template> <div&gt

2021-11-08 22:00:04 286

原创 Web前端vue必做笔记之一：mixin抽离组件公共逻辑

Web前端vue必做笔记之一：mixin抽离组件公共逻辑//这是App.vue中的代码<template> <div id="app"> <comp-a></comp-a> <hr> <comp-b></comp-b> </div></template><script>import CompA from './co

2021-11-07 20:53:30 582

原创 Web前端vue必做笔记之一：Keep-alive

Web前端vue必做笔记之一：Keep-alive<template> <div id="app"> <button @click="state = 'A'">A</button> <button @click="state = 'B'">B</button> <button @click="state = 'C'">C</button> <comp-a v-if

2021-11-06 22:55:53 171

原创 Web前端vue必做笔记之一:插槽，DOM操作，过滤器

Web前端vue必做笔记之一:插槽，DOM操作，过滤器插槽作用：1.创建更加灵活,易扩展组件：自定义button，自定义table等2.开发或使用UI库，了解组件制作原理具名插槽：组件我们可以在自定义的组件里写多个插槽通过让组件更灵活，更易扩展在这里插入代码片//MyButton.vue中<template> <div> <button> <slot></slot>

2021-11-05 21:29:28 130

原创 Web前端vue必做笔记之一：vue中的表单

Web前端vue必做笔记之一：vue中的表单数据双向绑定通过v-model指令在文本输入框中创建双向数据绑定<template> <div> <p>vue实现表单</p>  <form @submit.prevent="postData">

2021-11-04 21:29:35 253

原创 Web前端vue必做笔记之一：生命周期钩子

Web前端vue必做笔记之一：生命周期钩子Vue实例的生命周期钩子(函数)每个Vue实例在被创建时(new Vue) 都要经过一系列的初始化过程，这个过程会默认调用一些函数常用函数created() 组件初始化完成mounted() 模版已创建//我们在这实现一个异步加载水果列表，组件数据未加载完成时，显示loading，加载完成显示数据<template> <div> <h1>水果列表</h1>

2021-11-03 21:22:23 76

原创 Web前端vue必做笔记之一:计算属性与侦听器

Web前端vue必做笔记之一:计算属性与侦听器计算属性data属性和computed属性定义的值都可以直接绑定在表达式中，如果某些值需要通过计算才能得到，那使用计算属性就再合适不过了//举个例子，比如说一个购物清单//总价 = 单价*数量*打折<template> <div> <h1>计算属性</h1> <p>单价：{{price}}</p> <p>

2021-11-02 22:15:00 124

原创 Web前端vue必做笔记之一：组件传值（二）

Web前端vue必做笔记之一：组件传值（二）非父子级传值定义一个共享的数据状态(state)//组件一<template> <div> <button @click="changeData">改变数据</button> //改变store.js中的hello vue <p>{{state.message}}</p> </div></template&g

2021-11-01 20:48:21 67

原创 Web前端必做vue笔记之一：组件传值（一）

Web前端必做vue笔记之一：组件传值（一）组件之间的关系1.父级向子级传递数据2.子级向父级传递数据3.非父子级传递数据//父级向子级传递数据：使用属性传递//父级中<template> <div> <Child :msg="message"></Child>  </div></template><script>

2021-10-31 21:36:03 113

原创 Web前端vue必做笔记之一:v-if和v-show的区别

Web前端vue必做笔记之一:v-if和v-show的区别<template> <div>  <h1 v-if="false">{{message}}</h1> <h1 v-show="false"&

2021-10-30 19:35:37 120

原创 Web前端必做笔记之一：回调地狱与Promise对象(二)

Web前端必做笔记之一：回调地狱与Promise对象(二) <script> //Promise对象, //resolve 可以将异步数据传递出来 let p = new Promise(function(resolve){ resolve("hello world") }) //通过then拿到异步数据 p.then(function(data)

2021-10-29 22:04:20 68

原创 Web前端必做笔记之一：回调地狱与Promise对象(一)

Web前端必做笔记之一：回调地狱与Promise对象(一)<script> //当我们需要获取异步数据时，需要回调函数拿取 //获取奶茶的方法 function getTea(fn){ setTimeout(()=>{ fn("奶茶") },500) } //调用获取奶茶的方法

2021-10-28 21:21:57 115

空空如也

空空如也