使用Vue+JFinal框架搭建前后端分離系統

前后端分離作為Web開發的一種方式，現在應用越來越廣泛。前端一般比較流行Vue.js框架，后端框架比較多，網上有很多Vue+SpringMVC前后端分離的demo，但是Vue+JFinal框架貌似沒有搜到，本文基於Vue.js和JFinal框架，給出了搭建了一個前后端分離項目的簡單例子。

第一步：maven搭建后端JFinal部分

1、用maven新建web項目，項目名vue-jfinal

2、添加JFinal框架和jetty容器等依賴

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.jfinal</groupId>
            <artifactId>jfinal</artifactId>
            <version>3.3</version>
        </dependency>
        <dependency>
            <groupId>com.jfinal</groupId>
            <artifactId>jetty-server</artifactId>
            <version>8.1.8</version>
            <scope>provided</scope>
        </dependency>

3、修改web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>Archetype Created Web Application</display-name>
    <filter>
        <filter-name>jfinal</filter-name>
        <filter-class>com.jfinal.core.JFinalFilter</filter-class>
        <init-param>
            <param-name>configClass</param-name>
            <param-value>common.demoConfig</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>jfinal</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

4、在src/main/java中新建controller的Package添加demoController.java

package controller;

import com.jfinal.core.Controller;

public class demoController extends Controller {
    public void index() {
        //跨域請求設置
        getResponse().addHeader("Access-Control-Allow-Origin", "*");
        renderJson("{\"age\":25,\"name\":\"huiliuyi\"}");
    }
}

5、在src/main/java中新建common的Package添加demoConfig.java

package common;

import com.jfinal.config.Constants;
import com.jfinal.config.Handlers;
import com.jfinal.config.Interceptors;
import com.jfinal.config.JFinalConfig;
import com.jfinal.config.Plugins;
import com.jfinal.config.Routes;
import com.jfinal.core.JFinal;
import com.jfinal.template.Engine;

import controller.demoController;

public class demoConfig extends JFinalConfig {

    @Override
    public void configConstant(Constants arg0) {
        arg0.setDevMode(true);
    }

    @Override
    public void configEngine(Engine arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void configHandler(Handlers arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void configInterceptor(Interceptors arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void configPlugin(Plugins arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void configRoute(Routes arg0) {
        arg0.add("/demo", demoController.class);
    }

    public static void main(String[] args) {
        JFinal.start("src/main/webapp", 8081, "/", 5);
    }
}

6、運行demoConfig.java文件，run as Java Applicaiton，如下圖，則后端搭建完畢

在Eclipse Version: Oxygen.1 Release (4.7.1)中項目目錄如下：

第二步：使用vue-cli搭建vue.js前端部分

1、安裝vue-cli

npm install --global vue-cli

2、創建一個基於webpack模板的項目

vue init webpack vue-jfinal

接下來會有一些yes/no的選項，按下圖設置

3、進入項目目錄，安裝vue-resource插件

cd vue-jfinal
npm install vue-resource

4、使用webstorm打開vue-jfinal，項目目錄如下圖，並設置Run/Debug Configuration

4、在main.js中添加vue-resource的引用

原文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

添加后：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5、修改vue-jfinal項目中App.vue文件

原文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修改后：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>服務端數據為：{{serverData}}</h1>
    <button v-on:click="getdata()">獲得服務器端數據</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      serverData:"頁面數據"
    }
  },
  methods:{
    getdata(){
      this.$http.get('http://localhost:8081/demo').then(function(response){
        this.serverData=response.data
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第三步：測試前后端分離

1、在webstorm中點擊run按鈕，瀏覽器中輸入http://localhost:8080訪問，出現下面界面則前端搭建成功

2、點擊 獲得后端數據按鈕，出現下圖則表示獲得后端數據成功

 

第四步：將jfinal項目和vue項目放在同一個項目目錄下，目錄截圖

git連接：https://github.com/Feynman61/vue-jfinal.git

總結：

前后端分離的開發模式現在已經非常普遍了，優點也很明了，就是將前后端開發人員的工作分離開，這樣前后端開發人員就能專注於自己的工作，提高開發效率。

如果大家在實際操作中有什么問題，歡迎大家留言評論，我會第一時間回復大家。