2020-02-10

庚子年 戊寅月 癸末日

描述

复习spring+mybatis

相关视频https://www.bilibili.com/video/av71110355?p=23

微信登录 vue搭建

mybatis

··· ···

微信登录

vue项目搭建

• cmd 窗口 执行 -- vue ui
• 搭建项目

npm install vue-cookies --save   // cookie 下载
npm install --save vue-wechat-title  //自动修改标题组件

CDN引入外部组件

​ 前言：通过上次项目的搭建，知道了vue会把所有组件打包成一个总是js文件，打包完毕有8M，我使用的是内网穿透，带宽1M，加载缓慢，引入外部CDN来减少打包的大小。

1.创建vue.config.js

坑：网上很多都是vue的配置修改，vue3以后，配置文件要自己手动创建

module.exports = {
    configureWebpack: {
        externals:{
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'element-ui': 'ELEMENT',
            'mint-ui': 'MINT',
            'axios':'axios',
            'weui':'weui',
        }
    }
}

2.在public下的index.html中添加引入

<!-- cdn 引入样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.12.0/theme-chalk/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mint-ui/2.2.13/style.css">
<link href="https://cdn.bootcss.com/weui/2.1.3/style/weui.min.css" rel="stylesheet">
<!-- cnd 引入组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.12.0/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mint-ui/2.2.13/index.js"></script>

3.删除package.json中的引入

"dependencies": {
~~"core-js": "^3.6.4", ~~
"vue-cookies": "^1.6.1",
"vue-wechat-title": "^2.0.5",
"vuex": "^3.1.2"
}

前后分离

1.请求工具类

import axios from 'axios'
axios.defaults.withCredentials = true // 跨域
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www=form-urlencoded'

export default {
  // get请求
  requestGet (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // get请求不带参数
  requestQuickGet (url) {
    return new Promise((resolve, reject) => {
      axios.get(url).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // post请求
  requestPost (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // post请求
  requestPostForm (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, params, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        resolve(res.data)// 注意res是axios封装的对象，res.data才是服务端返回的信息
      }).catch(error => {
        reject(error)
      })
    })
  },
  // put请求
  requestPut (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.put(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // delete请求
  requestDelete (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

2.跨域请求服务器代理设置

完善vue.config.js就行了

module.exports = {
    devServer: {
        disableHostCheck: true,
        proxy: {
            //后台代理
            '/jw/md': {
                target: 'http://wx.md.swxy.online',
                pathRewrite: {
                    '^/jw': 'jw'
                }
            },
            // 微信科技代理
            '/sns': {
                target: 'https://api.weixin.qq.com',
                pathRewrite: {
                    '^/sns': 'sns'
                }
            },
            // 强智科技代理
            '/znlykjdxswxy': {
                target: 'http://zswxyjw.minghuaetc.com',
                pathRewrite: {
                    '^/znlykjdxswxy': 'znlykjdxswxy'
                }
            }
        }
    },
    configureWebpack: {
        externals:{
             'vue': 'Vue',
             'vue-router': 'VueRouter',
             'element-ui': 'ELEMENT',
            // 'mint-ui': 'MINT',
             'axios':'axios',
            // 'weui':'weui',
        }
    }
}

路由管理

base下面的router的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import MENU from '@/module/menu/router'

Vue.use(VueRouter);

let routes = [];
let concat = (router) => {
  routes = routes.concat(router)
};
// 合并路由规则
concat(MENU);

const router = new VueRouter({
  routes
});

export default router

menu模块路由

import tabbar from '@/module/menu/page/tabbar.vue'
import left from '@/module/menu/page/left.vue'
import center from '@/module/menu/page/center.vue'
import right from '@/module/menu/page/right.vue'

export default [
    {
        path : '/',
        component : tabbar,
        name:'ATD计算机协会',
        hidden: true,
        children:[
            {path :'/wx/jw/menu/left', component : left, name : 'atd工作室',hidden: false},
            {path :'/wx/jw/menu/center', component : center, name : '涉外教务',hidden: false},
            {path :'/wx/jw/menu/right', component : right, name : 'me',hidden: false}
        ]
    }
]

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './base/router'

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
}).$mount('#app')