如何在jsp頁面里使用vue

只針對需要的

以下各類同學(xué)可以直接跳過

• 不推薦jsp和vue加一起寫的
• 說直接用jq寫的
• 。。。。。的
• 吐槽的
• 各種解決方案的

總結(jié)以上說的都是對的，但是已經(jīng)寫完了頁面，所以 emmmm。。。。。

申明樓主只是個前端自己寫的大部分也都是前后的分離的，不懂java不懂jsp，而且頁面也是用vue寫完了才知道要加入原有的jsp頁面，所以記錄一下全當(dāng)教訓(xùn)了。

本文只是針對維護(hù)老項目,需要修改或者重新寫新的jsp頁面的同學(xué)。

開始

1、 jsp 和html（vue）頁面有申明區(qū)別

• 我覺得本質(zhì)上沒什么區(qū)別，只是jsp是后端渲染 ，而我們使用vue大都是前端渲染
  2、 解決方案
  • 首先我們的vue頁面寫完了,（第一次用工程打包，第二次不用路由，第三次直接寫html引入vue），嗯成品就是這樣的一個html頁面 加vue的源代碼加css等等和我們原有的jq頁面一樣。
  • 接著我們把html頁面的htmljava目錄服務(wù)器下，訪問你需要的路徑時進(jìn)行返回，不過這時候你大概會發(fā)現(xiàn)訪問不了，頁面不存在500錯誤等等一些情況，嗯！你都可以不用管接著，（主要是因為java時后臺渲染為了避免用戶做出什么傷天害理的事情，所以對頁面訪問進(jìn)行了攔截，你可以和你的java小伙伴商量著把攔截拿掉那么理論上是可以訪問的） 至于老項目，你還是接著看吧
  • 返回該目錄 把你的html后后綴改成jsp，然后繼續(xù)訪問，你會發(fā)現(xiàn)可能還是不能訪問。沒事接著找java后臺的小伙伴問下頁面是要插入在哪里，替換哪個jsp頁面或者弄個新的，你只需要在頭部加入和下邊圖片差不多的玩意
    
  • 然后就可以愉快的訪問啦，雖然體積大點，訪問可能會慢那么一點，
  • 但是vue正常渲染，你用ajax 來請求java后臺的數(shù)據(jù)也能正常獲取，數(shù)據(jù)也能動態(tài)渲染
  • 只是需要注意一點 假如你會ES6 ES7 千萬不要用、千萬不要用、 千萬不要用
  • 原因就是java應(yīng)該是不支持的，我記得我寫了一個ES6的模板字符串訪問頁面的時候服務(wù)器直接返回500了
  • 也不用寫jsp 基本都按照正常寫頁面寫即可
  • 同時也能使用${} 來寫一些jsp變量 比如服務(wù)器域名那些${ctp}
  • 如果你需要從其他jsp頁面上獲取某些數(shù)據(jù),比如url后面跟的參數(shù)，那么需要使用原生js獲取傳過來的參數(shù)
  • 然后把值賦值給vue之后才進(jìn)行操作即可 （上面各種獲取不到url的參數(shù)的話只需原生js即可）
  • 所以暫時先這樣了，由于沒做完，后續(xù)再補充