繼整理完上篇文章《初遇Vue》之后 整理一下微信公眾號(hào)的那些事，客戶項(xiàng)目是用java寫(xiě)的，應(yīng)用了spring cloud微服務(wù)框架，所以折騰的這個(gè)微信公眾號(hào)基本不用我寫(xiě)java程序，相關(guān)接口已經(jīng)非常成熟了。在這里就講講部署測(cè)試的時(shí)候遇到的一些問(wèn)題吧！

java part

自從被哥哥們拽著搞業(yè)務(wù)之后，自身的精力全被分散了，導(dǎo)致長(zhǎng)時(shí)間不寫(xiě)java代碼手生，犯了好多的低級(jí)錯(cuò)誤。

錯(cuò)誤示范
下段代碼中若wxUser為空的時(shí)候直接賦值為對(duì)象項(xiàng)目會(huì) 報(bào)錯(cuò)
這是個(gè)教訓(xùn) 得謹(jǐn)記

WXUser wxUser = this.wxUserDao.findByOpenId(openId);
        if (wxUser == null) {
            // 請(qǐng)求app 第三方登錄接口返回apptoken 并存上 session也要存
     WXUserValue wxUserValue = iwxUserService.loginThird(param);
            if (StringUtils.isNotBlank(wxUserValue.getAppToken())) {
                wxUser = new WXUser();
                ...
                this.wxUserDao.save(wxUser);
               wxUser = newUser;
           } else {
              ...
                }
            }
        }
       wxSessionValue.setAppToken(wxUser.getAppToken());

vue part

1. 關(guān)于代理
   因?yàn)槭乔昂蠖朔蛛x的項(xiàng)目，所以在項(xiàng)目部署的時(shí)候前端程序和后臺(tái)程序不在同一個(gè)端口，這時(shí)需要Nginx幫幫忙。
   前端config/index.js的文件中代理請(qǐng)求接口設(shè)置如下：

proxyTable: {
      '/search': {
        target: 'http://localhost:9380',// 這是本地java項(xiàng)目端口
        changeOrigin: true,
        pathRewrite: {
          '^/search': '/search'
        }
      }
}

2. 關(guān)于Vue官方提供的axios配置

axios.create中相關(guān)參數(shù)的配置有許多 具體可查看官方提供文檔，這里只做項(xiàng)目需求的一些公共配置，而具體的接口調(diào)用要根據(jù)提供接口的性質(zhì)來(lái)判斷是否為POST請(qǐng)求、GET請(qǐng)求等其他

// 這是統(tǒng)一方法
import axios from 'axios'
import router from '../main'

const request = axios.create({
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  baseURL: 'http://localhost:8080'// 這是vue本地端口 Vue端口調(diào)整可在config/index.js中設(shè)置
export default request

// 這是具體接口的個(gè)性化調(diào)整
import request from '../utils/request'

export function activityDetail (postData) {
  return request({
    url: '/wx/getActivityById',
    method: 'post',
    data: JSON.stringify(postData)
  })
}

這樣在對(duì)應(yīng)的.vue文件中直接引用

import { activityDetail } from '../api/share'

就可以實(shí)現(xiàn)axios的應(yīng)用 跟傳統(tǒng)的ajax用法沒(méi)有區(qū)別了

微信公眾號(hào) part

用Vue寫(xiě)微信公眾號(hào) 唯一需要注意的就是微信公眾號(hào)授權(quán)問(wèn)題，尤其是公眾號(hào)菜單如何跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，由于vue編譯出來(lái)的是類似于靜態(tài)頁(yè)面，傳統(tǒng)的ModelAndView方法根本不能實(shí)現(xiàn)跳轉(zhuǎn)（ps:至少我是沒(méi)有實(shí)現(xiàn)跳轉(zhuǎn)），最后在java程序里寫(xiě)了

response.sendRedirect(RestConstants.HOST_SERVICE + "dist/index.html#/error");

但是被吐槽跳轉(zhuǎn)過(guò)重，感覺(jué)已經(jīng)盡力，有什么更好的方法么，求助