实战项目
可乐雪碧薄荷糖
这个作者很懒,什么都没留下…
展开
-
Koa2 SSR打造官网PC展示页 6
十六.课程搜索展示与无结果提示1.list中建立noDataTip文件夹index.ejs<div class="no-data-tip"> <h1>-没有搜索到相关数据-</h1></div>2.入口文件中导入样式import '../styles/noDataTip.scss';3.控制器中async list(ctx,next){ const keyword = ctx.params原创 2021-02-01 09:56:37 · 241 阅读 · 0 评论 -
Koa2 SSR打造官网PC展示页 5
十三.编写搜索功能模块1.moudels下写headerSearch.jstools下写功能函数function trimSpace(str){ return str.replace(/\s+/g,'')}import {trimSpace} from '../utils/tool';export default($)=>{ const $headerSearch = $('.J_headerSearch'), $searchIn原创 2021-02-01 09:53:14 · 127 阅读 · 0 评论 -
Koa2 SSR打造官网PC展示页 4
十.获取优秀老师数据、优秀老师模板1.service文件夹中新建teacher.jsconst TeacherModel = require('../db/models/teacher');class TeacherService{ async getTeacherData(){ return await TeacherModel.findAll({ where:{status:1,isStar:1}, attribut原创 2021-02-01 09:48:06 · 101 阅读 · 0 评论 -
Koa2 SSR打造官网PC展示页 3
七.首页标题模板编写1.common中新建mainTitle 中新建index.ejs<div class="main-title"> <h1 class="main-tt"><%= title %> </h1> <a href="<%= path %> " class="main-tt-lk" target="_blank"> <%= linkNa原创 2021-02-01 09:40:21 · 108 阅读 · 0 评论 -
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 · 621 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 631 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 765 阅读 · 0 评论 -
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 · 225 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 201 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 261 阅读 · 0 评论 -
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 · 188 阅读 · 0 评论 -
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 · 601 阅读 · 1 评论