Shangpinhui knowledge points of large e-commerce projects

Secondary packaging axios

New folder api, Perform secondary encapsulation under this file 、 Unified interface management and other operations .

Unified interface management

Cross-domain problem

What is cross-domain ？

When the browser requests the resources of another domain name from the webpage of one domain name , domain name 、 port 、 The agreement is different , It's all cross domain

To solve the cross domain

1.JSONP

2.CROS

3. agent

Use webpack Agent provided （ In document proxy）
vue.config.js or webpack.config.js Middle configuration

module.exports = {
    
  //...
  devServer: {
    
    proxy: {
    
      // Carried by the current platform sending request /api, Request forwarding 
      '/api': 'http://localhost:9090',
    },
  },
};

Be careful ： There should be before the back-end interface /api Otherwise, report 404
Add to blog If an invalid provider is found on the project, it will still report 404, It turned out blog The project is through webpack The initialization of the ( The launch project is npm run dev),config Under the folder index.js In file proxytable Empty label for , Cross domain configuration is available . Instead of creating vue.config.js File . And the interface is /login instead of /api/login.

VUEX

Data warehouse store, See another blog
VUEX-----store

Function anti shake and throttle

Shake proof ： High frequency triggered events , Within the specified unit time , Only respond to the last , If triggered at the specified time , Then recalculate the time ( The events triggered later execute , Replaces the previous event )

// Submit form to add anti shake 
SubmitFrom:_.debounce(function(){
    
  this.$refs.ruleForm.validate((valid) => {
    
    if (valid) {
    
      var _this=this
      console.log(this.$store.getters.getUser.user_id),
        //  Request from the back end , Submit data 
        newBlog(this.editForm,{
    "Authorization": localStorage.getItem("token")})
        .then(function (response){
    
          if (response.data.data === true)
            _this.tips()
          _this.$router.push({
    
            path:'/blogs'
          })
        })
    } else {
    
      console.log('error submit!!');
      return false;
    }
  });
  console.log('submit!');
},1000),

throttle ： High frequency triggered events , Within the specified unit time , Only respond to the first time ( Before the execution of the previous trigger , Ignore subsequent events )
adopt js library lodash Provide encapsulated functions .
_.debounce(func, [wait=0], [options=]) Shake proof
_.throttle(func, [wait=0], [options=]) throttle

Optimize

Event delegation ： Delegate the click event of the child element to the parent component .

<el-timeline>
  <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs" :key="blog">
    <el-card>
      <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
        <h4>{
    {
    blog.title}}</h4>
      </router-link>
      <p>{
    {
    blog.description}}</p>
    </el-card>
  </el-timeline-item>
</el-timeline>

v-for How many times does the loop have to be created routerlink Component instance of , Memory consumption may cause a stuck phenomenon . If programmed navigation is used , Every a Tags are bound to click event callback , The callback will also be executed repeatedly .
The event delegate is only executed once .
After event delegation ：

Now click on the whole piece to jump , How to distinguish between clicked blogs .---------------- Use custom labels （ Must prefix with data-, And the hump will be automatically converted to lowercase , Be careful when deconstructing ）

<div class="block"  @click="toBlog">
 <el-timeline>
   <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs" :key="blog">
     <el-card>
       <a>
         <h4 :data-blogId="blog.id">{
    {
    blog.title}}</h4>
       </a>
       <p>{
    {
    blog.description}}</p>
     </el-card>
   </el-timeline-item>
 </el-timeline>
</div>

toBlog(event){
    
 let element=event.target;
  //dataset Get custom tags , Deconstruct the custom tag value 
  let {
    blogid}=element.dataset;
  console.log(element.dataset)
  this.$router.push({
    
    name:'BlogDetail',
    params:{
    
      blogId:blogid
    }
  })
}