使用Vue+JFinal框架搭建先后端分离系统

先后端分离做为Web开发的一种方式,如今应用愈来愈普遍。前端通常比较流行Vue.js框架,后端框架比较多,网上有不少Vue+SpringMVC先后端分离的demo,可是Vue+JFinal框架貌似没有搜到,本文基于Vue.js和JFinal框架,给出了搭建了一个先后端分离项目的简单例子。前端

第一步:maven搭建后端JFinal部分vue

一、用maven新建web项目,项目名vue-jfinaljava

二、添加JFinal框架和jetty容器等依赖webpack

<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>

三、修改web.xmlgit

<!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>

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

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\"}"); } }

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

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); } }

六、运行demoConfig.java文件,run as Java Applicaiton,以下图,则后端搭建完毕vue-cli

在Eclipse Version: Oxygen.1 Release (4.7.1)中项目目录以下:npm

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

一、安装vue-cli

npm install --global vue-cli

二、建立一个基于webpack模板的项目

vue init webpack vue-jfinal

接下来会有一些yes/no的选项,按下图设置

三、进入项目目录,安装vue-resource插件

cd vue-jfinal
npm install vue-resource

四、使用webstorm打开vue-jfinal,项目目录以下图,并设置Run/Debug Configuration

四、在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/>' })

五、修改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>

第三步:测试先后端分离

一、在webstorm中点击run按钮,浏览器中输入http://localhost:8080访问,出现下面界面则前端搭建成功

二、点击 得到后端数据按钮,出现下图则表示得到后端数据成功

 

第四步:将jfinal项目和vue项目放在同一个项目目录下,目录截图

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

总结:

先后端分离的开发模式如今已经很是广泛了,优势也很明了,就是将先后端开发人员的工做分离开,这样先后端开发人员就能专一于本身的工做,提升开发效率。

若是你们在实际操做中有什么问题,欢迎你们留言评论,我会第一时间回复你们。

相关文章
相关标签/搜索