MindMap Gallery Project-oriented programming project solutions
Oriented to the project programming project plan, the map introduces ES6, car quotation project network, project process, mysql, server, etc. Save the picture below for reference!
Edited at 2022-04-29 13:59:10This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
Project-oriented programming project solutions
ES6
variable
let
const
Use es5 to implement const by modifying the attribute descriptor writable:
Object.defineProperty(obj,'a',{writable:false})
The writable attribute cannot be modified
The configurable attribute cannot be deleted and the attribute descriptor cannot be modified.
enumerable properties are not traversable
The value of the value attribute
set
get
vue is compatible with ie8 because ie8 does not support defineProperty
Block-level scope within functions: closures
Function: Implement modularization
Disadvantages: Causes memory leaks
arrow function
Arrow function, this points to the scope when defined
Ordinary functions, this points to the scope when called
Arrays and objects
Determine whether it is an array: Array.isArray
Convert pseudo array to array: Array.from()||[...]Array.prototype.slice.call()
Destructuring of objects: let{callback}=this.props
Merging objects: Object.assign({},{a:1},{b:2})
The simplest deep copy: JSON.strigify==>JSON.parse() can only process objects, not arrays
promise
three states
Initialization state: pennding
Completion status: resolved
Rejection status: rejected
two parameters
The resolve method is called when changing from pending to resolved.
Call the reject method when changing from pennding to rejected
four methods
Put promises together: Promise.all()
Any promise can be completed: Promise.race()
Generate a promise whose status immediately changes from pennding to resolved: Promise.resolve()
Generate a promise whose status immediately changes from pennding to reject: Promise.rejected()
Error catching: catch
Chain calls, just return the constant directly
Native implementation of promise: Use setTimeout to turn synchronous operations into asynchronous operations
async/awiat
Asynchronous functions: will block the execution of code
The execution result of the expression awiat a promise is the parameter of resolve
Error capturing: try/catch captures errors
generator
Asynchronous function, preceded by *
Use yield to modify asynchronous operations
The first call returns an iterator
Call the next method of the iterator and continue execution until it encounters the yield statement or return.
The return value of the yielded expression, the parameter passed in next when calling next
class
Object Oriented Programming
es6 class
es5 function prototype chain
Features
Overload
abstract
inherit
encapsulation
Inheritance: extends
js only has single inheritance
super keyword
super(), when used as a function, implements inheritance, copies the parent class, and returns this of the subclass.
super.render(), when used as an object, points to the parent class, and this points to the subclass.
Static properties and static methods can be called without instantiation
Static properties are written outside the class
Static methods are modified with static
Modules and deconstruction
Import/export of modules
export function getData(){}
import {getData} from '…'
export default
import getData
export * from '…'
require.js
Two parameters, define
Array: dependency list
Function: Inject the previous dependencies as function parameters
common.js
Exports: module.exports
Import: require
car quotation project
Statistics
Page PV, UV
Button event statistics
Error monitoring: sentry
Error reporting
Chart statistics
Notify relevant person in charge via email
optimization
Lazy loading
Lazy loading of images
Lazy loading of lists
Lazy loading of routes
Preloading
Image preloading
event handling
Throttle
debounce
DOM operation
Redraw
reflow
touch event
touchStart
touchMove
touchEnd
Third party services
SMS verification code
Mail Server
network
TCP/IP protocol five-layer architecture
Application layer
short link
Normal link: http
Encrypted: https
Certificate: paid for purchase
Features: Security
Function: Prevent operator hijacking
Lock
When all resources are loaded via https, the lock is normal.
When some resources are loaded through http, the lock is abnormal and an i appears.
long link
websocket
transport layer
Reliable transmission method: TCP, which is equivalent to making a phone call. The handshake is successful three times before data is transmitted.
Unreliable method: UDP, which is equivalent to writing a letter and transmitting data directly, regardless of whether a connection is established or not.
Network layer
IP
IP classification
Category A: Network-Host-Host-Host
Category B: Network-Network-Host-Host
Category C: Network-Network-Network-Host
Private IP address
10.0.0.0-10.255.255.255 (a class A address)
172.16.0.0-172.31.255.255 (16 Class B addresses)
192.168.0.0-192.168.255.255 (256 Class C addresses)
special IP address
Point to self: 0.0.0.0
Point to self: 127.0.0.1
Address assigned when unable to access the network: 169.254.x.x
DNS service
Check IP address through domain name
Mac address
Media Access Control Address
data link layer
Hardware communication equipment: switches, routers
physical layer
twisted pair
Important HTTP header information
req
Client credentials: cookie, has validity limit
Carrying client login status
Client information: user-agent
Used to determine browser information, App environment, and whether it is WeChat
Where to initiate access: refer
Function: Anti-hotlinking
Request type: Content-Type
res
Set cookies: set-cookie
Whether to compress: content-encoding:gzip
Allow cross-origin: access-control-allow-origin:
Whether to allow cookies: access-control-allow-credentials:true
Login status: token
(usually a string of 16 characters or more)
Login credentials, regenerated after each login
No need to log in
Save the token for a period of time and bring verification every time you call the interface.
Set the token storage time through the cookie validity period
single sign on
When recording the login status, record the device number of each logged-in device. After logging in, change all other login statuses to invalid status.
Sharing login status across domains
After successfully logging in, call the login interfaces of several other domain names and set cookies respectively. The shared login state has been reached.
front end work
After calling the login interface, save the login status token returned by the server in the local cookie.
Set the corresponding expiration time
Just bring the token with you every time you call the interface in the future.
Cross domain
In development process
charles packet capture tool mapping
Connect the device to be captured to the same website as Charles
Set up proxy (https needs to install certificate)
Configure Map Remote to forward requests
virtual domain name
Find the hosts file: C\windows\system32\drivers\etc\hosts
Open and modify it with administrator rights, add a row of records, the front is the local loopback address, and the last is the virtual domain name to be configured.
Modify webpack configuration
port: changed to 80
Disable host check disableHostCheck:true
Start the service, make sure the port is 80, and access it using the virtual domain name
proxy
Modify the proxy field in webpack devSever
'/api'
target:'
'
changeOrigin:true
pathRewrite{'/api:'/'}
Universal solution
JSONP
Principle: Dynamically create a scrip tag, set src as my request address, and return a function. The script tag has no origin restrictions.
The function name is the callback passed in
Applicable scenarios: processing get requests
CORS (cross origin resource share)
Cross-domain request header: access-contrl-allow-origin
Wildcard: *(try not to apply)
Fixed value:'
'
Dynamic configuration: Dynamically configure the fields in the response header by determining whether orgin in the request header is in the array
Header carrying cookie: access-control-allow-credentials:true
proxy
Requires web server support: nginx/apache
Principle: Browser's same-origin policy: protocol domain name port
Safety
Cross-site scripting attack: XSS (cross site script)
Inject a piece of js into someone else's website and do some dangerous operations
Cross-site request forgery: CSRF (cross site request forgery)
Principle: Relying on the request initiated, the browser will automatically bring the cookie under the corresponding domain name.
Prevent attacks: Add verification codes and random numbers to increase the submission threshold
RESTFul request: Determine the operation to be done through the request method
Insert: POST
Modification: PUT
Delete: DELETE
Query: GET
browser cache
Caching process
Strong caching
Status code: 200 (from cache)
expires: http1.0, if the request occurs before the expiration time, it hits the local strong cache
cache-control: http 1.1 enriches client caching mechanism
max-ag=number, if the request time is before the expiration time, the cache will be hit, otherwise it will not work.
no-cache, do not use strong cache
no-store, directly prohibits the browser from caching data, and downloads complete resources every time
public, cached by all users, including end users and intermediate proxy servers such as CDN
private, cached by all users, including end users and intermediate proxy servers such as CDN
If cache-control and expires exist at the same time, cache-control has a higher priority than expires.
Negotiate cache
Status code: 304 (not modified)
Last Modified/If Modified-Since: The last modification time of the resource on the server, accurate to seconds
Etag/If None Match: The unique identification string of each resource. This value will change as long as the resource changes.
Last-Modified and ETag can be used together. The server will verify the ETag first. If they are consistent,
Will continue to compare Last-Modified, and finally decide whether to return 304
Discard cache and load new resources
Change the application path of resources in the page
Project Flow
Development Process
①Requirements review (project leader, boss, product manager, technical director)
②Technical review (front-end and back-end developers, UI, testing), the prototype drawing has been released (relatively rough)
③ For scheduling, let the backend estimate the time first, and try to estimate it as long as possible if the product manager can accept it.
(Defined interface time, development time, joint debugging time)
④The design starts first, and the front-end and back-end wait.
⑤Development stage: define interface, independent development, joint debugging
⑥ To submit the test, first upload the file to the server (git automation or ftp file server),
Spliced into a path form: send an email to the test, which contains the test address and some instructions
⑦The test is passed and released online
Project specifications
Code specifications: project directory structure, coding grid (ESLint)
Code management specifications: Svn, Git branch management, one branch per person, submit pull request after development is completed
Warehouse management: gitlab, coding, gitee, github
Release specifications: mature release system, CI system, automated deployment
Project tools
Project progress & bug management tool
TAPD
Zen Tao
Trello
Analog interface
RAP, EASY-MOCK, MOCK.js
Documentation tools
Recording interface, docute, vuepress
OA: Office Automation
Project communication
demand side
product manager
Determine specific needs
rear end
Just decide on the interface and communicate on the schedule.
communication tool
Project personnel composition (20)
Technical leader/project director/technical director/CTO (1)
Technology selection
Take control of the entire project
Demand side (3)
Product Manager (2)
Operations staff (1)
Developer(16)
UI design(2)
Front-end development(4)
Back-end development(7)
Testers (2)
Operation and maintenance personnel (responsible for going online and configuring the online environment) (1)
The composition of the interface
The role of interface
Passed parameters
The return value of the interface
code: status code
data: business data
msg: error message, returned by the backend, the frontend usually prompts directly
mysql
Environment: XAMPP integrated environment
mysql client
navicat
workbench
How to use it in node
Introduce middleware mysql
Create an instance: mysql.createConnection
statement
Add: insert into user(username,password,create_time)values("zhixi","123456",${ new Date()}),
("zhixi2","123456",${ new Date()})
Delete: delete from user where username='${req.body.username}'and password='${req.body.password}'
Change: update user set create_time=${10000000},username='${req.body.username}007'where username=
'${req.body.username} and password='${req.body.password}'
Check: select * from user where id = 1
server
web service: nginx, client tool: XShell
File server: ftp (file transport protocol), client tool: XFtp
Server-side script: node
Daemon: pm2
List services: pm2 list
Stop service: pm2 stop ${id}
Start the service: pm2 start ${id}
Restart the service: pm2 restart ${id}
Check the log: pm2 log
Develop interface using express
Start the web service: app.listen()
Listening routes: app.get() | app.post()
Get parameters: body-parser
Return data: res.json() | res.end() | res.send()
Tool for automatic updates: node-dev
Code deployment
Automated deployment for easy rollback
Git hooks listen for push events
Simple ftp upload