day91
Recap:
for ES6 common grammar
- variable
- template string
- Functions Function arrow Note the this
- the extends class class
- monomer Function Mode
- Data deconstruction
- Import Export Export default
Vue common instruction
- - v-text innerText
- HTML-innerHtml v
- v-for
- v-IF appendChild
- v-Show Run the display
- the bind-binding properties v
- v-on binding events
- v-model two-way binding
- command modifier
- calculation properties
- data listen
- defined instructions
- get the DOM
component of Vue
- Register
- register global
- local register
- registration subassembly
- communication
- Sons communications
- communication child-parent
- non Sons communication
- mixed
- code reuse
- Mixins
- slots
- slot
- named slots
lifecycle
- beforeCreate
- the Created
- beforeMount
- Mounted
- beforeUpdate
- Updated
- beforeDestroy
- Destroyed
Vue route
- Register
- let url = [
{
path: "/",
name: XXX,
Meta: {},
Component: {
Template: ``
}
}
]
- = new new VueRouter the let Router ({
routes: URL
})
- = const App new new Vue ( {
EL: "#app",
Router: Router
})
- register the route
- Children: [{},]
- routing parameters
- path: "/ Course, /: Age the above mentioned id = 1?"
- "/ Course, / xxxx" the above mentioned id: xxxx
. - the this $ route.params.id
. - $ route.query.age the this
- the this. $ route stored in the routing information of all the objects
- the this object instance of $ router VueRouter.
- redirection route
- the redirect: {name: 'XX', the params: {Key: value}}
- manual route
- $ router.push the this ( "/").
- routing hook
- router.beforeEach (function (to, from, next) {
to you go
from where you are coming
next you what to do next
to, from $ route all information routed objects
})
NPM WebPACK VUE-CLI
- NPM
- NPM the init directory management -Y
- npm i [email protected] download dependencies
- npm uninstall xxxx unloading
- npm update xxx update
- webpack 4
- I WebPACK WebPACK NPM-CLI
- WebPACK --mode Development / Production
- the default file entry
- The index.js src directory
- the default file outlet
- in the dist directory main.js
- VUE -cli scaffolding tools
- npm i-cli VUE
- VUE the init WebPACK xxxx
- cd XXXXX
- dev npm RUN
- RUN npm Build
- Element-ui
- according to the document to install
today content:
vuex
- install
npm vuex I
- configuration
- import vuex
import vuex from "vuex"
- VUE use vuex
vue.use (vuex)
- examples of warehouse
new new vuex.Store ({
State: {},
getters: {},
mutations: { }
})
- new new Vue ({
EL: "#app",
Store,
})
- get data warehouses
the this $ store.state.xxx.
the this $ store.getters.xxx.
- changes in the data warehouse
- the component event to commit changes to the repository
this $ store.commit ( "event name. ", data)
- mutations in the warehouse
mutations: {
" event name ": function (state, data) {
modify data in the state
}
}
- Note computed attribute
data warehouse are placed recommendation calculation attribute
axios
- tool to achieve ajax technology
- configuration
- Download
NPM Axios I
- import
import from Axios "Axios"
- Incorporation of the prototype chain vue
Vue.prototype $ = Axios Axios.
- sending a request
this $. .. axios.request ({url, method }) then (function () {}) catch (function () {})
front and rear ends of the turns
- the rear end of a Interface design
- the front end by sending a request to get data axios
- cross-domain problem
RESTful specification
REST style
- can be seen in the page resource are the resource
- the URI Uniform Resource Identifier
URL Uniform Resource Locator
- Uniform Resource Interface
resource operation performs different operations depending on the HTTP request method
semantic follow the HTTP request method
- front and rear ends of the transmission resource is a statement
- show the status of the resource
-side interactions before and after all follow the REST architecture style implemented RESTful call
- - the core idea
- resource-oriented programming to the url try not to use the noun verb
- Depending on the resources of different operation mode HTTP request
- reflected in the url
- reflected version
https://v2.bootcss.com /
https://bootcss.com/v2
- reflect whether the API
https://v2.bootcss.com/api
- a filter condition
https://v2.bootcss.com/course?page=1
- as far as possible HTTPS with
- in the return value
- carrying a state code
- return value
- get or Back view of all single data
- post returns this new data
- put / patch returns this data update
- delete empty return value
- a wrong message
- carries a hyperlink
FBV and CBV difference
def dispatch (self, request, * args , ** kwargs):
# do distribution
IF request.method.lower () in self.http_method_names:
Handler = getattr (Self, request.method.lower (), self.http_method_not_allowed)
the else:
Handler = self.http_method_not_allowed
return Handler (request, * args, ** kwargs )
the difference between the APIView and View
- APIView inherited View
- APIView rewrote as_view and dispatch method
- dispatch was repackaged in the Request
- Request = Request ()
- old the request becomes _REQUEST
- GET request data
- request.query_params
- POST request data
- request.data
Installation rest_framework
- the install djangorestframework PIP
- Register rest_framework
serialization
- the Python - JSON
- with the first version of the sequence of values and to achieve JsonResponse
- Second Edition implemented with serialize Django serialization
- shortcomings can not be serialized foreign key relationships
- the third edition with DRF achieve serialization
- serialization is the first step in the statement
- the second step with our serializer serialize QuerySet
- the model objects into the serializer matching fields
match field of the matching sequence is not dropped on the
- sequence of good data in the ser_obj.data
- foreign key relationships of the sequence is the sequence of nested objects
noted that many = True