- 博客(67)
- 收藏
- 关注
RSS订阅原创 Koa2 SSR打造官网PC展示页 2
四.获取轮播图数据以及父子模板拆分(1).在services文件夹中新建slider.jsconst SliderModel = require('../db/models/slider');class SliderService{ async getSliderData(){ return await SliderModel.findAll({ where:{status:1}, attributes:{
2020-12-30 11:25:42
622
原创 Koa2 SSR打造官网PC展示页 1
一.项目展示、项目初始化及基本配置(1).创建项目koa2创建项目koa2 jsplusplus cd jsplusplus && npm install(2).项目配置基础文件移入package.jsonwebpack.config.js.babelrc.gitignore再install一下npm install(3).目录及文件改造创建configs目录1.db.jsconst ENV = require(
2020-12-30 11:18:51
528
原创 React + Koa2打造『官方管理后台』10 总结
一.项目架构(1).前端(2).后端项目架构没有变化增加了如下:1.err_config 负责返回各个请求成功的状态码及失败的状态码2.控制器中分别多出了admin.js和index.js用于调用接收传递的参数且调用各个业务接口，返回结果至前端3.routes 多了admin.js与index.js两个路由二.关键技术点(1).React中是怎么保存数据的react通过constructor来保存数据的，获取数据通过this.state.xx进行访问修改数
2020-12-30 09:43:50
632
原创 React + Koa2打造『官方管理后台』9
二十九.数据爬虫管理页面以及接口请求1.爬虫前端配置crawler引入configimport crawlerConfig from '../../../config/crawler_config'新建tbodyimport React, { Component } from 'react'import './index.scss'export default class TableBody extends Component { render() {
2020-12-25 11:04:00
342
原创 React + Koa2打造『官方管理后台』8
二十二.推荐课程页面、课程上下架操作1.recomeCourse中import React, { Component } from 'react'import {getDatas} from '../../../utils/tools';import ListTitle from '../../../components/common/ListTitle';import TableHead from '../../../components/common/TableHead'
2020-12-25 10:57:36
209
原创 React + Koa2打造『官方管理后台』7
十九.请求数据、数据格式化、编写列表组件1.课程分类列表coursetab后台业务层中 async getCourseFieldData(){ return await CourseTabModel.findAll({ attributes:{ exclude:['cid'] } }) }控制器中async getCourseData(ctx,next){
2020-12-25 10:34:33
151
转载 js继承的几种方式，圣杯模式
继承，在面向对象的编程中用的还是非常多的，虽然面向对象因为其复杂的构建对象的初始化，在大多数的程序中并没用用到，但是我们使用过后才发现，这使得今后项目的扩展和维护更加容易。话不多说，进入正题。1. 传统形式（原型链继承）//父类Father.prototype.name = "Li"function Father() { this.age = 18}//子类Son.prototype = new Father()function Son() {}var son = new Son
2020-12-24 16:05:52
1527
3
原创 React + Koa2打造『官方管理后台』6
十六.数据请求、接口权限验证、登录验证中间件1.在config中管理APIconst BASE_URL = "http://localhost:3000";const API ={ LOGIN:{ LOGIN_ACTION: BASE_URL+'/admin/login_action', LOGIN_CHECK:BASE_URL+'/admin/login_check', LOGOUT_ACTION:BASE_URL+'/admin/l
2020-12-24 10:00:49
244
原创 React + Koa2打造『官方管理后台』5
十三.侧边导航栏组件以及导航路由切换1.前端的config.js中const BASE_URL = "http://localhost:3000/admin/";const API ={ LOGIN_ACTION: BASE_URL+'login_action', LOGIN_CHECK:BASE_URL+'login_check', LOGOUT_ACTION:BASE_URL+'logout_action' }const NAV=[ {
2020-12-24 09:55:15
157
原创 React + Koa2打造『官方管理后台』4
十.建立数据请求模型以及完成前端登录逻辑1.后端的Service中及控制器中 return ctx.body = returnInfo(LOGIN.SUCCESS,result) const uid = usernameExist.get('id'); return { uid, username };2.安装qs序列化datanpm i qs -S3.在utils中新建http.j
2020-12-24 09:47:44
255
原创 React + Koa2打造『官方管理后台』3
七.编写Login页面组件以及button样式类1.scss中编写common.css,样式初始化html{ font-size: 14px; background-color: #f3f5f7; color: #333;}body{ margin:0;}ul{ padding: 0; margin: 0; list-style: none;}a{ text-decoration: none; color: #
2020-12-23 10:11:05
244
原创 React + Koa2打造『官方管理后台』2
四.admin表模型、密码加密、初始化admin账户1.测试redisclient,控制器中const {redisSet,redisGet}= require('../lib/redisClient') ;class Index{ async index(ctx,next){ const sess = ctx.session; if(!sess.uid){ sess.uid = 1; sess.user
2020-12-23 09:59:48
301
原创 React + Koa2打造『官方管理后台』1
一.Redis认知、安装与操作(1).基础知识Redis 内存数据库 访问快 内存压力增大 公共数据 登录信息存储MySql硬盘数据库 访问相对慢 内存压力小 静态数据集合 非公共数据 网站的视图数据(2).安装菜鸟安装https://www.runoob.com/redis/redis-install.html(3).常用指令启动 redis-server 连接客户端 redis-cliport:6379设置或修改Redis set name ...
2020-12-23 09:49:59
346
原创 Koa2 + Puppeteer打造『爬虫系统』总结8
一.所需技术(1).koa2用于搭建项目(2).puppeteer爬虫库(3).nanoid用于生成随机字符串(4).qiniu用于将资源文件上传至七牛图床(5).sequelize用于操作数据库结构二.项目搭建大致流程1.通过koa2初始化项目2.写入基础的爬虫代码，爬取信息3.启动子进程运行爬虫脚本4.封装爬虫程序5.配置七牛且上传图片资源6.通过sequelize连接mysql7.创建表模型，同步模型，数据入表三.项目层级架构
2020-12-22 09:56:19
768
原创 Koa2 + Puppeteer打造『爬虫系统』7
十九.创建课程数据模型以及数据入表操作1.创建course.js的模型const seq = require('../connection/mysql_connect'), { STRING,INT } = require('../../config/db_type_config');const Course = seq.define('course',{ cid:{ comment: 'Course ID', type:INT,
2020-12-22 09:49:50
227
原创 Koa2 + Puppeteer打造『爬虫系统』6
十六.创建优秀学生表模型以及入表操作1.在models中建立student.js表模型const seq = require('../connection/mysql_connect'), {STRING,INT,TEXT} = require('../../config/db_type_config')const Student = seq.define('student',{ sid:{ comment:'student Id', ty
2020-12-22 09:23:33
212
原创 Koa2 + Puppeteer打造『爬虫系统』5
十三.爬取老师列表信息以及上传七牛图床1.在crawler文件夹中创建teacher.jsconst Crawler = require('../lib/crawler'), { crawler } = require('../config/config');Crawler({ url: crawler.url.teacher, callback() { const $ = window.$, $item = $('.tea')
2020-12-21 10:08:47
202
原创 Koa2 + Puppeteer打造『爬虫系统』4
十.创建推荐课程表模型以及数据入表操作1.db_type_config中加入小数类型const Sequelize = require('sequelize');module.exports={ STRING: Sequelize.STRING, INT: Sequelize.INTEGER, DECIMAL:Sequelize.DECIMAL}2.在modles中创建recomCourse.jsconst seq = require('../conn
2020-12-21 10:06:12
295
原创 Koa2 + Puppeteer打造『爬虫系统』3
七.爬取机构信息以及上传七牛图床1.service中的slider.js，防止一样的数据重复插入const SliderModel = require('../do/models/slider');const Slider = require('../do/models/slider');class SliderService{ async addSliderData(data){ const cid = data.cid; const result
2020-12-21 10:03:06
262
原创 Koa2 + Puppeteer打造『爬虫系统』2
四.将图片资源上传至七牛图床1.安装nanoid qiniunpm i nanoid qiniu -S2.建立config文件夹，建立config.jsmodule.exports={ qiniu:{ keys:{ ak:'', sk:'' }, buket:{ tximg:{ bucket_name:'cwraler-
2020-12-21 09:59:40
189
原创 Koa2 + Puppeteer打造『爬虫系统』1
一.Puppeteer的使用与注意事项(1).环境准备安装koa-generatornpm install -g koa-generatorkoa2创建项目koa2 crawler安装koa对应依赖打开对应文件npm install安装爬虫库npm i puppeteer -S(2).初始化项目1.删除routes下的users，js2.删除app.js下的users引入和注释router下的use(3),爬虫初始rou
2020-12-21 09:55:23
605
1
原创 Vue深入-13【手写lazyload-2与函数调用组件】
(1).lazyloadexport default (Vue) =>{ class ReactiveListener{ constructor({el,src,elRenderer,options}){ this.el = el, this.src = src, this.elRenderer = elRenderer, this.options = options;
2020-12-11 09:44:04
175
原创 Vue深入-12【手写lazyload-1】
(1).VueLazyLoad的基本使用npm i vue-lazyload -Smain.js中引入import VueLazyload from 'vue-lazyload';Vue.use(VueLazyload,{ preLoad:1.3,//滑动到1.3倍高度加载图片 loading:'loading.gif'})使用<img v-lazy="xx"/>(2).自己实现编写指令Vue.user会先执行Install方法main.j.
2020-12-11 09:41:43
203
1
原创 Vue深入-10【表单组件、插槽】
(1).插槽1.匿名插槽引入时用双标签 就会把插槽值赋值进去<template> <div> <h1>父亲</h1> <slot></slot> </div></template><template> <div> <h1>儿子</h1> <parent
2020-12-11 09:36:39
974
原创 Vue深入-9【兄弟组件间通信】
(1).组件间通信1.通过$emit传递事件通信改变父亲的data值从而改变另一个兄弟组件的值<template> <div> <h1>父亲</h1> <p>name:{{name}}</p> <hr/> <Child1 :name="name" @childOneClick="name=$event"/>
2020-12-10 10:14:08
269
原创 Vue深入-8【组件注册、父子组件通信】
(1).注册组件的两种方式1.全局注册组件<script> Vue.component('my-cmp',{ template:'<div>我的全局注册组件</div>' })</script>2.局部注册组件let myLocalCmp={ template:'<div>我的局部注册组件</div>'}new Vue({ el:'#app', c
2020-12-10 10:12:23
254
原创 Vue深入-7【Vue中生命周期、组件】
(1).生命周期1.beforeCreate/created执行步骤: beforeCreate-created用途: beforeCreatevux/vuerouter中混入一些全局属性,也可以写数据请求作用:创建实例区别:created会比beforeCreate的this多一个_data 访问的时候会做代理直接访问data,也就是说可以访问到我们定义的message信息了后续步骤:先判断有没有el 如果传入el了 看传没传templeate 有则生成render函数，如果没
2020-12-10 10:07:09
302
原创 Vue深入-6【Vue中计算属性、过滤器、自定义属性】
(1).计算属性1.通过双向绑定与计算属性实现复选框自动选择双向绑定计算属性，从而实现点击三个checkbox最后一个被选中<div id="app"> <input type="checkbox" v-for="item in items" :key="item.id" v-model="item.completed" /> <input type="checkbox
2020-12-10 09:52:21
330
原创 Vue深入-5【Vue中自定定义一个表单控件、watch】
(1).v-model在表单控件中1.input控件<input type="text" v-model="message"/>2.select控件<select v-model="result"> <option value="" disabled>请选择</option>//这样即可设置默认为请选择但是无法再次选择 <option v-for="subject in subjects"
2020-12-10 09:47:16
286
原创 Vue深入-4【Vue中事件处理函数绑定、v-model】
四.Vue中事件处理函数绑定、v-model(1).事件处理函数绑定1.data中得事件事件可以写在data中，但是里面的this是指向window的<body> <div id="app"> <div @click="onClick">xx</div> </div> <script src="vue2引入"></script> <script>
2020-12-10 09:43:31
3104
原创 Vue深入-3【Vue中实例方法、指令】
(1).vue3的挂载1.createApp创建vue3的挂载方法不是通过new Vue挂载的，而是通过createApp创建和mount 挂载的createSSRapp可以创建服务端<body> <div id="app"></div> <script src="vue3引入"></script> <script> const Counter = {
2020-12-09 09:24:34
1529
原创 Vue深入-2【VUE3使用proxy】
(1).Proxy1.与defineProperty区别与defineProperty的区别是缺少了key这个参数，也就是说它是对与某一个key的proxy得兼容性比较差defineProperty只要遇到对象就会劫持，proxy则是只会代理第一层2.proxy得基础使用new Proxy(obj,{ get(){}, set(){}})person.name ="xx" 这样并不会响应get setlet proxyPerson = new Proxy(o
2020-12-09 09:21:05
1915
原创 Vue深入-1 【vue基础深入介绍/响应式】
(1).vue基础介绍1.vue是一个渐进式框架响应式(vue核心)+vue组件化+vue Router + Vuex + vue CLI2.vue的不同构建版本runtime+compiler = fullruntime = runtime-only而compiler就是将template 转换为render的new Vue({ template:'<div></div>'})经过compilernew Vue({ ren
2020-12-09 09:17:54
227
原创 拓展-8【exprot和exportdefault】
1、export导出多个对象，export default只能导出一个对象2、export导出对象需要用{ }，export default不需要{ }，如：export {A,B,C};export default A;3、在其他文件引用export default导出的对象时不一定使用导出时的名字。因为这种方式实际上是将该导出对象设置为默认导出对象，如：假设文件A、B在同级目录，实现文件B引入文件A的导出对象deObject：文件A：export default deObject
2020-12-09 09:13:51
841
原创 拓展-7【原型链小结】
一.什么是原型链每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找...... 这个操作被委托在整个原型链上，这个就是我们说的原型链了。二.prototype/_proto_prototype: prototype属性，它是函数所独有的，它是从一个函数指向一个对象。它的含义是函数的原型对象，也就是这个函数（...
2020-12-09 09:12:37
100
原创 拓展-6【es6新增语法与api小结-未完待续】
一.基础es5发布于2009年 其实用的是99年发布的ecma3.0改进的3, es6发布于15年babel进行es6的转译编码但是不能转译api 可以通过babel-polyfill进行转译在线转码工具有babel 和 traceur两种二.let/constlet变量不提升 不能重复 且同一作用域下不能声明同样名称的两次 包括函数可以用let 来解决闭包的问题，因为每循环一次就产生一次作用域var arr = [];for(let i = 0; i<
2020-12-08 09:18:03
269
1
转载 html css3各类加载中的loading动画效果
效果一：一、HTML<div class="loader">Loading...</div>二、CSS/*绿色背景*/body {background:#4ea980;margin:50px;}/*纯白色圈*/.loader {text-indent: -9999em;position: relative;width: 200px;height: 200px;box-shadow: inset ...
2020-12-07 10:03:31
1023
转载 vue中swiper vue-awesome-swiper的使用方法和及版本问题解决指南
由版本引起的一系列坑时间：2020.07.08（时间，版本很重要-坑的起源）这两天在vue中使用swiper做轮播图，就随手百度了一下，找个帖子开始参考（坑开始了）按照图中的方法，原计划5分钟搞定，一顿操作猛如虎，然后vue各种报错，然后再各种百度，结果开始了2天的爬坑之旅坑1按照上图安装方法，npm将安装最新的vue-awesome-swiper（@4），对应的是swiper6，但是国内暂时没有swiper6的文档，意味着没法参考使用方法，有问题也不好去网上找坑2最新版vue-awesom
2020-12-07 10:00:36
3644
2
原创 拓展-5【一篇文章搞懂正则】
一.基本形式ihateregex.io正则查询网站(1).声明方式var exp = /at/gimvar p2 = new RegExp('at','gim') 不建议使用这种方式var p1 = /\.at/var p2 = new TegExp('\\.at')因为在字符串中需要转译(2).空格无法匹配console.log(/ab /.test('ab'));false二.元字符.任意字符？贪婪匹配()子表达式[]字符组[^]非字符
2020-12-07 09:55:34
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人