前端后端demo
关注
分享
扫一扫
文章平均质量分 92
咩有猫腻.
要努力哦.
展开
-
react项目---插件安装和页面初始化（后台管理的demo）1
基础文件的初始化书写格式模板原创 2020-08-05 20:59:10 · 259 阅读 · 0 评论 -
全屏切换---demo
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <tit.原创 2020-07-31 10:12:54 · 184 阅读 · 0 评论 -
抓包+存储数据库
新建文件 然后打开其终端输入命令npm init -ynpm i cheerio axiosnpm i mongoosenpm i express如果有上传文件需npm i multer然后在该文件下直接开始创建一个文件写文件即可例如：photo-shop.jsconst axios = require("axios").default;const mongoose = require("mongoose");const productSchema = new mongoose.Sch原创 2020-07-22 19:03:40 · 843 阅读 · 0 评论 -
vue--注册登录、请求封装（axios，基地址，本地存储的封装）（vue脚手架的目录详解）---demo
随便写几个文件,详细的去7.14号的文件里文件看有底部导航切换，有登录，注册，config.js、auth.js、request.js文件App.vue<template> <div id="app" class="container"> <div class="header">小乖-shopping</div> <router-view class="content"></router-view>原创 2020-07-18 20:53:01 · 459 阅读 · 0 评论 -
vuex--vuex安装使用state和mutations、vuex中的action、组件之间使用vuex传递数据、store文件拆分----获取加载数据demo
vuexvuex是vue中的状态管理插件，可以实现全局统一的状态管理。在一个项目中只有一棵状态树，所有的数据都存储在上面单向数据流数据是单向流动的，view视图通过dispatch派发一个action(行为)，改变state(数据)，数据改变之后视图重新渲染如何使用vuexnpm i vuex # 安装插件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...原创 2020-07-15 13:39:46 · 553 阅读 · 0 评论 -
vue-路由钩子函数create、路由登录判断demo、商城页面布局demo---（图片的插入使用、地址栏logo的修改）
新建一个文件" .prettierrc " 目的是防止js文件出现双引号和分号，它会使文件变成单引号并去掉分号{ "singleQuote":true, "semi":false,}在.eslintrc.js文件中的rules里加入一条规则，目的是让函数（）前不空格，防止报错"space-before-function-paren":"off" 这个单引号双引号都可以 "off"还可以替换成0main.js文件不变App.vue<template> <d..原创 2020-07-14 21:20:04 · 287 阅读 · 0 评论 -
vue---路由嵌套3（1 2 3的综合）--demo（首页、列表页、用户中心）
main.jsimport Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'import Home from './pages/Home'Vue.config.productionTip = falseVue.use(VueRouter) // 使用路由// 定义一个路由实例const router = new VueRouter({ routes: [ { ..原创 2020-07-14 17:15:45 · 433 阅读 · 2 评论 -
vue-cli脚手架生成目录-----大致讲解使用
packageindex.htmlmainApp.vue截图的li可替换成下面这个代码，这样点击title时，可进入对应的视频链接 <ul> <li v-for="item in list" :key="item._id"> <a :href="item.link">{{item.title}}</a> </li> </ul>list.vue 这个是自己创建的..原创 2020-07-11 16:12:53 · 337 阅读 · 0 评论 -
vue---移动端-获取爱奇艺movies数据展示列表demo
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>练习内容</title> <link href="https://cdn.bootc原创 2020-07-10 18:57:43 · 437 阅读 · 0 评论 -
vue--增删改查信息demo
一.自己的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>练习</title> <!-- Latest compiled and minified CSS原创 2020-07-09 13:07:24 · 359 阅读 · 0 评论 -
vue---class样式绑定--demo
demo1：叠加class ，有问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>样式绑定</title> <style> .a {原创 2020-07-08 21:34:21 · 206 阅读 · 0 评论 -
vue--计算属性3--computed--购物车总价计算demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性</title> <!-- --> <!-- Latest compil.原创 2020-07-08 20:28:32 · 2398 阅读 · 0 评论 -
vue---计算属性2--computed---全选反选demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>计算属性</title> <link rel="stylesheet" href="http://netdna..原创 2020-07-08 17:49:16 · 500 阅读 · 0 评论 -
vue--待办事项--demo
写法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Latest compiled and minif原创 2020-07-08 16:50:59 · 727 阅读 · 0 评论 -
后台-增删改查
在7.3好的文件夹原创 2020-07-07 17:22:50 · 380 阅读 · 0 评论 -
nodejs-增删改查（没有上传数据库）-demo
命令行有npm init -ynode i expressaxios.js// 需要输入的命令行// 最开始创建文件夹时 npm init -y// npm i express// 如果不安装nodemon 梅西修改过后都得重新运行，很麻烦// 如果之前没有安装 需安装 npm i nodemon -g// 执行文件 nodemon 文件名// 或者在package.json增添一下东西/* "scripts": { "dev": "nodemon app.js"}, */.原创 2020-07-02 17:14:18 · 302 阅读 · 0 评论 -
ajax接口-随机、价格销量排序-demo
html.css(包括js)<!-- css --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link rel="stylesheet" href="./css/main.css" /></head><body> <!-- html --&g...原创 2020-06-29 19:02:05 · 325 阅读 · 0 评论 -
demo-购物车（localstorage）
需要的文件cart.jsclass Cart { constructor() { this.cartData = localStorage.getItem("cartData") ? JSON.parse(localStorage.getItem("cartData")) : {}; } saveData(id, num, terminal) { if (!this.cartData[id] || terminal) { this.car原创 2020-06-09 20:35:14 · 296 阅读 · 0 评论 -
demo-php增删改查-错题库
需要的文件创建数据库 表 字段如果命名和图片上的不一样 记得在代码里要替换成数据库里的格式接口分析一.index.js// 获取标签对象，用函数 防止冗余代码生成function getById(id) { return document.getElementById(id);}let wq_content = getById("wq-content");let wq_where = getById("wq-where");let wq_idea = getById("wq-.原创 2020-06-06 15:36:14 · 311 阅读 · 0 评论 -
demo-淘宝输入框搜索
一.老师的案例（有点问题，二级搜索没有随着输入框中的文字删除而消失）<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible".原创 2020-06-05 20:22:08 · 398 阅读 · 0 评论 -
demo-红绿灯
<style> * { margin: 0; padding: 0; } ul, li { list-style: none; } #light { width: 260px; display: flex; justify-content: space-.原创 2020-06-04 19:41:17 · 356 阅读 · 3 评论 -
demo-分页（js、ajax）
原创 2020-06-04 16:54:40 · 140 阅读 · 0 评论 -
获取窗口位置信息
<style> *{margin:0; padding:0;} #box{ width:200px; height:200px; background:#f0f; position:absolute; left:0;top:0; } </style> </head> <body> <div id="box"></div> </body> <原创 2020-06-03 20:18:51 · 541 阅读 · 0 评论 -
demo-输入框搜索下拉框出现类似文字信息
html<input type="text" /> <ul></ul> <script src="../ajax01.js"></script> <script> let oInput = document.querySelector("input"); let oUl = document.querySelector("ul"); //后台给我们提供了接口 /.原创 2020-06-03 20:10:33 · 363 阅读 · 0 评论 -
demo-注册用户名是否被注册
html<body> 用户名<input type="text" /><span></span> <script src="../ajax01.js"></script> <script> var oInput = document.querySelector("input"); var oSpan = document.querySelector("span"); .原创 2020-06-03 20:04:56 · 183 阅读 · 1 评论 -
demo---购物车的多条记录保存（cookie）
原创 2020-06-03 17:24:49 · 181 阅读 · 0 评论 -
demo---七天免登陆
<body> 用户名:<input type="text" /><br /> 密码:<input type="password" /><br /> <input type="checkbox" />七天免登录<br /> <input type="button" value="登录" /> <script src="cookie.js"></..原创 2020-06-03 18:57:28 · 453 阅读 · 0 评论 -
小复习----jQuery的深浅拷贝/钩子函数/多库并存、闭包及优缺点、ES5/ES6继承语法
jQuery 深浅拷贝 (重点) 浅拷贝 : 复制拷贝的是,引用数据类型的地址 两个变量之间,是有相互关联的 一个改变,另一个也会受影响 深拷贝 : 复制拷贝的是,引用数据类型的数据数值 两个变量之间,是没有相互关联的 ...原创 2020-05-07 20:53:59 · 169 阅读 · 0 评论 -
闭包
一.定义所谓的闭包,现在已经基本不使用了只有一些老项目中,或者是极其特殊的情况中,才会使用主要还是为了面试什么是闭包 概念: 是js中,函数的一种高级应用方式 作用: 调用函数中局部作用域变量,在函数之外,可以直接使用 正常情况下,只能使用 return 返回 局部作用域变量的数值 要想调用使用 int 就必须要使用 闭包 return 只能...原创 2020-05-07 14:18:20 · 123 阅读 · 0 评论 -
本地模拟数据（cookie、localStorage）
<script> 浏览器本地存储数据,有2种方式 1,cookie 前端程序,后端程序,都可以设定 读取时,有作用域,不能跨域读取 默认实现是会话时效 存储内容较小,一般是 400K 左右,每个浏览器不同 存储的数据格式是 键值对的字符串 2,localStorage ...原创 2020-04-30 21:55:23 · 567 阅读 · 0 评论 -
瀑布流demo
666原创 2020-04-26 20:57:36 · 257 阅读 · 0 评论 -
demo（注册、登录、退出、购物车）过程解释
一.index.html <style> div{ width: 100%; height: 100%; background: rgba(0,0,0,.4); position: fixed; top:0; left:...原创 2020-04-24 23:46:16 · 605 阅读 · 3 评论 -
demo(注册、登录、退出、购物)最终无注释代码
一.index.html <style> div{width:100%;height:100%;background:rgba(0,0,0,.6);z-index: 200px;position: fixed;left: 0;top: 0;display: none;} </style></head><body>...原创 2020-04-26 13:43:38 · 374 阅读 · 0 评论