nginx+vue.js實現前后端分離的示例代碼

 //html結構
 <div id="app">
 {{ message }}
 </div>

 //js模塊
 var app = new Vue({
 //會檢索綁定的id 如果是class 則是.class即可綁定
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
 })

<div class="static"
 v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

 data: {
 isActive: true,
 hasError: false
 }

渲染

 //

 //if 語句
 <h1 v-if="ok">Yes</h1>

 //for 循環語句
 <ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
 </ul>

 server {
 listen 4000;
 server_name www.test.com;
 charset utf-8;
 index /static/index.html;//配置首頁

 //這邊可使用正則表達式,攔截動態數據的請求,從而解決跨域問題
 location = /sellingJson.html {
 proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
 }

 #配置Nginx動靜分離，定義的靜態頁面直接從static讀取。
 location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
 { 
 root /static/;
 #expires定義用戶瀏覽器緩存的時間為7天，如果靜態頁面不常更新，可以設置更長，這樣可以 節省帶寬和緩解服務器的壓力
 expires 7d; 
 } 
 }

 @RequestMapping("/vueHelpSellingcar.html")
 public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) {
 //若干操作后,返回json數據
 JSONObject resultJson = new JSONObject();

 resultJson.put("carbrandList", carbrandList);
 resultJson.put("provinceList", provinceList);

 //進行序列化,返回值前端
 try {
 byte[] json =resultJson.toString().getBytes("utf-8");
 response.setHeader("Content-type", "text/html;charset=UTF-8");
 response.getOutputStream().write(json);
 } catch (Exception e) {
 e.printStackTrace();
 }

 }

//html模塊
 <div v-if="carbrandList.length" class="char_contain">
 <p v-for="brand in carbrandList" id=" {{brand.brand_id}}">{{brand.brand_name}}</p>
 </div>

//js模塊 頁面加載后,自動去獲取動態資源
 let v={};
 $(function() {
 axios.get('http://test.csx365.com:4000/sellingJson.html')
 .then(function(data){
 //定義一個vue對象,方便模板渲染
 v =Object.assign(v, new Vue({
 el : '.char_contain', //綁定事件名
 data : {
 carbrandList : data.data.carbrandList, //數據流
 }
 })); 
 })
 .catch(function(err){
 console.log(err);
 });
 });