happymmail后台管理的总结

跨域代理：受域名的影响获取数据时需要写代理来解决跨域问题

使用的原因：因为发送请求浏览器需要跨域才能解决不能跨域的问题 所以要通过代理来跨域

    
    
    
    module.exports = {
        lintOnSave:false,
	devServer:{
        proxy: {
            '/api':{
               target:'http://adminv2.happymmall.com/manage',//设置你调用的接口域名和端口
                changeOrigin:true,//這裡true表示实现跨域
                pathRewrite:{
                  '/api':''
             }
            }
   }

    
	
	}
}

还有发送图片和富文本

发送图片：

<el-upload
                class="upload-demo"
                action="/api/product/upload.do"
                name="upload_file"
                :on-success="handleSucces"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>

action来设置你要上传的地址
：on-success来触发成功的回调函数

//上传成功的钩子
        handleSucces(response, file, fileList){
            this.form.fileList = response.data.uri
            console.log(response.data.uri)
        },
       handleImageAdded(file, Editor, cursorLocation, resetUploader) {
            console.log('富文本1'+ file)
            console.log('富文本2'+ Editor)
            console.log('富文本3'+ cursorLocation)
            console.log('富文本4'+ resetUploader)
        },
    //  内容改变事件
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
        console.log(this.content);
      },

富文本编辑器：

  <quill-editor
 
    style="width:800px"
    :content="form.detail"
    :options="editorOption"
    @change="onEditorChange($event)"
  />  

element的引入：
使用组件可以更简单的开发
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

请求的封装和api的封装

使用原因： 通过封装请求 和api来使代码更加的简洁 利于开发 方便后期维护
请求的封装

import axios from "axios"


const instance= axios.create({
    // baseURL:"http://adminv2.happymmall.com/manage"
   
})

instance.interceptors.request.use(
   
    (config)=>{
       
       
        return config

    },
    (err)=>{
        return Promise.reject(err)

    }
)

instance.interceptors.response.use(
    (res)=>{
        return res
    },
    (err)=>{
        return Promise.reject(err)
    }
)


export default instance

api的封装

import http from "./request.js"


export const loginInfo=(obj)=>http({
    url:"api/user/login.do",
    method:"post",
    params:obj
})

路由懒加载

使用原因： 因为在打包上架的时候 单页面应用文件会变的非常大 再打开首页的时候会用很长的时间 不利于用户使用
我们通过路由懒加载的方法， 实现组件按需加载

// 方式一: 结合Vue的异步组件和Webpack的代码分析
const User = resolve => { require.ensure(['@/views/User.vue'], () => { resolve(require('@/views/User.vue')) }) };

// 方式二: AMD写法
const User = resolve => require(['@/views/User.vue'], resolve);

// 方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import(/* webpackChunkName: "user" */ '../views/User.vue')

路由守卫

使用原因： 我们不能让用户在没有登录的情况下访问到用户的数据或者跳转商品页面等需要用户信息来渲染的页面 来导致用户信息泄露。

router.beforeEach((to, from, next) => {
  // 访问的路径在白名单
  document.title=`${to.meta.title}`

  const role=localStorage.getItem("admin")

  const val=eval("("+role+")")
  console.log(val);
  if(val !== null){
    const timeEnd=Date.now()-val.time
      if(timeEnd>val.exprie){
        localStorage.removeItem("admin")
        next("/")
        return null
      }
  }
  if( !val && to.path!=="/"){
      next("/")
  }

  next()
})