使用Vue+JFinal框架搭建前後端分離系統
阿新 • • 發佈：2018-04-23
response oid 請求 提高 eclipse start 前後端 bsp size
前後端分離作為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
總結：
前後端分離的開發模式現在已經非常普遍了，優點也很明了，就是將前後端開發人員的工作分離開，這樣前後端開發人員就能專註於自己的工作，提高開發效率。
如果大家在實際操作中有什麽問題，歡迎大家留言評論，我會第一時間回復大家。
使用Vue+JFinal框架搭建前後端分離系統